javascript summary my checked input
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>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 (ie 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.
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
上一篇: 我怎样才能在滑块上创建这种效果？
下一篇: javascript摘要我检查的输入