16.2 Quiz Interface

1. Remember that empty <div id="app"></div> in your HTML file? Before we can add anything to it, we need to give JavaScript a way to find and control it! So the very first thing we'll do in index.mjs is grab that div and save it to a variable.

const appDiv = document.getElementById("app");

2. Now we need to organize our quiz data. Ask yourself: what does a quiz question need to have?
• The question text itself
• A list of answer choices
• The correct answer
• A message to show when the user gets it right
• A message to show when the user gets it wrong
That's an object! And since we have multiple questions, we need an array of objects. This structure is called an array of objects, and it's one of the most common patterns you'll see in real-world JavaScript.

3. Create your questions array:

const questions = [
  {
    question: "What year was Kode with Klossy founded?",
    options: ["2000", "2010", "2015", "2020"],
    correctAnswer: "2015",
    correctMessage: "Correct! Kode with Klossy was founded in 2015.",
    incorrectMessage: "Not quite. Kode with Klossy was founded in 2015.",
  },
  {
    question: "Which tracks are available at KWK camp in 2026?",
    options: [
      "Data Science",
      "Web Development",
      "AI/Machine Learning",
      "All of the above",
    ],
    correctAnswer: "All of the above",
    correctMessage: "Correct! KWK is teaching Data Science, Web Dev, and AI/ML this summer!",
    incorrectMessage: "Incorrect. Kode with Klossy has 3 amazing learning tracks!",
  },
  {
    question: "How many KWK alumni are there?",
    options: ["5,000", "7,000", "10,000", "12,000"],
    correctAnswer: "12,000",
    correctMessage: "There are over 12,000 alumni of KWK programs!",
    incorrectMessage: "Incorrect. Guess a bigger number!",
  },
];

Take a moment to read through this carefully. Notice how all three questions follow the exact same shape with the same keys. That consistency is what's going to let us loop over them in the next step and treat every question the same way!

4. Customize it! Swap in your own questions, answers, and messages. This is your quiz — make it about something you care about.

// Build all the HTML
questions.forEach((question, i) => {
  const options = question.options;

  appDiv.innerHTML += `
      <div class="question-card" id="question-card-${i}">
        <p class="question" id="question-${i}">${question.question}</p>
        <div class="options" id="options-${i}">
          <button class="option" id="option-${i}-0">${options[0]}</button>
          <button class="option" id="option-${i}-1">${options[1]}</button>
          <button class="option" id="option-${i}-2">${options[2]}</button>
          <button class="option" id="option-${i}-3">${options[3]}</button>
        </div>
        <p class="feedback" id="feedback-${i}"></p>
      </div>`;
});

1. questions.forEach((question, i) => { ... }) → This loops over every question in the array. question is the current question object. i is its index (0, 1, or 2). We'll use i to give every element a unique ID.

2. const options = question.options → We pull out the options array from the current question and save it to a variable. This is just for convenience! It's shorter to write options[0] than question.options[0] four times in a row.

3. We use a template literal (the backtick string) to write out the full HTML for one question card. We drop question.question in for the question text, use options[0] through options[3] to fill in each button, and use i to give every element a unique ID like question-0, options-1, feedback-2.

4. appDiv.innerHTML += → The += means “add this to whatever's already there.” So the first time through the loop, we add question 0's card. Second time, question 1's card gets appended. Third time, question 2. By the end of the loop, all three cards are on the page!

💡 Why give everything a unique ID? Because later, we need to find specific elements on the page, like “the feedback paragraph for question 1” or “all the buttons for question 2.” Those unique IDs are what let us pinpoint exactly the right element.

// Attach event listeners
questions.forEach((question, i) => {
  const buttons = document.querySelectorAll(`#options-${i} .option`);

  buttons.forEach((button) => {
    button.addEventListener("click", (event) => {
      // (We'll fill this in next!)
      console.log(event.target.textContent);
    });
  });
});

• The outer forEach loops over questions, giving us question and i.

• querySelectorAll grabs all buttons for that specific question by targeting #options-0 .option, then #options-1 .option, etc.

• The inner forEach loops over those buttons and attaches a click event listener to each one.

• The event listener callback takes event as a parameter. That's the click event object, and event.target will be the specific button that was clicked!

• For now, we’ll log the textContent of the button that’s clicked. Save your file and check the preview. When you click a button, do you see the button’s text logged to the console?

⚠️ Order matters! This loop needs to come after the HTML-building loop. If you try to attach event listeners to buttons that don't exist yet, JavaScript will just find nothing and silently do nothing. Build the HTML first, then add the listeners.

1. Figure out which button was clicked

2. Compare it to the correct answer

3. Show the right feedback message

questions.forEach((question, i) => {
  const buttons = document.querySelectorAll(`#options-${i} .option`);

  buttons.forEach((button) => {
    button.addEventListener("click", (event) => {
      // Check the answer
      const feedback = document.getElementById(`feedback-${i}`);
      if (event.target.textContent === question.correctAnswer) {
        feedback.textContent = question.correctMessage;
      } else {
        feedback.textContent = question.incorrectMessage;
      }
    });
  });
});

• document.getElementById('feedback-${i}') → This grabs the empty feedback paragraph we built for this question in Step 3. Remember those unique IDs? This is exactly why we made them!

• event.target.textContent → event.target is the button that was clicked. .textContent gives us the text inside that button or the answer the user chose. We compare that string to question.correctAnswer.
• If they match, we set the feedback paragraph's text to the correct message. If they don't, we set it to the incorrect message.

1. The user can keep clicking buttons after they've already answered.

2. There's no final score at the end.

let score = 0;
let answeredCount = 0;

questions.forEach((question, i) => {
  const buttons = document.querySelectorAll(`#options-${i} .option`);

  buttons.forEach((button) => {
    button.addEventListener("click", (event) => {
      // Check the answer
      const feedback = document.getElementById(`feedback-${i}`);
      if (event.target.textContent === question.correctAnswer) {
        feedback.textContent = question.correctMessage;
        score++;
      } else {
        feedback.textContent = question.incorrectMessage;
      }

      // Disable all buttons for this question
      buttons.forEach((button) => {
        button.disabled = true;
      });

      // Check if quiz is finished
      answeredCount++;
      if (answeredCount === questions.length) {
        appDiv.innerHTML += `<p class="score">You got ${score} out of ${questions.length} correct!</p>`;
      }
    });
  });
});

• score++ → If the answer was correct, we increment score. Because it lives at the top of the file, it remembers its value between clicks. It doesn't reset!

• button.disabled = true is a built-in property of HTML button elements. Setting it to true makes the button unclickable. We loop over all the buttons for this question and disable every single one.

• Every time a button is clicked, we increment answeredCount. Then we check: is answeredCount equal to questions.length? If so, every question has been answered and it's time to show the score. We use += on appDiv.innerHTML to append a final score paragraph without overwriting the question cards.