在线考试防止切屏功能
今天分享一个考试防止切屏作弊的功能
需求
需求描述：不难看出，这是只要考试页面不在当前页面的都会被看做是切屏，当超过设置的考试切屏允许的最大次数时（在考试管理里面会有这个功能），就会自动交卷停止作答。
<el-dialog title="提示" :visible.sync="tipsFlag" width="480px" class="commonDialog multi clickLight" center :close-on-click-modal="false"><div class="dialogTipsbox" v-if="tips===1">你还有试题未作答，确认要交卷？</div><div class="dialogTipsbox" v-if="tips===2">最多只能切屏{{switchPage.switchPageTimes}}次，你还可切换{{switchPage.remaTimes}}次，<br />超过{{switchPage.switchPageTimes}}次将强行交卷！</div><span slot="footer" class="dialog-footer"><el-button @click="tipsFlag = false" v-if="tips===1">取 消</el-button><el-button type="primary" @click="onConfirmTip" v-if="tips===1">确 定</el-button><el-button type="primary" @click="onConfirmTip" v-if="tips===2">我知道了</el-button></span>
</el-dialog>
tipsFlag变量用来控制提示的显示和隐藏，tips变量用来区分提示语，tips类型 1：未做完提醒 2：切屏提醒
功能代码
mounted() {// 监听滚动window.addEventListener("scroll", this.handleScroll);// 监听浏览器窗口变化window.addEventListener("resize", this.getLfetDistance);// 监听页面可见性window.addEventListener("visibilitychange", this.pageHidden);this.$nextTick(function () {let body = document.querySelector("body");body.style.overflow = "auto";this.flexLeft = (body.offsetWidth - 1200) / 2;});},
window.addEventListener(“visibilitychange”, this.pageHidden)这个就是添加监听页面显示与隐藏的事件，当页面的内容变得可见或被隐藏时，会触发 visibilitychange (能见度更改)事件。
//切换页面检测//isReduce 0扣次数 1不扣次数 router 判断是否为路由转跳//事件默认参数pageHidden(e = null, isReduce = 0, router = false) {return new Promise((resolve, reject) => {if (document.visibilityState === "hidden" || router) {this.axios({method: "post",url: "/knowledge/exam/saveSwitchPageCount",data: {pkExam: this.testData.pkExam,pkPaper: this.testData.pkPaper,startTime: this.testData.startTime,pkCurExam: this.testData.pkCurExam,isFirst: isReduce,endTime: this.testData.endTime}}).then(res => {let data = res.data;if (data.code == "0") {this.switchPage = data.data;//remaTimes 可切片次数大于0if (this.switchPage.remaTimes >= 0 &&!this.isStop &&(this.switchPage.remaTimes != this.switchPage.switchPageTimes ||(this.switchPage.remaTimes != 0 &&this.switchPage.switchPageTimes != 0)) &&this.switchPage.switchPageTimes != 1000) {this.tipsFlag = true;this.tips = 2;} else if (this.switchPage.remaTimes < 0 && !this.isStop) {this.submitTest(); }resolve();} else {reject();}});}});},
document.visibilityState（只读属性）, 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.有三个值（为字符串类型）：
1、visible: 此时页面内容至少是部分可见， 即此页面在前景标签页中，并且窗口没有最小化。
2、hidden: 此时页面对用户不可见， 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’ 。
3、prerender: 页面此时正在渲染中， 因此是不可见的 (considered hidden for purposes of document.hidden).，文档只能从此状态开始，永远不能从其他值变为此状态。
submitTest() {this.loading = true;this.axios({method: "post",url: "/knowledge/exam/submitPaper",data: {pkExam: this.pkExam,pkPaper: this.testData.pkPaper,startTime: this.testData.startTime,endTime: this.testData.endTime,pkCurExam: this.testData.pkCurExam}}).then(res => {let data = res.data;this.loading = false;if (data.code == "0") {this.isStop = true;this.tipsFlag = false;this.testResult = data.data;clearInterval(this.countdownTime);} else {this.MixerrorMes(data.message);}});}
这是提交试卷的方法，在切屏次数超过设置次数后会强行调用此方法去获取考试结果。
destroyed() {window.removeEventListener("visibilitychange", this.pageHidden);window.removeEventListener("scroll", this.handleScroll);window.removeEventListener("resize", this.getLfetDistance);clearInterval(this.countdownTime); // 计时器}
当然了最后还要移除这些添加的事件和计时器
在线考试防止切屏功能相关推荐
- 基于SSM在线考试系统的核心功能之一自动组卷的实现 SpringBoot版本
基于SSM在线考试系统的核心功能之一–>自动组卷的实现 大家都知道,在考试系统中有个核心的功能 就是组卷的过程 什么是组卷呢? 组卷分成 : 手动组卷 和 随机组卷 手动组卷就是操作人选择对应的 ...
- python做一个考试系统_Python在线考试系统防作弊功能的思路和实现
我自己用Python开发了一套教学管理软件,具有在线点名.提问.答疑.交作业.自测.在线考试.数据导入导出与汇总.Word试卷生成等多个功能,其中在线考试系统具有防作弊的功能,不少人觉得很神奇,其实思 ...
- Python在线考试系统防作弊功能的思路和实现
我自己用Python开发了一套教学管理软件,具有在线点名.提问.答疑.交作业.自测.在线考试.数据导入导出与汇总.Word试卷生成等多个功能,其中在线考试系统具有防作弊的功能,不少人觉得很神奇,其实思 ...
- 基于python的在线考试系统-Python在线考试系统防作弊功能的思路和实现
我自己用Python开发了一套教学管理软件,具有在线点名.提问.答疑.交作业.自测.在线考试.数据导入导出与汇总.Word试卷生成等多个功能,其中在线考试系统具有防作弊的功能,不少人觉得很神奇,其实思 ...
- Java实现在线考试系统（学生功能）
学生模块功能比较少,就是进行考试和查看自己成绩两个大的功能. 学生进行考试的功能比较复杂(首先做了校验,不在考试时间范围内,不能进行考试) 考试试题是数据库根据发布考试时的条件随机产生的一套试题.因为 ...
- we learn考试能切屏吗_螺蛳粉闻臭师年薪50万，你想挑战吗？
如果给你年薪50万 专品螺蛳粉的臭味 你愿意尝试吗? 闻闻臭味就能拿高薪 有网友表示可以胜任 小编也陷入了沉思...... 2020年是柳州螺蛳粉走红的一年螺蛳粉的走红也带来了一个新的高薪职业--闻臭 ...
- we learn考试能切屏吗_2020年成人高考考试小技巧速看！
成人高考全称成人高等学校招生全国统一考试.属于国民教育系列,列入国家招生计划.毕业证在教育部唯一官方本科学历查询网址www.chsi.com.cn上可查.是严格正规的全国统考级考试,用我们老师间流行的 ...
- we learn考试能切屏吗_托福说 | 当留学生必备技能成托福口语真题，这题你能拿满分吗？！...
原标题:托福说 | 当留学生必备技能成托福口语真题,这题你能拿满分吗?! 每当被问起出国后最大的改变 应该很多留学生都会回答:" 更加独立" 从五谷不分的 「家务废柴」到 「中华小 ...
- we learn考试能切屏吗_高中英语听力答题技巧，你真的会吗？从此刻开始练习！...
高中英语听力测试部分在整套试题中占有重要地位.它要求考生从头到尾按顺序往下听,在有限的时间内做出选择,没有"回头看"的余地. 今天就结合近几年的高考英语听力试题介绍一些应试技巧和解 ...
- 在线考试答题系统的五大功能，你知道多少？
在线考试答题系统 -五大功能,你知道多少?- 在线考试答题系统优势: 在线考试答题系统具有高度的可扩展性,高效灵活.功能强大.考试用户随时随地就可通过网络登录在线考试答题系统,参加在线报名.在线练习. ...
最新文章
- 使用Python，OpenCV实现图像之间超快速的颜色转移
- html5 原生 弹窗,一起来看 HTML 5.2 中新的原生元素 dialog
- 【带你重拾Redis】Redis过期策略 和 内存淘汰策略(key回收)
- iview select选中值取值_完美解决iview 的select下拉框选项错位的问题
- 亿级流量场景下的平滑扩容：TDSQL的水平扩容方案实践
- C++vector容器-数据存取
- 浅析PetShop程序中的购物车和订单处理模块（Profile技术，异步MSMQ消息）
- python实现数据恢复软件_pyinstaller还原python代码过程图解
- zipkin brave mysql_Zipkin和Brave实现http服务调用的跟踪
- 阅读《黑客与画家》有感——Hackers and Painters
- android仿今日头条App、多种漂亮加载效果、选择器汇总、记事本App、Kotlin开发等源码...
- 使用git+Jenkins部署代码
- 去除面部黑色素小妙招_去除脸部黑色素7个小方法，值得收藏
- u盘修复计算机系统,用u盘修复win7系统
- 微积分（一）——二重积分与三重积分笔记
- Delphi第三方控件大比拼
- git分支拉取develop分支最新代码
- 计算机等级考试(包括二级),包括几个级别？
- 数据中台建设方案-基于大数据平台(下)
- 普顿外汇告诉大家如何在外汇市场保持良好的心态？