一、目標(biāo)：

這一節(jié)做順序練習(xí)與模擬考試，都屬于答題詳細(xì)頁面功能，如下圖所示：

1.png

2.png

進(jìn)度條可以根據(jù)答題進(jìn)度，顯示進(jìn)度。
這一節(jié)主要實(shí)現(xiàn)了一些邏輯計(jì)算

二、實(shí)現(xiàn)方式：

邏輯一：記錄學(xué)習(xí)題目進(jìn)度

記錄的核心代碼，在提交保存的時(shí)候調(diào)用。當(dāng)然，也可以在練習(xí)離開的時(shí)候觸發(fā)，這里給了個(gè)按鈕，點(diǎn)擊保存即可保存學(xué)習(xí)記錄

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

邏輯二：記錄題目回答的對錯(cuò)

上面的變量result記錄，格式請看上一節(jié)數(shù)據(jù)庫格式說明，是題目的對錯(cuò)。這里點(diǎn)擊一個(gè)選擇就記錄一次，我在頁面data里面增加了一個(gè)items變量來保存。
選擇答案執(zhí)行以下代碼，今天先實(shí)現(xiàn)單選，我們單選與多選，判斷事件分開來做，這樣便于邏輯管理

// 單選題
  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: ''
    });
  },

邏輯三：答題相關(guān)統(tǒng)計(jì)

邏輯二講了，記錄對錯(cuò)，這里有一些統(tǒng)計(jì)需要拿出來計(jì)算，先做單選題，點(diǎn)擊選擇，判斷是否正確， 如果正確，記錄到結(jié)果對象 [{" id ":" XXX ', '0'}, {" id ":" XXX ", "1"}] ，0代表回答錯(cuò)誤，1正確
例如錯(cuò)題個(gè)數(shù)、對題個(gè)數(shù)，頁面提示，進(jìn)度條進(jìn)一步

statistical () {
    // 統(tǒng)計(jì)錯(cuò)題個(gè)數(shù)
    let questionErr = this.data.questionErr  //錯(cuò)題個(gè)數(shù)
    let questionOk = this.data.questionOk  //錯(cuò)題個(gè)數(shù)
    let questionInfo = this.data.questionInfo
    let items = this.data.items
    let arr = { "id": questionInfo.objectId, "o": 0 }

    let t = 'error', m = '回答錯(cuò)誤'
    if (questionInfo.isOk === 1) {
      // o 0代表失敗，1代表成功
      arr.o = 1
      questionOk = questionOk + 1
      t = 'success'
      m = '回答正確'
    } else {
      // 錯(cuò)誤數(shù)+1
      questionErr = questionErr + 1

    }
    items.push(arr)

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


    //進(jìn)度條
    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,
    });
  },

邏輯四：上一題下一題的實(shí)現(xiàn)

頁面顯示第幾個(gè)題目，我們用數(shù)組的下面來記錄，單電機(jī)下一題，我們記錄回答對錯(cuò)，并且數(shù)組下標(biāo)+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)
    }
  },

邏輯五：引入模式概念

因?yàn)榇痤}頁面邏輯非常多，今天寫這么多也沒寫完一般， 除了學(xué)習(xí)模式，后面還有模擬考試模式，這里不單獨(dú)使用另外的頁面來開發(fā)，統(tǒng)一在一個(gè)頁面。 所以，我們在頁面data里加入model變量，代表模式。

/**

? * 這里有個(gè)模式， 練習(xí)模式，與模擬考試模式

? * model 1.練習(xí)模式 2.模擬考試考試

? * 練習(xí)模式查詢出所有數(shù)據(jù)練習(xí)

? * 模擬考試 隨機(jī)100題 計(jì)算打分

? */

三、總結(jié)

練習(xí)模式里面的單項(xiàng)選擇邏輯基本已經(jīng)做好，下一節(jié)將實(shí)現(xiàn)模擬考試，計(jì)算考試成績等等功能