如何将每个答案按钮的标记关联起来

Question

我有一段代码，它显示了每个显示为复选框按钮的问题的可能答案列表。我想要做的是为每个答案按钮添加关联标记，这些标记可以从数据库中获取。为正确的答案从数据库检索他们的标记。对于不正确的答案他们的商标是每个价值0.我的问题是如何的，什么是做到这一点的最佳方式：

数据库表：

问：

QuestionId (PK auto) QuestionNo SessionId (FK Session) OptionId (FK Option)  
72     1   26      3 
73     2   26      4 

Option_Table：

OptionId (PK Auto) OptionType 
1     A-C 
2     A-D 
3     A-E 
4     A-F 

答案：

AnswerId (PK auto) QuestionId (FK Question)  Answer 
1       72       C    
2       73       A    
3       73       C    
4       73       D  

Individual_Answer：下面它编译查询和comiples每个问题的答案按钮

AnswerId (PK auto) AnswerMarks 
1     2 
2     2 
3     1 
4     2 

代码：

$qandaquery = "SELECT q.QuestionId, q.QuestionNo, o.OptionType, GROUP_CONCAT(DISTINCT Answer 
        ORDER BY Answer 
        SEPARATOR ',') AS Answer 
        FROM Question q 
        LEFT JOIN Answer an ON q.QuestionId = an.QuestionId 
        LEFT JOIN Individual_Answer ia ON an.AnswerId = ia.AnswerId 
        LEFT JOIN Option_Table o ON q.OptionId = o.OptionId 
        "; 

    global $mysqli; 
    $qandaqrystmt=$mysqli->prepare($qandaquery); 
    // get result and assign variables (prefix with db) 
    $qandaqrystmt->execute(); 
    $qandaqrystmt->bind_result($qandaQuestionId,$qandaQuestionNo,$qandaOptionType,$qandaAnswer); 

    $arrQuestionId = array(); 
    $arrQuestionNo = array(); 
    $arrOptionType = array(); 
    $arrAnswer = array(); 
    $arrReplyType = array(); 

foreach ($arrQuestionId as $key=>$question) { 

?> 

<div class="queWrap"> 

//LOOP THROUGH EACH QUESTION 
<p><?php echo "<strong>".htmlspecialchars($arrQuestionNo[$key])."</strong>"; ?></p> 

//BELOW DISPLAYS THE ANSWER BUTTONS FOR EACH QUESTION 
$options = explode('-', $arrOptionType[$key]); 
if(count($options) > 1) { 
    $start = array_shift($options); 
    $end = array_shift($options); 
    do { 
     $options[] = $start; 
    }while(++$start <= $end); 
} 
else{ 
    $options = explode(' or ', $option); 
} 

     foreach($options as $indivOption) { 
    echo '<div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options_<?php echo $key; ?>[]" id="option-' . $indivOption . '" value="' . $indivOption . '" /><span>' . $indivOption . '</span></label></div>'; 
} 
?> 

//HIDDEN INPUT SHOWING DB's QUESTIONID FOR EACH QUESTION 
<p><input type='hidden' class='questionIds' name='questionids' value='<?php echo htmlspecialchars($arrQuestionId[$key]); ?>' /></p> 

</div> 


<?php 

} 

?> 

下面是显示2个问题的源代码和他们的回答：

<div class="queWrap"> 

    //QUESTION 1 

    <p><strong>1:</strong></p> 

    //ANSWER BUTTONS FOR QUESTION 1 

    <div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options_<?php echo $key; ?>[]" id="option-A" value="A" /><span>A</span></label></div> 
<div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options_<?php echo $key; ?>[]" id="option-B" value="B" /><span>B</span></label></div> 
<div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options_<?php echo $key; ?>[]" id="option-C" value="C" /><span>C</span></label></div> 
<div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options_<?php echo $key; ?>[]" id="option-D" value="D" /><span>D</span></label></div> 
<div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options_<?php echo $key; ?>[]" id="option-E" value="E" /><span>E</span></label></div> 

    //QUESTIONID FOR QUESTION 1 

    <p><input type='text' class='questionIds' name='questionids' value='72' /></p> 

    </div> 

    <div class="queWrap"> 

    //QUESTION 2 

    <p><strong>2:</strong></p> 

    //ANSWER BUTTONS FOR QUESTION 2 

    <div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options_<?php echo $key; ?>[]" id="option-A" value="A" /><span>A</span></label></div> 
<div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options_<?php echo $key; ?>[]" id="option-B" value="B" /><span>B</span></label></div> 
<div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options_<?php echo $key; ?>[]" id="option-C" value="C" /><span>C</span></label></div> 
<div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options_<?php echo $key; ?>[]" id="option-D" value="D" /><span>D</span></label></div> 
<div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options_<?php echo $key; ?>[]" id="option-E" value="E" /><span>E</span></label></div> 
<div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options_<?php echo $key; ?>[]" id="option-F" value="F" /><span>F</span></label></div> 

    //QUESTIONID FOR QUESTION 2 

    <p><input type='text' class='questionIds' name='questionids' value='73' /></p> 

    </div> 

Answer 1

每次选中复选框时，您都可以向服务器发出AJAX请求。这使您可以在服务器上保留所有答案并监视那里的进度。

首先，我想补充一个data-属性使用额外的输入存储问题ID质疑包装而不是：

<div class="queWrap" data-q_id="72"> 

的jQuery：

$function(){ 
    $('.queWrap input:checkbox').change(function() { 
     var $ch_box = $(this), 
      $qwrap=$ch_box.closest('.queWrap') 
      q_id = $qwrap.data('q_id'), 
      val = $ch_box.val(); 

     var dataToServer = { 
      q_id: q_id, 
      valueSelected: val 
     } 

     /* due to demo environment sending dummy data*/ 

     $.post('/echo/json/', dataToServer, function (response) { 
      /* disable checkboxes for this question- would need to track at server that user only submits once for each question*/ 
      $qwrap.find('input:checkbox').prop('disabled',true); 
      /* demo uses JSON response {"status":"correct"}*/ 
      var status=response.status 
      $qwrap.find('.status').text(status).addClass(status); 
     });  
    }); 
}); 

DEMO：http://jsfiddle.net/bWthd/