基于微信小程序的多选题题库设计与开发

收稿日期：2023-07-17

DOI：10.19850/j.cnki.2096-4706.2024.05.010

摘  要：文章介绍了基于微信小程序的多选题题库的设计与开发。通过对多选题小程序主体功能的分析，构建多选题小程序的界面及交互功能；通过设计题目数据结构、开发前端界面和构建后端逻辑，实现了一个功能完善的多选题题库应用；通过用户评估和功能测试，验证了该应用的可行性和有效性。实践证明，基于微信小程序的多选题题库使用起来方便快捷，正确性、稳定性高，满足了用户的学习需求。

关键词：小程序；多选题；前端后端

中图分类号：TP311    文献标识码：A  文章编号：2096-4706（2024）05-0045-05

Design and Development of Multiple Choice Question Bank Based on WeChat Mini Program

DAI Feng

（Jiangsu Taixing Secondary Specialized School， Taizhou  225400， China）

Abstract： This paper introduces the design and development of multiple choice question bank based on WeChat mini program. Through the analysis of the main function of the multiple choice question mini program， the interface and interactive functions of the multiple choice question mini program are constructed. Through the design of the topic data structure， the development of the front-end interface and the construction of the back-end logic， a well-functioning multiple choice question bank application is implemented. Through user evaluation and functional testing， the feasibility and effectiveness of the application are verified. Practice has proven that the multi choice question bank based on WeChat mini programs is convenient， fast， accurate， and stable to use， meeting the learning needs of users.

Keywords： mini program; multiple choice question; front-end and back-end

0  引  言

多選题作为一种常见的教学评测手段，在教育教学中得到了广泛的应用。随着移动互联网技术的迅猛发展，微信小程序作为一种轻量级、便捷的应用形式，得到越来越多的关注和应用。微信小程序可以在微信生态圈内快速传播和使用，学生随时随地可以通过微信小程序进行多选题练习。进行基于微信小程序的多选题练习，有助于提高学生的思考、分析和推理能力，激发学生对知识的深层次理解和灵活应用，提升学生分析、判断、解决问题等方面的综合能力。

1  多选题小程序主体功能分析

基于微信小程序的多选题题库应用应提供用户友好的题目浏览、答题、反馈和统计功能，帮助用户进行多选题的测试和学习，并通过个性化学习和用户登录设计进一步提升用户体验和学习效果[1]。

1.1  题目展示功能

在题目展示页面应显示题目的编号、题目的详细内容和相关选项信息。如果题目中及选项内容中包含图片，应在正确位置上显示图片，还应正确显示特殊的专业符号，如图1所示。

图1  题目显示界面

1.2  答题功能

在题目展示页面，用户可以选择题目中的多个选项作为答案。用户选择好选项后，所选选项将被记录，并在界面上显示选中的选项。用户可以取消选择已选中的选项，之后重新选择答案。本例中，点击各选项前的方框即可完成选择或取消选择。

用户选择完答案后，点击按钮提交答题。系统将用户给出的答案与正确答案进行比较，并给出相应的反馈。如果用户作答正确，系统将显示“答对了”并更新用户得分。如果用户作答错误，系统将显示“答错了”并将该题记为错题。

1.3  错题查看功能

用户可以查看个人答错的题项。在错题展示页面，显示错题的内容和用户的选择答案。用户通过查看错题，重新回顾题项内容和重新作答，如图2所示。

1.4  统计功能

统计功能用于显示用户答题的总题数和正确率。通过显示用户的得分和答错的题目数量，使用户即时了解个人答题进展，提升个人使用小程序题库的沉浸式体验感。如图1所示为采用进度条的方式实行答题进程管理，并在下方显示得分和错题数[2]。

1.5  数据存储和管理

使用云数据库或本地数据库存储题目数据和用户的答题记录，数据存储和管理包括题目添加、编辑和删除，即时更新题库的内容等。本示例中，应用腾讯云自带的云数据库上传及更新数据，并可即时调用数据[3]。

图2  错题显示界面

2  多选题小程序题库开发设计

2.1  题库数据结构设计

