驾校答题小程序实战全过程【连载】——3.顺序练习和模拟考试

一、目标：

这一节做顺序练习与模拟考试，都属于答题详细页面功能，如下图所示：

1.png 2.png

进度条可以根据答题进度，显示进度。
这一节主要实现了一些逻辑计算

二、实现方式：

逻辑一：记录学习题目进度

记录的核心代码，在提交保存的时候调用。当然，也可以在练习离开的时候触发，这里给了个按钮，点击保存即可保存学习记录

const AddLearning = ({ num, result, type = 1 }) => {
  let current = wx.Bmob.User.current()
  return new Promise((resolve, reject) => {
    const query = wx.Bmob.Query('learning');
    query.set('bSubjects', '1')
    query.set('bModels', '1')
    query.set('num', num)
    query.set('result', result)
    query.set('type', type)
    query.set('uid', current.objectId)
    query.save().then(res => {
      resolve(res)
    }).catch(err => {
      console.error(err)
      reject(err)
    })
  });
}

逻辑二：记录题目回答的对错

上面的变量result记录，格式请看上一节数据库格式说明，是题目的对错。这里点击一个选择就记录一次，我在页面data里面增加了一个items变量来保存。
选择答案执行以下代码，今天先实现单选，我们单选与多选，判断事件分开来做，这样便于逻辑管理

// 单选题
  handleFruitChange ({ detail = {}, target = {} }) {
    let questionInfo = this.data.questionInfo
    // 判断单选是否正确
    if (target.dataset.id) {
      console.log('ok')
      questionInfo.isOk = 1
    }

    this.setData({
      questionInfo: questionInfo,
      current: detail.value
    });

    // 单选自动跳到下一题
    this.statistical()

    // 显示第几道题
    this.setThisData(this.data.index)
    this.setData({
      index: this.data.index + 1,
      current: ''
    });
  },

逻辑三：答题相关统计

逻辑二讲了，记录对错，这里有一些统计需要拿出来计算，先做单选题，点击选择，判断是否正确， 如果正确，记录到结果对象 [{" id ":" XXX ', '0'}, {" id ":" XXX ", "1"}] ，0代表回答错误，1正确
例如错题个数、对题个数，页面提示，进度条进一步

statistical () {
    // 统计错题个数
    let questionErr = this.data.questionErr  //错题个数
    let questionOk = this.data.questionOk  //错题个数
    let questionInfo = this.data.questionInfo
    let items = this.data.items
    let arr = { "id": questionInfo.objectId, "o": 0 }

    let t = 'error', m = '回答错误'
    if (questionInfo.isOk === 1) {
      // o 0代表失败，1代表成功
      arr.o = 1
      questionOk = questionOk + 1
      t = 'success'
      m = '回答正确'
    } else {
      // 错误数+1
      questionErr = questionErr + 1

    }
    items.push(arr)

    // 提示
    $Message({
      content: m,
      type: t,
      duration: 2
    });


    //进度条
    let totalW = this.data.index / this.data.total
    totalW = (totalW * 100).toFixed(2);
    totalW = totalW < 1 ? 1 : totalW

    this.setData({
      items: items,
      questionErr: questionErr,
      questionOk: questionOk,
      totalW: totalW,
    });
  },

逻辑四：上一题下一题的实现

页面显示第几个题目，我们用数组的下面来记录，单电机下一题，我们记录回答对错，并且数组下标+1

// 翻页
  handlePageChange ({ detail }) {
    const type = detail.type;

    const current = this.data.current
    if (current == "") {
      console.log('空')
      $Toast({
        content: '请选择答案！',
        type: 'warning'
      });
      return;
    }


    this.statistical()

    if (type === 'next') {
      this.setThisData(this.data.index)
      this.setData({
        index: this.data.index + 1,
        current: ''
      });

    } else if (type === 'prev') {
      this.setData({
        index: this.data.index - 1,
        current: ''

      });
      this.setThisData(this.data.index)
    }
  },

逻辑五：引入模式概念

因为答题页面逻辑非常多，今天写这么多也没写完一般， 除了学习模式，后面还有模拟考试模式，这里不单独使用另外的页面来开发，统一在一个页面。 所以，我们在页面data里加入model变量，代表模式。

/**

​ * 这里有个模式， 练习模式，与模拟考试模式

​ * model 1.练习模式 2.模拟考试考试

​ * 练习模式查询出所有数据练习

​ * 模拟考试 随机100题 计算打分

​ */

三、总结

练习模式里面的单项选择逻辑基本已经做好，下一节将实现模拟考试，计算考试成绩等等功能