javascript 摘要我检查的输入

Question

 js__exam_questions();

    function js__exam_questions() {
     $('.js__sum_score_btn').on('click', function(event) {
      event.preventDefault();
      var num = 0;
      if ($('.js__checked_task input').is(':checked')) {
       num ++;
      } else {
       return false;
      }
      $('.js__checked_task');
      return $('.js__qustions_result').html( num || 'null');
     });
    }

.d-inline {
  display: inline-block;
}

.fz33 {
  font-size: 33px;
}

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section id="questions">
  <div class="questions__bg">
   <div class="container">
    <div class="row">

     <!-- head -->
     <div class="col-md-8">
      <div class="control-group">
       <h1>Questions:</h1>
       <button type="button" class="js__sum_score_btn btn btn-default mb50">SUMMARY</button>
      </div>
     </div>
     <div class="col-md-4">
      <div class="control-group">
       <h1 class="mr10 d-inline">Score:</h1><span class="js__qustions_result fz33">0</span>
      </div>
     </div>

     <!-- task-1 -->
     <div class="col-md-6 pb50 js__checked_task">
      <div id="myquestions-1">
       <h4 class="quest__h4">
             <strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_1">Option 1
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_1">Option 2
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_1">Option 3
       </label>
      </div>
     </div>
     <!-- task-2 -->
     <div class="col-md-6 pb50 js__checked_task">
      <div id="myquestions-2">
       <h4 class="quest__h4">
             <strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_2">Option 1
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_2">Option 2
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_2">Option 3
       </label>
      </div>
     </div>
     <!-- task-3 -->
     <div class="col-md-6 pb50 js__checked_task">
      <div id="myquestions-3">
       <h4 class="quest__h4">
        <strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_3">Option 1
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_3">Option 2
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_3">Option 3
       </label>
      </div>
     </div>
     <!-- task-4 -->
     <div class="col-md-6 pb50 js__checked_task">
      <div id="myquestions-4">
       <h4 class="quest__h4">
         <strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_4">Option 1
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_4">Option 2
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_4">Option 3
       </label>
      </div>
     </div>
    </div>
   </div>
  </div>
 </section>

大家好，我正在尝试编写一个带有评分的迷你测试。 我知道我需要使用'.each'，但目前我不太了解如何正确使用它，这将分别计算每个答案。谢谢。

---

Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam， quis nostrud 练习 ullamco laboris nisi ut aliquip ex ea commodo 结果。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum。

Answer 1

我不确定您所说的“分别计算每个问题”是什么意思。但是如果你想要的是一个函数，给定一组（预定的）正确答案，给你一个“你的分数是 X”的答案，那么你确实可以使用 jquery 的 each()。

您首先需要为每个答案（每个块）赋予“价值”，例如：

<div class="col-md-6 pb50 js__checked_task">
      <div id="myquestions-1">
       <h4 class="quest__h4">
             <strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_1" value='1'>Option 1
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_1" value='2'>Option 2
       </label>
       <label class="radio-inline">
        <input type="radio" name="questions_stage_1" value='3'>Option 3
       </label>
      </div>
     </div> 
     <!-- Do the same for every block with value 1,2,3 -->

然后你可以定义如下的jquery函数

$('.js__sum_score_btn').on('click', function(event) {
    var score = 0;
    const answers = [1,1,2,3]; //your set of correct answers
    $('.js__checked_task').each(function(index) {
        var selectedQuestion = $("input[type='radio']:checked", this).val();
        if (selectedQuestion == answers[index]) {score++}
    })
    console.log('Your score is: ' + score);
});

编辑：如果您想在服务器端保留验证（即答案列表在那里），那么您可以在客户端继续处理，然后将答案列表发送到服务器验证。一种方法是使用 ajax：

客户端js

$('.js__sum_score_btn').on('click', function(event) {
    var answers = []; //the user's set of answers
    $('.js__checked_task').each(function(index) {
        var selectedQuestion = $("input[type='radio']:checked", this).val();
        answers[index] = selectedQuestion;
    });
    $.ajax({
        url: 'your_server_url',
        data: {"answers": JSON.stringify(answers)},
        datatype: 'json',
        type: 'post',
        error: function() {//do stuff},
        success: function(data) {console.log('your score is ' + data.score)},
    })
});

这样，您的服务器端只需将发送给它的列表与设置的答案进行比较，然后将分数作为答案传回。请注意，我给出的代码是使用 json 数据的示例，因此您将在服务器中获取的数据将是 json，并且您必须传回看起来像 {"score": score} 的 json 才能使其工作（如果它不是 json，ajax 会抛出错误，因为它的参数 'datatype' 设置为 'json'。

JSON.stringify() 方法对于将列表作为 json 字符串发送是必需的。有关此方法的更多信息，您可以查找there。

Answer 2

看看这个我知道它需要修改，但你可以从中得到一个基本概念： https://jsbin.com/dawiwameqi/edit?html,js,output 这可能包含错误并且需要时间来解决它们，但它会给你一个基本的想法。 added .correct 上课给你的答案和changed jquery code