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

小蹦跶儿
2,249 阅读3分钟

前言：

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

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

一、背景

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

该答题页面要求：

  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，用来记录切屏次数；
globalData: {
  enterExamPageNum: 0, // 记录切屏次数
}

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

注：此处可以根据自己项目情况，存储的方式可以用本地存储（wx.setStorageSync）或者其他方式。

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

image.png

附上代码：

  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(); // 交卷
          }
        }
      })
    }
  },

五、总结

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

以上，希望对大家有帮助！

avatar
文章
阅读
粉丝