如何做一个微信答题小程序(三)

简介: 嗨!大家好,我是小蚂蚁。今天我们来分享一下如何实现答题功能,包含单选题和多选题的答题,以及如何记录玩家的答题数据。

嗨!大家好,我是小蚂蚁。今天我们来分享一下如何实现答题功能,包含单选题和多选题的答题,以及如何记录玩家的答题数据。


单选题答题处理



对于单选题来讲,每个选项之间是互斥的,也就是说用户只能从 ABCD 的四个选项中选择一个,不可能同时选择多个。所以在处理单选题答题时,当用户选择了 A 然后又切换到 B 时,此时“选项B”应该是被选中状态,而“选项A”应该是未被选中状态。


我们要实现这样的效果。


640.gif


想要实现这样的功能,需要借助之前创建的两个变量。


073b7413b0e1569b0f1a52cf20d5b760.png

cac9364382329b91a63ac231764feca8.png


一个是记录当前选项的全局变量,一个是位于选项上的局部变量


接下来,我们来看一下选项被点击的逻辑。


d6ad5fd8c255950555e3bc91d3f3d977.png


在选项被点击的逻辑中只需要关注红框框出的两个积木块,第一块将当前点击选项的局部变量“选项”设置给了全局变量“全局-当前选项”,接着向所有的选项发送了一个“刷新选项”的通知。


接着,看一下“刷新选项”的通知是如何被处理的。


bf7791eea51f7670295ed3774ca9ea83.png


所有的 4 个选项都会接收并处理这个“刷新选项”的通知,这里我们根据“全局-当前选项”的值来判断当前用户选择的是哪个选项,如果相等的话,就把当前选择的选项设置为蓝色,否则的话就设置为白色。


多选题答题处理



对于多选题来讲,可以同时选择多个选项,对于其中的一个选项来讲,我们只需要关心它是否被选中即可,无需关心其他选项的状态。


多选题答题的效果是这样的。


78f6e9395be0b219897be42f068aaabb.gif


首先,我们为选项创建一个局部变量。


5eac3a358185cb3e900fb2a3fc0de2aa.png


这个“已选中”局部变量的作用是记录当前的选项是否被选中了。


接着,来看一下多选题的按钮点击的积木逻辑。


f53cc3ae19ad4a052e3903b8da979232.png


非常的简单,如果当前未被选中的话,就将按钮设置为蓝色,然后设置自己为选中状态,如果已经选中了话,就将自己还原为白色,然后设置自己为未选中状态。


记录玩家的答题数据



这个答题小程序的答题流程是这样的:用户先进行答题,当所有题目回答完毕后,点击提交,最后显示答题结果。因为结果是在提交之后才进行比对的,所以在答题的过程中,就需要对用户的答题数据进行记录,哪一题选择了哪个选项,把所有的题目以及用户的答题数据全部记录下来,用于最终的结果比对。


如何记录用户的答题数据呢?还是用表格,这里我们创建了第三个表格——玩家答题选项表,专门用于记录玩家的答题数据。

1e821b1d75c433a749e5c304f8efbe42.png

如图,这个表格包含两列,第一列是题目编号(还记得之前讲过的题目编号吗?根据这个题目编号可以在题库中找到那个唯一的题目),第二列是玩家选项,也就是对当前题目的回答情况。如果是单选题的话,包含 1 个字符,如果是多选题的话会包含 1 个或多个字符。


接下来,我们来看一下如何实现玩家答题数据的记录。


单选题答题记录



单选题的答题记录比较简单,因为只需要记录一个字符,所以可以直接根据用户当前的选项,设置一下表格第二列的项即可。


看一下单选题点击的积木逻辑。


480803df6a6a28a8ee4b8ff94f582fd8.png


重点关注红线框出的两个积木块,第一个积木块设置玩家答题选项表的第一列,即当前回答的题目编号,注意这里我们使用的“全局-选题列表项”这个变量访问的指定的行,这个变量中记录的是当前回答的是第几题。第二个积木块是将当前选择的“选项”设置到第二列的玩家选项中。可以对照着上方的玩家答题选项表格,再看一下这两块设置的积木,理解一下。


多选题答题记录