定义题库的数据结构，包括题目内容、选项、答案等字段。开发时，应选择适当的数据库存储方式（如云数据库或本地数据库），存储题目数据。可以使用关系型数据库（如MySQL）或非关系型数据库（如MongoDB）来存储题库数据[4]。在腾讯云数据库中，可以通过内容模型轻松搭建各种数据，如图3所示，还可以通过数据导入实施题库内容的增添、删除、更新，如图4所示。

2.2  前端界面开发与实现

题库的前端界面设计主要包括题目详情页面和结果页面的设计[5]。通过WXML代码在前端界面实现了题目的动态展示、选项选择和提交功能。WXML涵盖元素、组件、渲染以及一些基本的功能和交互，并可根据实际需求进一步扩展和优化程序的功能和样式。

1）主要组件的使用：

组件，用于创建一个可视化的容器以及组织和布局其他元素。

组件，用于显示文本内容。

组件，用于显示进度条，通过percent属性控制进度。

组件，用于实现多选功能。

组件，用于创建多个选项供用户选择。

组件，用于显示题目中的图片。

2）界面渲染的实现：

采用{{current}}、{{total}}、{{percent}}、{{subject.title}}等變量，通过数据绑定方式将题库内容渲染到对应的位置。在开发设计中，采用wx：if和wx：for（微信小程序的条件渲染和列表渲染指令）根据条件显示或循环渲染元素，这样能够逐条渲染展示选项内容。

3）功能和交互的实现：

采用bindchange="checkboxChange"方式绑定多选框组件的bindchange事件，用于处理用户选择的选项。

bindtap="submit"：绑定了提交按钮的bindtap事件，用于处理用户的答题提交操作。采用disabled=

"{{disabled}}"，通过disabled属性来控制提交按钮的禁用状态。

4）核心代码示例：

本例中，重点展示多选功能的界面实现。

//进度条设置

//多选项A项内容设置

{{subject.X1}}

wx：if="{{subject.X1image.length>0}}" mode="heightFix">

┅┅┅┅┅┅┅┅┅┅┅┅┅┅（其他代码省略）

2.3  后端逻辑开发与实现

微信小程序是采用JavaScript代码开发而成的，开发中涵盖了数据和变量、页面生命周期、数据绑定和事件处理、答题和提交、错题处理以及其他功能，实现了题目加载、答题逻辑和错题查看等基本功能，还可以根据实际需求进一步扩展和优化代码[6]。后端开发的关键技术是，通过后端API接口获取题目数据以及处理用户提交的答案，实现题目数据的获取和答案校对的逻辑，确保选择与答题的正确性和一致性[7]。

1）主要数据和变量。变量titles用于存储题库数据的数组；errorOptions、jxjcerrorOptions、jcclerrorOptions等变量用于存储用户答错的题目选项的数组。

2）题目导入与渲染。实现数据导入和渲染展示，这里采用了onLoad（页面加载时执行的生命周期函数），并使用wx.showLoading指令显示“数据加载中”提示。通过微信小程序云开发数据库获取题库数据，并将数据存储到titles数组。再通过titles数组将题目内容分配到各变量值中，实现设置页面的初始数据（包括题目、题目总数、当前题目索引等）展示。

3）答案选择。采用checkboxChange多选框选项改变时的事件处理函数实现数据绑定和事件处理，从而获取用户选择的选项，同时更新页面数据中的userSelect字段。

4）答题和提交。采用submit提交答题的事件处理函数获取正确答案和用户选择的答案，判断答案是否正确，并根据结果更新用户得分、总分和答错题目的数量[8]。同时更新页面的进度条和题目数据，判断是否是最后一题，如果是，则禁用提交按钮并显示提示。判断答案个数是否与正确答案个数相同，若相同，则进一步判断答案是否完全正确。

5）错题处理。采用errorOption点击查看错题按钮的事件处理函数，将用户答错的题目选项存储到缓存中，并根据用户是否有错题进行跳转或显示提示[9，10]。

2.4  核心代码示例

本例中，围绕后端开发与设计的关键技术，展示多选功能的相关代码。

//提交答题

