今天开始手把手的带大家实现一款答题类的小程序,如果着急的话,可以直接去看最后一章源码下载与项目部署
可以看到我们首页有顶部轮播图,随机答题,分类答题
首页顶部轮播图
可以看到我们的错题集里有每个对应的错题汇总和错误个数
复习错题和题目解析
如果一个错题复习的差不多了,可以删除错题
可以看到我们的个人中心里有具体用户信息,积分信息等
答题和积分之前需要先注册用户,排名之前需要先注册用户
答题之前可以先注册用户再答题积分
用户还未注册时会有如下提醒
也可以从题库里随机抽取题目答题
视频课我会在B站免费提供给大家。
配套笔记分在线版和离线电子书版。 在线笔记会在石头哥的个人博客上免费给到大家,笔记会持续更新。https://blog.csdn.net/qiushi_1990
另外石头哥提供配套解答服务。当然了,知识付费时代石头哥解答是要米的,毕竟石头哥精力有限,石头哥也是要吃面包的。石头哥有推出包月,包年解答服务。你在学习过程中有任何问题,或者工作中遇到任何编程问题,都可以来找石头哥 石头哥目前可以解答如下问题
我们获取小程序appid必须先去注册一个小程序,小程序的注册我小程序基础课里有讲过,大家可以去看下我基础课。
为了保持一致,创建项目时选择使用云开发
跟着石头哥的视频,把项目里一些无用的文件删除掉,保持代码简洁。
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
<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>
效果如下:
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: '您答错啦',
})
}
}
})
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
<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>
效果如下
由于我们多选的时候有很多种打分规则,这里以两个最常见的打分规则为例。
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: '答错啦',
})
}
}
})
我这里只把核心代码贴出来给到大家,具体的还请大家去看视频讲解。
/**
* 规则二,按答对的个数给分,比如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分")
}
}
我们上面的知识点每次只讲了一道题的作答,这里开始,我们就要实现多个题目的作答,然后可以记录错题,实现总体打分。
我们这里以3个单选题为例,首先来看下数据
如上图所示,我们定义了三道选择题。我这里把数据放在配套资料的题库里了
大家只需要把题库里的‘3道单选题.txt’里的内容复制到js代码里,即可(视频是免费的,源码和资料需要拿米来换,毕竟创作不易,还望体谅)
显示效果如下
我们在第一次进入页面时需要优先加载第一个题目
比如我这里连续做了3个题,效果图如下
接下来就在视频里详细教大家如何实现连续做题,并最终打分。所以听视频课的时候要认真了奥。
如下图所示,添加一个进度条,可以让用户查看当前做题进度。
这里用到了progress组件,对应的文档如下。 https://developers.weixin.qq.com/miniprogram/dev/component/progress.html
首先来看下效果图
我这里直接把具体代码贴出来给到大家吧。代码不是很多
这一节我们就来开始把题目做成活得,做成活的就是把题库放到云端数据库。
我们这一节来新建一个项目,可以参考我们前面笔记的第三章。
如下图所示,点击导入
然后选择桌面下载好的question.json
等待导入完成即可
可以看到我们对应的数据表里多了很多数据。
可以看到日志台的打印如下,并且17个题目也显示到了页面上。
详细的代码编写过程,可以跟着视频学习。
由于这段代码基本上是固定写法,所以我贴出来给到大家,大家后面再设置tabbar时,直接来笔记里复制代码即可。
"tabBar": {
"color": "#8a8a8a",
"selectedColor": "#ffb965",
"list": [{
"pagePath": "pages/race/race",
"text": "首页",
"iconPath": "images/home-no.png",
"selectedIconPath": "images/home-yes.png"
}, {
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "images/me-no.png",
"selectedIconPath": "images/me-yes.png"
}]
},
把源码下载到本地以后进行解压
打开开发者工具,然后点击导入即可。
获取appid,我们获取小程序appid前必须先去注册一个小程序,小程序的注册我小程序基础课里有讲过,大家可以去看下我基础课。
只有上面一步的appid是你自己的,才会有下面所示云开发的图标
初始化云开发我云开发基础课里讲过很多遍,这门课前面的章节也讲过。
一定要和你的云开发环境id保持一致。如果选择环境时为空时就关闭开发者工具多重启几次。
把下面几个云函数都部署下
我们要在数据库里添加下面三个表(集合)
我这里说明下
一定要记得,一定要记得,一定要记得把questions表的权限改为:所有用户可读,仅创建者可读写
我们源码里有一个下面所示的文件
里面是我存的题库,要记得这个目录的位置,等下导入数据的时候需要用到,如果实在不行,可以把这个题库复制到桌面。
然后选择要导入的题库
等待导入
在这里插入图片描述 导入成功
到这里项目就完整的导入成功了。
点击下编译就可以运行项目了
运行成功如下
其实到上面的第9步项目就已经创建好了,如果你还想开通cms可视化网页后台,就来学习这章,如果不想开通cms可以忽略这章
如下图所示,直接点击开通内容管理(CMS)即可
点击完开通以后,会有如下弹窗,直接点击确定即可。不要被付费吓着,官方每月会送我们一定的免费额度的。学习得话基本上够用了。
上面点完确定后,我们只是开启了按量付费功能,因为cms得使用必须要开通按量付费才可以得。所以还要再点一次开通。如下图
点完开通后,会有如下弹窗,直接点击下一步即可。
然后我们需要设置登录内容管理后台得账号和密码,然后点击确定即可
然后我们就等待内容管理功能得开通了,需要等几分钟。
开通成功以后,我们就可以通过下面这个地址进入管理后台了。
上面开通好以后,就可以通过后台地址登录管理后台了。如下
第一次登录,我们还需要创建一个项目
自己输入项目名和项目id即可
然后点击进入刚刚创建的项目
到这里我们的cmd可视化网页管理后台就创建好了,下面教大家如何导入数据。
我们上面创建好cms项目,打开后如下所示
这个时候点击内容模型,然后点击导入模型
然后点击确定即可
这样我们三个数据表就导入成功了,然后就可以对数据进行可视化管理了。
试看视频:
https://www.bilibili.com/video/BV16Z4y1A7yQ