How to associate each option button with their own

Question

I have an application here: APPLICATION

What I have is some questions and associated with each questions in their possible answers in checkbox buttons, and three text inputs showing questionId, option type and number of marks for each individual answer.

Actually the number of marks for each individual answer if the problem I am getting. What I want to attempt is that for every correct answer for each question, they are associated with their own text input showing the number of marks they are worth (found in Individual_Answer Table below) else for all incorrect answers, they are all worth 0 in their text inputs/

Now here is the database tables for this example application:

Question:

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

Answer:

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

Individual_Answer:

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

The actual code is below:

//$qandaqry query is here and executed


        $qandaqrystmt->bind_result($qandaQuestionId,$qandaQuestionNo,$qandaQuestionContent,$qandaOptionType,$qandaAnswer,$qandaAnswerMarks );

        $arrQuestionId = array();
        $arrQuestionNo = array();
        $arrQuestionContent = array();
        $arrOptionType = array();
        $arrAnswer = array();
        $arrAnswerMarks = array();

        while ($qandaqrystmt->fetch()) {
        $arrQuestionId[ $qandaQuestionId ] = $qandaQuestionId; //QuestionId
        $arrQuestionNo[ $qandaQuestionId ] = $qandaQuestionNo; //QuestionNo
        $arrQuestionContent[ $qandaQuestionId ] = $qandaQuestionContent; //QuestionContent
        $arrOptionType[ $qandaQuestionId ] = $qandaOptionType; //OptionType
        $arrAnswer[ $qandaQuestionId ] = $qandaAnswer; //Answer
        $arrAnswerMarks[ $qandaQuestionId ] = $qandaAnswerMarks; //AnswerMarks
      }


    ?>
    <form action='results.php' method='post' id='exam'>

    <?php

//Retrieve options for each question

    function ExpandOptionType($option) { 
        $options = explode('-', $option);
        if(count($options) > 1) {
            $start = array_shift($options);
            $end = array_shift($options);
            do {
                $options[] = $start;
            }while(++$start <= $end);
         }
         else{
            $options = explode(' or ', $option);
         }
         echo '<p>';
         foreach($options as $indivOption) {
             echo '<div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options[]" id="option-' . $indivOption . '" value="' . $indivOption . '" /><span>' . $indivOption . '</span></label></div>';
         }
          echo '</p>';


    }


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

    ?>

    <div class="queWrap">

//Each QuestionNo and QuestionContent
    <p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " .  htmlspecialchars($arrQuestionContent[$key]); ?></p>

//Output each Individual Option
    <p><?php echo ExpandOptionType(htmlspecialchars($arrOptionType[$key])); ?></p>

//Output each QuestionId text input per question
    <p>Question Id:<input type='text' class='questionIds' name='questionids' value='<?php echo htmlspecialchars($arrQuestionId[$key]); ?>' /></p>

//Output each OptionType text input per question
    <p>Option Type: <input type='text' class='optionType' name='optiontype' value='<?php echo htmlspecialchars($arrOptionType[$key]); ?>' /></p>

//Output each AnswerMarks per answer in each question
    <p>Each Answer's Marks<input type='text' class='answermarks' name='answerMarks' value='<?php echo htmlspecialchars($arrAnswerMarks[$key]); ?>' /></p>

    </div>


    <?php

    }

    ?>
    </form>

Answer 1

First, I would like to recommend that you reconsider your DB schema. You have far more tables than you need to create a DB of questions, and all the joins etc. you need to retrieve a single question are expensive operations.

Let's say you want your HTML to look something like the following:

<div class="queWrap" id="question-72">
    <h2 class="question-text">What is 4+4?</h2>
    <h3>Answers: <span class="questionMarks">(this question is worth 2 points)</span></h3>

    <div class="ck-button">
        <label class="fixedLabelCheckbox">
            <input type="checkbox" name="options_72[]" id="option-A" value="A">
            <span>0</span>
        </label>
    </div>

    <div class="ck-button">
        <label class="fixedLabelCheckbox">
            <input type="checkbox" name="options_72[]" id="option-B" value="B">
            <span>4</span>
        </label>
    </div>

    <div class="ck-button">
        <label class="fixedLabelCheckbox">
            <input type="checkbox" name="options_72[]" id="option-C" value="C">
            <span>8</span>
        </label>
    </div>

    <div class="ck-button">
        <label class="fixedLabelCheckbox">
            <input type="checkbox" name="options_72[]" id="option-D" value="D">
            <span>16</span>
        </label>
    </div>
</div>

Now let's say your query's result->fetch() above was rewritten more smartly like so:

$_Questions = array();
while( $qandaqrystmt->fetch() ) {
   $_Questions[] = array('id'=>$qandaQuestionId,'num'=>$qandaQuestionNo,'content'=>$qandaQuestionContent,'type'=>$qandaOptionType,'answer'=>$qandaAnswer,'marks'=>$qandaAnswerMarks);
}

Then to output the questions we just want to loop this and generate the appropriate HTML. I want to point out that it would be incredibly stupid to send the correct answer along with the question to the test taker, even if it is hidden within the html. You'll note that this HTML is similar to your own, but has one alteration that is CRITICAL to make: because you only have ONE form element surrounding all of your questions, each question's checkbox array needs a unique name. I've chosen to append _(questionID) to each array like so

(e.g. question 72) <input type="checkbox" name="options_72[]" id="option-D" value="D">

Here's how you would loop it using a heredoc

foreach( $_Questions AS $question ) {
  echo <<<EOT
    <div class="queWrap" id="question-{$question['id']}">
        <h2 class="question-text">{$question['content']}</h2>
        <h3>Answers: <span class="questionMarks">(this question is worth {$question['marks']} points)</span></h3>
    EOT;

$options = ['A','B','C','D','E','F'];
$lastOption = substr($question['type'], -1, 1);
foreach( $options as $opt ) {
  echo <<<EOT
    <div class="ck-button">
        <label class="fixedLabelCheckbox">
            <input type="checkbox" name="options_{$questions['id']}[]" value="$opt">
            <span>$opt</span>
        </label>
    </div>
    EOT;
  if( $opt == $lastOption )
    break;
}

}