对于多选题答题的记录就比较复杂了,因为多选题的答案可能包含多个字符,例如当前玩家选择了 ABC,觉得不对,又改成了 ACD,此时,我们就需要将表格中记录的原来的答案 ABC 修改成 ACD了。这个需要使用到一些与处理字符有关的积木块,如果你对与字符有关的积木块还不是很熟悉的话,可以借此好好的了解一下。


我们在上方讲过,多选题的每个选项有两种状态,一种是选中状态,一种是未选中状态。这两种状态下记录的逻辑是不同的。


我们先来看一下选项由未选中变为选中状态,例如我们当前选择了 AB,现在要增加一个选项 C,此时对于字符的操作是拼接处理,将原来的“AB”拼接上一个“C”。


8082009f8abb086b8209f99701161b02.png

这里注意我们在拼接前判断了“玩家答题选项表”的第二列的对应值是否为 0 ,因为表格无法在游戏中进行动态的创建,所以我们需要预先为“玩家答题选项表”填写内容,默认全部填上 0,这里做一个判断,如果当前值为 0 ,就使用一个空字符然后拼接上当前的选项。

接着再来看一下选项由选中变为未选中状态,例如当前选择了 ABCD,现在要将其中的 C 选项取消,变为 ABD,此时字符的操作是删除处理,将原来“ABCD”中的“C”删除掉,变为“ABD”。


很可惜在微信小游戏制作工具中并没有可以直接删除字符串中的某个字符的积木块,但是,我们可以使用其它的几个积木块搭配来共同实现这个功能。

efbe48028d7efc64e04a9eb300a7f937.png

如图,当前需要移除字符“C”,我们可以取出 C 之前的字符“AB”,然后再取出 C 之后的字符“D”,然后将它们拼接起来,就相当于删除了其中的“C”。


为了实现删除字符串中某个字符,我们需要借助下面的四个与字符有关的积木块。


00a7c8db62fdc50dc7188b50a23ec7d4.png


然后以下面的这种方式来实现从“abcd”删除字符“c”的功能。


cf999e474fbc72c3f1f9924b2ef21c43.png


最后,来看一下取消选项的积木处理。


9f8ac4d389d27963a8bf2faa2bae0eec.png

从字符串中移除一个字符的积木太长了,这里没有显示全,但是我们上方已经讲过了其实现原理了,就不再赘述了。

总结一下,我们了解了单选题和多选题的答题处理,并且使用了一个新的表格“玩家答题选项表”记录了玩家的答题数据。在记录玩家答题数据时,对于多选题的记录是一个难点,其中包含了很多对于字符串的操作,虽然工具没有给我们提供现成的删除字符串中的某个字符的功能,但是我们还是可以使用一些基本的操作组合来实现这个功能。


下一节,我们将继续分享答完题后如何对所有的题目进行答案比对,以及如何实现一个对所有已答题目的回顾功能。

相关文章
|
2天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
43 0
|
2天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
39 0
|
2天前
|
小程序 Java API
微信小程序和springboot实现微信支付
微信小程序和springboot实现微信支付
11 0
|
2天前
|
小程序 API
微信小程序-微信支付
微信小程序-微信支付
7 0
|
2天前
|
小程序 开发工具 Android开发
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
|
2天前
|
小程序 JavaScript 开发工具
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
|
2天前
|
移动开发 小程序 安全
使用阿里云短信+微信短链接跳转微信小程序
此内容是关于使用阿里云短信带传递参数的微信短链接跳转到微信小程序。首先,需要准备微信开发者工具和一个已认证的小程序。接着,开通云开发并配置云开发权限。然后,配置H5静态网页,包括设置云开发权限和处理不同设备的跳转方式。最后,上传云函数并修改其权限,获取微信短信链接,配置短链接参数,并开通阿里云短信服务以进行测试验证。整个过程涉及到了微信开发者工具、云开发、H5页面配置、云函数的创建和部署以及阿里云短信服务的开通和使用等步骤。
49 0
|
2天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的在线课堂微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的在线课堂微信小程序的详细设计和实现
35 3
|
2天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
60 3
|
2天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信点餐小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信点餐小程序的详细设计和实现
31 1

热门文章

最新文章