Guide 3.17: Real Projects
Implement Exam Mode
Our app currently functions as a generic quiz. To truly simulate the JAMB UTME, we need a strict "Exam Mode". In this mode, the timer is rigidly enforced, answers are not revealed until the very end, and leaving the browser tab throws a warning.
Defining the Mode Toggle
3.17.1Add a dropdown to your Home Screen allowing the user to select their desired mode.
<div class="form-group">
<label>Select Mode:</label>
<select id="modeSelect">
<option value="exam">Strict Exam Mode</option>
<option value="practice">Relaxed Practice Mode</option>
</select>
</div>Enforcing Strict Rules
3.17.2When the user selects exam, we need to enforce certain conditions in app.js.
let isExamMode = false;
// Inside startBtn listener
isExamMode = (document.getElementById('modeSelect').value === 'exam');
function startTimer() {
// If practice mode, maybe we don't start the timer at all!
if (!isExamMode) {
document.getElementById('timerDisplay').style.display = 'none';
return;
}
// Otherwise, run the strict countdown...
// (existing timer logic)
}Anti-Cheat: Page Visibility API
3.17.3In Exam Mode, you shouldn't allow the student to open a new tab to Google the answer. We can detect this using the browser's Page Visibility API.
document.addEventListener("visibilitychange", () => {
if (isExamMode && document.visibilityState === 'hidden') {
// The user switched tabs or minimized the browser!
alert("WARNING: You left the exam window. Continued malpractice will result in auto-submission.");
// Optional: Auto-submit on first offense
// submitExam();
}
});