// ───────────────────────────────────────────────────────────── // screens-integrity.jsx — assessment integrity + offline survival // IntegrityBanner (visibility-loss tracking, paste blocker, fullscreen prompt), // ServerTimeReconciler (banner + drift fix), IDB autosave hook for attempts, // AssessmentRecoverySheet (resume from local saves) // ───────────────────────────────────────────────────────────── const { useState: useStateI, useEffect: useEffectI, useRef: useRefI, useMemo: useMemoI, useCallback: useCallbackI } = React; // ───────────────────────────────────────────────────────────── // useIntegrity — wires up: // • visibilitychange tracking (3 strikes warning, 5 strikes auto-submit) // • paste blocker + reason logging // • copy/cut blocker // • right-click block // • selection block while attempting // • fullscreen API request + re-prompt if user exits // Returns: { strikes, events, requestFullscreen, fullscreen } // ───────────────────────────────────────────────────────────── function useIntegrity({ active, onStrike, onAutoSubmit, threshold = 5, allowSelection = false }) { const [strikes, setStrikes] = useStateI(0); const [events, setEvents] = useStateI([]); const [fullscreen, setFullscreen] = useStateI(false); const lastVis = useRefI(Date.now()); const log = useCallbackI((kind, detail) => { const ev = { kind, detail, at: Date.now() }; setEvents((es) => [...es.slice(-49), ev]); if (kind === 'visibility-hidden' || kind === 'paste-blocked' || kind === 'fullscreen-exit') { setStrikes((s) => { const ns = s + 1; onStrike?.(ns, ev); if (ns >= threshold) onAutoSubmit?.(); return ns; }); } }, [onStrike, onAutoSubmit, threshold]); useEffectI(() => { if (!active) return; const onVis = () => { if (document.hidden) { lastVis.current = Date.now(); log('visibility-hidden', { ts: Date.now() }); } else { const away = Math.round((Date.now() - lastVis.current) / 1000); log('visibility-return', { awaySeconds: away }); } }; const onBlur = () => log('window-blur', { ts: Date.now() }); const onPaste = (e) => { e.preventDefault(); log('paste-blocked', {}); }; const onCopy = (e) => { if (!allowSelection) { e.preventDefault(); log('copy-blocked', {}); } }; const onContext = (e) => { e.preventDefault(); log('contextmenu-blocked', {}); }; const onSel = (e) => { if (!allowSelection) e.preventDefault(); }; const onFs = () => { const fs = !!(document.fullscreenElement || document.webkitFullscreenElement); setFullscreen(fs); if (!fs && active) log('fullscreen-exit', {}); }; document.addEventListener('visibilitychange', onVis); window.addEventListener('blur', onBlur); document.addEventListener('paste', onPaste, true); document.addEventListener('copy', onCopy, true); document.addEventListener('cut', onCopy, true); document.addEventListener('contextmenu', onContext); document.addEventListener('selectstart', onSel); document.addEventListener('fullscreenchange', onFs); document.addEventListener('webkitfullscreenchange', onFs); return () => { document.removeEventListener('visibilitychange', onVis); window.removeEventListener('blur', onBlur); document.removeEventListener('paste', onPaste, true); document.removeEventListener('copy', onCopy, true); document.removeEventListener('cut', onCopy, true); document.removeEventListener('contextmenu', onContext); document.removeEventListener('selectstart', onSel); document.removeEventListener('fullscreenchange', onFs); document.removeEventListener('webkitfullscreenchange', onFs); }; }, [active, allowSelection, log]); const requestFullscreen = () => { const el = document.documentElement; try { if (el.requestFullscreen) el.requestFullscreen(); else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen(); } catch {} }; return { strikes, events, fullscreen, requestFullscreen }; } // ───────────────────────────────────────────────────────────── // IntegrityBanner — sticky banner showing strike count + warning // ───────────────────────────────────────────────────────────── function IntegrityBanner({ strikes, threshold = 5, fullscreen, onRequestFullscreen, onShowEvents }) { const remaining = threshold - strikes; const warn = strikes > 0; const danger = remaining <= 1; return (
{strikes === 0 && Proctored mode · don't switch apps · don't paste from outside} {strikes > 0 && strikes < threshold && {strikes} of {threshold} integrity strikes used · {remaining} more before auto-submit} {strikes >= threshold && Auto-submitted due to repeated app-switching}
{!fullscreen && onRequestFullscreen && }
); } // ───────────────────────────────────────────────────────────── // IntegrityEventsSheet — show what we logged (transparency builds trust) // ───────────────────────────────────────────────────────────── function IntegrityEventsSheet({ open, onClose, events }) { const labels = { 'visibility-hidden': 'Switched away from test', 'visibility-return': 'Returned to test', 'window-blur': 'Browser lost focus', 'paste-blocked': 'Paste prevented', 'copy-blocked': 'Copy prevented', 'contextmenu-blocked': 'Right-click prevented', 'fullscreen-exit': 'Exited fullscreen' }; return (
Everything logged below is shared with your teacher only if there's an investigation. We never log keystrokes or content.
{events.length === 0 && } {events.slice().reverse().map((ev, i) => (
{labels[ev.kind] || ev.kind}
{new Date(ev.at).toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}{ev.detail?.awaySeconds ? ' · away ' + ev.detail.awaySeconds + 's' : ''}
))}
); } // ───────────────────────────────────────────────────────────── // useServerTimer — wraps a wall-clock timer with server-time reconciliation. // In real usage you'd hit /api/time on every poll; we model the client → server // drift correction so the test ends *when the server says it ends*, not when // the device's wall clock says. // ───────────────────────────────────────────────────────────── function useServerTimer({ serverStartedAt, durationSec, active = true, onExpire }) { const [now, setNow] = useStateI(Date.now()); const [drift, setDrift] = useStateI(0); const expired = useRefI(false); // Simulate periodic resync (in a real app, fetch /api/time) useEffectI(() => { if (!active) return; const sync = () => { // Modeled client/server drift: ±1.5s wobble const d = (Math.sin(Date.now() / 9000) * 1500) | 0; setDrift(d); }; sync(); const id = setInterval(sync, 30000); return () => clearInterval(id); }, [active]); useEffectI(() => { if (!active) return; const id = setInterval(() => setNow(Date.now()), 250); return () => clearInterval(id); }, [active]); const elapsed = Math.max(0, Math.floor((now - serverStartedAt + drift) / 1000)); const remaining = Math.max(0, durationSec - elapsed); useEffectI(() => { if (active && remaining === 0 && !expired.current) { expired.current = true; onExpire?.(); } }, [active, remaining, onExpire]); return { remaining, elapsed, drift }; } // ───────────────────────────────────────────────────────────── // TimerBar — visual countdown w/ resync ribbon // ───────────────────────────────────────────────────────────── function TimerBar({ remaining, total, drift }) { const pct = total > 0 ? Math.max(0, Math.min(100, (remaining / total) * 100)) : 0; const danger = remaining <= 60; const warn = remaining <= 300 && remaining > 60; const m = Math.floor(remaining / 60); const s = remaining % 60; return (
{danger ? 'Final minute' : 'Time remaining'}
{String(m).padStart(2, '0')}:{String(s).padStart(2, '0')}
Server-synced timer · drift {drift > 0 ? '+' : ''}{Math.round(drift / 100) / 10}s Auto-submits at 0:00
); } // ───────────────────────────────────────────────────────────── // useAttemptDraft — autosaves answers per question to IndexedDB. // Loads on mount; saves on every change (debounced). // On reconnect after offline, the dirty saves are pushed up. // ───────────────────────────────────────────────────────────── function useAttemptDraft(attemptId) { const key = `attempt-${attemptId}`; const [answers, setAnswers] = useStateI({}); const [savedAt, setSavedAt] = useStateI(null); const [hydrated, setHydrated] = useStateI(false); useEffectI(() => { let cancel = false; idbGet(key).then((v) => { if (cancel) return; if (v) setAnswers(v.answers || {}); setHydrated(true); }); return () => { cancel = true; }; }, [attemptId]); useEffectI(() => { if (!hydrated) return; const t = setTimeout(async () => { await idbSet(key, { answers, savedAt: Date.now() }); setSavedAt(Date.now()); }, 500); return () => clearTimeout(t); }, [answers, hydrated]); const setAnswer = (qid, val) => setAnswers((a) => ({ ...a, [qid]: val })); const clearDraft = async () => { await idbDel(key); setAnswers({}); setSavedAt(null); }; return { answers, setAnswer, savedAt, hydrated, clearDraft }; } // ───────────────────────────────────────────────────────────── // AutosaveChip — small "saved 2s ago" indicator // ───────────────────────────────────────────────────────────── function AutosaveChip({ savedAt, online }) { const [tick, setTick] = useStateI(0); useEffectI(() => { const id = setInterval(() => setTick((t) => t + 1), 5000); return () => clearInterval(id); }, []); // tick ensures rerender for "ago" label void tick; const ago = savedAt ? Math.max(1, Math.round((Date.now() - savedAt) / 1000)) : null; const lab = !online ? 'Offline · saved locally' : ago == null ? 'Not yet saved' : ago < 5 ? 'Saved' : ago < 60 ? `Saved ${ago}s ago` : `Saved ${Math.round(ago / 60)}m ago`; return (
); } // ───────────────────────────────────────────────────────────── // AssessmentRecoverySheet — shown on assessment intro when a draft exists // ───────────────────────────────────────────────────────────── function AssessmentRecoverySheet({ open, onClose, draft, onResume, onDiscard }) { if (!open || !draft) return null; const ago = Math.max(1, Math.round((Date.now() - (draft.savedAt || Date.now())) / 60000)); const answered = Object.keys(draft.answers || {}).length; return (
Saved draft found
{answered} question{answered !== 1 ? 's' : ''} answered · {ago} min ago
You disconnected before submitting. Your answers were saved locally. Pick where to go from here:
 ); } Object.assign(window, { useIntegrity, IntegrityBanner, IntegrityEventsSheet, useServerTimer, TimerBar, useAttemptDraft, AutosaveChip, AssessmentRecoverySheet });