在线考试防止切屏功能 |
您所在的位置：网站首页 › 长江雨课堂考试切屏会自动交卷吗 › 在线考试防止切屏功能 |
在线考试防止切屏功能
|
今天分享一个考试防止切屏作弊的功能 需求效果如动图： 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 可切片次数大于0 if ( 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 { 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); // 计时器 }当然了最后还要移除这些添加的事件和计时器 |
需求描述：不难看出，这是只要考试页面不在当前页面的都会被看做是切屏，当超过设置的考试切屏允许的最大次数时（在考试管理里面会有这个功能），就会自动交卷停止作答。【本文地址】
今日新闻 |
推荐新闻 |