评论

驾校答题小程序实战全过程-3.顺序练习和模拟考试

讲解驾校答题小程序开发的全过程,包含数据库设计、答题功能、顺序练习、模拟考试、题目采集、语音读题等功能开发

一、目标:

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

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

二、实现方式:

##逻辑一:记录学习题目进度
记录的核心代码,在提交保存的时候调用。当然,也可以在练习离开的时候触发,这里给了个按钮,点击保存即可保存学习记录

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题 计算打分

​ */

三、总结

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

最后一次编辑于  03-21  
点赞 0
收藏
评论