如何在JavaScript测验中使用循环

Question

I was able to create a quiz using javascript and html. 我能够使用javascript和html创建测验。 It is a simple quiz with 5 questions, for now only the solution for question one appears when the user is wrong, I tried adding a function for the other questions but it wont run, I want to find out how do i loop through all the five question to give solution at the bottom of every wrong answer given by the user. 这是一个包含5个问题的简单测验，目前仅当用户输入错误时才会出现第一个问题的解决方案，我尝试为其他问题添加一个函数，但该函数无法运行，我想了解如何遍历所有在用户给出的每个错误答案的底部给出五个解决方案。

 <HEAD> <style type="text/css"> <!-- .bgclr {background-color: white; color: black; font-weight: bold;} --> .hidden { display: none; } .visible { display: block; } </style> <script language="JavaScript"> // Insert scooter questions number of questions var numQues = 5; // Insert number of choices in each question var numChoi = 3; // Insert number of questions displayed in answer area var answers = new Array(5); // Insert answers to questions answers[0] = "Keep to the left side of the road far as is safe."; answers[1] = "Road which cross."; answers[2] = "When a traffic officer order you to do so."; answers[3] = "Traffic circle where right of way is applicable."; answers[4] = "(i), (ii) and (iii)"; answers[5] = "A marked pedestrian crossing ahead."; function getScore(form) { showCorrectAnswers(); var score = 0; var currElt; var currSelection; for (i=0; i<numQues; i++) { currElt = i*numChoi; for (j=0; j<numChoi; j++) { currSelection = form.elements[currElt + j]; if (currSelection.checked) { if (currSelection.value == answers[i]) { score++; break; } } } } score = Math.round(score/numQues*100); form.percentage.value = score + "%"; var correctAnswers = ""; for (i=1; i<=numQues; i++) { correctAnswers += i + ". " + answers[i-1] + "\\r\\n"; } form.solutions.value = correctAnswers; } function showCorrectAnswers() { var q1Inputs = document.querySelectorAll('.q1-inputs input'); var correctAnswer = document.querySelector('.q1-inputs span'); var correct = correctAnswer.textContent; q1Inputs.forEach(function(element) { if (element.checked) { if (element.value !== correct) { correctAnswer.classList.remove('hidden'); } else { correctAnswer.classList.add('hidden'); } } }); } // End --> </script> </HEAD> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <BODY> <h3>Scooter quiz by johnson</h3> <form name="quiz"> 1. Which rule is considered the most important RULE OF THE ROAD in South Africa? <ul class="q1-inputs" style="margin-top: 1pt"> <li><input type="radio" name="q1" value="Always be courteous and considerate towards fellow road users.">Always be courteous and considerate towards fellow road users.</li> <li><input type="radio" name="q1" value="Do not exceed the speed limit.">Do not exceed the speed limit.</li> <li><input type="radio" name="q1" value="Keep to the left side of the road far as is safe.">Keep to the left side of the road far as is safe.</li> <span class="hidden" style="color:red;">Keep to the left side of the road far as is safe.</span> </ul> 2. Sign L9 warns you about... ahead. <ul style="margin-top: 1pt"> <li><input type="radio" name="q2" value="Where you are also not allowed to park."> Where you are also not allowed to park..</li> <li><input type="radio" name="q2" value="A railway crossing">A railway crossing</li> <li><input type="radio" name="q2" value="Road which cross">Road which cross</li> </ul> 3.Under what circumstances, if any, are you allowed to drive your motor motor vehicle on the right-hand side of a public road with traffic moving in both directions? <ul style="margin-top: 1pt"> <li><input type="radio" name="q3" value="When you switch the emergency lights of your vehicle on.">When you switch the emergency lights of your vehicle on.</li> <li><input type="radio" name="q3" value="When a traffic officer order you to do so.">When a traffic officer order you to do so.</li> <li><input type="radio" name="q3" value="Under no circumstance.">Under no circumstance.</li> </ul> 4.Sign CC9 is found at .. <ul style="margin-top: 1pt"> <li><input type="radio" name="q4" value="Traffic circle where right of way is applicable.">Traffic circle where right of way is applicable.</li> <li><input type="radio" name="q4" value="Dangerous place where roadwork is being done.">Dangerous place where roadwork is being done.</li> <li><input type="radio" name="q4" value="Sharp curve to the right.">Sharp curve to the right.</li> </ul> 5.You may not obtain a learner's license if... <ul style="margin-top: 1pt"> <li><input type="radio" name="q5" value="A first-aid post."> A first-aid post.</li> <li><input type="radio" name="q5" value="A railway crossing">A railway crossing</li> <li><input type="radio" name="q5" value="Road which cross">Road which cross</li> </ul> <input type="button" value="Get score" onClick="getScore(this.form)"> <input type="reset" value="Clear answers"> <p> Score = <strong><input class="bgclr" type="text" size="5" name="percentage" disabled></strong><br><br> Correct answers:<br> <textarea class="bgclr" name="solutions" wrap="virtual" rows="10" cols="100" disabled> </textarea> </form>

