jquery - 正确的 Jquery 测试

Question

我在 https://codepen.io 的帮助下创建了 jquery 测试.代码运行良好，但结果不同。我正在寻找一种可以同时显示问题和选择结果的方法，突出显示正确(绿色)和错误(红色)。下面是我在 useranswer 匹配正确答案时尝试的代码，然后以绿色或红色突出显示 div。你能告诉我我的代码哪里出错了。
test.js

var quiz = [{
    question: "How can you get the type of arguments passed to a function?",
    answers: ["using typeof operator", "using getType function", "Both of the above", "None"],
    correctAnswer: 0
}, {
    question: "Which built-in method returns the character at the specified index?",
    answers: ["characterAt()", "getCharAt()", "charAt()", "None"],
    correctAnswer: 2
}]

var i = 0;
var score = 0;

$(document).ready(function () {
    $('#start').on('click', function () {
        $('#questions').text(quiz[i].question);
        $('#zero').text(quiz[i].answers[0]);
        $('#one').text(quiz[i].answers[1]); 

    });
});

$(document).ready(function () {
    $(document).on('click', '#next', function () {
        var answer = $('input[name="answers"]:checked').val();
        var answerString = quiz[i].answers[answer];
        $('p[class="userAnswer"][value=' + i + ']').text(answerString);
        var correctAnswer = quiz[i].correctAnswer;
        $('p[class="correctAnswer"][value=' + i + ']').text(quiz[i].answers[correctAnswer]);
        if (answer == quiz[i].correctAnswer) {

        } else {
            $('tr[class="row"][name=' + i + ']').css('background', '#FE2E64');
        }


        if (i < 2) {
            $('.choices').css('display', 'none');
            $('#questions').text(quiz[i].question);
            $('#zero').text(quiz[i].answers[0]);
            $('#one').text(quiz[i].answers[1]);
            $('.choices').show('slow');
            $('input[name="answers"]').prop('checked', false);

        }    

    });
});

    
     

Answer 1

要显示正确或错误的所有答案，您需要 loop通过所有问题，然后查看答案是否选择 user和 correctAnswer是否相同取决于将所需的 html 附加到某个变量。此外，每当用户在下面的代码片段中选择任何答案时，我都会将相同的答案存储在某个数组中，以便我们可以在检查正确或错误答案时使用。
演示代码 :

var correctAnswer;
var display_result = "";
var quiz = [{
  question: "How can you get the type of arguments passed to a function?",
  answers: ["using typeof operator", "using getType function", "Both of the above", "None"],
  correctAnswer: 0
}, {
  question: "Which built-in method returns the character at the specified index?",
  answers: ["characterAt()", "getCharAt()", "charAt()", "None"],
  correctAnswer: 2
}]

var i = 0;
var score = 0;

$(document).ready(function() {
  $('#start').on('click', function() {
    $('#questions').text(quiz[i].question);
    $('#zero').text(quiz[i].answers[0]);
    $('#one').text(quiz[i].answers[1]);
    $('#two').text(quiz[i].answers[2]);
    $('#three').text(quiz[i].answers[3]);
    $('#start').hide();
    $('.choices').show('slow');
    $('#next').show('slow');
  });
});
var users_answers = [];
$(document).ready(function() {
  $(document).on('click', '#next', function() {
    var answer = $('input[name="answers"]:checked').val();
    var answerString = quiz[i].answers[answer];
    $('p[class="userAnswer"][value=' + i + ']').text(answerString);
    correctAnswer = quiz[i].correctAnswer;
    $('p[class="correctAnswer"][value=' + i + ']').text(quiz[i].answers[correctAnswer]);
    users_answers.push(answer);
    if (answer == quiz[i].correctAnswer) {
      score++;
    } else {
      $('tr[class="row"][name=' + i + ']').css('background', '#FE2E64');
    }
    if (!$('input[name="answers"]').is(':checked')) {
      alert("please make a choice");
      return undefined; //stops executing the rest of the code
    }
    i++;

    if (i < 2) {
      console.log("in")
      $('.choices').css('display', 'none');
      $('#questions').text(quiz[i].question);
      $('#zero').text(quiz[i].answers[0]);
      $('#one').text(quiz[i].answers[1]);
      $('#two').text(quiz[i].answers[2]);
      $('#three').text(quiz[i].answers[3]);
      $('.choices').show('slow');
      $('input[name="answers"]').prop('checked', false);

    } else {
      //results
         $('#quiz').css('display', 'none');
            $('#start').css('display', 'block');
      var j = 0;
      //looping through quiz array
      $.each(quiz, function(index, val) {
      //getting correct answer
        var correctAnswer = val.correctAnswer;
        //appending question to variable
        display_result += " <div class='qtitle'>" + val.question + "</div>";
        //looping through answers array
        $.each(val.answers, function(index, val1) {
        //if answer is right
          if (users_answers[j] == correctAnswer && correctAnswer == index) {
          //append 
            display_result += "<b>You choose :</b> <div style='color:green'>" + val1 + "</div>"
          } else if (users_answers[j] == index) {
          //if answer is wrong 
            display_result += "<b>You choose :</b> <div style='color:red'>" + val1 + "</div>"
          } else if(correctAnswer== index) {
          //correct ans
            display_result += "<b>Correct Answer Was </b><div>" + val1 + "</div>"
          }else {
          //other answers
          display_result += "<div>" + val1 + "</div>"
          }

        });

        j++;//increment
      })
      //append score
      display_result +="<div id='score'>Total Score : "+ score+"</div>"
      $("#result").html(display_result);



    }
  });
});

#quiz {
  position: relative;
  height: 400px;
  width: 400px;
}

#start {
  position: absolute;
  height: 40px;
  width: 70px;
  bottom: 10%;
  right: 0%;
  background: #0080FF;
  color: #ffffff;
  padding: 6px;
  text-align: center;
  font-size: 150%;
  border-radius: 10px;
}

#start:hover {
  cursor: pointer;
  background: navy;
}

#next {
  position: absolute;
  height: 40px;
  width: 60px;
  bottom: 10%;
  right: 0%;
  background: #0080FF;
  color: #ffffff;
  text-align: center;
  padding: 4px;
  font-size: 200%;
  border-radius: 10px;
  display: none;
}

#next:hover {
  cursor: pointer;
  background: navy;
}

.choices {
  display: none;
}

#questions {
  font-size: 150%;
  height: 70px;
}

.pickone {
  display: inline;
  position: relative;
}

#results {
  display: none;
  border: 1px solid black;
  text-align: center;
  height: 400px;
  width: 450px;
}



#score {
  font-size: 150%;
  height: 70px;
}

<button id="start">Start </button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="quiz">
  <div id="questions"></div>
  <div id="answers" class="choices">
    <input type="radio" name="answers" class="choices" value=0>
    <p id="zero" class="pickone"></p>
    <br/>
    <input type="radio" name="answers" class="choices" value=1>
    <p id="one" class="pickone"></p>
    <br/>
    <input type="radio" name="answers" class="choices" value=2>
    <p id="two" class="pickone"></p>
    <br/>
    <input type="radio" name="answers" class="choices" value=3>
    <p id="three" class="pickone"></p>
  </div>
  <div id="next">next</div>
</div>
<div id="result">

</div>