评论

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

手把手教你搭建答题活动小程序系列,第二阶段为功能交互篇。而上两篇文章分别描写了,如何用云开发实现查询题库功能,以及将获取到的题目数据动态更新到答题页面。这一篇紧接着,如何实现完整的答题交互逻辑以及功能

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

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

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

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

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


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

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


答题事件

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


小结

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

最后一次编辑于  2021-11-16  
点赞 1
收藏
评论

3 个评论

登录 后发表内容