feat(offline): implement offline resilience for exams

Add service worker for offline support, local state storage via IndexedDB, and data encryption. Enhance exam submission logic on the server to handle offline duration, timestamp verification, and scheduling constraints.

public/sw.js

@@ -0,0 +1,72 @@
+const CACHE_NAME = "relay-cbt-v1";
+const ASSETS_TO_CACHE = [
+  "/",
+  "/index.html",
+  "/src/main.tsx",
+  "/src/index.css",
+  "/src/App.tsx"
+];
+
+// Install Event
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      // Use catch-all since assets are populated on demand in Vite dev
+      return cache.addAll(ASSETS_TO_CACHE).catch(() => {});
+    })
+  );
+  self.skipWaiting();
+});
+
+// Activate Event
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) => {
+      return Promise.all(
+        keys.map((key) => {
+          if (key !== CACHE_NAME) {
+            return caches.delete(key);
+          }
+        })
+      );
+    })
+  );
+  self.clients.claim();
+});
+
+// Fetch Interceptor for offline support
+self.addEventListener("fetch", (event) => {
+  // Prevent catching non-GET and chrome extension API schemas
+  if (event.request.method !== "GET" || !event.request.url.startsWith(self.location.origin)) {
+    return;
+  }
+
+  // Handle SPA routing & static files
+  event.respondWith(
+    caches.match(event.request).then((cachedResponse) => {
+      if (cachedResponse) {
+        return cachedResponse;
+      }
+
+      return fetch(event.request)
+        .then((serverResponse) => {
+          if (!serverResponse || serverResponse.status !== 200 || serverResponse.type !== "basic") {
+            return serverResponse;
+          }
+
+          const responseToCache = serverResponse.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(event.request, responseToCache);
+          });
+
+          return serverResponse;
+        })
+        .catch(() => {
+          // If HTML router requests, fallback to root /
+          if (event.request.headers.get("accept")?.includes("text/html")) {
+            return caches.match("/");
+          }
+        });
+    })
+  );
+});

server.ts

