JavaScript Quiz Script

A browser quiz can check a radio-button answer immediately and show a correct or wrong message without reloading the page. The original Plus2net example uses one question with four choices; this updated version keeps the same demo, Submit/Reset controls, result images, download, and radio-button/layer learning path while using modern DOM events.

Demo of Quiz Script

Read how radio buttons can control visible sections.

How the Quiz Works Top ↑

All four radio buttons share the name q. The correct answer keeps value 1, matching the original demo. A change listener checks the selected radio button and toggles the two feedback boxes. Submitting repeats the check without navigating away; Reset clears the selection and hides the result.

Complete Working Source Top ↑

The full page below is self-contained apart from the original images/correct.jpg and images/wrong.jpg assets.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript Quiz Demo</title>
<style>
.feedback { margin-top: 1rem; padding: .75rem; border: 1px solid #ccc; max-width: 18rem; }
.feedback img { width: 24px; height: 24px; vertical-align: middle; margin-right: .4rem; }
</style>
</head>
<body>
<form id="quizForm">
  <fieldset>
    <legend>Here is the question</legend>
    <label><input type="radio" name="q" value="1"> Answer 1</label><br>
    <label><input type="radio" name="q" value="2"> Answer 2</label><br>
    <label><input type="radio" name="q" value="3"> Answer 3</label><br>
    <label><input type="radio" name="q" value="4"> Answer 4</label>
  </fieldset>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>
<div id="sub1" class="feedback" hidden><img src="images/correct.jpg" alt=""> Correct</div>
<div id="sub2" class="feedback" hidden><img src="images/wrong.jpg" alt=""> Wrong</div>
<script>
const form = document.getElementById("quizForm");
const choices = form.elements.q;
const correctBox = document.getElementById("sub1");
const wrongBox = document.getElementById("sub2");

function showResult() {
  const selected = form.querySelector('input[name="q"]:checked');
  if (!selected) {
    correctBox.hidden = true;
    wrongBox.hidden = true;
    return;
  }
  const isCorrect = selected.value === "1";
  correctBox.hidden = !isCorrect;
  wrongBox.hidden = isCorrect;
}

choices.forEach(choice => choice.addEventListener("change", showResult));
form.addEventListener("submit", event => {
  event.preventDefault();
  showResult();
});
form.addEventListener("reset", () => {
  window.setTimeout(() => {
    correctBox.hidden = true;
    wrongBox.hidden = true;
  }, 0);
});
</script>
</body>
</html>

Download the Quiz Files Top ↑

Download the complete quiz ZIP

The downloadable ZIP has been updated to match the modern example shown above.

Select one option of Period button before submitting form
disabling Period button by a checkbox by using disabled property
Simple Quiz script using radio buttons and Layers in JavaScript

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: