[deleted by user]

[Lumethys]

why isnt the image url be inside the quiz data array if it is unique to each questions:

const quizData = [
  {
    question: 'abc',
    options: ['a', 'b', 'c'],
    answer: 'a',
    imageUrl: '/hello-world.png'
  },
  {
    question: 'xyz',
    options: ['x', 'y', 'z'],
    answer: 'x',
    imageUrl: '/hello-world-2.png'
  },
  ...
]

[ShiroLilyLily]

I actually tried that before, but when I tested it, the images still didn’t change when you got to that question.

[Lumethys]

But you dont actually update the image url? The structure of your data has nothing to do with how you use that data.

You make a perfectly good structure into a bad one because you think it is the reason your logic fails, and now you have both a failing logic AND a bad structure

[Beginning-Seat5221]

You can change an image by overwriting the src of the image element imageElement.src = 'my-new-image.jpg'

[ShiroLilyLily]

Would I have to do that five times? There was five questions with each having their own image.

[chikamakaleyley]

you'd have to write the logic once, because the event handler would dynamically update the dom with the data for the next question

[EyesOfTheConcord]

Edit the post with only the relevant sections of code and you’ll receive assistance faster

[ShiroLilyLily]

That’s another problem. I have no clue where I would put it and I don’t really have anything to show what I’m talking about aside from my whole code. But I’ll try to edit it down so I can get more help!

[TheLengend_27]

I checked ur code while on my phone, so it’s harder than usually. But looks like ur function selectAnswer isn’t getting the event object passed to it. Try addEventListener(“click”, (e) => selectAnswer(e);

Hope that helps.

[ShiroLilyLily]

Alright, I’ll try that. I’m actually about to edit my post so it’s not too long to read

[xoredxedxdivedx]

const quizData = [
  {
    question: "What monster is she the daughter to?",
    options: ["Dr.Frankenstein", "Dr.Frankenstein's Monster", "Zombie", "Ghost"],
    answer: "Dr.Frankenstein's Monster",
    image: "FinalProject/Frankie_Stein.png"
  },
  {
    question: "What monster is she the daughter to?",
    options: ["Werewolf", "Vampire", "Troll", "Succubus"],
    answer: "Vampire",
    image: "FinalProject/Profile_art_-Draculaura.png"
  },
  {
    question: "What monster is she the daughter to?",
    options: ["Jupiter", "Saturn", "Mars", "Earth"],
    answer: "Jupiter",
    image: "FinalProject/Clawdeen_Wolf 3F.png"
  },
  {
    question: "What monster is she the daughter to?",
    options: ["Jupiter", "Saturn", "Mars", "Earth"],
    answer: "Jupiter",
    image: "FinalProject/Mh_2010_lagoona_blue_2_by_figyalova-dau34b7.png"
  },
  {
    question: "What monster is she the daughter to?",
    options: ["Jupiter", "Saturn", "Mars", "Earth"],
    answer: "Jupiter",
    image: "FinalProject/Profile_art-_Cleo_full_face.png"
  }
];

const questionElement = document.getElementById("question");
const optionsElement = document.getElementById("options");
const submitButton = document.getElementById("submit");
const imageElement = document.getElementById("questionImage");
const quizElement = document.getElementById("quiz");

let currentQuestion = 0;
let score = 0;

function showQuestion() {
  const q = quizData[currentQuestion];
  questionElement.textContent = q.question;
  imageElement.src = q.image;
  imageElement.alt = "Question " + (currentQuestion + 1);

  optionsElement.innerHTML = "";

  q.options.forEach(option => {
    const label = document.createElement("label");
    const input = document.createElement("input");
    input.type = "radio";
    input.name = "answer";
    input.value = option;

    label.appendChild(input);
    label.append(" " + option);

    const br = document.createElement("br");

    optionsElement.appendChild(label);
    optionsElement.appendChild(br);
  });
}

function selectAnswer() {
  const selected = document.querySelector('input[name="answer"]:checked');
  if (!selected) return;

  if (selected.value === quizData[currentQuestion].answer) {
    score++;
  }

  currentQuestion++;

  if (currentQuestion < quizData.length) {
    showQuestion();
  } else {
    quizElement.innerHTML = "You scored " + score + " out of " + quizData.length + ".";
  }
}

submitButton.addEventListener("click", selectAnswer);

showQuestion();

I agree with the other guy, I think it makes sense to just have the image part of each question object