手把手教你搭建答题活动小程序系列,第一阶段为界面设计篇,分别描写了如何搭建答题小程序界面。
第二阶段为功能交互篇。而上两篇文章分别描写了,如何用云开发实现查询题库功能,以及将获取到的题目数据动态更新到答题页面。
这一篇紧接着聊聊,如何实现完整的答题交互逻辑以及功能。
软件架构:微信原生小程序+云开发
戳源码地址,获取源码,版本持续迭代中...
废话不多说,直接上代码。分步演示,手把手教你实现完整的答题交互逻辑以及功能。
主要涉及答题、对错判定、系统自动判分、切换下一题、提交答卷、跳转到答题结果页等实现。
答题事件
这里主要用到了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 < 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();
})
}
小结
至此,已经实现了完整的答题交互逻辑以及功能,也就是整个答题页面的答题环节已经具备前后端以及数据库能力。下一篇文章,将实现答题结果页从数据库中实时查看成绩。
手把手教你搭建答题活动小程序系列文章:
消防安全知识竞答活动小程序
安全知识线上答题活动小程序-答题功能解读
不破不立,分享源码,优质的消防安全知识竞答活动小程序
手把手教你搭建消防安全答题小程序-首页
手把手教你搭建消防安全答题小程序-答题页
手把手教你搭建消防安全答题小程序-答题结果页
手把手教你搭建消防安全答题小程序-实现页面间跳转功能
手把手教你搭建消防安全答题小程序-实现转发分享答题成绩功能
手把手教你搭建消防安全答题小程序-用云开发实现查询题库功能
手把手教你搭建消防安全答题小程序-将用云开发获取到的题目渲染到答题页面
一开始答题的时候会默认勾选一个选项,是因为程序设置的change只能改变勾选哪个选项的问题吗?就是不能一开始答题时四个选项都是空的,可以直接添加?
能问一下问什么报错吗,谢谢!