使用JavaScript進行簡單測驗

Question

我正在嘗試僅使用javascript和HTML制作沒有外部庫的簡單測驗系統。 但是我遇到了一些問題。 該腳本提供了錯誤的解決方案。 即使選擇正確的復選框，它也只能輸出1個正確答案。 我不知道我到底在做什么錯，或者是否有替代方法可以做到這一點。

 <div class="quizsection"> <button onclick="startQuiz()" id="startQuiz">Start Quiz</button> <div id="questions"></div> </div> <script> //Create Array with questions and solutions var allQuestions = [{ question: "Before Mt. Everest was discovered, whaich mountain was considered to be the highest mountain in the world?", choices: ["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"], correctAnswer: 1 }, { question: "Does England have a 4th of July?", choices: ["Yes", "No", "I don't know"], correctAnswer: 0 }, { question: "What is Rupert the bear's middle name?", choices: ["Bear", "He doesn't have one!", "The", "Rupert"], correctAnswer: 2 }, { question: " What can you never eat for breakfast? ", choices: ["Dinner", "Something sugary", "Lunch", "Supper"], correctAnswer: 0 }, { question: "If there are three apples and you took two away, how many do you have?", choices: ["One", "Two", "None"], correctAnswer: 1 }, { question: "Spell 'Silk' out loud, 3 times in a row. What do cows drink?", choices: ["Milk", "Water", "Juice", "Cows can't drink"], correctAnswer: 1 }, { question: "Which is heavier, 100 pounds of rocks or 100 pounds of gold? ", choices: ["100 pounds of rocks", "100 pounds of rocks", "They weigh the same"], correctAnswer: 2 }, { question: "Can you spell 80 in two letters?", choices: ["AI-TY", "It's not possible", "EIGH-TY", "AT"], correctAnswer: 3 }, { question: "What question must always be answered ''Yes''?", choices: ["What does YES spell?", "Will everyone die someday?", "Does everyone have a biological mother?", "Are you a human?"], correctAnswer: 0 }, { question: "How many sides does a circle have?", choices: ["The back", "None. It's a circle", "Two", "Four"], correctAnswer: 2 }, { question: "What has a tail but no body?", choices: ["A human", "A coin", "A cloud"], correctAnswer: 1 }, { question: "What word in the English language is always spelled incorrectly?", choices: ["It's possible to spell anything right as long as you learn it", "Shakespeare", "Onomatopoeia", "Incorrectly"], correctAnswer: 3 }, { question: "When do you stop at green and go at red?", choices: ["Watermelon!", "Traffic light!", "Garden"], correctAnswer: 0 }, { question: "What rotates but still remains in the same place?", choices: ["Bottle (spin the bottle game)", "Clock", "Stairs"], correctAnswer: 2 }, { question: "How can you lift an elephant with one hand?", choices: ["Truck", "Use both hands!", "Use a lever", "There is no such thing"], correctAnswer: 3 } ]; //Function to start the quiz function startQuiz(){ var i; var j; var k; for(i=0; i<allQuestions.length; i++){ document.getElementById("questions").innerHTML +='<form id="question">Q'+(i+1)+': '+ allQuestions[i].question; for(j=0; j<allQuestions[i].choices.length; j++){ document.forms[i].innerHTML += '</div><div class="answer"><input name="q1" value="'+ allQuestions[i].choices[j] +'" id="value4" type="checkbox" />' + allQuestions[i].choices[j] + '<br/>'; } document.getElementById("questions").innerHTML +='</form><br/><br/>'; } document.getElementById("questions").innerHTML += '<button onclick="solveQuiz()">Solve Quiz</button>'; } function solveQuiz(){ var x; var txt = ' '; var i = 0; var correct = 0; for(i = 0; i < document.forms[i].length;i++) { x = document.forms[i]; if(x[i].checked) { correctAnswer = allQuestions[i].correctAnswer; if(x[i].value == allQuestions[i].choices[correctAnswer]){ correct += 1; } } } document.getElementById("questions").innerHTML += 'Correct answers: ' + correct; } </script> 

Answer 1

function solveQuiz(){
  var x;
  var txt = ' ';
  var i = 0;
  var correct = 0; 
  for(i = 0; i < document.forms.length;i++) { 
    x = document.forms[i]; 
    for(j = 0; j<x.length; j++){
      if(x[j].checked) { 
        correctAnswer = allQuestions[i].correctAnswer;
        if(x[j].value == allQuestions[i].choices[correctAnswer]){
          correct += 1;
        }
      }
   }
 }
 document.getElementById("questions").innerHTML += 'Correct answers: '+ correct;
} 

您可以用以上代碼塊替換您的solveQuiz fn； 最好使用單選而不是復選框。

    document.forms[i].innerHTML += '</div><div class="answer"><input name="q1" value="'+ allQuestions[i].choices[j] +'" id="value4" type="radio" />' + allQuestions[i].choices[j] + '<br/>';

Answer 2

在函數startQuiz您將生成具有相同ID的更多表單，並且對於所有問題，內部輸入始終具有相同ID。 嘗試將這些元素的ID與for計數器索引連接在一起。