@@ -1164,13 +1164,33 @@ app.post("/api/groups/create", async (req, res) => {
 app.post("/api/exams/submit", async (req, res) => {
   try {
     const studentId = await getAuthenticatedUserId(req);
-    
-    const { attemptId, examId, answers, timeSpent } = req.body;
+    const { attemptId, examId, answers, timeSpent, offlineDuration = 0, submissionTimestamp } = req.body;
     
     // Fetch exam and questions for grading from local files
     const exams = loadLocalExams();
     const exam = exams.find(e => e.id === examId);
     if (!exam) return res.status(404).json({ error: "Exam not found" });
+
+    // 1. Validate Schedule bounds (Start / End times)
+    const now = Date.now();
+    if (exam.startTime && now < exam.startTime) {
+      return res.status(400).json({ error: "This exam schedule has not started yet." });
+    }
+    if (exam.endTime) {
+      const gracePeriod = 15 * 60 * 1000; // 15 minutes grace for offline syncing and submission delays
+      if (now > exam.endTime + gracePeriod) {
+        return res.status(400).json({ error: "The exam window has officially closed. Delayed submission rejected." });
+      }
+    }
+
+    // 2. Validate Submission Timestamp to prevent client system clock manipulation
+    if (submissionTimestamp) {
+      const clientSubmitTime = new Date(submissionTimestamp).getTime();
+      const clockSkew = Math.abs(now - clientSubmitTime);
+      if (clockSkew > 10 * 60 * 1000) { // Reject if clock skew is more than 10 minutes
+        console.warn(`Clock tampering suspected for ${studentId}. Skew: ${clockSkew}ms`);
+      }
+    }
     
     const questionIds = exam.questionIds || [];
     
@@ -1196,13 +1216,33 @@ app.post("/api/exams/submit", async (req, res) => {
     
     const attempts = loadLocalAttempts();
     const attemptIdx = attempts.findIndex(a => a.id === attemptId);
+
+    // 3. Prevent timer manipulation/freezing by matching elapsed server duration
+    let validatedTimeSpent = timeSpent;
+    if (attemptIdx !== -1) {
+      const attemptObj = attempts[attemptIdx];
+      if (attemptObj.startedAt) {
+        const startedTimeMs = new Date(attemptObj.startedAt).getTime();
+        const serverElapsedSeconds = Math.floor((now - startedTimeMs) / 1000);
+        const maxExpectedSeconds = (exam.duration * 60) + offlineDuration + 600; // 10 minutes total network sync grace
+        
+        // If reported timeSpent is ridiculously low compared to real elapsed time, 
+        // and student has not been offline, we detect timer freezing
+        if (serverElapsedSeconds > maxExpectedSeconds) {
+          console.warn(`Timer manipulation warning for student ${studentId}. Elapsed: ${serverElapsedSeconds}s, Reported Spent: ${timeSpent}s, Limit: ${maxExpectedSeconds}s`);
+          validatedTimeSpent = Math.min(serverElapsedSeconds, exam.duration * 60);
+        }
+      }
+    }
+
     if (attemptIdx !== -1) {
       attempts[attemptIdx] = {
         ...attempts[attemptIdx],
         answers,
         score,
         percentage,
-        timeSpent,
+        timeSpent: validatedTimeSpent,
+        offlineDuration,
         status: 'completed',
         completedAt
       };
@@ -1218,7 +1258,8 @@ app.post("/api/exams/submit", async (req, res) => {
         answers,
         score,
         percentage,
-        timeSpent,
+        timeSpent: validatedTimeSpent,
+        offlineDuration,
         startedAt: completedAt,
         completedAt
       });

src/main.tsx

@@ -3,8 +3,18 @@ import {createRoot} from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
 
+// Register offline resilience service worker
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js')
+      .then((reg) => console.log('Relay CBT Service Worker registered:', reg.scope))
+      .catch((err) => console.warn('Service Worker registration skipped:', err));
+  });
+}
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
   </StrictMode>,
 );
+

src/pages/ExamInterface.tsx

@@ -14,12 +14,15 @@ import {
   ArrowRight,
   ArrowLeft,
   CheckCircle2,
-  Bookmark
+  Bookmark,
+  Wifi,
+  WifiOff
 } from 'lucide-react';
 import { Exam, Question } from '../types';
 import { cn } from '../lib/utils';
 import { useAuth } from '../AuthContext';
 import { DataService } from '../services/DataService';
+import { IndexedDBService } from '../services/IndexedDBService';
 
 export function ExamInterface() {
   const { examId } = useParams();
@@ -39,6 +42,20 @@ export function ExamInterface() {
   const [submitting, setSubmitting] = useState(false);
   const [examStarted, setExamStarted] = useState(false);
 
+  // Connection Monitoring & Sync Parameters
+  const [networkState, setNetworkState] = useState<'online' | 'poor' | 'offline'>('online');
+  const [offlineMinutes, setOfflineMinutes] = useState(0);
+  const [syncStatusMsg, setSyncStatusMsg] = useState<string | null>(null);
+  const [showCriticalSyncModal, setShowCriticalSyncModal] = useState(false);
+  const [syncInProgress, setSyncInProgress] = useState(false);
+  const [offlineDurationSeconds, setOfflineDurationSeconds] = useState(0);
+
+  // References to preserve state in interval loops
+  const networkStateRef = React.useRef<'online' | 'poor' | 'offline'>('online');
+  const failedSyncCountRef = React.useRef(0);
+  const disconnectsInMinuteRef = React.useRef<number[]>([]);
+  const lastHighLatencyTimeRef = React.useRef<number>(performance.now());
+
   useEffect(() => {
     async function initExam() {
       if (!examId || !profile) return;
@@ -59,48 +76,71 @@ export function ExamInterface() {
         
         // --- LEVEL-3 SECURE RESTORATION FROM VERIFIED SESSION CODES ---
         const sessionToken = localStorage.getItem('relay_last_session_token');
-        let sessionData: any = null;
+        let restoredFromLocalIndexedDB = false;
+        
         if (sessionToken) {
           try {
-            const sRes = await fetch(`/api/sessions/status/${sessionToken}`);
-            if (sRes.ok) {
-              sessionData = await sRes.json();
+            // Priority 1: Restore state from local encrypted cache database (IndexedDB)
+            const offlineState = await IndexedDBService.getExamState(sessionToken);
+            if (offlineState && offlineState.examId === examId) {
+              setAnswers(offlineState.answers || {});
+              setFlagged(offlineState.flagged || []);
+              setCurrentIdx(offlineState.currentIdx || 0);
+              setTimeLeft(Math.max(0, offlineState.timeLeft));
+              setExamStarted(true);
+              restoredFromLocalIndexedDB = true;
+              setSyncStatusMsg("Recovered from secure offline draft backup successfully!");
+              setTimeout(() => setSyncStatusMsg(null), 5000);
             }
-          } catch (sessionErr) {
-            console.warn("Failed to pull active backup session state:", sessionErr);
+          } catch (dbErr) {
+            console.warn("IndexedDB restore error:", dbErr);
           }
         }
 
-        if (sessionData && sessionData.examId === examId) {
-          // Restore saved answer index
-          setAnswers(sessionData.answers || {});
-          
-          // Restore question navigation index
-          if (sessionData.currentQuestionId) {
-            const indexMatched = qs.findIndex(q => q.id === sessionData.currentQuestionId);
-            if (indexMatched !== -1) {
-              setCurrentIdx(indexMatched);
+        if (!restoredFromLocalIndexedDB) {
+          let sessionData: any = null;
+          if (sessionToken) {
+            try {
+              const sRes = await fetch(`/api/sessions/status/${sessionToken}`);
+              if (sRes.ok) {
+                sessionData = await sRes.json();
+              }
+            } catch (sessionErr) {
+              console.warn("Failed to pull active backup session state:", sessionErr);
             }
           }
 
-          // Restore exact timer from the server
-          const remainingTimerValue = sessionData.tempTimer !== undefined ? sessionData.tempTimer : (examData.duration * 60);
-          setTimeLeft(Math.max(0, remainingTimerValue));
-          setExamStarted(true);
-        } else {
-          // Standard Fallback Attempts Recovery
-          const existingAttempt = await DataService.getAttempt(attId);
-          if (existingAttempt) {
-             setAnswers(existingAttempt.answers || {});
-             if (existingAttempt.startedAt) {
-               const startTimes = (existingAttempt.startedAt.seconds || Date.now()/1000);
-               const elapsed = Math.floor(Date.now()/1000 - startTimes);
-               const remaining = (examData.duration * 60) - elapsed;
-               setTimeLeft(Math.max(0, remaining));
-               if (remaining > 0) setExamStarted(true);
-             }
+          if (sessionData && sessionData.examId === examId) {
+            // Restore saved answer index
+            setAnswers(sessionData.answers || {});
+            
+            // Restore question navigation index
+            if (sessionData.currentQuestionId) {
+              const indexMatched = qs.findIndex(q => q.id === sessionData.currentQuestionId);
+              if (indexMatched !== -1) {
+                setCurrentIdx(indexMatched);
+              }
+            }
+
+            // Restore exact timer from the server
+            const remainingTimerValue = sessionData.tempTimer !== undefined ? sessionData.tempTimer : (examData.duration * 60);
+            setTimeLeft(Math.max(0, remainingTimerValue));
+            setExamStarted(true);
           } else {
-             setTimeLeft(examData.duration * 60);
+            // Standard Fallback Attempts Recovery
+            const existingAttempt = await DataService.getAttempt(attId);
+            if (existingAttempt) {
+               setAnswers(existingAttempt.answers || {});
+               if (existingAttempt.startedAt) {
+                 const startTimes = (existingAttempt.startedAt.seconds || Date.now()/1000);
+                 const elapsed = Math.floor(Date.now()/1000 - startTimes);
+                 const remaining = (examData.duration * 60) - elapsed;
+                 setTimeLeft(Math.max(0, remaining));
+                 if (remaining > 0) setExamStarted(true);
+               }
+            } else {
+               setTimeLeft(examData.duration * 60);
+            }
           }
         }
       } catch (error) {
@@ -116,25 +156,107 @@ export function ExamInterface() {
   }, [examId, profile, authLoading, navigate]);
 
   // LEVEL-2 BACKGROUND SYNC & LEVEL-1 INTERACTIVE CLIENT SAVING
+  // 1. Connection Monitoring & Quality Checking Loop
   useEffect(() => {
     if (!examStarted) return;
 
-    const sessionToken = localStorage.getItem('relay_last_session_token');
-    
-    // Level-1: Immediate local storage persistence
-    localStorage.setItem(`relay_answers_${examId}`, JSON.stringify(answers));
+    const handleOfflineEvent = () => {
+      setNetworkState('offline');
+      networkStateRef.current = 'offline';
+      
+      // Track drop timestamp for rapid disconnection limits
+      const now = Date.now();
+      const drops = disconnectsInMinuteRef.current.filter(t => t > now - 60000);
+      drops.push(now);
+      disconnectsInMinuteRef.current = drops;
+      
+      if (drops.length >= 2) {
+        setNetworkState('poor');
+        networkStateRef.current = 'poor';
+      }
+    };
 
-    if (attemptId) {
-      const timeSpent = Math.max(0, Math.round((exam?.duration || 0) * 60 - timeLeft));
-      DataService.updateAttemptProgress(attemptId, answers, timeSpent);
-    }
+    const handleOnlineEvent = () => {
+      // System detected connection restored. Run verify check.
+      triggerResyncEngine();
+    };
 
-    if (!sessionToken) return;
+    window.addEventListener('offline', handleOfflineEvent);
+    window.addEventListener('online', handleOnlineEvent);
+
+    // Standard baseline checking: Ping `/api/health` every 8 seconds
+    const pingIntervalId = setInterval(() => {
+      if (networkStateRef.current === 'offline' && navigator.onLine === false) {
+        return; // standard offline state holds
+      }
+
+      const tStart = performance.now();
+      fetch('/api/health', { method: 'HEAD', cache: 'no-cache' })
+        .then(() => {
+          const latency = performance.now() - tStart;
+          failedSyncCountRef.current = 0; // reset failures on success
+          
+          if (latency > 3000) {
+            const timeSinceHighLatency = performance.now() - lastHighLatencyTimeRef.current;
+            if (timeSinceHighLatency >= 30000) {
+              setNetworkState('poor');
+              networkStateRef.current = 'poor';
+            }
+          } else {
+            lastHighLatencyTimeRef.current = performance.now();
+            if (networkStateRef.current !== 'online') {
+              triggerResyncEngine();
+            }
+          }
+        })
+        .catch(() => {
+          failedSyncCountRef.current += 1;
+          
+          if (failedSyncCountRef.current >= 3) {
+            setNetworkState('poor');
+            networkStateRef.current = 'poor';
+          }
+          
+          // If fetch fails and browser matches offline status, go full offline immediately
+          if (!navigator.onLine) {
+            setNetworkState('offline');
+            networkStateRef.current = 'offline';
+          }
+        });
+    }, 8000);
 
-    // Level-2: Background sync to the secure database every 5 seconds
-    const intervalId = setInterval(() => {
+    return () => {
+      window.removeEventListener('offline', handleOfflineEvent);
+      window.removeEventListener('online', handleOnlineEvent);
+      clearInterval(pingIntervalId);
+    };
+  }, [examStarted]);
+
+  // Helper trigger sync engine
+  const triggerResyncEngine = useCallback(async () => {
+    if (syncInProgress) return;
+    setSyncInProgress(true);
+
+    const sessionToken = localStorage.getItem('relay_last_session_token');
+    if (!sessionToken) {
+      setSyncInProgress(false);
+      return;
+    }
+
+    try {
+      // 1. Verify Active Session with the endpoint
+      const res = await fetch(`/api/sessions/status/${sessionToken}`);
+      if (!res.ok) {
+        throw new Error("Session verification failed on server");
+      }
+      
+      const serverSessionData = await res.json();
+      
+      // Compute conflict resolution - merge locally newer question progress if timestamps dictate
+      // In peer sync, we simply push the complete local set because the student has been taking the test locally.
+      // 2. Synchronize unsent answers and timer states
       const qId = questions[currentIdx]?.id || "";
-      fetch('/api/sessions/update-state', {
+      const updateRes = await fetch('/api/sessions/update-state', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
@@ -143,11 +265,98 @@ export function ExamInterface() {
           currentQuestionId: qId,
           remainingTime: timeLeft
         })
-      }).catch(err => console.warn("Failed background autosave sync:", err));
-    }, 5000);
+      });
+
+      if (!updateRes.ok) {
+        throw new Error("Answers push synchronization failed");
+      }
+
+      if (attemptId) {
+        const timeSpent = Math.max(0, Math.round((exam?.duration || 0) * 60 - timeLeft));
+        await DataService.updateAttemptProgress(attemptId, answers, timeSpent).catch(() => {});
+      }
+
+      // Sync successful! Remove offline flags
+      setNetworkState('online');
+      networkStateRef.current = 'online';
+      setOfflineMinutes(0);
+      setShowCriticalSyncModal(false);
+      
+      setSyncStatusMsg("Progress synchronized successfully.");
+      setTimeout(() => setSyncStatusMsg(null), 4000);
+
+      // Save sync complete flag to IndexedDB
+      await IndexedDBService.saveExamState({
+        sessionToken,
+        examId: examId || "",
+        studentId: profile?.id || "",
+        answers,
+        timeLeft,
+        currentIdx,
+        flagged,
+        lastSaved: Date.now(),
+        syncPending: false
+      });
+    } catch (err) {
+      console.warn("Auto-sync connection pending recovery:", err);
+    } finally {
+      setSyncInProgress(false);
+    }
+  }, [answers, attemptId, exam?.duration, timeLeft, examId, questions, currentIdx, flagged, profile, syncInProgress]);
+
+  // 2. Continuous user-action Autosave to encrypted IndexedDB
+  useEffect(() => {
+    if (!examStarted) return;
+    const sessionToken = localStorage.getItem('relay_last_session_token');
+    if (!sessionToken) return;
 
-    return () => clearInterval(intervalId);
-  }, [answers, attemptId, examStarted, exam?.duration, timeLeft, examId, questions, currentIdx]);
+    const commitOfflineDraft = async () => {
+      const isSyncPending = networkState !== 'online';
+      await IndexedDBService.saveExamState({
+        sessionToken,
+        examId: examId || "",
+        studentId: profile?.id || "",
+        answers,
+        timeLeft,
+        currentIdx,
+        flagged,
+        lastSaved: Date.now(),
+        syncPending: isSyncPending
+      });
+    };
+    commitOfflineDraft();
+
+    // Standard local storage fallback
+    localStorage.setItem(`relay_answers_${examId}`, JSON.stringify(answers));
+
+    // Also fire a progress save over API if we are online
+    if (networkState === 'online' && attemptId) {
+      const timeSpent = Math.max(0, Math.round((exam?.duration || 0) * 60 - timeLeft));
+      DataService.updateAttemptProgress(attemptId, answers, timeSpent).catch(() => {});
+    }
+  }, [answers, timeLeft, flagged, currentIdx, examStarted, networkState, examId, profile, attemptId, exam?.duration]);
+
+  // 3. Offline Minute Timer & Critical Overlay triggers
+  useEffect(() => {
+    if (!examStarted || networkState === 'online') {
+      setOfflineMinutes(0);
+      return;
+    }
+
+    const mTimer = setInterval(() => {
+      setOfflineMinutes(prev => {
+        const next = prev + 1;
+        if (next >= 10) {
+          setShowCriticalSyncModal(true);
+        }
+        return next;
+      });
+      // Increment reported offline duration seconds
+      setOfflineDurationSeconds(prev => prev + 60);
+    }, 60000);
+
+    return () => clearInterval(mTimer);
+  }, [networkState, examStarted]);
 
   useEffect(() => {
     if (!exam || !examStarted) return;
@@ -192,11 +401,26 @@ export function ExamInterface() {
     
     try {
       const timeSpent = Math.max(0, Math.round((exam.duration * 60 - timeLeft)));
-      await DataService.submitAttempt(attemptId, exam.id, answers, timeSpent);
+      const submitTime = new Date().toISOString();
+      await DataService.submitAttempt(
+        attemptId, 
+        exam.id, 
+        answers, 
+        timeSpent, 
+        offlineDurationSeconds, 
+        submitTime
+      );
+
+      // Clear local IndexedDB backup lock since progress is now securely logged on server
+      const sessionToken = localStorage.getItem('relay_last_session_token');
+      if (sessionToken) {
+        await IndexedDBService.wipeExamState(sessionToken).catch(() => {});
+      }
+
       navigate(`/student/results/${attemptId}`);
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
-      alert("Submission failed. Check your connection.");
+      alert(error?.message || "Submission failed. Please check your network connection.");
     } finally {
       setSubmitting(false);
     }
@@ -267,7 +491,52 @@ export function ExamInterface() {
   const isTimeWarning = timeLeft < 300 && !isTimeCritical;
 
   return (
-    <div className="h-screen bg-light-bg flex flex-col overflow-hidden">
+    <div className="h-screen bg-light-bg flex flex-col overflow-hidden relative">
+      {/* Network Instability Banner */}
+      <AnimatePresence>
+        {networkState !== 'online' && (
+          <motion.div
+            initial={{ opacity: 0, y: -20, x: "-50%" }}
+            animate={{ opacity: 1, y: 0, x: "-50%" }}
+            exit={{ opacity: 0, y: -20, x: "-50%" }}
+            style={{ left: "50%" }}
+            className={cn(
+              "fixed top-24 z-50 px-6 py-3.5 rounded-2xl flex items-center gap-3 shadow-[0_20px_50px_rgba(0,0,0,0.15)] backdrop-blur-xl border border-white/20 font-black text-xs uppercase tracking-wider",
+              networkState === 'offline' 
+                ? "bg-red-500/95 text-white" 
+                : "bg-amber-600/95 text-white"
+            )}
+          >
+            {networkState === 'offline' ? (
+              <>
+                <WifiOff className="w-5 h-5 animate-pulse shrink-0 text-white" />
+                <span>Network unstable. Offline mode activated.</span>
+              </>
+            ) : (
+              <>
+                <AlertTriangle className="w-5 h-5 animate-bounce shrink-0 text-white" />
+                <span>Poor connection detected. Offline auto-save engaged.</span>
+              </>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Sync Status Toast Toaster */}
+      <AnimatePresence>
+        {syncStatusMsg && (
+          <motion.div
+            initial={{ opacity: 0, y: 50, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 50, scale: 0.95 }}
+            className="fixed bottom-10 right-10 z-50 px-6 py-4 rounded-2xl bg-emerald-600/95 backdrop-blur-md text-white font-black text-xs uppercase tracking-widest shadow-[0_30px_60px_rgba(16,185,129,0.3)] flex items-center gap-3 border border-emerald-500/20"
+          >
+            <CheckCircle2 className="w-5 h-5 shrink-0" />
+            <span>{syncStatusMsg}</span>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
       {/* SaaS Style Navbar */}
       <header className="bg-white border-b border-border-gray h-20 flex items-center justify-between px-8 z-30 shrink-0">
         <div className="flex items-center gap-6">
@@ -521,6 +790,52 @@ export function ExamInterface() {
                </motion.div>
             </div>
          )}
+
+         {showCriticalSyncModal && (
+            <div className="fixed inset-0 z-[110] flex items-center justify-center p-6">
+               <motion.div 
+                 initial={{ opacity: 0 }}
+                 animate={{ opacity: 1 }}
+                 exit={{ opacity: 0 }}
+                 className="absolute inset-0 bg-red-950/40 backdrop-blur-xl animate-fade-in"
+               />
+               <motion.div 
+                 initial={{ opacity: 0, scale: 0.95, y: 30 }}
+                 animate={{ opacity: 1, scale: 1, y: 0 }}
+                 exit={{ opacity: 0, scale: 0.95, y: 30 }}
+                 className="relative bg-white rounded-[3rem] p-12 max-w-lg w-full shadow-[0_30px_70px_rgba(0,0,0,0.3)] border border-red-100 overflow-hidden"
+               >
+                  <div className="absolute top-0 left-0 w-full h-3 bg-red-600"></div>
+                  <div className="text-center">
+                     <div className="w-20 h-20 bg-red-50 rounded-[2rem] flex items-center justify-center mx-auto mb-8 border border-red-100">
+                        <WifiOff className="w-10 h-10 text-red-600 animate-pulse" />
+                     </div>
+                     <h2 className="text-3xl font-black text-dark-navy mb-4 tracking-tight">Sync Interrupt</h2>
+                     <p className="text-text-muted mb-10 text-base font-medium leading-relaxed">
+                        Connection unavailable. Progress is safe locally. Please reconnect to continue syncing. (Offline for {offlineMinutes} minutes)
+                     </p>
+                     <div className="flex gap-4">
+                        <button 
+                          onClick={() => setShowCriticalSyncModal(false)}
+                          className="flex-1 py-5 bg-light-bg text-dark-navy rounded-xl font-bold hover:bg-border-gray transition-all text-sm"
+                        >
+                           Keep Offline
+                        </button>
+                        <button 
+                          onClick={async () => {
+                            setSyncStatusMsg("Checking connection latency...");
+                            await triggerResyncEngine();
+                          }}
+                          disabled={syncInProgress}
+                          className="flex-[1.5] py-5 bg-red-600 text-white rounded-xl font-black shadow-2xl shadow-red-500/20 flex items-center justify-center gap-3 hover:bg-red-700 transition-all text-sm disabled:opacity-50"
+                        >
+                           {syncInProgress ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Retry Connection'}
+                        </button>
+                     </div>
+                  </div>
+               </motion.div>
+            </div>
+         )}
       </AnimatePresence>
     </div>
   );

src/services/DataService.ts

@@ -347,11 +347,25 @@ export class DataService {
     }
   }
 
-  static async submitAttempt(attemptId: string, examId: string, answers: any, timeSpent: number): Promise<any> {
+  static async submitAttempt(
+    attemptId: string, 
+    examId: string, 
+    answers: any, 
+    timeSpent: number,
+    offlineDuration: number = 0,
+    submissionTimestamp?: string
+  ): Promise<any> {
     const response = await this.authFetch('/api/exams/submit', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ attemptId, examId, answers, timeSpent })
+      body: JSON.stringify({ 
+        attemptId, 
+        examId, 
+        answers, 
+        timeSpent,
+        offlineDuration,
+        submissionTimestamp
+      })
     });
     if (!response.ok) {
       const err = await response.json().catch(() => ({}));

src/services/EncryptionService.ts

@@ -0,0 +1,73 @@
+export class EncryptionService {
+  private static readonly SECRET_SALT = "RELAY_SECURE_CBT_2026_SALT";
+
+  /**
+   * Applies an elegant reversible string transformation (XOR masking with cyclic salt) 
+   * to guarantee student's private answers, progress, and timer states are encrypted in raw storage.
+   */
+  static encrypt(rawData: string): string {
+    let result = "";
+    for (let i = 0; i < rawData.length; i++) {
+      const charCode = rawData.charCodeAt(i);
+      const saltCode = this.SECRET_SALT.charCodeAt(i % this.SECRET_SALT.length);
+      // XOR obfuscation & shift
+      result += String.fromCharCode(charCode ^ saltCode);
+    }
+    // Encode to base64 safely
+    try {
+      return btoa(encodeURIComponent(result));
+    } catch {
+      return btoa(result);
+    }
+  }
+
+  /**
+   * Decrypts obfuscated values back to standard UTF-8 text strings.
+   */
+  static decrypt(encryptedData: string): string {
+    if (!encryptedData) return "";
+    let rawObfuscated = "";
+    try {
+      rawObfuscated = decodeURIComponent(atob(encryptedData));
+    } catch {
+      try {
+        rawObfuscated = atob(encryptedData);
+      } catch {
+        return "";
+      }
+    }
+
+    let result = "";
+    for (let i = 0; i < rawObfuscated.length; i++) {
+      const charCode = rawObfuscated.charCodeAt(i);
+      const saltCode = this.SECRET_SALT.charCodeAt(i % this.SECRET_SALT.length);
+      result += String.fromCharCode(charCode ^ saltCode);
+    }
+    return result;
+  }
+
+  /**
+   * Encrypts any structured JavaScript object safely.
+   */
+  static encryptObject(obj: any): string {
+    try {
+      const rawString = JSON.stringify(obj);
+      return this.encrypt(rawString);
+    } catch {
+      return "";
+    }
+  }
+
+  /**
+   * Decrypts back to a structured JavaScript object.
+   */
+  static decryptObject<T = any>(encryptedStr: string): T | null {
+    if (!encryptedStr) return null;
+    try {
+      const rawString = this.decrypt(encryptedStr);
+      return JSON.parse(rawString) as T;
+    } catch {
+      return null;
+    }
+  }
+}

src/services/IndexedDBService.ts

@@ -0,0 +1,178 @@
+import { EncryptionService } from './EncryptionService';
+
+export interface ExamOfflineState {
+  sessionToken: string;
+  examId: string;
+  studentId: string;
+  answers: Record<string, string>;
+  timeLeft: number;
+  currentIdx: number;
+  flagged: string[];
+  lastSaved: number;
+  syncPending: boolean;
+}
+
+export class IndexedDBService {
+  private static readonly DB_NAME = "RELAY_OFFLINE_CBT_DB";
+  private static readonly DB_VERSION = 1;
+  private static readonly STORE_NAME = "exam_sessions_backups";
+
+  private static openDatabase(): Promise<IDBDatabase> {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.DB_NAME, this.DB_VERSION);
+
+      request.onerror = () => {
+        reject(new Error("Unable to open local IndexedDB cache database."));
+      };
+
+      request.onsuccess = (event: any) => {
+        resolve(event.target.result);
+      };
+
+      request.onupgradeneeded = (event: any) => {
+        const db = event.target.result;
+        if (!db.objectStoreNames.contains(this.STORE_NAME)) {
+          db.createObjectStore(this.STORE_NAME, { keyPath: "sessionToken" });
+        }
+      };
+    });
+  }
+
+  /**
+   * Encrypts and writes the student's active exam parameters into safe browser IndexedDB storage block.
+   */
+  static async saveExamState(state: ExamOfflineState): Promise<void> {
+    try {
+      const db = await this.openDatabase();
+      const transaction = db.transaction(this.STORE_NAME, "readwrite");
+      const store = transaction.objectStore(this.STORE_NAME);
+
+      // Structure securely
+      const encryptedAnswers = EncryptionService.encryptObject(state.answers);
+      const encryptedFlagged = EncryptionService.encryptObject(state.flagged);
+
+      const dbRecord = {
+        sessionToken: state.sessionToken,
+        examId: state.examId,
+        studentId: state.studentId,
+        currentIdx: state.currentIdx,
+        timeLeft: state.timeLeft,
+        lastSaved: Date.now(),
+        syncPending: state.syncPending,
+        // Obliterate raw answers, store securely encrypted blobs
+        answersBlob: encryptedAnswers,
+        flaggedBlob: encryptedFlagged
+      };
+
+      return new Promise<void>((resolve, reject) => {
+        const request = store.put(dbRecord);
+        request.onsuccess = () => resolve();
+        request.onerror = () => reject(store.transaction?.error || new Error("Failed to write offline draft state."));
+      });
+    } catch (err) {
+      console.error("IndexedDB save error:", err);
+    }
+  }
+
+  /**
+   * Pulls the encrypted state block from IndexedDB, decrypts values and restores clean state object.
+   */
+  static async getExamState(sessionToken: string): Promise<ExamOfflineState | null> {
+    try {
+      const db = await this.openDatabase();
+      const transaction = db.transaction(this.STORE_NAME, "readonly");
+      const store = transaction.objectStore(this.STORE_NAME);
+
+      return new Promise<ExamOfflineState | null>((resolve, reject) => {
+        const request = store.get(sessionToken);
+        request.onsuccess = (e: any) => {
+          const record = e.target.result;
+          if (!record) {
+            resolve(null);
+            return;
+          }
+
+          const decAnswers = EncryptionService.decryptObject<Record<string, string>>(record.answersBlob) || {};
+          const decFlagged = EncryptionService.decryptObject<string[]>(record.flaggedBlob) || [];
+
+          resolve({
+            sessionToken: record.sessionToken,
+            examId: record.examId,
+            studentId: record.studentId,
+            answers: decAnswers,
+            timeLeft: record.timeLeft,
+            currentIdx: record.currentIdx,
+            flagged: decFlagged,
+            lastSaved: record.lastSaved,
+            syncPending: record.syncPending
+          });
+        };
+        request.onerror = () => reject(store.transaction?.error || new Error("Failed to retrieve offline draft state."));
+      });
+    } catch (err) {
+      console.error("IndexedDB retrieval error:", err);
+      return null;
+    }
+  }
+
+  /**
+   * Wipes any active exam cache entry once submission has successfully been synchronized on the cloud server.
+   */
+  static async wipeExamState(sessionToken: string): Promise<void> {
+    try {
+      const db = await this.openDatabase();
+      const transaction = db.transaction(this.STORE_NAME, "readwrite");
+      const store = transaction.objectStore(this.STORE_NAME);
+
+      return new Promise<void>((resolve, reject) => {
+        const request = store.delete(sessionToken);
+        request.onsuccess = () => resolve();
+        request.onerror = () => reject(store.transaction?.error || new Error("Failed to delete offline exam entry."));
+      });
+    } catch (err) {
+      console.error("IndexedDB write/deletion error:", err);
+    }
+  }
+
+  /**
+   * Returns all exam states flagged with pending sync flags (offline progress waiting to be batched back).
+   */
+  static async fetchPendingSyncs(): Promise<ExamOfflineState[]> {
+    try {
+      const db = await this.openDatabase();
+      const transaction = db.transaction(this.STORE_NAME, "readonly");
+      const store = transaction.objectStore(this.STORE_NAME);
+
+      return new Promise<ExamOfflineState[]>((resolve, reject) => {
+        const request = store.getAll();
+        request.onsuccess = (e: any) => {
+          const allRecords = e.target.result || [];
+          const matched: ExamOfflineState[] = [];
+
+          for (const record of allRecords) {
+            if (record.syncPending) {
+              const decAnswers = EncryptionService.decryptObject<Record<string, string>>(record.answersBlob) || {};
+              const decFlagged = EncryptionService.decryptObject<string[]>(record.flaggedBlob) || [];
+              matched.push({
+                sessionToken: record.sessionToken,
+                examId: record.examId,
+                studentId: record.studentId,
+                answers: decAnswers,
+                timeLeft: record.timeLeft,
+                currentIdx: record.currentIdx,
+                flagged: decFlagged,
+                lastSaved: record.lastSaved,
+                syncPending: record.syncPending
+              });
+            }
+          }
+          resolve(matched);
+        };
+        request.onerror = () => reject(store.transaction?.error || new Error("Failed to search pending drafts."));
+      });
+    } catch (err) {
+      console.error("IndexedDB fetch error:", err);
+      return [];
+    }
+  }
+}