今天开始手把手的带大家实现一款答题类的小程序
一，效果预览
二，配套资料
1，讲解视频
视频课我会在B站免费提供给大家，欢迎关注，欢迎三连。
https://space.bilibili.com/419474640/video
2，配套笔记
配套笔记分在线版和离线电子书版。
在线笔记会在石头哥的个人博客上免费给到大家，欢迎关注，笔记会持续更新。https://blog.csdn.net/qiushi_1990
3，支持石头哥😊
3-1，源码和配套资源获取
目前源码和配套资源暂时不免费，毕竟创作不易，如果有需要的同学可以私聊石头哥，拿米来换。
3-2，笔记电子书
笔记我也有整理一套电子书，大家也可以私聊石头哥获取电子书版的配套笔记。电子书笔记方便后期查询知识点，当然也要拿米来换。
3-3，配置源码和资料
配套源码和资料需要拿米来换，或者成为石头哥的解答会员也可以获取。
4，问题解答(●’◡’●)
另外石头哥提供配套解答服务。当然了，知识付费时代石头哥解答是要米的，毕竟石头哥精力有限，石头哥也是要吃面包的。石头哥有推出包月，包年解答服务。你在学习过程中有任何问题，或者工作中遇到任何编程问题，都可以来找石头哥
石头哥目前可以解答如下问题
- 小程序方面的问题
- 云开发方面的问题
- Java，springboot，Javaweb方面的问题
- 毕设方面的问题
- 安卓app开发方面的问题
- html+css+JavaScript方面的问题
- 前端开发的问题
- 后端开发的问题
- 面试找工作方面的问题
三，项目创建
3-1，获取appid
我们获取小程序appid必须先去注册一个小程序，小程序的注册我小程序基础课里有讲过，大家可以去看下我基础课。
3-2，创建项目注意事项
为了保持一致，创建项目时选择使用云开发
3-3，去除项目里的无用文件
跟着石头哥的视频，把项目里一些无用的文件删除掉，保持代码简洁。
四，单选知识点
4-1，radio和radio-group实现单选答题
官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
4-2，单选的wxml布局
<view>题目：这门课的老师是谁？</view>
<radio-group bindchange="radioChange">
<view>
<radio value="A" />
<text>A:编程小石头</text>
</view>
<view>
<radio value="B" />
<text>B:疯狂小石头</text>
</view>
<view>
<radio value="C" />
<text>C:大石头</text>
</view>
<view>
<radio value="D" />
<text>D:石头王</text>
</view>
</radio-group>
<button type="primary" bindtap="submit">提交答题</button>
效果如下：
4-3,单选的js页面如下
Page({
data: {
right: 'A',
select: ''
},
//用户选择了选项
radioChange(e) {
let select = e.detail.value
console.log('用户选择了', select)
this.setData({
select: select
})
},
//提交答题
submit() {
console.log('正确答案是', this.data.right)
console.log('用户选择了', this.data.select)
//当数据为空字符串或者null的时候，我们对这个数据取反
if (!this.data.select) {
console.log('执行了if')
wx.showToast({
icon: 'none',
title: '你还没有选择呢',
})
} else if (this.data.right == this.data.select) {
wx.showToast({
title: '您答对啦',
})
} else {
wx.showToast({
icon: 'none',
title: '您答错啦',
})
}
}
})
五，多选知识点
5-1，checkbox和checkbox-group实现多选
官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
5-2,多选wxml页面的布局
<view>题目：这门课的老师是谁？</view>
<checkbox-group bindchange="checkboxChange">
<view>
<checkbox value="A" />
<text>A:编程小石头</text>
</view>
<view>
<checkbox value="B" />
<text>B:疯狂小石头</text>
</view>
<view>
<checkbox value="C" />
<text>C:大石头</text>
</view>
<view>
<checkbox value="D" />
<text>D:邱石</text>
</view>
</checkbox-group>
<button bindtap="submit" type="primary">提交答题</button>
效果如下
5-3,多选的js页面
由于我们多选的时候有很多种打分规则，这里以两个最常见的打分规则为例。
5-3-1,规则一，全部答对才对，打错一个即为错误
Page({
data: {
right: ['A', 'D'],
select: []
},
//获取用户选择了哪些选项
checkboxChange(e) {
console.log(e.detail.value)
this.setData({
select: e.detail.value
})
},
//提交
submit() {
//规则一，全部答对才对，打错一个即为错误
let arr = this.data.right
let len = arr.length //正确答案的个数
let arr2 = this.data.select
let len2 = arr2.length
console.log('正确答案', arr)
console.log('用户选择的答案', arr2)
if (len == len2) { //1，判断个数是否相同
console.log('用户答题得个数和正确选项得个数相同')
let rigthNum = 0
arr2.forEach(item => {
if (arr.indexOf(item) > -1) {
rigthNum++
console.log(item, '是正确选项')
}
})
//2，计算答对的个数
console.log('答对的个数', rigthNum)
//3，判断答对的个数是否等于答案的个数
if (rigthNum == len) {
console.log('闯关成功，彻底答对啦')
wx.showToast({
title: '答对啦',
})
} else {
console.log('答题失败')
wx.showToast({
icon: 'none',
title: '答错啦',
})
}
} else {
console.log('错误，选项个数不对')
wx.showToast({
icon: 'none',
title: '答错啦',
})
}
}
})
5-3-2,规则二，按答对的个数给分
我这里只把核心代码贴出来给到大家，具体的还请大家去看视频讲解。
/**
* 规则二，按答对的个数给分，比如3个答案答对一个给1分，答对3个给满分
* 1,判断答题个数是否小于答案个数 答1，2，3才给分
* 2，只答一个。要判断这一个是否在答案里，在的话就给1分
* 3，答二的时候：两个都在正确答案里，给2分
* 4，答三个的时候：三个全都在正确答案里，给3分
*/
guize2() {
let arr = this.data.right
let len = arr.length //正确答案的个数
let arr2 = this.data.select
let len2 = arr2.length
console.log('正确答案', arr)
console.log('用户选择的答案', arr2)
//第一关：答题的个数必须小于等于正确答案的个数
if (len2 <= len) {
console.log('答题个数小于等于正确答案，第一关闯过了')
let rigthNum = 0
arr2.forEach(item => {
if (arr.indexOf(item) > -1) {
rigthNum++
console.log(item, '是正确选项')
}
})
//第二关：用户选择的选项全部在正确答案里
if (rigthNum == arr2.length) {
console.log('第二关闯关成功，用户选择的选项都是对的')
//第三关：用户答了满分
if (rigthNum == len) {
console.log('第三关闯关成功，用户得了满分')
console.log("用户得分:100分")
} else if (rigthNum < len) {
//保留两位小数，并四舍五入 .toFixed(2)
let defen = rigthNum / len * 100 //33.33333333333333
defen = defen.toFixed(2)
console.log("用户得分:", defen)
}
} else {
console.log("用户得分:0分,虽然第一关闯关了，但是第二关没有闯关成功，所以0分")
}
} else {
console.log('答题个数大于了正确答案，判错')
console.log("用户得分:0分，一关都没有闯成功，你不0分谁0分")
}
}
六，多个题目
6-1，连续做多个单选题
我们上面的知识点每次只讲了一道题的作答，这里开始，我们就要实现多个题目的作答，然后可以记录错题，实现总体打分。
6-1-1，定义题目数据
我们这里以3个单选题为例，首先来看下数据
如上图所示，我们定义了三道选择题。我这里把数据放在配套资料的题库里了
大家只需要把题库里的‘3道单选题.txt’里的内容复制到js代码里，即可(视频是免费的，源码和资料需要拿米来换，毕竟创作不易，还望体谅)
6-1-2，编写wxml显示题目
显示效果如下
6-1-3，编写js代码的注意事项
我们在第一次进入页面时需要优先加载第一个题目
比如我这里连续做了3个题，效果图如下
接下来就在视频里详细教大家如何实现连续做题，并最终打分。所以听视频课的时候要认真了奥。
6-1-4,添加做题进度条
如下图所示，添加一个进度条，可以让用户查看当前做题进度。
这里用到了progress组件，对应的文档如下。
https://developers.weixin.qq.com/miniprogram/dev/component/progress.html
转载：https://blog.csdn.net/qiushi_1990/article/details/114360228