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

Write Preview
Loading…
Cancel
Save