msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

Enhanced Quiz App with Accessibility and Semantic Improvements

Browse Source 
Changes Made:

Improved accessibility using aria-live and descriptive labels.
Refactored the form structure for better semantic grouping of inputs.
Added a placeholder for dynamic question loading.
Included radio button values for easier backend handling.
Enhanced the submit button with proper form submission type.
pull/214/head
Kelvin Yeboah 9 months ago committed by GitHub
parent 9409685c9a
commit 08edfbdb11
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 25 additions and 26 deletions
Show Stats Download Patch File Download Diff File

51
quiz-app/index.html
Unescape View File

@ -1,39 +1,38 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<title>Quiz App</title> <title>Quiz App</title>
</head> </head>
<body> <body>
<div class="quiz-container" id="quiz"> <main class="quiz-container" id="quiz">
<div class="quiz-header"> <section class="quiz-header">
<h2 id="question">Question text</h2> <h2 id="question" aria-live="polite">Loading Question...</h2>
<form id="quiz-form">
<ul> <ul>
<li> <li>
<input type="radio" name="answer" id="a" class="answer"> <input type="radio" name="answer" id="a" class="answer" value="a" />
<label for="a" id="a_text">Question</label> <label for="a" id="a_text">Option A</label>
</li> </li>
<li> <li>
<input type="radio" name="answer" id="b" class="answer"> <input type="radio" name="answer" id="b" class="answer" value="b" />
<label for="b" id="b_text">Question</label> <label for="b" id="b_text">Option B</label>
</li> </li>
<li> <li>
<input type="radio" name="answer" id="c" class="answer"> <input type="radio" name="answer" id="c" class="answer" value="c" />
<label for="c" id="c_text">Question</label> <label for="c" id="c_text">Option C</label>
</li> </li>
<li> <li>
<input type="radio" name="answer" id="d" class="answer"> <input type="radio" name="answer" id="d" class="answer" value="d" />
<label for="d" id="d_text">Question</label> <label for="d" id="d_text">Option D</label>
</li> </li>
</ul> </ul>
</div> <button id="submit" type="submit">Submit</button>
<button id="submit">Submit</button> </form>
</div> </section>
<script src="script.js"></script> </main>
</body> <script src="script.js"></script>
</body>
</html> </html>

Write Preview
Loading…
Cancel
Save