;

微信小程序在线考试:切屏监听与自动交卷的技术实现

2024-07-01 阅读:59
;
您当前位置:首页 | 新闻列表 | 新闻详情

前言:

在当今数字化转型的浪潮中,微信小程序在线考试因其便捷性和高效性受到了广泛的关注和应用。然而,为了保证考试的公正性和严肃性,对考生的行为进行有效的监控至关重要。其中,考生的切屏行为就是一个需要重点关注的方面。

在本文中,主要介绍如何在微信小程序在线考试中实现对切屏次数的监听,通过弹窗提醒考生规范考试行为,并在达到预设的切屏限制上限后自动交卷的功能

一、背景

最近做的微信小程序项目中,有在线考试的需求,该需求的目的是考察员工是否掌握了所学课程的内容。
当考生在考试过程中频繁切屏时,通过弹窗提醒其遵守考试规则,若达到预设的切屏限制上限,则自动交卷,以确保考试的正常秩序和质量。

该答题页面要求:

  1. 不支持切屏,用户切屏留在当前界面,提示用户:“切屏超过三次将会强制交卷!”。
  2. 切屏超过三次强制提交试卷,显示考试结果。

二、实现的效果

下面按照步骤进行展示:

image.png

image.png

image.png

image.png

image.png

三、实现思路

  • 首先要明确微信小程序的生命周期:

这里要用到生命周期函数onShow-- 监听页面显示,监听小程序启动或切前台。

onShow是每次页面显示都会触发,那分别有哪几种情况呢?

  1. 刚进入页面时会触发一次当前页面的onShow;
  2. 当用户从小程序的A页面进入B页面,再返回A页面时,会触发A页面的onShow;
  3. 点击右上角的小圆圈胶囊,退出小程序,然后再次打开时会触发;
  4. 直接切换其他app,再切回来时会触发;
  5. 回到手机home页,再打开小程序时会触发;
  • 然后考虑切屏有哪几种情况:

大概上面触发onShow的几种情况都包括切屏所需要考虑的了。

四、实现方案

  1. 首先需要存储一个全局数据enterExamPageNum,用来记录切屏次数;
		
js
复制代码
globalData: { enterExamPageNum: 0, // 记录切屏次数 }

这里我将该数据存储在app.js文件中的全局对象globalData中,这个对象用于存储全局共享的数据。初始值设置为0。

注:此处可以根据自己项目情况,存储的方式可以用本地存储(wx.setStorageSync)或者其他方式。

  1. 在答题页面的onShow生命周期中获取和记录切屏次数,并提示用户已记录的次数;当在切屏第四次时,提示用户 “切屏已3次,将强制交卷”,然后直接交卷:

image.png

附上代码:

		
js
复制代码
onShow: function () { const that = this; let enterExamPageNum = app.globalData.enterExamPageNum; app.globalData.enterExamPageNum = enterExamPageNum + 1; if (app.globalData.enterExamPageNum < 2) { return } wx.showModal({ title: '提示', content: `答题中切勿切屏,已记录${enterExamPageNum}次!`, showCancel: false, }) if (enterExamPageNum === 4) { wx.showModal({ title: '提示', content: `切屏已3次,将强制交卷`, showCancel: false, success: function (res) { if (res.confirm) { that.getExamAdd(); // 交卷 } } }) } },

五、总结

本文介绍了微信小程序在线考试中切屏监控、弹窗提醒以及达到切屏限制上限后自动交卷功能的实现。想为开发类似的在线考试功能的朋友提供一些参考。

以上,希望对大家有帮助!


作者:小蹦跶儿
链接:https://juejin.cn/post/7384704245495398434
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
上一篇:上海松江小程序开发公司:如何找到一家靠谱的服务商 下一篇:没有了

推荐信息

更多+

    联系我们

  • 电话 :134-8274-2882
  • QQ:1059681242
  • 邮箱:haoljq@163.com
  • 地址:上海市松江区米易路166号交科医疗健康产业园(2楼)

在线预约

  • 您的姓名
  • 联系电话

友情链接:

小程序开发 小程序定制开发 小程序商店 微信小程序开发文档 分销商城小程序 电商小程序开发 百家号 商城小程序 微信小程序开发API 小程序定制 生鲜小程序 全平台开发 网站建设 外包开发 自主研发产品 sitemap robots

热门地区:

松江开发公司 青浦开发公司 崇明开发公司 杨浦开发公司 宝山开发公司 奉贤开发公司 虹口开发公司 闵行开发公司 长宁开发公司 静安开发公司 黄浦开发公司 嘉定开发公司 徐汇开发公司 金山开发公司 上海开发公司 南昌开发公司 杭州开发公司 上饶开发公司

COPYRIGHT 2009-2016 www.guanzhiweb.com ALL RIGHTS RESERVED

版权所有 上海观智网络科技有限公司

在线
客服

在线客服服务时间:9:00-21:00

选择下列咨讯方式马上在线沟通:

客服
热线

134-8274-2882
小程序定制开发已服务600+

特价
商城

商城小程序助力每个商家获客盈收

来电咨讯获取商城方案,报价功能清单

小程
序码

扫码加微信咨询
顶部