效果图:
在指定的某个时间点出现QA环节:
回答错误 或 超过规定的时间未回答,出现如下情况:
思路
- 通过定时器(每隔1s的)判断video.currentTime来决定什么时候出现QA环节;
- 出现QA环节时,暂停播放,清理每隔1s的定时器;
- 定义一个变量clickNum来判断是否答题(clickNum=1),默认为未答题(clickNum=0,有一个5s的一次性定时器),若在5s内答题了,则清理这个一次性定时器。
- 答对 +5分(隐藏QA环节,继续播放视频);
- 答错 或 未答题 -5分。显示当前得分,若得分为0则重新播放当前视频(重新开启每隔1s的定时器),反之,则继续播放视频。
我遇到的问题
注:按照以上的思路来实现我发现有一点问题:定时器好像没有清理干净,但是自己目前还没想到解决办法
-
在QA环节里明明已经选择了答案,点击了 input [type=’radio’]但是一直没有加上它的checked属性,导致不能判断它是否选中。
解决办法: 直接在点击input [type=’radio’]后,就给此input设置checked属性为true.(注意prop()和attr()的区别) ,具体看下面答题部分的代码。 -
在规定时间内已经选择了答案,但是在运行完