[英]Checking Against Specific Checkboxes with the Answers
I have already done a lot of research on Stack Overflow to attempt to answer this question, but most answers are to specific to answer this. 我已经对Stack Overflow进行了大量研究,试图回答这个问题,但是大多数回答都是针对特定的。
I am attempting to lock questions after the answers are selected and tell the user if the question is right or wrong. 选择答案后,我试图锁定问题,并告诉用户问题是对还是错。
My solution for a Multiple Checkbox style question was to have a 'confirm' button after they select there answers. 我对“多个复选框”样式问题的解决方案是在他们选择答案后有一个“确认”按钮。 In this case, I have built a generic function for me to pass the answers to and have them mapped for me.
在这种情况下,我为我构建了一个通用函数,将答案传递给我,并为我映射了答案。 However, I am struggling to come up with a solution for Multiple Checkboxes.
但是,我正在努力为多个复选框提供解决方案。
The solution must revolve around javascript/jquery as I do not have control over the HTML generated from this Form Builder that I use. 解决方案必须围绕javascript / jquery,因为我无法控制从我使用的此Form Builder生成的HTML。
TL;DR TL; DR
My solution below fails to correctly recognize wrong answers for Question 14, it should only pop up 'Correct!' 我的以下解决方案无法正确识别问题14的错误答案,只能弹出“正确!” if option 3 AND 4 are both selected.
如果同时选择了选项3和4。
Currently, it pops up correct if they select 3 and any other option. 当前,如果他们选择3和其他任何选项,它会正确弹出。
For a version to work with: Fiddle 要使用的版本: Fiddle
HTML: HTML:
<div id="q14" class="q required highlight">
<a class="item_anchor" name="ItemAnchor25"></a>
<span class="question top_question">14. Life policy purchase evaluations include which of the following (choose all that apply): <b class="icon_required" style="color:#FF0000">*</b></span>
<table class="inline_grid">
<tbody><tr>
<td><input type="checkbox" name="RESULT_CheckBox-25" class="multiple_choice" id="RESULT_CheckBox-25_0" value="CheckBox-0" readonly=""><label for="RESULT_CheckBox-25_0">Insured’s credit rating</label></td>
</tr>
<tr>
<td><input type="checkbox" name="RESULT_CheckBox-25" class="multiple_choice" id="RESULT_CheckBox-25_1" value="CheckBox-1" readonly=""><label for="RESULT_CheckBox-25_1">Employment history</label></td>
</tr>
<tr>
<td><input type="checkbox" name="RESULT_CheckBox-25" class="multiple_choice" id="RESULT_CheckBox-25_2" value="CheckBox-2" readonly=""><label for="RESULT_CheckBox-25_2">Medical records</label></td>
</tr>
<tr>
<td><input type="checkbox" name="RESULT_CheckBox-25" class="multiple_choice" id="RESULT_CheckBox-25_3" value="CheckBox-3" readonly=""><label for="RESULT_CheckBox-25_3">Insurer’s credit rating</label></td>
</tr>
</tbody></table>
</div>
Javascript: Javascript:
$(document).ready(function(){
var content = document.body.textContent || document.body.innerText;
var hasText = content.indexOf("10. What is the minimum initial investment for a non-retirement investor in this program?")!==-1;
//page 4 questions
if(hasText){
var correctNumber = [1, 0, 0, 1, 23, 1];
createQuiz(correctNumber);
}
//Dynamically grabs questions, answers, and creates alert boxes for each section of radio buttons
function createQuiz(correctNumber){
$("span.question").each(function(i){
var question = $(this).parent("div").find($(".multiple_choice")).attr("name"); //get the question name attribute
var parentDiv = $(this).parent("div").attr("id"); //get the parent div id
//set the alert box HTML
$(this).parent("div").after("<br><br><br><div id='"+parentDiv+"_success' class='alert alert-success'><strong>Correct!</strong></div><div id='"+parentDiv+"_fail' class='alert alert-danger'><strong>Incorrect!</strong></div>");
$("#"+parentDiv+"_fail").hide(); //hide alert box
$("#"+parentDiv+"_success").hide();//hide alert box
if($(this).parent("div").find($(".multiple_choice")).attr("type")=='radio'){
$("input[name='"+question+"']").on("click keypress", function(){
$("input[name='"+question+"']").prop('disabled', true);
$("input[name='"+question+"']:radio:not(:checked)").attr('disabled', true);
$(this).attr('disabled', false);
if($("#"+question+"_"+correctNumber[i]).is(':checked')){
$("#"+parentDiv+"_success").show();
$("#"+parentDiv+"_fail").hide();
}
else {
$("#"+parentDiv+"_success").hide();
$("#"+parentDiv+"_fail").show();
}
$('.tooltip').tooltipster({
contentAsHTML: true,
maxWidth: '480',
animation: 'grow',
side: ['right', 'top', 'bottom', 'left']
});
}); //end on click/keypress
} else if ($(this).parent("div").find($(".multiple_choice")).attr("type")=='checkbox'){
$("#"+parentDiv+"_success").before("<button id='"+parentDiv+"_confirm' style='width:200px; left:16px; position:relative;' type='button' value='Confirm'>Confirm</button>");
$("#"+parentDiv+"_confirm").on("click keypress", function(){
$("input[name='"+question+"']").prop('readonly', true);
var answers = correctNumber[i].toString().split("");
for(p=0; p < answers.length; p++){
var selected = [];
$("input[name='"+question+"']").filter(":checked").each(function() {
if(question+"_"+answers[p] == $(this).attr('id') && $("input[name='"+question+"']").filter(":checked").length == answers.length){
$("#"+parentDiv+"_success").show();
$("#"+parentDiv+"_fail").hide();
}
else {
$("#"+parentDiv+"_success").hide();
$("#"+parentDiv+"_fail").show();
}
});
// if($("#"+question+"_"+answers[p]).is(':checked') && $("input[name='"+question+"']").filter(":checked").length == answers.length){
// $("#"+parentDiv+"_success").show();
// $("#"+parentDiv+"_fail").hide();
// }
// else {
// $("#"+parentDiv+"_success").hide();
// $("#"+parentDiv+"_fail").show();
// }
$('.tooltip').tooltipster({
contentAsHTML: true,
maxWidth: '480',
animation: 'grow',
side: ['right', 'top', 'bottom', 'left']
});
} //end for loop
}); //end on click/keypress
} //end outer if
}); //end outer each
} //end createQuiz function
}); //end document ready
I was able to come up with the answer this morning. 今天早上我想出了答案。
My problem was on this for loop, I'm looping through the answers, which I passed 23, if I chose 2 and 4 (or in the fiddle, 1 and 3). 我的问题是在此for循环上,如果要选择2和4(或在小提琴中选择1和3),我将遍历所有答案,答案是23。 Then it responded as correct, because on the last iteration it would find that the last checkbox was check and 2 checkboxes were checked.
然后它的响应是正确的,因为在最后一次迭代中,它会发现最后一个复选框为check,并且选中了2个复选框。
for(p=0; p < answers.length; p++){
var selected = [];
$("input[name='"+question+"']").filter(":checked").each(function() {
if(question+"_"+answers[p] == $(this).attr('id') && $("input[name='"+question+"']").filter(":checked").length == answers.length){
$("#"+parentDiv+"_success").show();
$("#"+parentDiv+"_fail").hide();
}
else {
$("#"+parentDiv+"_success").hide();
$("#"+parentDiv+"_fail").show();
}
});
} //end for loop
My Solution was to Iterate through which checkboxes are checked and return the combined index of which was checked and compare that to the answers. 我的解决方案是遍历所有复选框,然后返回已选中的组合索引并将其与答案进行比较。
EG I pass '23', they check '1' and '4', '14' != '23', so incorrect. 例如,我通过了'23',他们检查了'1'和'4','14'!='23',所以不正确。
$("#"+parentDiv+"_confirm").on("click keypress", function(){
$("input[name='"+question+"']").prop('readonly', true);
var answers = correctNumber[i];
var input = "";
$("input[name='"+question+"']").each(function(t){
if($(this).is(':checked')){
input = ""+input+t;
}
});
if(input == answers){
$("#"+parentDiv+"_success").show();
$("#"+parentDiv+"_fail").hide();
}
else {
$("#"+parentDiv+"_success").hide();
$("#"+parentDiv+"_fail").show();
}
}); //end on click/keypress
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.