Вот код, который я пытаюсь заставить работать:
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)
}
}
});
}
Это прямо сейчас жестко закодировано, но я хочу убедиться, что оно действительно работает, прежде чем его оптимизировать.
По сути, у меня есть кнопки для викторины с множественным выбором, и идея в том, что в зависимости от нажатой кнопки, они получают точку для выбора правильного ответа. В этом случае данные-ответы должны соответствовать любому правильному ответу. (Если правильный ответ - вариант1, то «вариант1» == «вариант1»)
Но независимо от того, какая кнопка нажата (в данном случае ответ действительно является вариантом 1), он дает точку и дает console.log для варианта 1, что означает, что он постоянно выбирает оператор if, даже когда я выбираю другие кнопки.
Меня просто сводит с ума, что неправильный ответ, который является оператором else, не является будучи признанным или, скорее, он продолжает распознавать второе утверждение, несмотря на нажатие неправильного ответа. Я думаю, что моя логика c является звуковой, она просто не работает правильно.
Знаете, чего мне здесь не хватает?
Редактировать: Вот ссылка на массив 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];
Edit 2:
Добавление места, где я вызываю функцию. На этот раз я переместил EventListener из функции 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)
});
});
Edit 3:
Если это поможет, вот ссылка на страницу github :
https://github.com/WarriorofZarona/Coding-Quiz GitHub