Implement Client-Side Proctoring, Screenshot Detection, and Three-Strike Termination #60
Description
Overview
Implementation of a browser-based integrity monitoring module. The module must detect context switching, loss of focus, full-screen exits, and screenshot attempts. It enforces a strict "Three-Strike" policy. Upon the third violation, the system must automatically force-submit the exam and redirect the user, effectively treating the test as concluded.
Functional Objective
The system must automatically detect distractions. Upon the third violation, the frontend must trigger the Final Submit workflow (just as if the user clicked "Finish Exam") but with a flag indicating a forced submission. The user is then redirected to the Home Page and cannot retake the test.
Technical Implementation
1. Violation State Machine
- State Variable: Initialize a persistent state variable
violationCount(Integer) defaulting to0. - Threshold Constant: Define
MAX_VIOLATIONS = 3. - Logic Flow:
- On Event Trigger: Increment
violationCount. - Condition A (
violationCount < 3): Suspend the exam interface. Render a blocking "Warning" modal requiring user acknowledgement to resume. - Condition B (
violationCount >= 3): ExecuteforceSubmitExam()immediately.- API Call: Dispatch the existing
POST /api/submitendpoint. - Payload: Include a meta-flag if supported, e.g.,
{ "auto_submit_reason": "VIOLATION_LIMIT_REACHED" }. - Note: Since answers are saved incrementally, this call simply marks the exam status as "Completed/Submitted" in the DB, invoking the existing "No Retake" logic.
- Clear Local State: Remove session tokens/exam context from
localStorage. - Redirect: To the home page
- API Call: Dispatch the existing
- On Event Trigger: Increment
2. Event Listeners & Focus Tracking
The following DOM events must be monitored:
document.visibilitychange: Trigger violation ifdocument.visibilityState === 'hidden'.window.onblur: Trigger violation if window loses focus.- Debounce: 500ms debounce to filter transient interrupts.
document.onfullscreenchange: Trigger violation ifdocument.fullscreenElementreturnsnull.
3. Screenshot Detection & Obfuscation
- Event Listener:
keyuplistener forPrintScreen(Key Code 44). - Logic:
- Immediate increment of
violationCount. - Visual Countermeasure: Instantly apply
filter: blur(20px)oropacity: 0to<body>.
- Immediate increment of
4. Full-Screen Enforcement
- Initialization: Invoke
element.requestFullscreen()on mount. - Re-entry: Warning Modal must contain a button to trigger
requestFullscreen()to unblock UI.
5. Input Sanitization
- Context Menu: Prevent
contextmenu(Right Click). - Keydown Interception:
preventDefault()for:Ctrl+C,Ctrl+V,Ctrl+XCtrl+Shift+I,F12Alt+Tab
6. Persistence
- Local Persistence: Store
violationCountinlocalStorageto persist across page reloads.
Acceptance Criteria
- State Integrity:
violationCountpersists and increments correctly. - Forced Submission: On Strike 3, the standard "Submit Exam" API is called automatically.
- Redirection: User is redirected to
/homeimmediately after the submit call succeeds. - Data Consistency: The backend receives the submission signal, locking the exam status (preventing retakes).
- Screenshot: Pressing
PrintScreentriggers a strike and obscures UI. - Full-Screen:
Escregisters as a violation. - Security: Copy/Paste/DevTools shortcuts are disabled.
- No Logging: No intermediate violation logging; only the final submission logic is triggered.
Metadata
Metadata
Assignees
Labels
No labels