From 0f212ea60b07d7a9f89fff71d625b725864e7e41 Mon Sep 17 00:00:00 2001
From: Aditya8369 <mahajan2005aditya@gmail.com>
Date: Wed, 24 Jun 2026 11:06:10 +0530
Subject: [PATCH] Accessibility Upgrade: keyboard navigation + ARIA + better
 focus states

---
 quiz/projectilequiz.html |  52 +++++++++-----
 quiz/projectilequiz.js   | 151 ++++++++++++++++++++++++++++++++++++++-
 quiz/rayquiz.html        |  58 +++++++++------
 quiz/rayquiz.js          | 145 ++++++++++++++++++++++++++++++++++++-
 4 files changed, 363 insertions(+), 43 deletions(-)
diff --git a/quiz/projectilequiz.html b/quiz/projectilequiz.html
index 73f276d..f3d24a4 100644
--- a/quiz/projectilequiz.html
+++ b/quiz/projectilequiz.html
@@ -8,11 +8,16 @@
     <link rel="stylesheet" href="../variables.css">
     <script src="../theme.js"></script>
     <link rel="stylesheet" href="projectilequiz.css">
+    <link rel="manifest" href="manifest.json">
+    <meta name="theme-color" content="#0f1115">
 </head>
 
 <body>
 
-    <div class="container">
+    <a class="skip-link" href="#content">Skip to content</a>
+
+    <div class="container" id="content">
+
         <h1 class="title">Physics Projectile Motion Quiz 🎯</h1>
         <p class="description">Test your knowledge of motion concepts!</p>
 
@@ -21,34 +26,45 @@ <h1 class="title">Physics Projectile Motion Quiz 🎯</h1>
             <div id="progress-bar"></div>
         </div>
 
-        <div id="quiz-box">
+        <main id="quiz-box" role="group" aria-label="Quiz">
             <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>
+            <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">
-            <h3>⚠️ Please select an answer before proceeding!</h3>
-            <button onclick="closePopup()">OK</button>
+        <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">
-            <h3>Are you sure you want to submit?</h3>
-            <button onclick="submitQuiz()">Yes, Submit</button>
-            <button onclick="closeConfirmPopup()">No, Resume</button>
+        <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 -->
-        <div id="result-box" class="hidden">
-            <h2>🎉 Quiz Completed!</h2>
+        <div id="result-box" class="hidden" aria-labelledby="result-heading">
+            <h2 tabindex="-1" id="result-heading">🎉 Quiz Completed!</h2>
             <p id="score"></p>
-            <button onclick="restartQuiz()">Try Again 🔄</button>
-            <button class="motion"><a href="..\projectile\projectile.html">⬅ Back to Previous Page</a></button>
+            <div class="button-group" role="group" aria-label="Quiz results actions">
+                <button onclick="restartQuiz()">Try Again 🔄</button>
+                <button class="motion" aria-label="Back to previous page">
+                    <a href="..\projectile\projectile.html">⬅ Back</a>
+                </button>
+            </div>
         </div>
+
     </div>
 
     <script src="../quizProgress.js"></script>
diff --git a/quiz/projectilequiz.js b/quiz/projectilequiz.js
index bca88b4..17f43d7 100644
--- a/quiz/projectilequiz.js
+++ b/quiz/projectilequiz.js
@@ -13,22 +13,45 @@ let score = 0;
 let selectedOption = null;
 let userSelectionsByStep = [];
 
