javascript summary my checked input

3
votes

 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>

Hello everyone, I'm trying to write a mini-test with scoring. I know that I need to use '.each', but for the time being I do not quite understand how to use it correctly, that would count each answer separately. Thank you.

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 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

2
javascriptjqueryhtmlcss
so what do you want – Ashish sah
help. how to count each question separately. :( – Anna J.Rittle
you can assign an id to each of the correct radio buttons...but for just learning purpose – Ashish sah
and if the user selects the correct radio button just use jquery to check its state if it is true then add points else not finally user submits check that and calculate the points – Ashish sah

2 Answers

2
votes

I'm not sure what you mean by 'count each question separately'. But if what you want is a function that, given a certain (predetermined) set of correct answers, gives you a 'Your score is X' answer, then you can indeed use jquery's each().

You first need to give 'values' to each of your answers (per block), ex: 

<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 -->

Then you could define the following jquery function

$('.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);
});

EDIT: if you want to keep the validation on the server side (i.e. the answer list is there) then you can keep the processing on the client side then send the answer list to the server for validation. One way to do this is using ajax:

client-side 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)},
    })
});

With that, your server side just needs to compare the list sent to it with a the set answers, then pass back the score as an answer. Note that the code I've given is an example that uses json data, so the data you will get in your server will be a json, and you will have to pass back a json looking like {"score": score} for it to work (if it's not json, ajax will throw an error since it has the parameter 'datatype' set to 'json'.

The JSON.stringify() method is necessary to send the list as a json string. For more info on this method, you can look up there.

1
votes

Have a look on this I know it needs to be modified but you can get a basic concept from this: https://jsbin.com/dawiwameqi/edit?html,js,output This may contain bugs and need time to solve them but It will give you a basic idea. added .correct class to your ans and changed jquery code