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

简介: 嗨!大家好,我是小蚂蚁。这一节里,我们继续分享如何在答完题后进行答案的比对,以及如何实现一个回顾功能。在上一节里我们提到过,为了记录玩家的答题数据,我们创建了一个新的表格——玩家答题选项表,里面记录的是玩家回答的题目编号,以及对应的答案。当所有的题目都回答完毕,玩家选择提交后,其实我们要做的,就是逐个的将“玩家答题选项表”中的数据与题库中的答案数据进行比对,来检查题目是答对还是答错。因为题目中包含着单选题和多选题,所以针对不同的题型,需要做不同的判断处理。

嗨!大家好,我是小蚂蚁。这一节里,我们继续分享如何在答完题后进行答案的比对,以及如何实现一个回顾功能。


在上一节里我们提到过,为了记录玩家的答题数据,我们创建了一个新的表格——玩家答题选项表,里面记录的是玩家回答的题目编号,以及对应的答案。当所有的题目都回答完毕,玩家选择提交后,其实我们要做的,就是逐个的将“玩家答题选项表”中的数据与题库中的答案数据进行比对,来检查题目是答对还是答错。


因为题目中包含着单选题和多选题,所以针对不同的题型,需要做不同的判断处理。


单选题答案对比


首先来看一下单选题的答案对比。



单选题的对比比较简单,因为单选题的答案只包含 1 个字符,我们只需要对比玩家选择的选项与题库中正确答案的选项是否相同,即可判断当前的题目回答是否正确。


注意,在回答正确后,我们将“玩家答题选项表”对应的第 3 列的数字设置为 1。这里为“玩家答题选项表”又增加了一列,这一列用来记录当前这道题的回答结果。



在第三列的内容中我们做了这样的约定,如果当前的题目答对,则设置为 1。如果答错,又分为两种,一种是错选,设置为 0,一种是多选题中的漏选,设置为 2。第三列的内容我们需要在回顾功能中用到。


多选题答案对比


多选题的答案对比相对比较复杂,因为会涉及到这样的情况,例如当前题目的答案是 ABC,但是“玩家答题选项表”中对于多选题回答是根据用户当前选择选项的顺序记录的,也就是说如果用户先选了 B,后选了 C ,最后选了 A,那么记录的用户答题数据是 BCA。很明显如果直接将两个字符串做比较的话 “ABC”是不等于“BCA”的。所以,我们无法拿整个字符串做比较。


那该如何对比呢?假设当前答案是 ABC,玩家选择的是 BCA。我们可以这样进行比对,依次从玩家的选择中取出一个字符,然后看看它是否包含在正确答案中。过程就是这样:首先取出 B,看看 B 是否包含在 ABC 中,接着取出 C,看看 C 是否包含在 ABC 中,最后取出 A,看看 A 是否包含在 ABC 中。只有玩家选择中的每一个字符都包含在正确答案中,才能说明当前的回答正确。


但是,请再看一遍上方的比对逻辑,是否存在问题呢?如果答案是 ABCD,当前选了 ABD,按照上方的比对逻辑,ABD 三个字符确实答案中都有包含,但是很明显这道题没有答对,而是漏选了。


所以,对于多选题的比对,除了判断每个字符必须包含在正确答案中之外,还需要一个条件,就是当前比对正确的次数要等于正确答案的字符数。还以上方的正确答案 ABCD,玩家选择了 ABD 为例,共进行了 3 次比对,3 次比对都正确,但是因为不符合第二个条件,就是 3 次正确比对不等于正确答案的字符数 4,所以当前题目就不能判定为正确。


理解了上方的这个比对方法,我们再来看一下多选题答案比对的积木逻辑。



分为两个步骤,首先,逐个拿用户回答中的字符去与正确答案进行比对,其次对于满足第一个条件的选项,再进行第二个条件判断,只有同时满足两个条件,才能判定为回答正确,否则要么答错,要么漏选。


最后,在完成了所有的题目判断后,可以为用户显示最终的答题结果,预览一下。



答题回顾功能的实现


要实现答题回顾功能,我们需要借助的最重要的一张表格就是“玩家答题选项表”。



再来看一下这张重要的表格,它有 3 列,第 1 列记录的是当前题目编号,第 2 列记录的是当前题目玩家的选择,第 3 列记录的是结果。答题回顾功能的作用就是呈现出每一道题目的回答情况,然后提示题目是答对还是答错,如果答错的话,提示正确答案是什么。最后,针对多选题的答错情况,还能借助表格的第 3 列给出进一步的提示,是错选还是漏选


来看一下回顾模式的具体实现,原有的答题过程无需修改,只需要在“选项”中做一些与回顾模式有关的处理即可。


首先,在创建选项时,增加如下的处理。



这里我创建了一个“全局-回顾模式”的全局变量,用于标识当前是否是回顾模式。如果是回顾模式的话,向所有的选项发送一个“答案校对”的通知。


接着来看一下选项在接收到“答案校对”的通知后,都做了些什么。



这段长长的积木逻辑做了这样的一些事情:


对于单选题,如果回答正确,就将选项设置为绿色,如果回答错误,就讲选项设置为红色,并且将正确选项设置为绿色。


对于多选题,对于选对以及漏选使用的是相同的处理方式,就是都将所有的正确选项设置为绿色,对于错选的选项,将其显示为红色。


最后,我们还增加了一个“答题结果提示”,提示用户当前题目的回答结果。



它的积木逻辑如下。



根据“玩家答题选项表”第 3 列的数据,设置是答对错选还是漏选


最后,来看一下效果。



好了,如何做一个微信答题小程序系列的教程到此就结束了。可见,微信小游戏制作工具除了能够做小游戏之外,也能够用于开发微信小程序。对于一个答题小游戏或者小程序来讲,其实实现原理并不复杂,实现起来也不算太难。如果你能把这个系列教程好好的研究明白了,那么以后所有的答题游戏或者应用对你来说就都不是问题了。原理搞明白了,吃透一个,就能一通百通了。


最后,不论你是以学习为目的,还是想要自定义改编一个自己的刷题小程序,都可以考虑一下购买这个“极简刷题”的模版。永久性的获得一个微信刷题小程序,这个应该说是相当的超值了,对照着项目工程来学习这个系列教程会事半功倍,另外,也可以改编自己的刷题小程序直接上架到微信小程序平台。

我是会做游戏也会教你做游戏的小蚂蚁,想学习做游戏的话,关注我的公众号就对啦!

另外我做了一门游戏开发课,目的是帮助想学习游戏开发的朋友尽快的入门,做出自己的游戏,节省时间和精力,少走弯路。一门课程的价钱买到的是一整套的服务,目前已有 35 名学员,多位同学已经通过学习做出了自己的游戏,如果你也想学习做游戏的话不要错过咯!可以【点击这里】了解。

这是我做的几个简单好玩小游戏,欢迎试玩。

精致1010

一个很精致的消除游戏。

小程序

精致点点连线

忙碌生活中的片刻放松。

小程序

圆点守护者

为守护家园而战!

小程序

也欢迎加个微信,交个朋友,朋友圈每日分享与做游戏有关的知识内容,可以来围观。接受付费咨询,不闲聊,望见谅。

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

热门文章

最新文章