I am developing a simple quiz app with vanilla JavaScript and HTML. The functionality to know if the chosen answer is correct or incorrect and display some feedback is working, but not the functionality to set the .quiz__marker div's data-attribute to "Correct" or "Incorrect" when the question's radio button is selected. My simplified code is included in the snippet below.
I have set the .quiz__marker divs to either be green or red depending on if the correct or incorrect answer is selected. As you can see, all of the circles are set to green or red when the radio button is selected.
How should I adjust my JS code to only apply the color change to a single circle? Also, what would I need to implement to have the color maintained throughout the quiz duration?
I am learning JavaScript as I go. Vanilla JS answers are preferred.
Cheers!
function answerTracker() {
const tracker = document.querySelector(".quiz__sidebar");
// Each quiz contains eight questions
const questions = 8;
for (let i = 1; i <= questions; i++) {
let trackerMarker = document.createElement("div");
trackerMarker.className = "quiz__marker";
trackerMarker.setAttribute("data-answer", "");
tracker.appendChild(trackerMarker);
}
}
const runQuiz = (() => {
// Generate answer tracker
answerTracker();
// Set quiz score to zero
let score = 0;
// Get node list of .quiz__marker DIVs
let markers = document.querySelectorAll(".quiz__marker");
// Get node list of answer radio buttons
let answers = document.querySelectorAll(".rsform-radio");
answers.forEach(function(answer) {
answer.addEventListener("click", (e) => {
let target = e.target;
let container = target.closest(".formContainer");
let correct = container.querySelector("div[class$='true']");
let wrong = container.querySelector("div[class$='false']");
let feedback = container.querySelector("div[class$='feedback']");
let question = container.querySelector("div[class*='rsform-block-question']");
let next = container.querySelector(".js-btn--next.success");
if (e.target.value == "t") {
// If answer is correct, increment the user's score by one
score++;
correct.style.display = "block";
wrong.style.display = "none";
feedback.style.display = "block";
} else {
correct.style.display = "none";
wrong.style.display = "block";
feedback.style.display = "block";
}
// Loop through node list and set data-attribute to "Correct" or "Incorrect" depending on e.target value
Array.from(markers).forEach(link => {
if (e.target.value == "t") {
link.setAttribute("data-answer", "Correct");
} else {
link.setAttribute("data-answer", "Incorrect");
}
});
// If question has been answered, display the next button
if (next !== null && next !== "") {
next.style.display = "block";
}
});
});
// If this is the final question in the quiz, assign the score variable to the final-score hidden HTML field
// document.getElementById("final-score").value = score;
})();
.quiz__sidebar .quiz__marker {
display: inline-block;
width: 20px;
height: 20px;
margin: 6px;
background-color: grey;
border-radius: 50%;
}
.quiz__sidebar .quiz__marker[data-answer="Correct"] {
background-color: green;
}
.quiz__sidebar .quiz__marker[data-answer="Incorrect"] {
background-color: red;
}
form.quiz__form .formHidden,
form.quiz__form div[class$="true"],
form.quiz__form div[class$="false"],
form.quiz__form div[class$="feedback"],
form.quiz__form .rsform-block .rsform-button {
display: none;
}
<div class="quiz">
<div class="quiz__sidebar"></div>
<form class="quiz__form">
<div class="formContainer">
<div class="rsform-block-question-one">
<input type="radio" name="form[question-one]" value="f" id="question-one0" class="rsform-radio">
<label for="question-one0">To attract a mate</label>
<br>
<input type="radio" name="form[question-one]" value="t" id="question-one1" class="rsform-radio">
<label for="question-one1">To defend themselves against predators</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one2" class="rsform-radio">
<label for="question-one2">To mark their territory</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one3" class="rsform-radio">
<label for="question-one3">Because they like the smell</label>
</div>
<div class="rsform-block-question-one-true">
<p>
<strong>Correct!</strong>
</p>
</div>
<div class="rsform-block-question-one-false">
<p>
<strong>Nice try</strong>
</p>
</div>
<div class="rsform-block-question-one-feedback">
<p>Skunks spray an extremely offensive odour to make predators go away and leave them alone. If they feel their life is in danger, they have no other defence as they cannot run fast, climb, burrow under the ground, or fight.</p>
</div>
<div class="rsform-block">
<button type="button" class="btn--next js-btn--next rsform-button success button" style="display: none;">
Next
</button>
</div>
</div>
<div class="formContainer formHidden">
<div class="rsform-block-question-two">
<input type="radio" name="form[question-two]" value="f" id="question-two0" class="rsform-radio">
<label for="question-two0">1 cup</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two1" class="rsform-radio">
<label for="question-two1">Endless supply</label>
<br>
<input type="radio" name="form[question-two]" value="t" id="question-two2" class="rsform-radio">
<label for="question-two2">2 tbsp</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two3" class="rsform-radio">
<label for="question-two3">1 tsp</label>
</div>
<div class="rsform-block-question-two-true">
<p>
<strong>Correct!</strong>
</p>
</div>
<div class="rsform-block-question-two-false">
<p>
<strong>Nice try</strong>
</p>
</div>
<div class="rsform-block-question-two-feedback">
<p>Skunks have only 2 tbsp (30ml) of spray and it takes them more than a week to re-supply. They cannot spray every day as they will simply run out. Skunks use spraying as a last resort only as if they run out, they are defenceless against predators.</p>
</div>
<div class="rsform-block">
<button type="button" class="btn--next js-btn--next rsform-button success button" style="display: none;">
Next
</button>
</div>
</div>
</form>
</div>from Update quiz tracker answer DIVs using JavaScript
No comments:
Post a Comment