一绷杜、目標(biāo)：
這一節(jié)做順序練習(xí)與模擬考試直秆，都屬于答題詳細(xì)頁面功能，如下圖所示：
進(jìn)度條可以根據(jù)答題進(jìn)度鞭盟，顯示進(jìn)度圾结。
這一節(jié)主要實現(xiàn)了一些邏輯計算
二、實現(xiàn)方式：
邏輯一：記錄學(xué)習(xí)題目進(jìn)度
記錄的核心代碼懊缺，在提交保存的時候調(diào)用疫稿。當(dāng)然，也可以在練習(xí)離開的時候觸發(fā)鹃两，這里給了個按鈕遗座，點擊保存即可保存學(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)
})
});
}
邏輯二：記錄題目回答的對錯
上面的變量result記錄，格式請看上一節(jié)數(shù)據(jù)庫格式說明俊扳，是題目的對錯途蒋。這里點擊一個選擇就記錄一次，我在頁面data里面增加了一個items變量來保存馋记。
選擇答案執(zhí)行以下代碼号坡，今天先實現(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)計
邏輯二講了，記錄對錯茸习，這里有一些統(tǒng)計需要拿出來計算畜隶，先做單選題，點擊選擇号胚，判斷是否正確籽慢， 如果正確，記錄到結(jié)果對象 [{" id ":" XXX ', '0'}, {" id ":" XXX ", "1"}] 猫胁，0代表回答錯誤箱亿，1正確
例如錯題個數(shù)、對題個數(shù)弃秆，頁面提示届惋，進(jìn)度條進(jìn)一步
statistical () {
// 統(tǒng)計錯題個數(shù)
let questionErr = this.data.questionErr //錯題個數(shù)
let questionOk = this.data.questionOk //錯題個數(shù)
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 {
// 錯誤數(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,
});
},
邏輯四：上一題下一題的實現(xiàn)
頁面顯示第幾個題目菠赚，我們用數(shù)組的下面來記錄盼樟，單電機(jī)下一題，我們記錄回答對錯锈至，并且數(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)
}
},
邏輯五：引入模式概念
因為答題頁面邏輯非常多，今天寫這么多也沒寫完一般峡捡， 除了學(xué)習(xí)模式击碗，后面還有模擬考試模式，這里不單獨使用另外的頁面來開發(fā)们拙，統(tǒng)一在一個頁面稍途。 所以，我們在頁面data里加入model變量砚婆，代表模式械拍。
/**
? * 這里有個模式突勇， 練習(xí)模式，與模擬考試模式
? * model 1.練習(xí)模式 2.模擬考試考試
? * 練習(xí)模式查詢出所有數(shù)據(jù)練習(xí)
? * 模擬考試 隨機(jī)100題 計算打分
? */
三坷虑、總結(jié)
練習(xí)模式里面的單項選擇邏輯基本已經(jīng)做好甲馋，下一節(jié)將實現(xiàn)模擬考試，計算考試成績等等功能
