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

简介: 嗨!大家好,我是小蚂蚁。今天我们来分享一下如何实现答题功能,包含单选题和多选题的答题,以及如何记录玩家的答题数据。单选题答题处理对于单选题来讲,每个选项之间是互斥的,也就是说用户只能从 ABCD 的四个选项中选择一个,不可能同时选择多个。所以在处理单选题答题时,当用户选择了 A 然后又切换到 B 时,此时“选项B”应该是被选中状态,而“选项A”应该是未被选中状态。

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


单选题答题处理


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


我们要实现这样的效果。



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



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


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



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


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



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


多选题答题处理


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


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



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



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


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



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


记录玩家的答题数据


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


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

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


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


单选题答题记录


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


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



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


多选题答题记录


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


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


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


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

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


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

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


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



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



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


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

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


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

如何获取极简刷题小程序模版定制自己的微信答题小程序?点击下方购买链接前往小蚂蚁的店铺购买小程序模版。

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

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

小蚂蚁的游戏开发课

小蚂蚁的店铺

299购买

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

精致1010

一个很精致的消除游戏。

小程序

精致点点连线

忙碌生活中的片刻放松。

小程序

圆点守护者

为守护家园而战。

小程序

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


相关文章
|
1月前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
1月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
5月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
1196 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
5月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
370 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
7月前
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
667 3
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
191 1
|
8月前
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
472 3
|
8月前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
605 8
|
8月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
2551 12
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
2967 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机