I am fairly new to Javascript and am trying to create a quiz. I am having issues getting the finalScore variable to increment when an answer is correct. I have been trying to figure this out for the last two hours!
When I go into console log, it just says incorrect every time, even when clicking on the right answer, it just doesn't seem to be registering the clicks at all.
Can anyone see where I'm going wrong?
These are the things I've tried:
I originally had chosenAnswer as a variable inside the decideIfCorrectIncrementScore function but changed it to how it is now after reading something on here - don't know if that actually made any kind of difference to be honest! It seemed like neater code.
I tried using .textContent on the variables in the decideIfCorrectIncrementScore function, again after reading something on here. I thought maybe this would get it to recognise the response. This didn't make a difference though.
This is my HTML for the quiz pages - they are all the same apart from the questions/answers:
<body class="bg">
<div class="container-fluid central-header-quiz-page">
<p>What has more calories?</p>
<div class="row row-no-margin">
<div class="col-xs-12 col-sm-6 col-xl-4">
<i class="fa-regular fa-circle choices icon-background2"></i>
</div>
<div class="col-xs-12 col-sm-3 col-xl-3">
<p class="quiz-text correc">Blueberry Muffin</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-xl-4">
<i class="fa-regular fa-circle choices correct-answer"></i>
</div>
<div class="col-xs-12 col-sm-3 col-xl-3">
<p class="quiz-text">Cupcake</p>
</div>
</div>
<div class="row row-no-margin">
<div class="col-xs-12 col-sm-6 col-xl-4">
<i class="fa-regular fa-circle choices"></i>
</div>
<div class="col-xs-12 col-sm-4 col-xl-3">
<p class="quiz-text">Granola bar</p>
</div>
</div>
<div>
<!-- Button code from Bootstrap - DO I NEED TO ADD - onlick = "goToNextPage()" - to make the js code functional here? See https://www.geeksforgeeks.org/how-to-create-a-link-in-javascript/ -->
<a href="quiz-page-2.html">
<button type="button" class="btn btn-dark btn-md" id="quiz-next-page">
Go to next page
</button>
</a>
</div>
</div>
<script src="assets/js/script.js"></script>
</body>
</html>
And this is my JS code:
document.addEventListener("DOMContentLoaded", function () {
console.log("DOM fully loaded and parsed");
});
let finalScore = 0;
let chosenAnswer;
/** Function that reacts when the user chooses an answer */
function chooseAnAnswer() {
let choices = document.querySelectorAll(".choices");
choices.forEach((choice) => {
choice.addEventListener("click", function () {
choices.forEach((otherChoice) => {
otherChoice.classList.remove("chosen");
});
choice.classList.add("chosen");
chosenAnswer = choice;
});
});
}
chooseAnAnswer();
/** Function that decides which is the correct answer and increments the final score */
function decideIfCorrectIncrementScore() {
let correctAnswer = document.querySelector(".correct-answer");
if (chosenAnswer == correctAnswer) {
finalScore++;
console.log("Correct!");
} else {
console.log("Incorrect!");
}
}
/** Function that takes use to next page and calls decideIfCorrect function */
function goToNextPage() {
document.addEventListener("click", function () {
decideIfCorrectIncrementScore();
document.getElementById("quiz-next-page").style.backgroundColor = "#FA5F22";
});
}
/** Function that shows the user their score */
function showScore() {
if (finalScore <= 4) {
document.getElementById("score-text").innerHTML = "Oh dear you only scored " + finalScore
} else if (finalScore >= 5){
document.getElementById("score-text").innerHTML = "Yay! You scored " + finalScore;
} else {
document.getElementById("score-text").innerHTML = "Oh dear, there has been an error."
};
};
In case it's needed, this is the code for the score-page (minus the Head)
<body onload="showScore()" class="bg">
<div class="container-fluid central-header">
<h2 id="score-text">"You scored..."</h2>
<a href="quiz-page-template.html">
<!-- Button code from Bootstrap -->
<button a type="button" class="btn btn-light btn-lg">Try again</button>
</a>
</div
</body>
</html>