答题交互逻辑实现

在上一篇文章中，我们已经完成了题目数据的获取和动态渲染，现在需要实现完整的答题交互流程。首先在wxml文件中，我们需要使用radio-group组件来展示选项，并绑定change事件。

<radio-group bindchange="handleAnswerChange">
  <block wx:for="{{currentQuestion.options}}" wx:key="index">
    <radio value="{{item}}">{{item}}</radio>
</radio-group>
<b>答案选择与存储</b>
在对应的js文件中，我们需要定义handleAnswerChange函数来处理用户选择。这个函数会将用户选择的答案暂时存储在页面data中：
handleAnswerChange: function(e) {
  this.setData({
    selectedAnswer: e.detail.value
  });
}
<b>下一题切换逻辑</b>
要实现下一题功能，首先需要在wxml中添加一个"下一题"按钮：
<button bindtap="nextQuestion">下一题</button>
然后在js文件中定义nextQuestion函数：
nextQuestion: function() {
  if (!this.data.selectedAnswer) {
    wx.showToast({
      title: '请选择一个答案',
      icon: 'none'
    });
    return;
  }
  
  // 判断答案对错逻辑
  const isCorrect = this.data.selectedAnswer === this.data.currentQuestion.answer;
  // 保存用户答案
  const userAnswers = this.data.userAnswers;
  userAnswers.push({
    questionId: this.data.currentQuestion._id,
    answer: this.data.selectedAnswer,
    isCorrect: isCorrect
  });
  
  // 更新当前题号
  const nextIndex = this.data.currentIndex + 1;
  if (nextIndex < this.data.questions.length) {
    this.setData({
      currentIndex: nextIndex,
      currentQuestion: this.data.questions[nextIndex],
      selectedAnswer: '',
      userAnswers: userAnswers
    });
  } else {
    // 如果是最后一题则提交答卷
    this.submitAnswers();
  }
}

答卷提交功能

实现submitAnswers函数来提交用户的全部答案到云端：

submitAnswers: function() {

const db = wx.cloud.database();

const score = this.data.userAnswers.filter(item => item.isCorrect).length;

db.collection('user_answers').add({

data: {

userId: getApp().globalData.userInfo._id,

answers: this.data.userAnswers,

score: score,

createTime: db.serverDate()

},

success: res => {

wx.redirectTo({

url: '/pages/result/result?id=' + res._id

});

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

fail: err => {

console.error(err);

wx.showToast({

title: '提交失败',

icon: 'none'

});

}

});

}

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();
  },

`

自动评分与结果跳转

在上面的submitAnswers函数中，我们已经实现了自动评分功能，通过统计正确答案数量得到分数。提交成功后，会跳转到结果页面并传递本次答题记录的ID。

完整流程总结

1. 用户选择答案后，答案被存储在页面data中

// 判断所选择的选项是否为正确答案
  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']
      })
    }
  },

2. 点击下一题时：

验证用户是否已选择答案

判断答案对错并记录

如果是最后一题则提交答卷

// 判断是不是最后一题
  lastJudge(){
    if (this.data.index < this.data.questionList.length - 1) {
      // 如果不是最后一题，则切换下一题
      let index = this.data.index + 1;
      this.setData({
        index
      })
    } else {
      // 如果是最后一题，则提交答卷
      this.addExamRecord()
    }
  },

否则更新到下一题

3. 提交答卷时：

计算得分

将全部答案和成绩保存到云端

跳转到结果页面

至此，我们已经完成了完整的答题交互逻辑实现，包括答案选择、对错判断、自动评分、答卷提交等功能。这些功能共同构成了一个完整的答题流程前端实现。下一篇文章将详细介绍如何在结果页面展示成绩和答题详情。

// 提交答卷
  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();
    })
  }