+let lastFocusedEl = null;
+
+function getSrStatus() {
+    return document.getElementById("sr-status");
+}
+
+function announce(message) {
+    const el = getSrStatus();
+    if (!el) return;
+    el.textContent = message;
+}
 
 function loadQuestion() {
+    lastFocusedEl = document.activeElement;
+
     let questionData = questions[currentQuestionIndex];
     document.getElementById("question").textContent = questionData.question;
 
     let optionsContainer = document.getElementById("options");
     optionsContainer.innerHTML = "";
 
-    questionData.options.forEach(option => {
+    // Announce current question for screen readers
+    announce(`Question ${currentQuestionIndex + 1} of ${questions.length}. ${questionData.question}`);
+
+
+    questionData.options.forEach((option) => {
         let btn = document.createElement("button");
         btn.classList.add("option");
+        btn.type = "button";
         btn.textContent = option;
+
+        btn.setAttribute("role", "radio");
+        btn.setAttribute("aria-checked", "false");
+
         btn.onclick = () => selectOption(btn, option);
         optionsContainer.appendChild(btn);
     });
 
+
     selectedOption = null;
     document.getElementById("next-btn").disabled = true;
     document.getElementById("prev-btn").disabled = currentQuestionIndex === 0;
@@ -39,13 +62,22 @@ function loadQuestion() {
 }
 
 function selectOption(button, option) {
-    document.querySelectorAll(".option").forEach(btn => btn.classList.remove("selected"));
+    document.querySelectorAll(".option").forEach((btn) => {
+        btn.classList.remove("selected");
+        btn.setAttribute("aria-checked", "false");
+    });
+
     button.classList.add("selected");
+    button.setAttribute("aria-checked", "true");
+
     selectedOption = option;
     userAnswers[currentQuestionIndex] = option;
     document.getElementById("next-btn").disabled = false;
+
+    announce(`Selected: ${option}`);
 }
 
+
 function nextQuestion() {
     if (!selectedOption) {
         showPopup();
@@ -99,27 +131,49 @@ function restartQuiz() {
     document.getElementById("progress-bar").style.width = "0%";
 
     loadQuestion();
+
+    setTimeout(() => {
+        const firstOption = document.querySelector("#options .option");
+        if (firstOption) firstOption.focus();
+    }, 0);
 }
 
+
 function showPopup() {
+    lastFocusedEl = document.activeElement;
     document.getElementById("popup").style.display = "block";
+
+    const okBtn = document.getElementById("popup-ok");
+    if (okBtn) okBtn.focus();
+
+    announce("Warning: Please select an answer before proceeding.");
 }
 
 function closePopup() {
     document.getElementById("popup").style.display = "none";
+    if (lastFocusedEl && typeof lastFocusedEl.focus === "function") lastFocusedEl.focus();
 }
 
 function closeConfirmPopup() {
     document.getElementById("confirm-popup").style.display = "none";
+    if (lastFocusedEl && typeof lastFocusedEl.focus === "function") lastFocusedEl.focus();
 }
 
+
 function showResults() {
     document.getElementById("quiz-box").classList.add("hidden");
     document.getElementById("result-box").classList.remove("hidden");
 
+    const heading = document.getElementById("result-heading");
+    if (heading) heading.focus();
+
     let scoreText = `You scored <strong>${score}</strong> out of ${questions.length}! 🎉`;
+
+
     let feedbackHTML = "";
 
+
+
     questions.forEach((q, index) => {
         let userAnswer = userAnswers[index] || "No answer selected";
         let isCorrect = userAnswer === q.answer;
@@ -135,14 +189,107 @@ function showResults() {
     });
 
     document.getElementById("score").innerHTML = scoreText + "<br><br>" + feedbackHTML;
+
+    announce(`Quiz completed. Score: ${score} out of ${questions.length}.`);
 }
 
+
+
+
+
+
+
 function updateProgressBar() {
     let progress = ((currentQuestionIndex + 1) / questions.length) * 100;
+
     document.getElementById("progress-bar").style.width = progress + "%";
 }
 
+function getOptionButtons() {
+    return Array.from(document.querySelectorAll("#options .option"));
+}
+
+function moveOptionFocus(delta) {
+    const options = getOptionButtons();
+    if (options.length === 0) return;
+
+    const active = document.activeElement;
+    let idx = options.indexOf(active);
+    if (idx === -1) {
+        idx = selectedOption ? options.findIndex((b) => b.textContent === selectedOption) : 0;
+        if (idx < 0) idx = 0;
+    }
+
+    const nextIdx = Math.max(0, Math.min(options.length - 1, idx + delta));
+    options[nextIdx].focus();
+}
+
+document.addEventListener("keydown", (e) => {
+    const quizBox = document.getElementById("quiz-box");
+    if (!quizBox || quizBox.classList.contains("hidden")) return;
+
+    const options = getOptionButtons();
+    const active = document.activeElement;
+    const isOptionFocused = options.includes(active);
+
+    if (e.key === "Escape") {
+        const popup = document.getElementById("popup");
+        const confirmPopup = document.getElementById("confirm-popup");
+        if (popup && popup.style.display !== "none" && !popup.classList.contains("hidden")) {
+            e.preventDefault();
+            closePopup();
+            return;
+        }
+        if (confirmPopup && confirmPopup.style.display !== "none" && !confirmPopup.classList.contains("hidden")) {
+            e.preventDefault();
+            closeConfirmPopup();
+            return;
+        }
+    }
+
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        moveOptionFocus(1);
+        return;
+    }
+
+    if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        moveOptionFocus(-1);
+        return;
+    }
+
+    if (e.key === "Enter" || e.key === " ") {
+        if (isOptionFocused) {
+            e.preventDefault();
+            const optionText = active.textContent;
+            if (optionText) selectOption(active, optionText);
+            return;
+        }
+
+        if (selectedOption) {
+            const submitHidden = document.getElementById("submit-btn").classList.contains("hidden");
+            if (!submitHidden) {
+                e.preventDefault();
+                confirmSubmit();
+            } else {
+                const nextBtn = document.getElementById("next-btn");
+                if (nextBtn && !nextBtn.disabled) {
+                    e.preventDefault();
+                    nextQuestion();
+                }
+            }
+        }
+    }
+});
+
 document.addEventListener("DOMContentLoaded", () => {
     document.getElementById("progress-bar").style.width = "0%";
     loadQuestion();
+
+    setTimeout(() => {
+        const firstOption = document.querySelector("#options .option");
+        if (firstOption) firstOption.focus();
+    }, 0);
 });
+
diff --git a/quiz/rayquiz.html b/quiz/rayquiz.html
index 9cac869..205324f 100644
--- a/quiz/rayquiz.html
+++ b/quiz/rayquiz.html
@@ -4,50 +4,66 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Physics Motion Quiz - LearnSphere</title>
+    <title>Physics Ray Optics Quiz - LearnSphere</title>
     <link rel="stylesheet" href="../variables.css">
     <script src="../theme.js"></script>
     <link rel="stylesheet" href="rayquiz.css">
+    <link rel="manifest" href="manifest.json">
+    <meta name="theme-color" content="#0f1115">
 </head>
 
 <body>
 
-    <div class="container">
+    <a class="skip-link" href="#content">Skip to content</a>
+
+    <div class="container" id="content">
         <h1 class="title">Physics Ray Optics Quiz 🎯</h1>
-        <p class="description">Test your knowledge of motion concepts!</p>
+        <p class="description">Test your knowledge of ray optics concepts!</p>
+
+
 
         <!-- Progress Bar -->
         <div class="progress-container">
             <div id="progress-bar"></div>
         </div>
 
-        <div id="quiz-box">
+        <main id="quiz-box" role="group" aria-label="Quiz">
             <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>
+            <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">
-            <h3>⚠️ Please select an answer before proceeding!</h3>
-            <button onclick="closePopup()">OK</button>
+        <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">
-            <h3>Are you sure you want to submit?</h3>
-            <button onclick="submitQuiz()">Yes, Submit</button>
-            <button onclick="closeConfirmPopup()">No, Resume</button>
+        <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 -->
         <div id="result-box" class="hidden">
-            <h2>🎉 Quiz Completed!</h2>
+            <h2 tabindex="-1" id="result-heading">🎉 Quiz Completed!</h2>
             <p id="score"></p>
-            <button onclick="restartQuiz()">Try Again 🔄</button>
-            <button class="motion"><a href="..\ray\ray.html">⬅ Back to Previous Page</a></button>
+            <div class="button-group" role="group" aria-label="Quiz results actions">
+                <button onclick="restartQuiz()">Try Again 🔄</button>
+                <button class="motion" aria-label="Back to previous page">
+                    <a href="..\ray\ray.html">⬅ Back</a>
+                </button>
+            </div>
+
         </div>
     </div>
 
@@ -56,7 +72,7 @@ <h2>🎉 Quiz Completed!</h2>
     <script src="adaptiveQuiz.js"></script>
     <script src="rayquiz.js"></script>
     <script src="../quizAssignmentHelper.js"></script>
-
 </body>
 
-</html>
\ No newline at end of file
+</html>
+
diff --git a/quiz/rayquiz.js b/quiz/rayquiz.js
index d42ef68..6aff0db 100644
--- a/quiz/rayquiz.js
+++ b/quiz/rayquiz.js
@@ -11,17 +11,37 @@ let score = 0;
 let selectedOption = null;
 let userAnswers = new Array(questions.length).fill(null);
 
+let lastFocusedEl = null;
+
+function getSrStatus() {
+    return document.getElementById("sr-status");
+}
+
+function announce(message) {
+    const el = getSrStatus();
+    if (!el) return;
+    el.textContent = message;
+}
+
+
 function loadQuestion() {
+    lastFocusedEl = document.activeElement;
+
     let questionData = questions[currentQuestionIndex];
     document.getElementById("question").textContent = questionData.question;
 
     let optionsContainer = document.getElementById("options");
     optionsContainer.innerHTML = "";
 
-    questionData.options.forEach(option => {
+    questionData.options.forEach((option) => {
         let btn = document.createElement("button");
         btn.classList.add("option");
+        btn.type = "button";
         btn.textContent = option;
+
+        btn.setAttribute("role", "radio");
+        btn.setAttribute("aria-checked", "false");
+
         btn.onclick = () => selectOption(btn, option);
         optionsContainer.appendChild(btn);
     });
@@ -33,16 +53,28 @@ function loadQuestion() {
     document.getElementById("next-btn").classList.toggle("hidden", currentQuestionIndex === questions.length - 1);
 
     updateProgressBar();
+
+    announce(`Question ${currentQuestionIndex + 1} of ${questions.length}. ${questionData.question}`);
 }
 
+
 function selectOption(button, option) {
-    document.querySelectorAll(".option").forEach(btn => btn.classList.remove("selected"));
+    document.querySelectorAll(".option").forEach((btn) => {
+        btn.classList.remove("selected");
+        btn.setAttribute("aria-checked", "false");
+    });
+
     button.classList.add("selected");
+    button.setAttribute("aria-checked", "true");
+
     selectedOption = option;
     userAnswers[currentQuestionIndex] = option;
     document.getElementById("next-btn").disabled = false;
+
+    announce(`Selected: ${option}`);
 }
 
+
 function nextQuestion() {
     if (!selectedOption) {
         showPopup();
@@ -96,27 +128,44 @@ function restartQuiz() {
     document.getElementById("progress-bar").style.width = "0%";
 
     loadQuestion();
+
+    setTimeout(() => {
+        const firstOption = document.querySelector("#options .option");
+        if (firstOption) firstOption.focus();
+    }, 0);
 }
 
+
 function showPopup() {
+    lastFocusedEl = document.activeElement;
     document.getElementById("popup").style.display = "block";
+    const okBtn = document.getElementById("popup-ok");
+    if (okBtn) okBtn.focus();
+    announce("Warning: Please select an answer before proceeding.");
 }
 
 function closePopup() {
     document.getElementById("popup").style.display = "none";
+    if (lastFocusedEl && typeof lastFocusedEl.focus === "function") lastFocusedEl.focus();
 }
 
 function closeConfirmPopup() {
     document.getElementById("confirm-popup").style.display = "none";
+    if (lastFocusedEl && typeof lastFocusedEl.focus === "function") lastFocusedEl.focus();
 }
 
+
 function showResults() {
     document.getElementById("quiz-box").classList.add("hidden");
     document.getElementById("result-box").classList.remove("hidden");
 
+    const heading = document.getElementById("result-heading");
+    if (heading) heading.focus();
+
     let scoreText = `You scored <strong>${score}</strong> out of ${questions.length}! 🎉`;
     let feedbackHTML = "";
 
+
     questions.forEach((q, index) => {
         let userAnswer = userAnswers[index] || "No answer selected";
         let isCorrect = userAnswer === q.answer;
@@ -132,14 +181,106 @@ function showResults() {
     });
 
     document.getElementById("score").innerHTML = scoreText + "<br><br>" + feedbackHTML;
+
+    announce(`Quiz completed. Score: ${score} out of ${questions.length}.`);
 }
 
+
 function updateProgressBar() {
     let progress = ((currentQuestionIndex + 1) / questions.length) * 100;
     document.getElementById("progress-bar").style.width = progress + "%";
 }
 
+function getOptionButtons() {
+    return Array.from(document.querySelectorAll("#options .option"));
+}
+
+function moveOptionFocus(delta) {
+    const options = getOptionButtons();
+    if (options.length === 0) return;
+
+    const active = document.activeElement;
+    let idx = options.indexOf(active);
+    if (idx === -1) {
+        idx = selectedOption ? options.findIndex((b) => b.textContent === selectedOption) : 0;
+        if (idx < 0) idx = 0;
+    }
+
+    const nextIdx = Math.max(0, Math.min(options.length - 1, idx + delta));
+    options[nextIdx].focus();
+}
+
+document.addEventListener("keydown", (e) => {
+    const quizBox = document.getElementById("quiz-box");
+    if (!quizBox || quizBox.classList.contains("hidden")) return;
+
+    const key = e.key;
+    const options = getOptionButtons();
+    const active = document.activeElement;
+    const isOptionFocused = options.includes(active);
+
+    // Close dialogs with Escape
+    if (e.key === "Escape") {
+        const popup = document.getElementById("popup");
+        const confirmPopup = document.getElementById("confirm-popup");
+        if (popup && popup.style.display !== "none" && !popup.classList.contains("hidden")) {
+            e.preventDefault();
+            closePopup();
+            return;
+        }
+        if (confirmPopup && confirmPopup.style.display !== "none" && !confirmPopup.classList.contains("hidden")) {
+            e.preventDefault();
+            closeConfirmPopup();
+            return;
+        }
+    }
+
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        moveOptionFocus(1);
+        return;
+    }
+
+    if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        moveOptionFocus(-1);
+        return;
+    }
+
+    if (key === "Enter" || key === " ") {
+        if (isOptionFocused) {
+            e.preventDefault();
+            const optionText = active.textContent;
+            if (optionText) {
+                selectOption(active, optionText);
+            }
+            return;
+        }
+
+        // If an option is already selected, Enter/Space activates the primary action
+        if (selectedOption) {
+            const submitHidden = document.getElementById("submit-btn").classList.contains("hidden");
+            if (!submitHidden) {
+                e.preventDefault();
+                confirmSubmit();
+            } else {
+                const nextBtn = document.getElementById("next-btn");
+                if (nextBtn && !nextBtn.disabled) {
+                    e.preventDefault();
+                    nextQuestion();
+                }
+            }
+        }
+    }
+});
+
 document.addEventListener("DOMContentLoaded", () => {
     document.getElementById("progress-bar").style.width = "0%";
     loadQuestion();
+
+    setTimeout(() => {
+        const firstOption = document.querySelector("#options .option");
+        if (firstOption) firstOption.focus();
+    }, 0);
 });
+
