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

2021年11月22日 阅读数:1
这篇文章主要向大家介绍手把手教你搭建消防安全答题小程序-实现答题功能以及提交答卷到云数据库,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

手把手教你搭建答题活动小程序系列,第一阶段为界面设计篇,分别描写了如何搭建答题小程序界面。数据库


第二阶段为功能交互篇。而上两篇文章分别描写了,如何用云开发实现查询题库功能​,以及将获取到的题目数据动态更新到答题页面。小程序


这一篇紧接着聊聊,如何实现完整的答题交互逻辑以及功能后端

软件架构:微信原生小程序+云开发

版本持续迭代中...数组


废话很少说,直接上代码。分步演示,手把手教你实现完整的答题交互逻辑以及功能安全

主要涉及答题、对错断定、系统自动判分、切换下一题、提交答卷、跳转到答题结果页等实现。微信



答题事件

这里主要用到了radio-group组件,radio-group中选中项发生改变时触发 change 事件,detail = {value:[选中的radio的value的数组]}。架构


在radio-group使用bindchange绑定监听事件radioChange。ide

手把手教你搭建消防安全答题小程序-实现答题功能以及提交答卷到云数据库_事件处理


test.js定义radioChange函数。函数

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



切换下一题事件

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

手把手教你搭建消防安全答题小程序-实现答题功能以及提交答卷到云数据库_界面设计_02


在相应的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 < 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();
})
}


手把手教你搭建消防安全答题小程序-实现答题功能以及提交答卷到云数据库_界面设计_03



小结

至此,已经实现了完整的答题交互逻辑以及功能,也就是整个答题页面的答题环节已经具有先后端以及数据库能力。下一篇文章,将实现答题结果页从数据库中实时查当作绩。