如何为每个答案按钮关联标记

Question

我在下面有一段代码，它显示了每个问题的可能答案列表，显示为复选框按钮。我想要做的是为每个可以从数据库中检索的答案按钮关联标记。对于正确的答案，从 db 中检索他们的分数。对于不正确的答案，他们的分数均为 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    

个人回答：

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);
        });    
    });
});

演示：http://jsfiddle.net/bWthd/