如何將每個答案按鈕的標記關聯起來

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/