微信答题小程序的设计与实现详解

嗨！大家好，我是小蚂蚁。在上一节里，我们了解了如何设计答题小程序中的题库——表格，并且知道了如何从题库中随机抽取指定数量的不重复的题目编号。这一节，我们将分享一下如何利用这些题目编号，获取到指定的题目信息，然后将题目呈现出来。

在上一节中我们将随机抽取到的不重复的题目编号记录在了一个“随机选题列表”中。接下来，我们将从列表中挨个取出题目编号，然后显示出当前的题目。

为了记录当前从列表中取出的是第几项，以及当前的题目编号，我们创建两个新的全局变量。

选题列表项：记录当前显示的是第几道题。

抽取的题目编号：记录当前要抽取的题目的编号。

接着来看一下我们是如何设置这两个全局变量的。

这是场景启动后（开始答题时）要执行的一段积木逻辑，重点关注红线框出的两块积木，第一块，我们根据当前的“选题列表项”从“随机选题列表”中取出了一个题目编号，然后把它记录在了“抽取的题目编号”变量中。第二块积木向所有人发送了一个“刷新题目”的通知。这个通知将会由合适的精灵接收到并进行处理。

在游戏开始时，“选题列表项”会被设置成 1，即从列表中的第一项开始，之后当点击下一题按钮时，只需要将“选题列表项”的值增加 1 ，就可以使用它访问到列表中的下一项了。

一道要展示的题是由两部分组成的，题目和选项，先来看一下如何显示题目。

显示题目

创建一个如下的容器用于展示题目，它由一个背景框和一个基础文字组成，我们将会使用基础文字显示题目的信息。

来看一下题目容器上的积木逻辑。

逻辑很简单，在接收到“刷新题目”的通知后，根据“抽取的题目编号”变量中的值，在对应的题库表格中获取某一行第 1 列的题目信息，并把它设置到基础文字上。

还记得我们创建的题库表格吗？第 1 列是题目信息，“抽取的题目编号”变量中保存的就是当前题目的行号。

这样我们就实现了题目信息的显示，接下来再看一下如何显示选项信息。

显示选项

一道题目需要有多个选项，跟题目类似，我们也使用容器来作为选项。

一个选项容器包含 3 个部分，一个背景框，一个用于显示 ABCD 的文字，以及一个用于显示选项信息的文字。

因为需要为一道题目创建多个选项，所以这里我们使用克隆来根据需求创建指定数量的选项。除此之外，还需要两个新的变量。

全局变量当前选项：借助它为克隆体上的局部变量进行设置。

局部变量选项：记录当前的选项是 ABCD 中的哪一个。

接下来看一下选项容器上的积木逻辑。

这里有两点需要注意的地方，一个是“全局-当前选项”这个变量是从 2 开始的，因为在题库表格中选项对应的是 2～5 列，从 2 开始，循环 4 次，刚好遍历列  2，3，4，5 列。第二个是在克隆选项之前，判断了当前的选项内容是否为 0 ，如果不为 0 的话，就创建一个选项。

我们在上一节中做过这样的一个约定：如果选项中的内容是 0 ，就证明当前没有该选项，这是为了解决不同的题目包含不同数量的选项的问题，例如有的题目包含 4 个选项，有的题目包含 3 个选项，此时就可以将第 4 个选项设置为 0 ，这样第 4 个选项就不会被创建了。

接着来看一下选项克隆体启动后的积木逻辑。

看起来有点儿长，但其实并不复杂，首先根据全局变量“当前选项”的值，设置克隆体的局部变量“选项”，这里一共预留了 A～F 的 6 个选项。接着，还是根据全局变量“当前选项”的值，设置了自己的位置，因为选项是从上向下依次排列的，所以“全局-当前选项”的值越大，选项的位置也越向下。接下来根据“选项”变量的内容设置了“基础文字_2”,最后从对应的题库中获取到执行选项的信息，设置了“基础文字_1”。

这样，我们就实现了题目和选项的创建和显示，看起来像是这样的。

如何创建多选题的选项

对于多选题的选项，其实和单选题都是一样的逻辑，只不过多创建几个选项克隆体而已。

看起来就像是这样。

题目的切换

用户在答题的过程中需要能够切换题目，切换到下一题或者是上一题。这个如何实现呢？

还记得本文最开始的那个全局变量“全局-选题列表项”吗？它记录的就是当前的题目是“随机选题列表”中第几项，其实也就是当前答题过程中显示的第几道题。所以，切换题目时，我们只需要将这个“选题列表项”的变量增加 1 或者减少 1 就可以了。

看一下上一题按钮被点击的积木逻辑。

下一题被点击的积木逻辑。

这里一共有多少道题是根据“随机选题列表”的项目数决定的，如果随机从题库中抽取了 10 道题目的编号，那其实就意味着这次答题一共包含 10 道题了。

最后，再来看一下题目的展示以及切换过程。

今天的分享就到这里了，我们了解了如何将题库中的题目信息展示出来，并且知道了如何切换题目。下一节我们继续学习如何答题，怎样实现单选题的答题处理以及多选题的答题处理。

 我是会做游戏也会教你做游戏的小蚂蚁，关注公众号【小蚂蚁教你做游戏】，备注“学子做游戏”可免费领取全网最全的微信小游戏开发教程资料。获取答题项目模版工程，可添加小蚂蚁vx:xiaomayi6669，备注“答题模版”获取。