The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing

Categories We Write About

Build a timed quiz generator

Written by

in

Computer Science

Here’s a functional timed quiz generator built using HTML, CSS, and JavaScript. It lets users answer multiple-choice questions within a set time limit. When the time runs out or all questions are answered, the score is displayed.

✅ Features:

Add/remove multiple-choice questions easily
Countdown timer
Automatic submission when time ends
Score calculation

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Timed Quiz Generator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f5f5f5;
      padding: 20px;
      max-width: 600px;
      margin: auto;
    }
    .quiz-container {
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .question {
      margin-bottom: 20px;
    }
    .answers label {
      display: block;
      margin-bottom: 8px;
    }
    .timer {
      font-size: 18px;
      font-weight: bold;
      color: #d9534f;
      text-align: right;
    }
    #submit {
      padding: 10px 20px;
      background-color: #0275d8;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    #result {
      font-size: 20px;
      margin-top: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>

<div class="quiz-container">
  <div class="timer" id="timer">Time left: 60s</div>
  <form id="quizForm">
    <div class="question">
      <p>1. What is the capital of France?</p>
      <div class="answers">
        <label><input type="radio" name="q1" value="A"> Berlin</label>
        <label><input type="radio" name="q1" value="B"> Paris</label>
        <label><input type="radio" name="q1" value="C"> Madrid</label>
      </div>
    </div>

    <div class="question">
      <p>2. What is 2 + 2?</p>
      <div class="answers">
        <label><input type="radio" name="q2" value="A"> 3</label>
        <label><input type="radio" name="q2" value="B"> 4</label>
        <label><input type="radio" name="q2" value="C"> 5</label>
      </div>
    </div>

    <div class="question">
      <p>3. Who wrote 'Romeo and Juliet'?</p>
      <div class="answers">
        <label><input type="radio" name="q3" value="A"> Charles Dickens</label>
        <label><input type="radio" name="q3" value="B"> William Shakespeare</label>
        <label><input type="radio" name="q3" value="C"> Mark Twain</label>
      </div>
    </div>

    <button type="button" id="submit">Submit</button>
  </form>

  <div id="result"></div>
</div>

<script>
  const correctAnswers = {
    q1: 'B',
    q2: 'B',
    q3: 'B'
  };

  let timeLeft = 60;
  const timerEl = document.getElementById('timer');
  const resultEl = document.getElementById('result');
  const submitBtn = document.getElementById('submit');
  const quizForm = document.getElementById('quizForm');

  const timer = setInterval(() => {
    timeLeft--;
    timerEl.textContent = `Time left: ${timeLeft}s`;

    if (timeLeft <= 0) {
      clearInterval(timer);
      gradeQuiz();
    }
  }, 1000);

  submitBtn.addEventListener('click', () => {
    clearInterval(timer);
    gradeQuiz();
  });

  function gradeQuiz() {
    let score = 0;
    let total = Object.keys(correctAnswers).length;

    for (let key in correctAnswers) {
      const selected = quizForm.elements[key].value;
      if (selected === correctAnswers[key]) {
        score++;
      }
    }

    resultEl.textContent = `You scored ${score} out of ${total}`;
    submitBtn.disabled = true;
  }
</script>

</body>
</html>

🛠️ To Add More Questions:

Duplicate the .question div.
Update question text and choices.
Add a new entry in the correctAnswers object (e.g., q4: 'A').

Let me know if you’d like features like question randomization, persistent scores, or backend support.

Share this Page your favorite way: Click any app below to share.

See all the ways to share this page

Check Out Our Newest Posts we wrote about

Categories We Write About