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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in repreptderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non 事故，在culpa qui officia deserunt mollit anim id est laborum中起诉。

Answer 1

我不确定你的意思是单独计算每个问题＆＃39;。但是，如果你想要的是一个函数，给定一组（预定的）正确答案，给你一个＆＃39;你的分数是X＆＃39;回答，那么你确实可以使用jquery的每个（）。

首先需要提供“价值观”。每个答案（每个区块），例如：

<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会抛出错误，因为它有参数＆＃39;数据类型＆＃39;设置为＆＃39; json＆＃39;。

JSON.stringify（）方法是将列表作为json字符串发送所必需的。有关此方法的详细信息，您可以查找there。

Answer 2

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

的changed jquery code课程

javascript摘要我检查输入

2 个答案: