我试图为 JavaScript 测验应用程序添加图像,但我尝试了一切,以不同的方式添加“img src”属性,但似乎没有任何效果...请帮助它用于需要完成的项目。这是我的代码...
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>
我想在问题发生变化时添加不同的图像。我该怎么做?
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
我假设您希望图像与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 You answered ${score}/${quizData.length} questions correctly
`
}
}
}).question-container{ display: flex; align-items: flex-end; } .question-container > img{ width: 100px; margin-left: 10px; }