Serverless实战驾校小程序考题练习三
Serverless实战驾校小程序【考题练习】三
介绍
上一节我们讲了，实现了分类、题目显示、进度条显示等功能，这节我们继续完善答题功能。由于开发时间比较紧，这里主要写实习思路，与核心代码。
这一节做顺序练习与模拟考试。都属于答题详细页面功能
这次进度条可以根据答题进度，显示进度。 这个也用了iview的一个插件， 目前样式没调整， 这个后面再说。
这一节主要实现了一些逻辑计算
逻辑一：记录学习题目进度
记录的核心代码，在提交保存的时候调用。当然，也可以在练习离开的时候触发，这里给了个按钮，点击保存即可保存学习记录
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题 计算打分
*/
总结
今天练习模式里面的单项选择逻辑基本已经做好，明天将实现模拟考试，计算考试成绩等等功能
大家想学习更多的云服务开发， 可以加入Bmob的交流群：群号:273080081
