消防安全知识答题活动小程序v4.3.0
v4.3.0
1)实现答题倒计时功能
如果让你给一款答题小程序产品制定一个技术方案,比如实现答题倒计时功能,你会怎么做。
通常,我们对于倒计时的普遍认知是设置一个定时器去实现的,在定时到期以后执行注册的回调函数。基于这个认识,我们看看具体是怎么实现的,或是实现方案有哪些。
①setTimeout
有的同学可能会选择使用setTimeout,看看他是怎么实现的。首先是定义一个countDown函数,里面主要是一个执行setTimeout的函数体,在setTimeout里执行countDown。页面加载时,调用一次countDown,然后每一秒调用一次countDown。
Page({
/**
* 页面的初始数据
*/
data: {
count: 50
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
// 函数执行
this.countDown();
},
//倒计时函数的定义
countDown() {
const that = this;
const { count } = that.data;
//定时器
const time = setTimeout(function () {
that.setData({
count: count - 1,
});
// 函数执行
that.countDown();
}, 1000);
},
})
确实是可以实现答题倒计时功能,但是这种技术方案存在着比较大的缺陷或者性能问题。当然,每一种技术方案都存在其优缺点,没有完美一说。但是,我们就是要在具体问题具体分析,找到对应当前应用场景或者当前业务需求的最优解。
②setInterval
提供多一种思路,多一种选择和可能性。我们看看另一种解决方案,setInterval。通过setInterval设定一个定时器,按照指定的周期(以毫秒计)来执行注册的回调函数。
Page({
/**
* 页面的初始数据
*/
data: {
secondsNum: 600
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
// 函数执行
this.countDown();
},
//倒计时函数的定义
countDown() {
let secondsNum = this.data.secondsNum;
//定时器
let timer = setInterval(() => {
secondsNum--;
this.setData({
secondsNum
});
}, 1000);
},
})
2)实现限时作答功能
实现限时作答功能,其实就是当倒计时结束之后,程序需要做什么操作,比如做一些提示、限制不能继续作答了或者是系统强制交卷等。
①首先,如何判断倒计时结束呢?
通过判断secondsNum是否为0,是则倒计时结束,否则还没结束。
if (this.data.secondsNum == 0) {
// 弱提示
wx.showToast({
title: '答题时间到!n已为您自动提交答卷!',
icon: 'none',
duration:3000,
mask:true
})
}
②系统强制交卷
if (this.data.secondsNum == 0) {
wx.showToast({
title: '答题时间到!n已为您自动提交答卷!',
icon: 'none',
duration:3000,
mask:true
});
//系统自动提交
this.addExamRecord();
// 取消由 setInterval 设置的定时器
clearInterval(timer);
}
当然,这种方式也是存在一定的的缺陷或者性能问题。但是相对比前一种,不失为一种优化方向。后续,我也会在此基础上,再给出进一步优化的完整的解决方案。大家也可以先思考一下,可以相互交流交流。
v4.2.0
1)支持选项乱序
v4.1.0
1)支持多选题
2)支持填空题
v3.0.0
1)升级功能:
- 答题页、结果页界面,增加展示微信头像和昵称栏目√
- 由仅支持单选,升级为支持单选、判断、多选题型 √
- 排行榜页排名机制,优化为取个人最佳成绩进行排名√
- 各界面及功能一些小优化√
2)拓展功能:
- 注册登录页 √
- 错题集 √
- 题库学习 √
- 查看用户的答题成绩以及答题情况-管理员 √
- 查看所有用户的答题记录-管理员 √
- 后台题库管理系统-管理员 √
- 题目增删查改-管理员 √
3)基于v2.0拓展升级:
- 排行榜页
- 活动规则页
- 答题记录页
- 首页、答题页、结果页
- 微信授权登录
- 获取微信头像和昵称等
- 实现页面间跳转功能
- 实现转发分享答题成绩功能
- 题库随机抽题
- 查询历史成绩
- 实现用云开发实现查询题库功能
- 实现动态题目数据绑定
- 答题交互逻辑
- 切换下一题
- 系统自动判分
- 提交答卷保存到云数据库集合
- 答题结果页从云数据库查询答题成绩
- 题库学习
- 注册登录页
- 支持单选、判断题型
- 错题集
- 查看用户的答题成绩以及答题情况-管理员
- 查看所有用户的答题记录-管理员
- 后台管理-管理员
- 后台数据监控-管理员
v2.0.0
- 活动规则页
- 排行榜页
- 答题记录页
- 题库随机抽题
- 微信授权登录
- 获取微信头像和昵称等
- 首页、答题页、结果页
- 实现页面间跳转功能
- 实现转发分享答题成绩功能
- 实现用云开发实现查询题库功能
- 实现动态题目数据绑定
- 答题交互逻辑
- 切换下一题
- 系统自动判分
- 提交答卷保存到云数据库集合
- 查询历史成绩
- 答题结果页从云数据库查询答题成绩
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
看看 .Noprint{display:none;} .PageNext{page-break-after: always;} .tdp { border-bottom: 1 solid #ff0000; border-left: 1 solid #00000…