javascript - 试图为我的编码测验编写一个检查答案,但它不能正常工作,我错过了什么?
问题描述
这是我要开始工作的代码:
function checkAnswer(questionIndex) {
// This ID goes to a div storing the four buttons
var answersId = document.getElementById("answers");
//The four spans inside the buttons which has data-answer, targeting at their id. The id and data-answer are the same value.
var answer0 = document.getElementById("option0").getAttribute("data-answer");
var answer1 = document.getElementById("option1").getAttribute("data-answer");
var answer2 = document.getElementById("option2").getAttribute("data-answer");
var answer3 = document.getElementById("option3").getAttribute("data-answer");
answersId.addEventListener("click", function (event) {
if (event.target.hasAttribute("data-answer")) {
event.preventDefault;
if (answer0 == questionList[questionIndex].correctAnswer) {
console.log(answer0)
score++;
console.log(score)
console.log("This is option0")
}
else if (answer1 == questionList[questionIndex].correctAnswer) {
console.log(answer1)
score++;
console.log(score)
console.log("This is option1")
} else if (answer2 == questionList[questionIndex].correctAnswer) {
console.log(answer2)
score++;
console.log(score)
console.log("This is option2")
} else if (answer3 == questionList[questionIndex].correctAnswer) {
console.log(answer3)
score++;
console.log(score)
console.log("This is option3")
} else {
console.log(score)
}
}
});
}
这现在有点硬编码,但我想在优化它之前确保它确实有效。
基本上,我有用于多项选择测验的按钮,其想法是,根据单击的按钮,他们会获得选择正确答案的分数。在这种情况下,数据答案应该与正确答案相匹配。(如果正确答案是 option1,那么 "option1" == "option1")
但是无论单击哪个按钮(在这种情况下,答案确实是 option1),它都会给出要点并为选项 1 提供 console.log,这意味着即使我选择其他按钮,它也会不断选择 if 语句.
错误的答案(即 else 语句)没有被识别,或者更确切地说,尽管单击了错误的答案,它仍会继续识别第二个 if 语句,这让我发疯了。我认为我的逻辑是合理的,只是工作不正常。
你知道我在这里可能会错过什么吗?
编辑:这是被引用的 questionList 数组,以及每个变量的对象:
var question1 = {
text: "Commonly used data types do NOT include:",
choices: ["1 - Booleans", "2 - Alerts", "3 - Strings", "4 - Numbers"],
correctAnswer: "option1",
};
var question2 = {
text: "The condition of an if/else statement is enclosed within ______.",
choices: ["1 - Quotes", "2 - Curly Brackets", "3 - Parentheses", "4 - Square Brackets"],
correctAnswer: "option2",
};
var question3 = {
text: "Arrays in Javascript can be used to store ______.",
choices: ["1 - Numbers and strings", "2 - Other Arrays", "3 - Booleans", "4 - All of the above",],
correctAnswer: "option3",
};
var question4 = {
text: "String values must be enclosed within ______ when being assigned to variables.",
choices: ["1 - Quotes", "2 - Curly Brackets", "3 - Commas", "4 - Parentheses"],
correctAnswer: "option0",
};
var question5 = {
text: "A very useful tool used during development and debugging for printing content to the debugger is:",
choices: ["1 - Javascript", "2 - console.log", "3 - Terminal/bash", "4 - For loops"],
correctAnswer: "option1",
};
var questionList = [question1, question2, question3, question4, question5];
编辑2:
添加我正在调用该函数的位置。这次我将事件监听器从 checkAnswer() 函数中移出,就在它被调用之前。
document.getElementById("start-quiz").addEventListener("click", function (event) {
event.preventDefault;
event.stopPropagation;
countDown = 75;
countDownSpan.textContent = countDown;
document.querySelector("#description").style.display = "none";
document.querySelector("#start-quiz").style.display = "none";
contentId.style.textAlign = "left";
setTime();
createAnswers();
generateQA(0);
var answersId = document.getElementById("answers");
answersId.addEventListener("click", function (event) {
checkAnswer(0)
});
});
编辑3:
如果有帮助,这里是 github 页面的链接:
解决方案
推荐阅读
- php - wkhtmltopdf 和 adobe 字体指标
- .htaccess - 如何在 .htaccess 重定向规则中实现异常
- javascript - Kevin Lindsey 2D.js & Google 的 js 图表库抛出错误
- laravel - 遍历电子邮件模板以检查上次发送的时间
- php - issue with date format with php
- scala - 无形中的副产品不编译
- java - javaBeans 中不存在包 oracle.jdbc.driver
- php - PHP API 问题没有成功消息
- android - rn-fetch-blob actionViewIntent() 不适用于 Android 8.1 手机?
- tcl - 无法读取“env”:变量是数组