Project - 3

Project 3: Interactive Quiz App

Build a multiple-choice quiz that shows one question at a time and keeps track of the score.

Your challenge: Store questions in an array, create answer buttons with JavaScript, check each answer, and show the final score.

✦ HTML + CSS + JS Editor

▶ Live Output

Store the quiz data

Each object in the questions array contains a question, several options, and the index of the correct answer.

Create the answer buttons

Inside loadQuestion(), use forEach() to go through the options and create a button for each one.

When a button is clicked, pass its index to checkAnswer().

Check the answer

Compare the selected index with questions[current].answer.

If they match, increase score.

Then increase current and either load the next question or show the final score.

Try it: Take the quiz several times and change one of the questions or answers.

Good JavaScript habit: Keep your quiz data separate from the functions that display and check it. This makes the quiz easier to update.

👀 Show Full Working Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quiz App</title>

  <style>
    body {
      background: #000;
      color: #8A8A8A;
      font-family: 'Courier New', monospace;
      padding: 40px;
      margin: 0;
      text-align: center;
    }

    #quiz {
      max-width: 600px;
      margin: 0 auto;
    }

    button {
      display: block;
      width: 100%;
      padding: 12px;
      margin: 10px 0;
      background: #111;
      color: #fff;
      border: 1px solid #8A8A8A;
      border-radius: 6px;
      cursor: pointer;
    }

    button:hover {
      background: #222;
    }

    button:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 3px;
    }
  </style>
</head>

<body>

  <h2>Knowledge Quiz</h2>

  <div id="quiz">
    <p id="question"></p>
    <div id="options"></div>
    <p id="result"></p>
  </div>

  <script>
    const questions = [
      {
        question: "What does HTML mainly provide?",
        options: ["Page structure", "Database storage", "Image editing"],
        answer: 0
      },
      {
        question: "Which language is mainly used for styling web pages?",
        options: ["Python", "CSS", "SQL"],
        answer: 1
      },
      {
        question: "Which keyword creates a variable that can be reassigned?",
        options: ["let", "const", "return"],
        answer: 0
      }
    ];

    let current = 0;
    let score = 0;

    const questionText =
      document.getElementById("question");

    const optionsDiv =
      document.getElementById("options");

    const result =
      document.getElementById("result");

    function loadQuestion() {
      const q = questions[current];

      questionText.textContent = q.question;
      optionsDiv.textContent = "";
      result.textContent = "";

      q.options.forEach(function(option, index) {
        const button =
          document.createElement("button");

        button.type = "button";
        button.textContent = option;

        button.addEventListener("click", function() {
          checkAnswer(index);
        });

        optionsDiv.appendChild(button);
      });
    }

    function checkAnswer(selected) {
      if (selected === questions[current].answer) {
        score++;
      }

      current++;

      if (current < questions.length) {
        loadQuestion();
      } else {
        questionText.textContent =
          "Quiz complete!";

        optionsDiv.textContent = "";

        result.textContent =
          "Your score: " +
          score +
          " / " +
          questions.length;
      }
    }

    loadQuestion();
  </script>

</body>
</html>