From a771221fed3162a486759afd0203c29dbff28c78 Mon Sep 17 00:00:00 2001
From: Roshan-B87 <rahul7890b51@gmail.com>
Date: Mon, 27 Jul 2026 12:48:57 +0530
Subject: [PATCH] accessibility(quiz): add ARIA roles and labels to math and
 chemistry quizzes

---
 chemistryquiz/atomic_structurequiz.html | 130 ++++++++++---------
 chemistryquiz/chemical_bondingquiz.html | 130 ++++++++++---------
 chemistryquiz/equilibriumquiz.html      | 128 ++++++++++---------
 chemistryquiz/thermoquiz.html           | 128 ++++++++++---------
 mathsquiz/calculusquiz.html             | 162 +++++++++++++-----------
 mathsquiz/geometryquiz.html             | 162 +++++++++++++-----------
 mathsquiz/probabilityquiz.html          | 162 +++++++++++++-----------
 mathsquiz/vectorquiz.html               | 162 +++++++++++++-----------
 8 files changed, 622 insertions(+), 542 deletions(-)
diff --git a/chemistryquiz/atomic_structurequiz.html b/chemistryquiz/atomic_structurequiz.html
index d964e4e..23465bb 100644
--- a/chemistryquiz/atomic_structurequiz.html
+++ b/chemistryquiz/atomic_structurequiz.html
@@ -1,61 +1,71 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Physics Motion Quiz - LearnSphere</title>
-    <link rel="stylesheet" href="../variables.css">
-    <script src="../theme.js"></script>
-  <link rel="stylesheet" href="atomic_structurequiz.css">
-</head>
-
-<body>
-
-  <div class="container">
-    <h1 class="title">Atomic Structure & Periodic Trends</h1>
-    <p class="description">Test your understanding of Atomic Structure & Periodic Trends concepts!</p>
-
-    <!-- Progress Bar -->
-    <div class="progress-container">
-      <div id="progress-bar"></div>
-    </div>
-
-    <div id="quiz-box">
-      <h2 id="question">Loading...</h2>
-      <div id="options" class="options-grid"></div>
-      <button id="prev-btn" onclick="prevQuestion()" disabled>Previous</button>
-      <button id="next-btn" onclick="nextQuestion()" disabled>Next</button>
-      <button id="submit-btn" class="hidden" onclick="confirmSubmit()">Submit</button>
-    </div>
-
-    <!-- Warning Popup -->
-    <div id="popup" class="popup hidden">
-      <h3>⚠️ Please select an answer before proceeding!</h3>
-      <button onclick="closePopup()">OK</button>
-    </div>
-
-    <!-- Confirm Submit Popup -->
-    <div id="confirm-popup" class="popup hidden">
-      <h3>Are you sure you want to submit?</h3>
-      <button onclick="submitQuiz()">Yes, Submit</button>
-      <button onclick="closeConfirmPopup()">No, Resume</button>
-    </div>
-
-    <!-- Result Box -->
-    <div id="result-box" class="hidden">
-      <h2>🎉 Quiz Completed!</h2>
-      <p id="score"></p>
-      <button onclick="restartQuiz()">Try Again 🔄</button>
-      <button class="motion"><a href="..\atomic_structure\atomic_structure.html">⬅ Back to Previous Page</a></button>
-    </div>
-  </div>
-
-  <script src="../offlineSync.js"></script>
-  <script src="../quizProgress.js"></script>
-  <script src="../badges.js"></script>
-  <script src="atomic_structurequiz.js"></script>
-  <script src="../quizAssignmentHelper.js"></script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
+  <link rel="stylesheet" href="atomic_structurequiz.css">
+</head>
+
+<body>
+
+  <a class="skip-link" href="#content">Skip to content</a>
+
+  <div class="container" id="content">
+    <h1 class="title">Atomic Structure & Periodic Trends</h1>
+    <p class="description">Test your understanding of Atomic Structure & Periodic Trends concepts!</p>
+
+    <!-- Progress Bar -->
+    <div class="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+
+    <main id="quiz-box">
+      <h2 id="question">Loading...</h2>
+      <div id="options" class="options-grid" role="radiogroup" aria-labelledby="question"></div>
+
+      <div class="button-group" role="group" aria-label="Quiz navigation">
+        <button id="prev-btn" onclick="prevQuestion()" disabled aria-label="Previous question">Previous</button>
+        <button id="next-btn" onclick="nextQuestion()" disabled aria-label="Next question">Next</button>
+        <button id="submit-btn" class="hidden" onclick="confirmSubmit()" aria-label="Submit quiz">Submit</button>
+      </div>
+
+      <p id="sr-status" class="sr-only" aria-live="polite" aria-atomic="true"></p>
+    </main>
+
+    <!-- Warning Popup -->
+    <div id="popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="popup-title">
+      <h3 id="popup-title">⚠️ Please select an answer before proceeding!</h3>
+      <button id="popup-ok" onclick="closePopup()" aria-label="Close warning">OK</button>
+    </div>
+
+    <!-- Confirm Submit Popup -->
+    <div id="confirm-popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="confirm-popup-title">
+      <h3 id="confirm-popup-title">Are you sure you want to submit?</h3>
+      <button id="confirm-yes" onclick="submitQuiz()" aria-label="Confirm submit">Yes, Submit</button>
+      <button id="confirm-no" onclick="closeConfirmPopup()" aria-label="Cancel submit">No, Resume</button>
+    </div>
+
+    <!-- Result Box -->
+    <section id="result-box" class="hidden" aria-labelledby="result-title">
+      <h2 id="result-title" tabindex="-1">🎉 Quiz Completed!</h2>
+      <p id="score"></p>
+      <div class="button-group" role="group" aria-label="Quiz results actions">
+        <button onclick="restartQuiz()" aria-label="Restart quiz">Try Again 🔄</button>
+        <button class="motion" onclick="window.location.href='../atomic_structure/atomic_structure.html'" aria-label="Back to previous page">⬅ Back</button>
+      </div>
+    </section>
+  </div>
+
+  <script src="../offlineSync.js"></script>
+  <script src="../quizProgress.js"></script>
+  <script src="../badges.js"></script>
+  <script src="atomic_structurequiz.js"></script>
+  <script src="../quizAssignmentHelper.js"></script>
+  <script src="../accessibility.js" defer></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/chemistryquiz/chemical_bondingquiz.html b/chemistryquiz/chemical_bondingquiz.html
index 579422a..42565fc 100644
--- a/chemistryquiz/chemical_bondingquiz.html
+++ b/chemistryquiz/chemical_bondingquiz.html
@@ -1,61 +1,71 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Physics Motion Quiz - LearnSphere</title>
-    <link rel="stylesheet" href="../variables.css">
-    <script src="../theme.js"></script>
-  <link rel="stylesheet" href="chemical_bondingquiz.css">
-</head>
-
-<body>
-
-  <div class="container">
-    <h1 class="title">Chemical Bonding & Molecular Geometry</h1>
-    <p class="description">Test your understanding of Chemical Bonding & Molecular Geometry concepts!</p>
-
-    <!-- Progress Bar -->
-    <div class="progress-container">
-      <div id="progress-bar"></div>
-    </div>
-
-    <div id="quiz-box">
-      <h2 id="question">Loading...</h2>
-      <div id="options" class="options-grid"></div>
-      <button id="prev-btn" onclick="prevQuestion()" disabled>Previous</button>
-      <button id="next-btn" onclick="nextQuestion()" disabled>Next</button>
-      <button id="submit-btn" class="hidden" onclick="confirmSubmit()">Submit</button>
-    </div>
-
-    <!-- Warning Popup -->
-    <div id="popup" class="popup hidden">
-      <h3>⚠️ Please select an answer before proceeding!</h3>
-      <button onclick="closePopup()">OK</button>
-    </div>
-
-    <!-- Confirm Submit Popup -->
-    <div id="confirm-popup" class="popup hidden">
-      <h3>Are you sure you want to submit?</h3>
-      <button onclick="submitQuiz()">Yes, Submit</button>
-      <button onclick="closeConfirmPopup()">No, Resume</button>
-    </div>
-
-    <!-- Result Box -->
-    <div id="result-box" class="hidden">
-      <h2>🎉 Quiz Completed!</h2>
-      <p id="score"></p>
-      <button onclick="restartQuiz()">Try Again 🔄</button>
-      <button class="motion"><a href="..\chemical_bonding\chemical_bonding.html">⬅ Back to Previous Page</a></button>
-    </div>
-  </div>
-
-  <script src="../offlineSync.js"></script>
-  <script src="../quizProgress.js"></script>
-  <script src="../badges.js"></script>
-  <script src="chemical_bondingquiz.js"></script>
-  <script src="../quizAssignmentHelper.js"></script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
+  <link rel="stylesheet" href="chemical_bondingquiz.css">
+</head>
+
+<body>
+
+  <a class="skip-link" href="#content">Skip to content</a>
+
+  <div class="container" id="content">
+    <h1 class="title">Chemical Bonding & Molecular Geometry</h1>
+    <p class="description">Test your understanding of Chemical Bonding & Molecular Geometry concepts!</p>
+
+    <!-- Progress Bar -->
+    <div class="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+
+    <main id="quiz-box">
+      <h2 id="question">Loading...</h2>
+      <div id="options" class="options-grid" role="radiogroup" aria-labelledby="question"></div>
+
+      <div class="button-group" role="group" aria-label="Quiz navigation">
+        <button id="prev-btn" onclick="prevQuestion()" disabled aria-label="Previous question">Previous</button>
+        <button id="next-btn" onclick="nextQuestion()" disabled aria-label="Next question">Next</button>
+        <button id="submit-btn" class="hidden" onclick="confirmSubmit()" aria-label="Submit quiz">Submit</button>
+      </div>
+
+      <p id="sr-status" class="sr-only" aria-live="polite" aria-atomic="true"></p>
+    </main>
+
+    <!-- Warning Popup -->
+    <div id="popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="popup-title">
+      <h3 id="popup-title">⚠️ Please select an answer before proceeding!</h3>
+      <button id="popup-ok" onclick="closePopup()" aria-label="Close warning">OK</button>
+    </div>
+
+    <!-- Confirm Submit Popup -->
+    <div id="confirm-popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="confirm-popup-title">
+      <h3 id="confirm-popup-title">Are you sure you want to submit?</h3>
+      <button id="confirm-yes" onclick="submitQuiz()" aria-label="Confirm submit">Yes, Submit</button>
+      <button id="confirm-no" onclick="closeConfirmPopup()" aria-label="Cancel submit">No, Resume</button>
+    </div>
+
+    <!-- Result Box -->
+    <section id="result-box" class="hidden" aria-labelledby="result-title">
+      <h2 id="result-title" tabindex="-1">🎉 Quiz Completed!</h2>
+      <p id="score"></p>
+      <div class="button-group" role="group" aria-label="Quiz results actions">
+        <button onclick="restartQuiz()" aria-label="Restart quiz">Try Again 🔄</button>
+        <button class="motion" onclick="window.location.href='../chemical_bonding/chemical_bonding.html'" aria-label="Back to previous page">⬅ Back</button>
+      </div>
+    </section>
+  </div>
+
+  <script src="../offlineSync.js"></script>
+  <script src="../quizProgress.js"></script>
+  <script src="../badges.js"></script>
+  <script src="chemical_bondingquiz.js"></script>
+  <script src="../quizAssignmentHelper.js"></script>
+  <script src="../accessibility.js" defer></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/chemistryquiz/equilibriumquiz.html b/chemistryquiz/equilibriumquiz.html
index 4dcccc0..e5cf74f 100644
--- a/chemistryquiz/equilibriumquiz.html
+++ b/chemistryquiz/equilibriumquiz.html
@@ -1,60 +1,70 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Physics Motion Quiz - LearnSphere</title>
-    <link rel="stylesheet" href="../variables.css">
-    <script src="../theme.js"></script>
-  <link rel="stylesheet" href="equilibriumquiz.css">
-</head>
-
-<body>
-
-  <div class="container">
-    <h1 class="title">Chemical Equilibrium & Le Chatelier’s Principle</h1>
-    <p class="description">Test your understanding of Chemical Equilibrium & Le Chatelier’s Principley concepts!</p>
-
-    <!-- Progress Bar -->
-    <div class="progress-container">
-      <div id="progress-bar"></div>
-    </div>
-
-    <div id="quiz-box">
-      <h2 id="question">Loading...</h2>
-      <div id="options" class="options-grid"></div>
-      <button id="prev-btn" onclick="prevQuestion()" disabled>Previous</button>
-      <button id="next-btn" onclick="nextQuestion()" disabled>Next</button>
-      <button id="submit-btn" class="hidden" onclick="confirmSubmit()">Submit</button>
-    </div>
-
-    <!-- Warning Popup -->
-    <div id="popup" class="popup hidden">
-      <h3>⚠️ Please select an answer before proceeding!</h3>
-      <button onclick="closePopup()">OK</button>
-    </div>
-
-    <!-- Confirm Submit Popup -->
-    <div id="confirm-popup" class="popup hidden">
-      <h3>Are you sure you want to submit?</h3>
-      <button onclick="submitQuiz()">Yes, Submit</button>
-      <button onclick="closeConfirmPopup()">No, Resume</button>
-    </div>
-
-    <!-- Result Box -->
-    <div id="result-box" class="hidden">
-      <h2>🎉 Quiz Completed!</h2>
-      <p id="score"></p>
-      <button onclick="restartQuiz()">Try Again 🔄</button>
-      <button class="motion"><a href="..\equilibrium\equilibrium.html">⬅ Back to Previous Page</a></button>
-    </div>
-  </div>
-
-  <script src="../quizProgress.js"></script>
-  <script src="../badges.js"></script>
-  <script src="equilibriumquiz.js"></script>
-  <script src="../quizAssignmentHelper.js"></script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
+  <link rel="stylesheet" href="equilibriumquiz.css">
+</head>
+
+<body>
+
+  <a class="skip-link" href="#content">Skip to content</a>
+
+  <div class="container" id="content">
+    <h1 class="title">Chemical Equilibrium & Le Chatelier’s Principle</h1>
+    <p class="description">Test your understanding of Chemical Equilibrium & Le Chatelier’s Principley concepts!</p>
+
+    <!-- Progress Bar -->
+    <div class="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+
+    <main id="quiz-box">
+      <h2 id="question">Loading...</h2>
+      <div id="options" class="options-grid" role="radiogroup" aria-labelledby="question"></div>
+
+      <div class="button-group" role="group" aria-label="Quiz navigation">
+        <button id="prev-btn" onclick="prevQuestion()" disabled aria-label="Previous question">Previous</button>
+        <button id="next-btn" onclick="nextQuestion()" disabled aria-label="Next question">Next</button>
+        <button id="submit-btn" class="hidden" onclick="confirmSubmit()" aria-label="Submit quiz">Submit</button>
+      </div>
+
+      <p id="sr-status" class="sr-only" aria-live="polite" aria-atomic="true"></p>
+    </main>
+
+    <!-- Warning Popup -->
+    <div id="popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="popup-title">
+      <h3 id="popup-title">⚠️ Please select an answer before proceeding!</h3>
+      <button id="popup-ok" onclick="closePopup()" aria-label="Close warning">OK</button>
+    </div>
+
+    <!-- Confirm Submit Popup -->
+    <div id="confirm-popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="confirm-popup-title">
+      <h3 id="confirm-popup-title">Are you sure you want to submit?</h3>
+      <button id="confirm-yes" onclick="submitQuiz()" aria-label="Confirm submit">Yes, Submit</button>
+      <button id="confirm-no" onclick="closeConfirmPopup()" aria-label="Cancel submit">No, Resume</button>
+    </div>
+
+    <!-- Result Box -->
+    <section id="result-box" class="hidden" aria-labelledby="result-title">
+      <h2 id="result-title" tabindex="-1">🎉 Quiz Completed!</h2>
+      <p id="score"></p>
+      <div class="button-group" role="group" aria-label="Quiz results actions">
+        <button onclick="restartQuiz()" aria-label="Restart quiz">Try Again 🔄</button>
+        <button class="motion" onclick="window.location.href='../equilibrium/equilibrium.html'" aria-label="Back to previous page">⬅ Back</button>
+      </div>
+    </section>
+  </div>
+
+  <script src="../quizProgress.js"></script>
+  <script src="../badges.js"></script>
+  <script src="equilibriumquiz.js"></script>
+  <script src="../quizAssignmentHelper.js"></script>
+  <script src="../accessibility.js" defer></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/chemistryquiz/thermoquiz.html b/chemistryquiz/thermoquiz.html
index 1fa031e..547ac0e 100644
--- a/chemistryquiz/thermoquiz.html
+++ b/chemistryquiz/thermoquiz.html
@@ -1,60 +1,70 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Physics Motion Quiz - LearnSphere</title>
-    <link rel="stylesheet" href="../variables.css">
-    <script src="../theme.js"></script>
-  <link rel="stylesheet" href="thermoquiz.css">
-</head>
-
-<body>
-
-  <div class="container">
-    <h1 class="title">Thermodynamics & Reaction Kinetics </h1>
-    <p class="description">Test your understanding of Thermodynamics & Reaction Kinetics concepts!</p>
-
-    <!-- Progress Bar -->
-    <div class="progress-container">
-      <div id="progress-bar"></div>
-    </div>
-
-    <div id="quiz-box">
-      <h2 id="question">Loading...</h2>
-      <div id="options" class="options-grid"></div>
-      <button id="prev-btn" onclick="prevQuestion()" disabled>Previous</button>
-      <button id="next-btn" onclick="nextQuestion()" disabled>Next</button>
-      <button id="submit-btn" class="hidden" onclick="confirmSubmit()">Submit</button>
-    </div>
-
-    <!-- Warning Popup -->
-    <div id="popup" class="popup hidden">
-      <h3>⚠️ Please select an answer before proceeding!</h3>
-      <button onclick="closePopup()">OK</button>
-    </div>
-
-    <!-- Confirm Submit Popup -->
-    <div id="confirm-popup" class="popup hidden">
-      <h3>Are you sure you want to submit?</h3>
-      <button onclick="submitQuiz()">Yes, Submit</button>
-      <button onclick="closeConfirmPopup()">No, Resume</button>
-    </div>
-
-    <!-- Result Box -->
-    <div id="result-box" class="hidden">
-      <h2>🎉 Quiz Completed!</h2>
-      <p id="score"></p>
-      <button onclick="restartQuiz()">Try Again 🔄</button>
-      <button class="motion"><a href="..\thermo\thermo.html">⬅ Back to Previous Page</a></button>
-    </div>
-  </div>
-
-  <script src="../quizProgress.js"></script>
-  <script src="../badges.js"></script>
-  <script src="thermoquiz.js"></script>
-  <script src="../quizAssignmentHelper.js"></script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
+  <link rel="stylesheet" href="thermoquiz.css">
+</head>
+
+<body>
+
+  <a class="skip-link" href="#content">Skip to content</a>
+
+  <div class="container" id="content">
+    <h1 class="title">Thermodynamics & Reaction Kinetics </h1>
+    <p class="description">Test your understanding of Thermodynamics & Reaction Kinetics concepts!</p>
+
+    <!-- Progress Bar -->
+    <div class="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+
+    <main id="quiz-box">
+      <h2 id="question">Loading...</h2>
+      <div id="options" class="options-grid" role="radiogroup" aria-labelledby="question"></div>
+
+      <div class="button-group" role="group" aria-label="Quiz navigation">
+        <button id="prev-btn" onclick="prevQuestion()" disabled aria-label="Previous question">Previous</button>
+        <button id="next-btn" onclick="nextQuestion()" disabled aria-label="Next question">Next</button>
+        <button id="submit-btn" class="hidden" onclick="confirmSubmit()" aria-label="Submit quiz">Submit</button>
+      </div>
+
+      <p id="sr-status" class="sr-only" aria-live="polite" aria-atomic="true"></p>
+    </main>
+
+    <!-- Warning Popup -->
+    <div id="popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="popup-title">
+      <h3 id="popup-title">⚠️ Please select an answer before proceeding!</h3>
+      <button id="popup-ok" onclick="closePopup()" aria-label="Close warning">OK</button>
+    </div>
+
+    <!-- Confirm Submit Popup -->
+    <div id="confirm-popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="confirm-popup-title">
+      <h3 id="confirm-popup-title">Are you sure you want to submit?</h3>
+      <button id="confirm-yes" onclick="submitQuiz()" aria-label="Confirm submit">Yes, Submit</button>
+      <button id="confirm-no" onclick="closeConfirmPopup()" aria-label="Cancel submit">No, Resume</button>
+    </div>
+
+    <!-- Result Box -->
+    <section id="result-box" class="hidden" aria-labelledby="result-title">
+      <h2 id="result-title" tabindex="-1">🎉 Quiz Completed!</h2>
+      <p id="score"></p>
+      <div class="button-group" role="group" aria-label="Quiz results actions">
+        <button onclick="restartQuiz()" aria-label="Restart quiz">Try Again 🔄</button>
+        <button class="motion" onclick="window.location.href='../thermo/thermo.html'" aria-label="Back to previous page">⬅ Back</button>
+      </div>
+    </section>
+  </div>
+
+  <script src="../quizProgress.js"></script>
+  <script src="../badges.js"></script>
+  <script src="thermoquiz.js"></script>
+  <script src="../quizAssignmentHelper.js"></script>
+  <script src="../accessibility.js" defer></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/mathsquiz/calculusquiz.html b/mathsquiz/calculusquiz.html
index 679bfc2..236191a 100644
--- a/mathsquiz/calculusquiz.html
+++ b/mathsquiz/calculusquiz.html
@@ -1,77 +1,87 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Physics Motion Quiz - LearnSphere</title>
-    <link rel="stylesheet" href="../variables.css">
-    <script src="../theme.js"></script>
-  <link rel="stylesheet" href="calculusquiz.css">
-</head>
-
-<body>
-
-  <div class="container">
-    <h1 class="title">Calculus – Limits, Derivatives & Integrals</h1>
-    <p class="description">Test your knowledge of Calculus – Limits, Derivatives & Integrals concepts!</p>
-
-    <!-- Progress Bar -->
-    <div class="progress-container">
-      <div id="progress-bar"></div>
-    </div>
-
-    <div id="quiz-box">
-      <h2 id="question">Loading...</h2>
-      <div id="options" class="options-grid"></div>
-      <button id="prev-btn" onclick="prevQuestion()" disabled>Previous</button>
-      <button id="next-btn" onclick="nextQuestion()" disabled>Next</button>
-      <button id="submit-btn" class="hidden" onclick="confirmSubmit()">Submit</button>
-    </div>
-
-    <!-- Warning Popup -->
-    <div id="popup" class="popup hidden">
-      <h3>⚠️ Please select an answer before proceeding!</h3>
-      <button onclick="closePopup()">OK</button>
-    </div>
-
-    <!-- Confirm Submit Popup -->
-    <div id="confirm-popup" class="popup hidden">
-      <h3>Are you sure you want to submit?</h3>
-      <button onclick="submitQuiz()">Yes, Submit</button>
-      <button onclick="closeConfirmPopup()">No, Resume</button>
-    </div>
-
-    <!-- Result Box -->
-    <div id="result-box" class="hidden">
-      <h2>🎉 Quiz Completed!</h2>
-      <p id="score"></p>
-      <button onclick="restartQuiz()">Try Again 🔄</button>
-      <button class="motion"><a href="..\calculus\calculus.html">⬅ Back to Previous Page</a></button>
-    </div>
-  </div>
-
-  <script src="../offlineSync.js"></script>
-  <script src="../quizProgress.js"></script>
-  <script>
-    if (window.offlineSync && typeof window.offlineSync.initOfflineStatusBar === 'function') {
-      window.offlineSync.initOfflineStatusBar();
-    }
-  </script>
-  <script src="../badges.js"></script>
-  <script src="calculusquiz.js"></script>
-  <script src="../quizAssignmentHelper.js"></script>
-
-  <script>
-    (function () {
-      if (!('serviceWorker' in navigator)) return;
-      window.addEventListener('load', function () {
-        navigator.serviceWorker.register('/sw.js').catch(function (err) {
-          console.warn('LearnSphere: Service Worker registration failed:', err);
-        });
-      });
-    })();
-  </script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
+  <link rel="stylesheet" href="calculusquiz.css">
+</head>
+
+<body>
+
+  <a class="skip-link" href="#content">Skip to content</a>
+
+  <div class="container" id="content">
+    <h1 class="title">Calculus – Limits, Derivatives & Integrals</h1>
+    <p class="description">Test your knowledge of Calculus – Limits, Derivatives & Integrals concepts!</p>
+
+    <!-- Progress Bar -->
+    <div class="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+
+    <main id="quiz-box">
+      <h2 id="question">Loading...</h2>
+      <div id="options" class="options-grid" role="radiogroup" aria-labelledby="question"></div>
+
+      <div class="button-group" role="group" aria-label="Quiz navigation">
+        <button id="prev-btn" onclick="prevQuestion()" disabled aria-label="Previous question">Previous</button>
+        <button id="next-btn" onclick="nextQuestion()" disabled aria-label="Next question">Next</button>
+        <button id="submit-btn" class="hidden" onclick="confirmSubmit()" aria-label="Submit quiz">Submit</button>
+      </div>
+
+      <p id="sr-status" class="sr-only" aria-live="polite" aria-atomic="true"></p>
+    </main>
+
+    <!-- Warning Popup -->
+    <div id="popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="popup-title">
+      <h3 id="popup-title">⚠️ Please select an answer before proceeding!</h3>
+      <button id="popup-ok" onclick="closePopup()" aria-label="Close warning">OK</button>
+    </div>
+
+    <!-- Confirm Submit Popup -->
+    <div id="confirm-popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="confirm-popup-title">
+      <h3 id="confirm-popup-title">Are you sure you want to submit?</h3>
+      <button id="confirm-yes" onclick="submitQuiz()" aria-label="Confirm submit">Yes, Submit</button>
+      <button id="confirm-no" onclick="closeConfirmPopup()" aria-label="Cancel submit">No, Resume</button>
+    </div>
+
+    <!-- Result Box -->
+    <section id="result-box" class="hidden" aria-labelledby="result-title">
+      <h2 id="result-title" tabindex="-1">🎉 Quiz Completed!</h2>
+      <p id="score"></p>
+      <div class="button-group" role="group" aria-label="Quiz results actions">
+        <button onclick="restartQuiz()" aria-label="Restart quiz">Try Again 🔄</button>
+        <button class="motion" onclick="window.location.href='../calculus/calculus.html'" aria-label="Back to previous page">⬅ Back</button>
+      </div>
+    </section>
+  </div>
+
+  <script src="../offlineSync.js"></script>
+  <script src="../quizProgress.js"></script>
+  <script>
+    if (window.offlineSync && typeof window.offlineSync.initOfflineStatusBar === 'function') {
+      window.offlineSync.initOfflineStatusBar();
+    }
+  </script>
+  <script src="../badges.js"></script>
+  <script src="calculusquiz.js"></script>
+  <script src="../quizAssignmentHelper.js"></script>
+
+  <script>
+    (function () {
+      if (!('serviceWorker' in navigator)) return;
+      window.addEventListener('load', function () {
+        navigator.serviceWorker.register('/sw.js').catch(function (err) {
+          console.warn('LearnSphere: Service Worker registration failed:', err);
+        });
+      });
+    })();
+  </script>
+  <script src="../accessibility.js" defer></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/mathsquiz/geometryquiz.html b/mathsquiz/geometryquiz.html
index 4b29b93..eb8bf24 100644
--- a/mathsquiz/geometryquiz.html
+++ b/mathsquiz/geometryquiz.html
@@ -1,77 +1,87 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Physics Motion Quiz - LearnSphere</title>
-    <link rel="stylesheet" href="../variables.css">
-    <script src="../theme.js"></script>
-  <link rel="stylesheet" href="geometryquiz.css">
-</head>
-
-<body>
-
-  <div class="container">
-    <h1 class="title">Coordinate Geometry & Conic Sections</h1>
-    <p class="description">Test your knowledge of Coordinate Geometry & Conic Sections concepts!</p>
-
-    <!-- Progress Bar -->
-    <div class="progress-container">
-      <div id="progress-bar"></div>
-    </div>
-
-    <div id="quiz-box">
-      <h2 id="question">Loading...</h2>
-      <div id="options" class="options-grid"></div>
-      <button id="prev-btn" onclick="prevQuestion()" disabled>Previous</button>
-      <button id="next-btn" onclick="nextQuestion()" disabled>Next</button>
-      <button id="submit-btn" class="hidden" onclick="confirmSubmit()">Submit</button>
-    </div>
-
-    <!-- Warning Popup -->
-    <div id="popup" class="popup hidden">
-      <h3>⚠️ Please select an answer before proceeding!</h3>
-      <button onclick="closePopup()">OK</button>
-    </div>
-
-    <!-- Confirm Submit Popup -->
-    <div id="confirm-popup" class="popup hidden">
-      <h3>Are you sure you want to submit?</h3>
-      <button onclick="submitQuiz()">Yes, Submit</button>
-      <button onclick="closeConfirmPopup()">No, Resume</button>
-    </div>
-
-    <!-- Result Box -->
-    <div id="result-box" class="hidden">
-      <h2>🎉 Quiz Completed!</h2>
-      <p id="score"></p>
-      <button onclick="restartQuiz()">Try Again 🔄</button>
-      <button class="motion"><a href="..\geometry\geometry.html">⬅ Back to Previous Page</a></button>
-    </div>
-  </div>
-
-  <script src="../offlineSync.js"></script>
-  <script src="../quizProgress.js"></script>
-  <script>
-    if (window.offlineSync && typeof window.offlineSync.initOfflineStatusBar === 'function') {
-      window.offlineSync.initOfflineStatusBar();
-    }
-  </script>
-  <script src="../badges.js"></script>
-  <script src="geometryquiz.js"></script>
-  <script src="../quizAssignmentHelper.js"></script>
-
-  <script>
-    (function () {
-      if (!('serviceWorker' in navigator)) return;
-      window.addEventListener('load', function () {
-        navigator.serviceWorker.register('/sw.js').catch(function (err) {
-          console.warn('LearnSphere: Service Worker registration failed:', err);
-        });
-      });
-    })();
-  </script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
+  <link rel="stylesheet" href="geometryquiz.css">
+</head>
+
+<body>
+
+  <a class="skip-link" href="#content">Skip to content</a>
+
+  <div class="container" id="content">
+    <h1 class="title">Coordinate Geometry & Conic Sections</h1>
+    <p class="description">Test your knowledge of Coordinate Geometry & Conic Sections concepts!</p>
+
+    <!-- Progress Bar -->
+    <div class="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+
+    <main id="quiz-box">
+      <h2 id="question">Loading...</h2>
+      <div id="options" class="options-grid" role="radiogroup" aria-labelledby="question"></div>
+
+      <div class="button-group" role="group" aria-label="Quiz navigation">
+        <button id="prev-btn" onclick="prevQuestion()" disabled aria-label="Previous question">Previous</button>
+        <button id="next-btn" onclick="nextQuestion()" disabled aria-label="Next question">Next</button>
+        <button id="submit-btn" class="hidden" onclick="confirmSubmit()" aria-label="Submit quiz">Submit</button>
+      </div>
+
+      <p id="sr-status" class="sr-only" aria-live="polite" aria-atomic="true"></p>
+    </main>
+
+    <!-- Warning Popup -->
+    <div id="popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="popup-title">
+      <h3 id="popup-title">⚠️ Please select an answer before proceeding!</h3>
+      <button id="popup-ok" onclick="closePopup()" aria-label="Close warning">OK</button>
+    </div>
+
+    <!-- Confirm Submit Popup -->
+    <div id="confirm-popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="confirm-popup-title">
+      <h3 id="confirm-popup-title">Are you sure you want to submit?</h3>
+      <button id="confirm-yes" onclick="submitQuiz()" aria-label="Confirm submit">Yes, Submit</button>
+      <button id="confirm-no" onclick="closeConfirmPopup()" aria-label="Cancel submit">No, Resume</button>
+    </div>
+
+    <!-- Result Box -->
+    <section id="result-box" class="hidden" aria-labelledby="result-title">
+      <h2 id="result-title" tabindex="-1">🎉 Quiz Completed!</h2>
+      <p id="score"></p>
+      <div class="button-group" role="group" aria-label="Quiz results actions">
+        <button onclick="restartQuiz()" aria-label="Restart quiz">Try Again 🔄</button>
+        <button class="motion" onclick="window.location.href='../geometry/geometry.html'" aria-label="Back to previous page">⬅ Back</button>
+      </div>
+    </section>
+  </div>
+
+  <script src="../offlineSync.js"></script>
+  <script src="../quizProgress.js"></script>
+  <script>
+    if (window.offlineSync && typeof window.offlineSync.initOfflineStatusBar === 'function') {
+      window.offlineSync.initOfflineStatusBar();
+    }
+  </script>
+  <script src="../badges.js"></script>
+  <script src="geometryquiz.js"></script>
+  <script src="../quizAssignmentHelper.js"></script>
+
+  <script>
+    (function () {
+      if (!('serviceWorker' in navigator)) return;
+      window.addEventListener('load', function () {
+        navigator.serviceWorker.register('/sw.js').catch(function (err) {
+          console.warn('LearnSphere: Service Worker registration failed:', err);
+        });
+      });
+    })();
+  </script>
+  <script src="../accessibility.js" defer></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/mathsquiz/probabilityquiz.html b/mathsquiz/probabilityquiz.html
index 9e6276d..1731e90 100644
--- a/mathsquiz/probabilityquiz.html
+++ b/mathsquiz/probabilityquiz.html
@@ -1,77 +1,87 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Physics Motion Quiz - LearnSphere</title>
-    <link rel="stylesheet" href="../variables.css">
-    <script src="../theme.js"></script>
-  <link rel="stylesheet" href="probabilityquiz.css">
-</head>
-
-<body>
-
-  <div class="container">
-    <h1 class="title">Probability & Statistics</h1>
-    <p class="description">Test your knowledge of Probability & Statistics concepts!</p>
-
-    <!-- Progress Bar -->
-    <div class="progress-container">
-      <div id="progress-bar"></div>
-    </div>
-
-    <div id="quiz-box">
-      <h2 id="question">Loading...</h2>
-      <div id="options" class="options-grid"></div>
-      <button id="prev-btn" onclick="prevQuestion()" disabled>Previous</button>
-      <button id="next-btn" onclick="nextQuestion()" disabled>Next</button>
-      <button id="submit-btn" class="hidden" onclick="confirmSubmit()">Submit</button>
-    </div>
-
-    <!-- Warning Popup -->
-    <div id="popup" class="popup hidden">
-      <h3>⚠️ Please select an answer before proceeding!</h3>
-      <button onclick="closePopup()">OK</button>
-    </div>
-
-    <!-- Confirm Submit Popup -->
-    <div id="confirm-popup" class="popup hidden">
-      <h3>Are you sure you want to submit?</h3>
-      <button onclick="submitQuiz()">Yes, Submit</button>
-      <button onclick="closeConfirmPopup()">No, Resume</button>
-    </div>
-
-    <!-- Result Box -->
-    <div id="result-box" class="hidden">
-      <h2>🎉 Quiz Completed!</h2>
-      <p id="score"></p>
-      <button onclick="restartQuiz()">Try Again 🔄</button>
-      <button class="motion"><a href="..\probability\probability.html">⬅ Back to Previous Page</a></button>
-    </div>
-  </div>
-
-  <script src="../offlineSync.js"></script>
-  <script src="../quizProgress.js"></script>
-  <script>
-    if (window.offlineSync && typeof window.offlineSync.initOfflineStatusBar === 'function') {
-      window.offlineSync.initOfflineStatusBar();
-    }
-  </script>
-  <script src="../badges.js"></script>
-  <script src="probabilityquiz.js"></script>
-  <script src="../quizAssignmentHelper.js"></script>
-
-  <script>
-    (function () {
-      if (!('serviceWorker' in navigator)) return;
-      window.addEventListener('load', function () {
-        navigator.serviceWorker.register('/sw.js').catch(function (err) {
-          console.warn('LearnSphere: Service Worker registration failed:', err);
-        });
-      });
-    })();
-  </script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
+  <link rel="stylesheet" href="probabilityquiz.css">
+</head>
+
+<body>
+
+  <a class="skip-link" href="#content">Skip to content</a>
+
+  <div class="container" id="content">
+    <h1 class="title">Probability & Statistics</h1>
+    <p class="description">Test your knowledge of Probability & Statistics concepts!</p>
+
+    <!-- Progress Bar -->
+    <div class="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+
+    <main id="quiz-box">
+      <h2 id="question">Loading...</h2>
+      <div id="options" class="options-grid" role="radiogroup" aria-labelledby="question"></div>
+
+      <div class="button-group" role="group" aria-label="Quiz navigation">
+        <button id="prev-btn" onclick="prevQuestion()" disabled aria-label="Previous question">Previous</button>
+        <button id="next-btn" onclick="nextQuestion()" disabled aria-label="Next question">Next</button>
+        <button id="submit-btn" class="hidden" onclick="confirmSubmit()" aria-label="Submit quiz">Submit</button>
+      </div>
+
+      <p id="sr-status" class="sr-only" aria-live="polite" aria-atomic="true"></p>
+    </main>
+
+    <!-- Warning Popup -->
+    <div id="popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="popup-title">
+      <h3 id="popup-title">⚠️ Please select an answer before proceeding!</h3>
+      <button id="popup-ok" onclick="closePopup()" aria-label="Close warning">OK</button>
+    </div>
+
+    <!-- Confirm Submit Popup -->
+    <div id="confirm-popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="confirm-popup-title">
+      <h3 id="confirm-popup-title">Are you sure you want to submit?</h3>
+      <button id="confirm-yes" onclick="submitQuiz()" aria-label="Confirm submit">Yes, Submit</button>
+      <button id="confirm-no" onclick="closeConfirmPopup()" aria-label="Cancel submit">No, Resume</button>
+    </div>
+
+    <!-- Result Box -->
+    <section id="result-box" class="hidden" aria-labelledby="result-title">
+      <h2 id="result-title" tabindex="-1">🎉 Quiz Completed!</h2>
+      <p id="score"></p>
+      <div class="button-group" role="group" aria-label="Quiz results actions">
+        <button onclick="restartQuiz()" aria-label="Restart quiz">Try Again 🔄</button>
+        <button class="motion" onclick="window.location.href='../probability/probability.html'" aria-label="Back to previous page">⬅ Back</button>
+      </div>
+    </section>
+  </div>
+
+  <script src="../offlineSync.js"></script>
+  <script src="../quizProgress.js"></script>
+  <script>
+    if (window.offlineSync && typeof window.offlineSync.initOfflineStatusBar === 'function') {
+      window.offlineSync.initOfflineStatusBar();
+    }
+  </script>
+  <script src="../badges.js"></script>
+  <script src="probabilityquiz.js"></script>
+  <script src="../quizAssignmentHelper.js"></script>
+
+  <script>
+    (function () {
+      if (!('serviceWorker' in navigator)) return;
+      window.addEventListener('load', function () {
+        navigator.serviceWorker.register('/sw.js').catch(function (err) {
+          console.warn('LearnSphere: Service Worker registration failed:', err);
+        });
+      });
+    })();
+  </script>
+  <script src="../accessibility.js" defer></script>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/mathsquiz/vectorquiz.html b/mathsquiz/vectorquiz.html
index 931d769..eefa9a4 100644
--- a/mathsquiz/vectorquiz.html
+++ b/mathsquiz/vectorquiz.html
@@ -1,77 +1,87 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Physics Motion Quiz - LearnSphere</title>
-    <link rel="stylesheet" href="../variables.css">
-    <script src="../theme.js"></script>
-  <link rel="stylesheet" href="vectorquiz.css">
-</head>
-
-<body>
-
-  <div class="container">
-    <h1 class="title">Vectors & 3D Geometry Quiz 📐</h1>
-    <p class="description">Test your understanding of vectors and 3D geometry concepts!</p>
-
-    <!-- Progress Bar -->
-    <div class="progress-container">
-      <div id="progress-bar"></div>
-    </div>
-
-    <div id="quiz-box">
-      <h2 id="question">Loading...</h2>
-      <div id="options" class="options-grid"></div>
-      <button id="prev-btn" onclick="prevQuestion()" disabled>Previous</button>
-      <button id="next-btn" onclick="nextQuestion()" disabled>Next</button>
-      <button id="submit-btn" class="hidden" onclick="confirmSubmit()">Submit</button>
-    </div>
-
-    <!-- Warning Popup -->
-    <div id="popup" class="popup hidden">
-      <h3>⚠️ Please select an answer before proceeding!</h3>
-      <button onclick="closePopup()">OK</button>
-    </div>
-
-    <!-- Confirm Submit Popup -->
-    <div id="confirm-popup" class="popup hidden">
-      <h3>Are you sure you want to submit?</h3>
-      <button onclick="submitQuiz()">Yes, Submit</button>
-      <button onclick="closeConfirmPopup()">No, Resume</button>
-    </div>
-
-    <!-- Result Box -->
-    <div id="result-box" class="hidden">
-      <h2>🎉 Quiz Completed!</h2>
-      <p id="score"></p>
-      <button onclick="restartQuiz()">Try Again 🔄</button>
-      <button class="motion"><a href="..\vector3d\vector3d.html">⬅ Back to Previous Page</a></button>
-    </div>
-  </div>
-
-  <script src="../offlineSync.js"></script>
-  <script src="../quizProgress.js"></script>
-  <script>
-    if (window.offlineSync && typeof window.offlineSync.initOfflineStatusBar === 'function') {
-      window.offlineSync.initOfflineStatusBar();
-    }
-  </script>
-  <script src="../badges.js"></script>
-  <script src="vectorquiz.js"></script>
-  <script src="../quizAssignmentHelper.js"></script>
-
-  <script>
-    (function () {
-      if (!('serviceWorker' in navigator)) return;
-      window.addEventListener('load', function () {
-        navigator.serviceWorker.register('/sw.js').catch(function (err) {
-          console.warn('LearnSphere: Service Worker registration failed:', err);
-        });
-      });
-    })();
-  </script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
+  <link rel="stylesheet" href="vectorquiz.css">
+</head>
+
+<body>
+
+  <a class="skip-link" href="#content">Skip to content</a>
+
+  <div class="container" id="content">
+    <h1 class="title">Vectors & 3D Geometry Quiz 📐</h1>
+    <p class="description">Test your understanding of vectors and 3D geometry concepts!</p>
+
+    <!-- Progress Bar -->
+    <div class="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+
+    <main id="quiz-box">
+      <h2 id="question">Loading...</h2>
+      <div id="options" class="options-grid" role="radiogroup" aria-labelledby="question"></div>
+
+      <div class="button-group" role="group" aria-label="Quiz navigation">
+        <button id="prev-btn" onclick="prevQuestion()" disabled aria-label="Previous question">Previous</button>
+        <button id="next-btn" onclick="nextQuestion()" disabled aria-label="Next question">Next</button>
+        <button id="submit-btn" class="hidden" onclick="confirmSubmit()" aria-label="Submit quiz">Submit</button>
+      </div>
+
+      <p id="sr-status" class="sr-only" aria-live="polite" aria-atomic="true"></p>
+    </main>
+
+    <!-- Warning Popup -->
+    <div id="popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="popup-title">
+      <h3 id="popup-title">⚠️ Please select an answer before proceeding!</h3>
+      <button id="popup-ok" onclick="closePopup()" aria-label="Close warning">OK</button>
+    </div>
+
+    <!-- Confirm Submit Popup -->
+    <div id="confirm-popup" class="popup hidden" role="dialog" aria-modal="true" aria-labelledby="confirm-popup-title">
+      <h3 id="confirm-popup-title">Are you sure you want to submit?</h3>
+      <button id="confirm-yes" onclick="submitQuiz()" aria-label="Confirm submit">Yes, Submit</button>
+      <button id="confirm-no" onclick="closeConfirmPopup()" aria-label="Cancel submit">No, Resume</button>
+    </div>
+
+    <!-- Result Box -->
+    <section id="result-box" class="hidden" aria-labelledby="result-title">
+      <h2 id="result-title" tabindex="-1">🎉 Quiz Completed!</h2>
+      <p id="score"></p>
+      <div class="button-group" role="group" aria-label="Quiz results actions">
+        <button onclick="restartQuiz()" aria-label="Restart quiz">Try Again 🔄</button>
+        <button class="motion" onclick="window.location.href='../vector3d/vector3d.html'" aria-label="Back to previous page">⬅ Back</button>
+      </div>
+    </section>
+  </div>
+
+  <script src="../offlineSync.js"></script>
+  <script src="../quizProgress.js"></script>
+  <script>
+    if (window.offlineSync && typeof window.offlineSync.initOfflineStatusBar === 'function') {
+      window.offlineSync.initOfflineStatusBar();
+    }
+  </script>
+  <script src="../badges.js"></script>
+  <script src="vectorquiz.js"></script>
+  <script src="../quizAssignmentHelper.js"></script>
+
+  <script>
+    (function () {
+      if (!('serviceWorker' in navigator)) return;
+      window.addEventListener('load', function () {
+        navigator.serviceWorker.register('/sw.js').catch(function (err) {
+          console.warn('LearnSphere: Service Worker registration failed:', err);
+        });
+      });
+    })();
+  </script>
+  <script src="../accessibility.js" defer></script>
+</body>
+
 </html>
\ No newline at end of file
