HTML Quiz

Understand the topic

Use this knowledge check after the tutorial and forms sections. Choose one answer for each question, then check your score. The result is calculated locally and is not stored as a completion record. If you miss a question, return to the relevant lesson and explain the rule in your own words before trying again.

Worked example

<form id="quiz">
<fieldset><legend>1. Which element holds the visible document content?</legend><label><input type="radio" name="q1" value="0" required> head</label><label><input type="radio" name="q1" value="1"> body</label></fieldset>
<fieldset><legend>2. Which attribute names a submitted form value?</legend><label><input type="radio" name="q2" value="1" required> name</label><label><input type="radio" name="q2" value="0"> id</label></fieldset>
<fieldset><legend>3. What should a decorative image usually have?</legend><label><input type="radio" name="q3" value="0" required> No alt attribute</label><label><input type="radio" name="q3" value="1"> alt=""</label></fieldset>
<fieldset><legend>4. Which element describes a table header?</legend><label><input type="radio" name="q4" value="1" required> th</label><label><input type="radio" name="q4" value="0"> td</label></fieldset>
<fieldset><legend>5. Does required replace server validation?</legend><label><input type="radio" name="q5" value="0" required> Yes</label><label><input type="radio" name="q5" value="1"> No</label></fieldset>
<fieldset><legend>6. Which button type avoids form submission?</legend><label><input type="radio" name="q6" value="1" required> button</label><label><input type="radio" name="q6" value="0"> submit</label></fieldset>
<fieldset><legend>7. What makes an id useful as a fragment destination?</legend><label><input type="radio" name="q7" value="1" required> It is unique in the document</label><label><input type="radio" name="q7" value="0"> It is repeated on every section</label></fieldset>
<fieldset><legend>8. Which is a valid displayed less-than character reference?</legend><label><input type="radio" name="q8" value="1" required> &amp;lt;</label><label><input type="radio" name="q8" value="0"> #less</label></fieldset>
<button type="submit">Check answers</button><button type="reset">Reset</button>
</form><p id="score" role="status"></p>
<script>
const quiz = document.querySelector("#quiz"), score = document.querySelector("#score");
quiz.addEventListener("submit", e => { e.preventDefault(); const points = [...new FormData(quiz).values()].reduce((sum, value) => sum + Number(value), 0); score.textContent = points + " / 8 correct. Review: body, name, empty alt for decoration, th, server validation, type=button, unique IDs, and &lt;."; });
quiz.addEventListener("reset", () => { score.textContent = ""; });
</script>

The browser requires an answer in each group. The score counts correct choices; the explanation identifies the underlying concepts rather than awarding a credential.

Practice

Take the quiz, then explain why an id and a name serve different purposes.

id identifies an element in the DOM and can connect a label or fragment. name identifies a value in form submission data.

Common mistake

Do not treat a perfect score on a small quiz as proof that a real project is accessible or secure. Test practical work too.

HTML documentation