Skip to content

accessibility(quiz): add ARIA roles and labels to math and chemistry … #243

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Roshan-B87 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

accessibility(quiz): add ARIA roles and labels to math and chemistry … #243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 70 additions & 60 deletions chemistryquiz/atomic_structurequiz.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
130 changes: 70 additions & 60 deletions chemistryquiz/chemical_bondingquiz.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
128 changes: 69 additions & 59 deletions chemistryquiz/equilibriumquiz.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading