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

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

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

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

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

戳源码地址，获取源码，版本持续迭代中...

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

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

答题事件

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

小结

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