Here's a JSfiddle link for you to check out.
I am currently attempting to build a quiz using JavaScript, where the questions and answers will be sourced from JSON data.
checkbox.addEventListener('change', function() {
if (this.checked) {
console.log("checkbox " + i + " checked")
label.setAttribute("class", "richtig")
} else {
console.log("checkbox " + i + " unchecked")
label.removeAttribute("class")
}})
The event listeners are set up in such a way that they differ slightly based on the input type. Currently, the goal is to assign the class "richtig" to the label of each selected checkbox, changing the background color to light green.
However, instead of applying the class to the selected answer, it always applies it to the last possible answer, regardless of selection. This occurs across all three types of inputs: checkboxes, radios, and selections.
Additionally, the console log consistently displays information related to the last answer selected, even when checkboxes 1 or 2 are chosen, logging "checkbox 3 checked"
Moreover, the behavior of the list selection feature is quite unexpected. Clicking on an option logs "selection i unchecked" instead of "selection i checked," repeating this action for all available answers. Furthermore, even when selecting the last option in a select element, the color does not change to green even though the class is correctly applied.
In the end, my intention is to retrieve the correct solution from the JSON data, compare it to the user-selected answer, and only apply coloring if the response is accurate. However, I plan to tackle this task alone once I figure out how to properly select and modify the correct label.
Bonus: If you take a look at the fiddle, you may notice the error message "Uncaught TypeError: Cannot read property 'question' of undefined." Despite this error, everything seems to work as expected. Any insights into why this error occurs would be greatly appreciated.
Thank you to everyone who took the time to read this and offer assistance.
Wishing you all a wonderful day!