How to add images to a JavaScript quiz application

Question

I'm trying to add images to a JavaScript quiz app but I've tried everything, adding the "img src" attribute in different ways but nothing seems to work... Please help make it work for a project that needs to be done. This is my code...

const quizData = [{
    question: "Which language runs in a web browser?",
    a: "Java",
    b: "C",
    c: "Python",
    d: "javascript",
    correct: "d",

  },
  {
    question: "What does CSS stand for?",
    a: "Central Style Sheets",
    b: "Cascading Style Sheets",
    c: "Cascading Simple Sheets",
    d: "Cars SUVs Sailboats",
    correct: "b",
  },
  {
    question: "What does HTML stand for?",
    a: "Hypertext Markup Language",
    b: "Hypertext Markdown Language",
    c: "Hyperloop Machine Language",
    d: "Helicopters Terminals Motorboats Lamborginis",
    correct: "a",
  },
  {
    question: "What year was JavaScript launched?",
    a: "1996",
    b: "1995",
    c: "1994",
    d: "none of the above",
    correct: "b",
  },
  {
    question: "Is this a test run?",
    a: "yes it is",
    b: "why do you care?",
    c: "stop asking",
    d: "I don't know",
    correct: "d",
  },
  {
    question: "where do you see yourself in  years?",
    a: "In the gutter",
    b: "Forbes magazine",
    c: "Simple guy",
    d: "outside the country",
    correct: "b",
  },


];

const quiz = document.getElementById('quiz')
const answerEls = document.querySelectorAll('.answer')
const questionEl = document.getElementById('question')
const a_text = document.getElementById('a_text')
const b_text = document.getElementById('b_text')
const c_text = document.getElementById('c_text')
const d_text = document.getElementById('d_text')
const submitBtn = document.getElementById('submit')


let currentQuiz = 0
let score = 0

loadQuiz()

function loadQuiz() {

  deselectAnswers()

  const currentQuizData = quizData[currentQuiz]

  questionEl.innerText = currentQuizData.question
  a_text.innerText = currentQuizData.a
  b_text.innerText = currentQuizData.b
  c_text.innerText = currentQuizData.c
  d_text.innerText = currentQuizData.d
}

function deselectAnswers() {
  answerEls.forEach(answerEl => answerEl.checked = false)
}

function getSelected() {
  let answer
  answerEls.forEach(answerEl => {
    if (answerEl.checked) {
      answer = answerEl.id
    }
  })
  return answer
}


submitBtn.addEventListener('click', () => {
  const answer = getSelected()
  if (answer) {
    if (answer === quizData[currentQuiz].correct) {
      score++
    }

    currentQuiz++

    if (currentQuiz < quizData.length) {
      loadQuiz()
    } else {
      quiz.innerHTML = `
           <h2>You answered ${score}/${quizData.length} questions correctly</h2>
          
          

           <button onclick="location.reload()">Reload</button>
           `
    }
  }
})

<div class="quiz-container" id="quiz">
  <div class="quiz-header">
    <h2 id="question">Question Text</h2>
    <ul>
      <li> <input type="radio" name="answer" id="a" class="answer"> <label for="a" id="a_text">Answer</label> </li>
      <li> <input type="radio" name="answer" id="b" class="answer"> <label for="b" id="b_text">Answer</label> </li>
    </ul>
  </div>
  <button id="submit">Submit</button>
</div>

I want to add different images when the question changes. what should I do?

Answer 1

I'm assuming you want the image to appear at the end of the quiz along with the innerHTML. Maybe the URL you're using isn't absolute? I added an image with an absolute URL and it works:

const quizData = [{
    question: "Which language runs in a web browser?", correct: "d",
    a: "Java", b: "C", c: "Python", d: "javascript",
    img: "https://placekitten.com/200/200"
  },
  {
    question: "What does CSS stand for?", correct: "b",
    a: "Central Style Sheets", b: "Cascading Style Sheets", c: "Cascading Simple Sheets", d: "Cars SUVs Sailboats",
    img: "https://placekitten.com/300/200"
  },
  {
    question: "What does HTML stand for?", correct: "a",
    a: "Hypertext Markup Language", b: "Hypertext Markdown Language", c: "Hyperloop Machine Language", d: "Helicopters Terminals Motorboats Lamborginis",
    img: "https://placekitten.com/200/300"
  },
  {
    question: "What year was JavaScript launched?", correct: "b",
    a: "1996", b: "1995", c: "1994", d: "none of the above",
    img: "https://placekitten.com/400/200"
  },
  {
    question: "Is this a test run?", correct: "d",
    a: "yes it is", b: "why do you care?", c: "stop asking", d: "I don't know",
    img: "https://placekitten.com/200/400"
  },
  {
    question: "where do you see yourself in  years?", correct: "b",
    a: "In the gutter", b: "Forbes magazine", c: "Simple guy", d: "outside the country",
    img: "https://placekitten.com/500/200"
}];

const quiz = document.getElementById('quiz')
const answerEls = document.querySelectorAll('.answer')
const questionEl = document.getElementById('question')
const a_text = document.getElementById('a_text')
const b_text = document.getElementById('b_text')
const c_text = document.getElementById('c_text')
const d_text = document.getElementById('d_text')
const submitBtn = document.getElementById('submit')
const questImg = document.querySelector('.question-container > img')

let currentQuiz = 0
let score = 0

loadQuiz()

function loadQuiz() {

  deselectAnswers()

  const currentQuizData = quizData[currentQuiz]
  questionEl.innerText = currentQuizData.question
  a_text.innerText = currentQuizData.a
  b_text.innerText = currentQuizData.b
  c_text.innerText = currentQuizData.c
  d_text.innerText = currentQuizData.d
  questImg.src = currentQuizData.img
}

function deselectAnswers() {
  answerEls.forEach(answerEl => answerEl.checked = false)
}

function getSelected() {
  let answer
  answerEls.forEach(answerEl => {
    if (answerEl.checked) {
      answer = answerEl.id
    }
  })
  return answer
}


submitBtn.addEventListener('click', () => {

      const answer = getSelected()
      
      if (answer) {
        if (answer === quizData[currentQuiz].correct) {
          score++
        }
        currentQuiz++;        
        
      if(currentQuiz You answered ${score}/${quizData.length} questions correctly
          
           Reload
           `
       }
    }
})

.question-container{
  display: flex;
  align-items: flex-end;
}
.question-container > img{
  width: 100px;
  margin-left: 10px;
}

  

  



















Submit