Answer 1

JavaScript update JavaScript更新

var getScoreButton = document.getElementById("getScore"),
quizSections = document.getElementById("quizForm").querySelectorAll("ul"),
quizScore = document.getElementById("percentage"),
quizSolutions = document.getElementById("solutions"),
answers = new Array(5),
score = 0,
solutions = '';

// Insert answers to questions
answers[0] = "Keep to the left side of the road far as is safe.";
answers[1] = "Road which cross.";
answers[2] = "When a traffic officer order you to do so.";
answers[3] = "Traffic circle where right of way is applicable.";
answers[4] = "(i), (ii) and (iii)";
answers[5] = "A marked pedestrian crossing ahead.";

function checkAnswers(source) {

    source.forEach(function(section, index){

        var selectedAnswer = section.querySelector("input:checked");

        if(selectedAnswer){

            if(answers[index] === selectedAnswer.value){

                score+=1;
            }else{

                solutions+= (index+1) + '. ' + answers[index] + "\n";
            }
        }else{
            solutions+= (index+1) + '. ' + answers[index] + "\n";
        }
    });

    quizScore.value = score;
    quizSolutions.value = solutions;

    score = 0;
    solutions = '';
}


getScoreButton.addEventListener("click", function(){

    checkAnswers(quizSections);
});

HTML update (added some id's) HTML更新（添加了一些ID）

<input type="button" value="Get score" id="getScore"> <input type="reset" value="Clear answers"> <p> Score = <strong><input class="bgclr" type="text" size="5" name="percentage" id="percentage" disabled></strong><br><br> Correct answers:<br> <textarea class="bgclr" name="solutions" id="solutions" wrap="virtual" rows="10" cols="100" disabled>

Answer 2

You can use .getAttribute('value') instesd of .value 您可以使用.value中的.getAttribute（'value'）

UPDATE 更新

function showCorrectAnswers() {
 var x = ['q1-inputs', 'q2-inputs','q3-inputs', 'q4-inputs', 'q5-inputs'];
 for(value of x){
  var q1Inputs = document.querySelectorAll('.'+value+' input');
  var correctAnswer = document.querySelector('.'+value+' span');
  var correct = correctAnswer.textContent;
  q1Inputs.forEach(function(element) {

   if (element.checked) {
    if (element.getAttribute('value') !== correct) {
     correctAnswer.classList.remove('hidden');
   } else {
     correctAnswer.classList.add('hidden');
   }
  }});
 }
}

如何在JavaScript测验中使用循环

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-10-12 14:51:09

解决方案2
-3 2016-10-12 11:26:14

如何在JavaScript测验中使用循环

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-10-12 14:51:09

解决方案2 -3 2016-10-12 11:26:14

解决方案1
0 已采纳 2016-10-12 14:51:09

解决方案2
-3 2016-10-12 11:26:14