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

简介: 嗨!大家好,我是小蚂蚁。今天我们来分享一下如何实现答题功能,包含单选题和多选题的答题,以及如何记录玩家的答题数据。单选题答题处理对于单选题来讲,每个选项之间是互斥的,也就是说用户只能从 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

一个很精致的消除游戏。

小程序

精致点点连线

忙碌生活中的片刻放松。

小程序

圆点守护者

为守护家园而战。

小程序

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


相关文章
ly~
|
4天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
31 6
|
3天前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
2月前
|
移动开发 小程序 前端开发
|
2月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
2月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
2月前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
|
2月前
|
小程序 前端开发 JavaScript
微信小程序实现微信支付(代码和注释很详细)
微信小程序实现微信支付(代码和注释很详细)
|
3月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
这是一篇关于微信小程序开发的文章摘要,作者介绍了如何创建一个网上花店小程序,旨在提供便捷的购花体验。小程序包含鲜花分类功能,允许用户按品种、颜色和用途筛选,确保快速找到合适的鲜花。它还提供了配送服务,保证鲜花的新鲜度。文章展示了`cash.wxml`、`cash.wxss`和`cash.js`的部分代码,用于实现分类和商品展示,以及`qin.wxml`、`qin.wxss`和`qin.js`,涉及商品详情和购买付款流程。代码示例展示了商品列表渲染和交互逻辑,包括页面跳转、数据传递和点击事件处理。文章最后提到了购买付款界面,强调了安全和便捷的支付体验。
88 0
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
|
3月前
|
小程序 开发者
【微信小程序】 微信小程序报错不在以下request合法域名列表中
【微信小程序】 微信小程序报错不在以下request合法域名列表中
503 0
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的微信智能招聘小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信智能招聘小程序的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章

下一篇
无影云桌面