How can I add Images to JavaScript quiz app

Question

I was trying to add images for a JavaScript quiz app but I tried everything, adding "img src" attribute in different ways but nothing seems to work...please help it's for a project that needs to be done. here 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 whenever the questions changes.How can I do that?

Answer 1

I'm assuming you want the image to appear with the innerHTML at the end of the quiz. Maybe the URL you're using isn't absolute? I've 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 < quizData.length) { loadQuiz() } else { quiz.innerHTML = ` <h2>You answered ${score}/${quizData.length} questions correctly</h2> <img src="https://placekitten.com/200/200"> <button onclick="location.reload()">Reload</button> ` } } })

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

 <div id="quiz"></div> <div class="question-container"> <div id="question"></div> <img /> </div> <input id="a" type="checkbox" class="answer" /> <label id="a_text"></label> <br> <input id="b" type="checkbox" class="answer" /> <label id="b_text"></label> <br> <input id="c" type="checkbox" class="answer" /> <label id="c_text"></label> <br> <input id="d" type="checkbox" class="answer" /> <label id="d_text"></label> <br><br> <button id="submit">Submit</button>