简单实现video的QA环节

效果图:

在指定的某个时间点出现QA环节:
在这里插入图片描述
回答错误 或 超过规定的时间未回答,出现如下情况:
在这里插入图片描述

思路

  1. 通过定时器(每隔1s的)判断video.currentTime来决定什么时候出现QA环节;
  2. 出现QA环节时,暂停播放,清理每隔1s的定时器;
  3. 定义一个变量clickNum来判断是否答题(clickNum=1),默认为未答题(clickNum=0,有一个5s的一次性定时器),若在5s内答题了,则清理这个一次性定时器。
  4. 答对 +5分(隐藏QA环节,继续播放视频);
  5. 答错 或 未答题 -5分。显示当前得分,若得分为0则重新播放当前视频(重新开启每隔1s的定时器),反之,则继续播放视频。

我遇到的问题

注:按照以上的思路来实现我发现有一点问题:定时器好像没有清理干净,但是自己目前还没想到解决办法

  1. 在QA环节里明明已经选择了答案,点击了 input [type=’radio’]但是一直没有加上它的checked属性,导致不能判断它是否选中。
    解决办法: 直接在点击input [type=’radio’]后,就给此input设置checked属性为true.(注意prop()和attr()的区别) ,具体看下面答题部分的代码。

  2. 在规定时间内已经选择了答案,但是在运行完

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值