답변으로 특정 확인란에 대한 확인

Question

이 질문에 답하기 위해 Stack Overflow에 대한 많은 연구를 이미 마쳤습니다. 그러나 대부분의 대답은 이에 대한 답변입니다.

답변을 선택한 후에 질문을 잠그려고하고 있는데 질문이 옳고 그른지 사용자에게 알려줍니다.

다중 체크 박스 스타일 질문에 대한 나의 해결책은 대답을 선택한 후 '확인'버튼을 사용하는 것이 었습니다. 이 경우, 저는 저에게 답을 전달하고 저를 위해 매핑 해 놓은 제네릭 함수를 만들었습니다. 그러나, 나는 다중 체크 박스를위한 해결책을 생각해 내는데 어려움을 겪고있다.

내가 사용하는이 양식 빌더에서 생성 된 HTML을 제어 할 수 없으므로 솔루션은 javascript/jquery를 중심으로 회전해야합니다.

TL; DR

내 솔루션은 아래에만 나타해야 제대로 질문 (14)에 대한 오답을 인식하지 못합니다 '정답!' 옵션 3과 4가 모두 선택된 경우

현재 3과 다른 옵션을 선택하면 올바르게 표시됩니다.

버전이 함께 작동하려면

: Fiddle

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):&nbsp;<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> 

자바 스크립트 :

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

Answer 1

가 오늘 아침 답을 마련 할 수 있었다.

내 문제는 루프에 대해 2, 4 (또는 바이올린 1과 3)를 선택하면 23을 통과 한 답변을 반복합니다. 마지막 반복에서 마지막 체크 박스가 체크 였고 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 

내 솔루션은 어떤 체크 박스가 선택되었는지를 반복하고 체크 된 결합 된 인덱스를 반환하고이를 답변과 비교했습니다.

E.G. 나는 '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