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

简介: 嗨!大家好,我是小蚂蚁。在上一节里,我们了解了如何设计答题小程序中的题库——表格,并且知道了如何从题库中随机抽取指定数量的不重复的题目编号。这一节,我们将分享一下如何利用这些题目编号,获取到指定的题目信息,然后将题目呈现出来。在上一节中我们将随机抽取到的不重复的题目编号记录在了一个“随机选题列表”中。接下来,我们将从列表中挨个取出题目编号,然后显示出当前的题目。

嗨!大家好,我是小蚂蚁。在上一节里,我们了解了如何设计答题小程序中的题库——表格,并且知道了如何从题库中随机抽取指定数量的不重复的题目编号。这一节,我们将分享一下如何利用这些题目编号,获取到指定的题目信息,然后将题目呈现出来。


在上一节中我们将随机抽取到的不重复的题目编号记录在了一个“随机选题列表”中。接下来,我们将从列表中挨个取出题目编号,然后显示出当前的题目。



为了记录当前从列表中取出的是第几项,以及当前的题目编号,我们创建两个新的全局变量。


选题列表项:记录当前显示的是第几道题。

抽取的题目编号:记录当前要抽取的题目的编号。


接着来看一下我们是如何设置这两个全局变量的。



这是场景启动后(开始答题时)要执行的一段积木逻辑,重点关注红线框出的两块积木,第一块,我们根据当前的“选题列表项”从“随机选题列表”中取出了一个题目编号,然后把它记录在了“抽取的题目编号”变量中。第二块积木向所有人发送了一个“刷新题目”的通知。这个通知将会由合适的精灵接收到并进行处理。

在游戏开始时,“选题列表项”会被设置成 1,即从列表中的第一项开始,之后当点击 下一题按钮时,只需要将“选题列表项”的值增加 1 ,就可以使用它访问到列表中的下一项了。


一道要展示的题是由两部分组成的,题目选项,先来看一下如何显示题目。


显示题目


创建一个如下的容器用于展示题目,它由一个背景框和一个基础文字组成,我们将会使用基础文字显示题目的信息。



来看一下题目容器上的积木逻辑。



逻辑很简单,在接收到“刷新题目”的通知后,根据“抽取的题目编号”变量中的值,在对应的题库表格中获取某一行第 1 列的题目信息,并把它设置到基础文字上。


还记得我们创建的题库表格吗?第 1 列是题目信息,“抽取的题目编号”变量中保存的就是当前题目的行号



这样我们就实现了题目信息的显示,接下来再看一下如何显示选项信息。


显示选项


一道题目需要有多个选项,跟题目类似,我们也使用容器来作为选项。



一个选项容器包含 3 个部分,一个背景框,一个用于显示的文字,以及一个用于显示选项信息的文字。


因为需要为一道题目创建多个选项,所以这里我们使用克隆来根据需求创建指定数量的选项。除此之外,还需要两个新的变量。


全局变量当前选项:借助它为克隆体上的局部变量进行设置。

局部变量选项:记录当前的选项是 中的哪一个。

接下来看一下选项容器上的积木逻辑。



这里有两点需要注意的地方,一个是“全局-当前选项”这个变量是从 2 开始的,因为在题库表格中选项对应的是列,从 2 开始,循环 4次,刚好遍历列  列。第二个是在克隆选项之前,判断了当前的选项内容是否为  ,如果不为话,就创建一个选项。

我们在上一节中做过这样的一个约定:如果选项中的内容是 ,就证明当前没有该选项,这是为了解决不同的题目包含不同数量的选项的问题,例如有的题目包含 4 个选项,有的题目包含 3 个选项,此时就可以将第 4个选项设置为  ,这样第 4 个选项就不会被创建了。

接着来看一下选项克隆体启动后的积木逻辑。



看起来有点儿长,但其实并不复杂,首先根据全局变量“当前选项”的值,设置克隆体的局部变量“选项”,这里一共预留了 A~F 的 6 个选项。接着,还是根据全局变量“当前选项”的值,设置了自己的位置,因为选项是从上向下依次排列的,所以“全局-当前选项”的值越大,选项的位置也越向下。接下来根据“选项”变量的内容设置了“基础文字_2”,最后从对应的题库中获取到执行选项的信息,设置了“基础文字_1”。


这样,我们就实现了题目和选项的创建和显示,看起来像是这样的。



如何创建多选题的选项


对于多选题的选项,其实和单选题都是一样的逻辑,只不过多创建几个选项克隆体而已。



看起来就像是这样。



题目的切换


用户在答题的过程中需要能够切换题目,切换到下一题或者是上一题。这个如何实现呢?


还记得本文最开始的那个全局变量“全局-选题列表项”吗?它记录的就是当前的题目是“随机选题列表”中第几项,其实也就是当前答题过程中显示的第几道题。所以,切换题目时,我们只需要将这个“选题列表项”的变量增加 1 或者减少 1 就可以了。


看一下上一题按钮被点击的积木逻辑。



下一题被点击的积木逻辑。



这里一共有多少道题是根据“随机选题列表”的项目数决定的,如果随机从题库中抽取了 10 道题目的编号,那其实就意味着这次答题一共包含 10 道题了。


最后,再来看一下题目的展示以及切换过程。



今天的分享就到这里了,我们了解了如何将题库中的题目信息展示出来,并且知道了如何切换题目。下一节我们继续学习如何答题,怎样实现单选题的答题处理以及多选题的答题处理。

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

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

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

精致

一个很精致的消除游戏。

小程序

精致点点连线

忙碌生活中的片刻放松。

小程序

圆点守护者

为守护家园而战。

小程序

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


相关文章
|
2月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
59 1
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
86 6
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
964 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
小程序 前端开发 数据可视化
微信商城小程序WeiMall
微信商城小程序WeiMall
38 0
|
3月前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
4月前
|
移动开发 小程序 前端开发
|
4月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
4月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
4月前
|
小程序 前端开发 JavaScript
微信小程序实现微信支付(代码和注释很详细)
微信小程序实现微信支付(代码和注释很详细)
|
4月前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
下一篇
DataWorks