submit（） {

Letarr = this.data.subject.answer.split（"，"）

let len = arr.length

let arr2 = this.data.userSelect

let len2 = arr2.length

//判断是否正确

//一、是否没有选择

//当数据为空字符串或null的时候，我们对这个数据取反

if （！this.data.userSelect） {

wx.showToast（{

title： '您还没有选择呢'，

icon： 'none'，

}）

return

}

//二、判断正确

else if （len == len2） { //1， 判断个数是否相同

let rigthNum = 0

arr2.forEach（item => {if （arr.indexOf（item） > -1） {rigthNum++}

}）

//2，计算答对的个数

//3，判断答对的个数是否等于答案的个数

if （rigthNum == len） {

wx.showToast（{

title： '答对啦'，

}）

this.setData（{

userScore： this.data.userScore + 1，

}）

this.setData（{totalScore：（this.data.userScore*100/titles.length）.toFixed（2）

}）}

else {

wx.showToast（{

icon： 'none'，

title： '您答错啦'，

duration： 1000，

}）

let subjectNow = this.data.subject

//在新的题目中，增加用户选择项

subjectNow.userSelect=this.data.userSelect        errorOptions.push（subjectNow）

this.setData（{

totalError： this.data.totalError + 1

}） }

} else {

wx.showToast（{

icon： 'none'，

title： '您答错啦'，

duration： 1000，

}）

let subjectNow = this.data.subject

//在新的题目中，增加用户选择项

subjectNow.userSelect=this.data.userSelect

errorOptions.push（subjectNow）

this.setData（{

totalError： this.data.totalError + 1

}）}

this.setData（{

percent： （（this.data.current / titles.length） * 100）.toFixed（2）

}）

// 题目重置（代码略）

//判断是否是最后一题（代码略）

}，

3  结  论

通过设计题目数据结构、开发前端界面和构建后端逻辑，成功实现了一个功能完善的多选题题库应用。开发过程中，加强了多选题题库应用的功能測试，验证了题目展示、选项选择和答案校对等功能的正确性和稳定性。在实际应用中，根据微信小程序后台数据分析应用的功能和特性，评估应用的用户体验和易用性，及时更新改进软件。

实践证明，基于微信小程序的多选题题库应用具有简单易用、个性化和实时反馈等特点，具有良好的实用性。基于微信小程序的多选题题库应用可提供题目资源、实时反馈和统计信息等功能，切实满足用户的学习需求，可使用户获得良好的学习体验，能够显著提升学生的学习效果和教师的教学质量。后续的研究将进一步拓展应用的平台和扩展应用的功能，以多方位满足不断变化的教育需求。

参考文献：

[1] 李海燕，陈善柳.基于微信小程序的教学平台建设及应用 [J].科技与创新，2022（9）：174-176.

[2] 沙浩.基于微信小程序的教辅系统的设计与实现 [D].南京：南京大学，2021.

[3] 林亮亮.基于微信小程序的成人移动学习平台设计与实现 [J].河北软件职业技术学院学报，2019，21（2）：5-9.

[4] 吕兰兰.基于语音评测技术的英语朗读评测微信小程序 [J].现代计算机，2023，29（23）：111-115.

[5] 王斌.基于微信小程序的信息技术课程教学平台的设计与应用 [D].广州：广东技术师范大学，2023.

[6] 陆禹文.基于微信小程序的移动学习平台的设计、开发及应用 [D].兰州：兰州大学，2021.

[7] 王东东，张省伟，惠亮亮.基于微信小程序的铁路职业院校背题系统的设计与应用分析 [J].内蒙古科技与经济，2023（20）：111-114.

[8] 张茵茵，牛彦敏.移动教学平台在高等教育教学中的应用——以蓝墨云班课平台为例 [J].软件导刊：教育技术，2017，16（3）：23-24.

[9] 高洪涛.从零开始学微信小程序开发 [M].北京：电子工业出版社，2017.

[10] 张文.基于SpringBoot的国有企业固定资产信息管理系统的设计与实现 [D].上海：华东师范大学，2024.

作者简介：戴峰（1978.02—），女，汉族，江苏泰兴人，讲师，本科，研究方向：电子信息及仿真。