Within my code, there are numerous queries that need to be addressed. Upon submission, I desire to alter the color of each question to green if the response is correct, or red if it is incorrect.
document.getElementById("submit-button").addEventListener("click", function() {
var questions = document.getElementsByClassName("question");
var totalQuestions = questions.length;
var correctAnswers = 0;
for (var i = 0; i < questions.length; i++) {
var question = questions[i];
var selectedOption = question.querySelector("input:checked");
if (selectedOption) {
var answer = selectedOption.value;
var correctAnswer = question.getAttribute("data-correct-answer");
if (answer === correctAnswer) {
correctAnswers++;
}
}
}
var resultMessage = "You answered " + correctAnswers + " out of " + totalQuestions + " questions correctly.";
alert(resultMessage);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question" data-correct-answer="c">
<p>Question 1:</p>
<p>What is the value of 2 + 2?</p>
<label><input type="radio" name="q1" value="a"> a) 2</label>
<label><input type="radio" name="q1" value="b"> b) 3</label>
<label><input type="radio" name="q1" value="c"> c) 4</label>
</div>Could someone guide me through the process?
My attempts using ChatGPT and other online resources have proven to be futile. ChatGPT failed to comprehend the issue, and the internet provided no solutions.