手把手教你搭建消防安全答题小程序-实现答题功能以及提交答卷到云数据库前端javascript

手把手教你搭建答题活动小程序系列，第一阶段为界面设计篇，分别描写了如何搭建答题小程序界面。
【手把手教你搭建消防安全答题小程序-实现答题功能以及提交答卷到云数据库】第二阶段为功能交互篇。而上两篇文章分别描写了，如何用云开发实现查询题库功能，以及将获取到的题目数据动态更新到答题页面。
这一篇紧接着聊聊，如何实现完整的答题交互逻辑以及功能。
软件架构：微信原生小程序+云开发
戳源码地址，获取源码，版本持续迭代中...
废话不多说，直接上代码。分步演示，手把手教你实现完整的答题交互逻辑以及功能。
主要涉及答题、对错判定、系统自动判分、切换下一题、提交答卷、跳转到答题结果页等实现。
答题事件
这里主要用到了radio-group组件，radio-group中选中项发生改变时触发 change 事件，detail = {value:[选中的radio的value的数组]}。
在radio-group使用bindchange绑定监听事件radioChange。

文章图片

test.js定义radioChange函数。

// 选中选项事件 radioChange(e){ this.data.chooseValue[this.data.index] = e.detail.value; },

切换下一题事件
在组件中绑定一个事件处理函数，如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

文章图片

在相应的Page定义中写上相应的事件处理函数，参数是event。

nextSubmit(){// 如果没有选择 if (this.data.chooseValue[this.data.index] == undefined || this.data.chooseValue[this.data.index].length == 0) { return wx.showToast({ title: '请选择答案!', icon: 'none', duration: 2000 }) }// 判断所选择的选项是否为正确答案 this.chooseJudge(); // 判断是不是最后一题 this.lastJudge(); },

什么是事件

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。

对错判定逻辑

// 判断所选择的选项是否为正确答案 chooseJudge(){ var trueValue = https://www.it610.com/article/this.data.questionList[this.data.index]['true']; var chooseVal = this.data.chooseValue[this.data.index]; if (chooseVal.toString() != trueValue.toString()) { // 答错则记录错题 this.data.wrong++; this.data.wrongListSort.push(this.data.index); this.data.wrongList.push(this.data.questionList[this.data.index]._id); }else{ // 答对则累计总分 this.setData({ totalScore: this.data.totalScore + this.data.questionList[this.data.index]['scores'] }) } },

切换或者提交逻辑

// 判断是不是最后一题 lastJudge(){ if (this.data.index < this.data.questionList.length - 1) { // 如果不是最后一题，则切换下一题 let index = this.data.index + 1; this.setData({ index }) } else { // 如果是最后一题，则提交答卷 this.addExamRecord() } },

提交答卷到云数据库
系统自动判分、保存成绩、跳转到答题结果页。

// 提交答卷 addExamRecord(){ wx.showLoading({ title: '提交答卷中' }); let examResult = { wrongList: this.data.wrongList, wrong: this.data.wrong, wrongListSort: this.data.wrongListSort, chooseValue: this.data.chooseValue, totalScore: this.data.totalScore }; activityRecord.add({ data: { ...examResult, createDate: db.serverDate() } }).then(res => {// 跳转到答题结果页，查看成绩 wx.redirectTo({ url: '../results/results' }); wx.hideLoading(); }) }