Javascript - 创建多项选择测验

Question

我想使用 HTML/Javascript 创建一个包含 50 个问题的多项选择测验，一次只显示 1 个问题。 现在，当我 go 到下一个问题时，上一个单选按钮不会取消选中，而当我点击提交时，第二个问题不会添加到总数中。

如果我向“// 问题数组”添加另一个问题，第二个问题会列出 8 个单选按钮，而第三个问题永远不会出现。

 // 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>

我试过向数组添加一个问题，但效果不一样。

我试过添加radiobutton.checked = false; 到几个不同的地方，它通常根本不会生成单选按钮。

Answer 1

您需要稍微改变一下逻辑。

1. if (currentQuestionIndex === questions.length - 1)更改为if (currentQuestionIndex === questions.length)因为您只想更改最后一个问题的按钮，但答案/问题仍需要更改
2. 将if块从 #1 移到最后的当前else之后。 索引将增加，因此不需要-1
3. 将现在悬挂的else更改为if(currentQuestionIndex < questions.length){以便加载所有问题
4. 在添加答案之前，使用document.getElementById("answers").innerHTML = '';清除之前的答案否则答案将是累加的（问题 1 4 个，问题 2 8 个，等等）

 // 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>