So fügen Sie Bilder zu einer JavaScript-Quizanwendung hinzu

Question

Ich versuche, Bilder zu einer JavaScript-Quiz-App hinzuzufügen, habe aber alles versucht und das Attribut „img src“ auf verschiedene Arten hinzugefügt, aber nichts scheint zu funktionieren ... Bitte helfen Sie, dass es für ein Projekt funktioniert, das so sein muss Erledigt. Das ist mein 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>

Ich möchte andere Bilder hinzufügen, wenn sich die Frage ändert. was soll ich machen?

Answer 1

我假设您希望图像与innerHTML一起出现在测验结束时。也许您使用的 URL 不是绝对的？我添加了一个带有绝对 URL 的图像，它可以工作：

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 = `
           
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