javascript 摘要我检查的输入
Posted
技术标签:
【中文标题】javascript 摘要我检查的输入【英文标题】：javascript summary my checked input 【发布时间】：2018-02-16 19:06:11 【问题描述】： 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。
【问题讨论】：
那你想要什么 帮助。如何分别计算每个问题。 :( 您可以为每个正确的单选按钮分配一个 ID...但仅用于学习目的 如果用户选择了正确的单选按钮，只需使用 jquery 检查其状态是否为真，否则添加点，否则最终用户提交检查并计算点 【参考方案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。
【讨论】：
问题的答案会在服务器上，只需要使用值吗？ 查看我的编辑，希望能给你一些关于在这种情况下如何操作的想法:)——而且，据我所知，这个服务器方面不在最初的问题中 【参考方案2】：看看这个我知道它需要修改，但你可以从中得到一个基本概念：
https://jsbin.com/dawiwameqi/edit?html,js,output
这可能包含错误并且需要时间来解决它们，但它会给你一个基本的想法。
added .correct 上课给你的答案和changed jquery code
【讨论】：
非常感谢您的决定，目前我正在尝试将收到的信息应用到实践中。我需要时间。以上是关于javascript 摘要我检查的输入的主要内容，如果未能解决你的问题，请参考以下文章
加载模块脚本失败：服务器以非 JavaScript MIME 类型“”响应。执行严格的 MIME 类型检查