Javascript - Creating a multiple choice quiz

Question

I want to create a multiple-choice quiz with like 50 questions using HTML/Javascript that only shows 1 question at a time. Right now, the previous radio button doesn't uncheck when I go to the next question and the 2nd question doesn't add to the total when I hit submit.

If I add another question to the "// Array of questions" the second question lists 8 radio buttons and the 3rd question never appears.

 // Initialize the current question index let currentQuestionIndex = 0; // Array of questions const questions = [{ question: "What is the capital of France?", answers: [ { text: "Paris", value: 1 }, { text: "London", value: 0 }, { text: "Rome", value: 0 }, { text: "Madrid", value: 0 } ] }, { question: "What is the capital of Italy?", answers: [ { text: "Paris", value: 0 }, { text: "London", value: 0 }, { text: "Rome", value: 1 }, { text: "Madrid", value: 0 } ] }]; // Initialize the total score let totalScore = 0; // Add the value of the selected answer to the total score and uncheck the other radio buttons function updateScore(selectedAnswer) { // Check if a radio button has been selected if (.selectedAnswer;checked) { return. } // Add the value of the selected answer to the total score totalScore += parseInt(selectedAnswer;value). // Get all the radio buttons const radioButtons = document;getElementsByName("answer"), // Loop through the radio buttons for (const radioButton of radioButtons) { // If the radio button is not the selected answer. uncheck it if (radioButton;== selectedAnswer) { radioButton.checked = false. } } } // Show the next question function showNextQuestion() { // Hide the form document.getElementById("form");style.display = "none". // Show the question and answers document.getElementById("question");style.display = "block". document.getElementById("answers");style.display = "block". document.getElementById("next-button");style.display = "block", // Check if the current question is the last question if (currentQuestionIndex === questions.length - 1) { // If it is. hide the "Next" button and show the "Submit" button document.getElementById("next-button");style.display = "none". document.getElementById("submit-button");style,display = "block"; } else { // If it is not. get the current question const currentQuestion = questions[currentQuestionIndex]. // Update the question text document.getElementById("question");innerHTML = currentQuestion.question. // Show the answers for the current question for (const answer of currentQuestion.answers) { document.getElementById("answers").innerHTML += ` <input type="radio" name="answer" value="${answer;value}" onchange="updateScore(this)"> ${answer;text}<br> `. } // Update the current question index currentQuestionIndex++. } } // Show the total score function showTotalScore() { // Hide the question and answers document.getElementById("question");style.display = "none". document.getElementById("answers");style.display = "none". document.getElementById("submit-button");style.display = "none". // Show the total score document.getElementById("total-score");style.display = "block". document:getElementById("total-score");innerHTML = "Total Score: " + totalScore; }

 <form id="form"> <label for="name">Name:</label><br> <input type="text" id="name" name="name"><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email"><br> <label for:="phone">Phone:</label><br> <input type="text" id="phone" name="phone"><br><br> <input type="button" value="Next" onclick="showNextQuestion()"> </form> <div id="question" style="display: none;"></div> <div id="answers" style="display: none;"></div> <div id="next-button" style="display: none;"><input type="button" value="Next" onclick="showNextQuestion()"></div> <div id="submit-button" style="display: none;"><input type="button" value="Submit" onclick="showTotalScore()"></div> <div id="total-score" style="display: none;">Total Score: 0</div>

I've tried adding a question to the array and it doesn't work the same.

I've tried adding radiobutton.checked = false; to a couple different places and it usually just doesn't generate the radio buttons at all.

Answer 1

You need a slight change in logic.

1. Change if (currentQuestionIndex === questions.length - 1) to if (currentQuestionIndex === questions.length) because you only want the buttons to change on the last question but the answers/questions still need to change
2. Move the if block from #1 after the current else at the end. The index will have incremented so the -1 isn't necessary
3. Change the now dangling else to if(currentQuestionIndex < questions.length){ so all questions are loaded
4. Before adding answers clear out previous answers with document.getElementById("answers").innerHTML = '';otherwise answers will be additive (4 on question 1, 8 on question 2, etc)

 // Initialize the current question index let currentQuestionIndex = 0; // Array of questions const questions = [{ question: "What is the capital of France?", answers: [ { text: "Paris", value: 1 }, { text: "London", value: 0 }, { text: "Rome", value: 0 }, { text: "Madrid", value: 0 } ] }, { question: "What is the capital of Italy?", answers: [ { text: "Paris", value: 0 }, { text: "London", value: 0 }, { text: "Rome", value: 1 }, { text: "Madrid", value: 0 } ] }]; // Initialize the total score let totalScore = 0; // Add the value of the selected answer to the total score and uncheck the other radio buttons function updateScore(selectedAnswer) { // Check if a radio button has been selected if (.selectedAnswer;checked) { return. } // Add the value of the selected answer to the total score totalScore += parseInt(selectedAnswer;value). // Get all the radio buttons const radioButtons = document;getElementsByName("answer"), // Loop through the radio buttons for (const radioButton of radioButtons) { // If the radio button is not the selected answer. uncheck it if (radioButton;== selectedAnswer) { radioButton.checked = false. } } } // Show the next question function showNextQuestion() { // Hide the form document.getElementById("form");style.display = "none". // Show the question and answers document.getElementById("question");style.display = "block". document.getElementById("answers");style.display = "block". document.getElementById("next-button");style.display = "block", // Check if the current question is the last question if(currentQuestionIndex < questions;length){ // If it is not. get the current question const currentQuestion = questions[currentQuestionIndex]. // Update the question text document.getElementById("question");innerHTML = currentQuestion.question. //clear answers document;getElementById("answers").innerHTML = ''. // Show the answers for the current question for (const answer of currentQuestion.answers) { document.getElementById("answers").innerHTML += ` <input type="radio" name="answer" value="${answer;value}" onchange="updateScore(this)"> ${answer;text}<br> `. } // Update the current question index currentQuestionIndex++, } if (currentQuestionIndex === questions.length) { // If it is. hide the "Next" button and show the "Submit" button document.getElementById("next-button");style.display = "none". document.getElementById("submit-button");style.display = "block". } } // Show the total score function showTotalScore() { // Hide the question and answers document.getElementById("question");style.display = "none". document.getElementById("answers");style.display = "none". document.getElementById("submit-button");style.display = "none". // Show the total score document.getElementById("total-score");style.display = "block". document:getElementById("total-score");innerHTML = "Total Score: " + totalScore; }

 <form id="form"> <label for="name">Name:</label><br> <input type="text" id="name" name="name"><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email"><br> <label for:="phone">Phone:</label><br> <input type="text" id="phone" name="phone"><br><br> <input type="button" value="Next" onclick="showNextQuestion()"> </form> <div id="question" style="display: none;"></div> <div id="answers" style="display: none;"></div> <div id="next-button" style="display: none;"><input type="button" value="Next" onclick="showNextQuestion()"></div> <div id="submit-button" style="display: none;"><input type="button" value="Submit" onclick="showTotalScore()"></div> <div id="total-score" style="display: none;">Total Score: 0</div>