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

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

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


单选题答题处理



对于单选题来讲,每个选项之间是互斥的,也就是说用户只能从 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

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

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


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

相关文章
|
1月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
48 1
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
76 6
|
4月前
|
小程序
【微信小程序-原生开发】实用教程12 - 注册页(含获取用户微信昵称,原生form的表单提交,t-result 的使用)
【微信小程序-原生开发】实用教程12 - 注册页(含获取用户微信昵称,原生form的表单提交,t-result 的使用)
39 0
|
4月前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
127 0
|
4月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
80 0
|
30天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
465 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
1月前
|
小程序 前端开发 数据可视化
微信商城小程序WeiMall
微信商城小程序WeiMall
31 0
|
2月前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
3月前
|
移动开发 小程序 前端开发
|
3月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
下一篇
无影云桌面