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

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

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

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

戳消防安全知识竞答活动小程序: 优质的消防安全知识竞答活动小程序，基于云开发的答题活动小程序，内含源码，版本计划持续迭代中......，获取源码，版本持续迭代中...

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

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

答题事件

这里主要用到了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();    })  }

小结

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