Javascript - Creating a multiple choice quiz-CodePudding

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.

CodePudding user response：

You need a slight change in logic.

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
Move the if block from #1 after the current else at the end. The index will have incremented so the -1 isn't necessary
Change the now dangling else to if(currentQuestionIndex < questions.length){ so all questions are loaded
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>