【发布时间】：2021-12-19 01:29:21
【问题描述】：
代码没有按照我的意愿执行。我确定缺少某些东西，但不知道是什么。当我点击“检查分数”按钮时，我希望它显示分数，但现在它只显示“你得分：0/10。我的 displayScore() 函数不起作用。 谁能告诉我我在这里缺少什么？请注意，使用 checkboxex 的问题有两个可能的正确答案。
(function () {
function renderQuiz() {
const quizContainer = document.querySelector("#quizContainer");
let quizStr = '';
// Loops over the object properties (obj) and also takes an index parameter
quiz.forEach((obj, questionIndex) => {
// Empty string to keep the li element containing the label and input
let answerStr = '';
//Loops over the options object inside of the array quiz
for (const option in obj.options) {
/* If it has an object that has an array as a value it renders the inputs as checkboxes */
if (Array.isArray(obj.correct) === true) {
answerStr += `
<li>
<label>
<input
value=""
type="checkbox"
name="question-${questionIndex}"
data-correct="${obj.correct}"
>
${obj.options[option]}
</label>
<li> `;
/* Else it renders the inputs as radiobuttons */
} else {
answerStr += `
<li>
<label>
<input
type="radio"
name="question-${questionIndex}"
data-correct="${obj.correct}"
>
${obj.options[option]}
</label>
<li> `;
}
}
quizStr += `
<form>
<h3>${obj.question}</h3>
<ul>
${answerStr}
</ul>
</form> `;
})
quizContainer.innerHTML = quizStr;
}
const resultsContainer = document.querySelector("#results");
// Adds held score to total and displays a text with the score
function displayScore() {
const answerContainer = [];
quiz.forEach((obj, questionIndex) => {
let userAnswer = `input[name="question-${questionIndex}]:checked`;
let answers = [];
if (userAnswer >= 2) {
userAnswer.forEach(e => {
let selected = e.target.userAnswer;
answers.push(selected);
})
} else {
answers = userAnswer[0];
}
answerContainer.push(answers);
});
let score = 0;
for (let i = 0; i < quiz.length; i++) {
let correctAnswer = quiz[i].correct;
let userChoice = answerContainer[0];
if (Array.isArray(correctAnswer)) {
if (JSON.stringify(correctAnswer) === JSON.stringify(userChoice)) {
score++;
}
} else if (correctAnswer === userChoice) {
score++;
}
}
resultsContainer.innerHTML = `<p>You scored : ${score} / ${quiz.length}</p>`;
}
// Objects with question sections within an array
let quiz = [
{
question: "I vilket land produceras det mest kaffe?",
options: {
a: "Kolombia",
b: "Brasilien",
c: "Indonesien",
d: "Vietnam"
},
correct: "b"
},
{
question: "I vilket land konsumeras det mest kaffe?",
options: {
a: "Italien",
b: "Belgien",
c: "Finland",
d: "Kanada"
},
correct: "c"
},
{
question: "Ordet kaffe betyder vin på det språket det härstammar ifrån. Vilket språk är det?",
options: {
a: "Arabiska",
b: "Ryska",
c: "Turkiska",
d: "Grekiska"
},
correct: "a"
},
{
question: "Hur många kalorier finns i en kopp kaffe?",
options: {
a: "1",
b: "5",
c: "14",
d: "7"
},
correct: "a"
},
{
question: "Vem upptäckte kaffet?",
options: {
a: "En bonde",
b: "En fåraherde",
c: "En munk",
d: "En jägare"
},
correct: "b"
},
{
question: "På vilket djurs avföring är världens dyraste kaffe gjord på?",
options: {
a: "Mus",
b: "Fågel",
c: "Apa",
d: "Katt"
},
correct: "d"
},
{
question: "När kom kaffet till Sverige?",
options: {
a: "1700-talet",
b: "1800-talet",
c: "1400-talet",
d: "1600-talet"
},
correct: "d"
},
{
question: "Vilka två av dessa alternativ är typer av kaffe?",
options: {
a: "Arabica",
b: "Mocca",
c: "Robusta",
d: "Java"
},
correct: ["a", "c"]
},
{
question: "Välj de enda två delstaterna i U.S.A som odlar kaffebönor?",
options: {
a: "Georgia",
b: "Kalifornien",
c: "Hawaii",
d: "Florida"
},
correct: ["b", "c"]
},
{
question: "Hur förvaras kaffe som bäst? Välj två sätt.",
options: {
a: "Svalt",
b: "I kylskåp",
c: "Öppet",
d: "Mörkt"
},
correct: ["a", "d"]
}
];
renderQuiz();
let checkButton = document.querySelector("#check");
checkButton.addEventListener("click", displayScore)
})();
【问题讨论】：
-
仅使用脚本很难处理您的代码。请调整您的问题以包含 HTML、CSS 和 JavaScript，以便我们可以在它运行时与之交互。
标签： javascript arrays function javascript-objects addeventlistener