手把手教你搭建答题活动小程序系列，第一阶段为界面设计篇，分别描写了如何搭建答题小程序界面。
第二阶段为功能交互篇。而上两篇文章分别描写了，如何用云开发实现查询题库功能，以及将获取到的题目数据动态更新到答题页面。
这一篇紧接着聊聊，如何实现完整的答题交互逻辑以及功能。
软件架构：微信原生小程序+云开发
版本持续迭代中...
废话不多说，直接上代码。分步演示，手把手教你实现完整的答题交互逻辑以及功能。
主要涉及答题、对错判定、系统自动判分、切换下一题、提交答卷、跳转到答题结果页等实现。
答题事件
这里主要用到了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 =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
}
},
提交答卷到云数据库
系统自动判分、保存成绩、跳转到答题结果页。
// 提交答卷 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();
})
}
小结
至此，已经实现了完整的答题交互逻辑以及功能，也就是整个答题页面的答题环节已经具备前后端以及数据库能力。下一篇文章，将实现答题结果页从数据库中实时查看成绩。
