在在线测验应用程序的页面上显示一个问题

Question

请我使用下一个和上一个按钮在测验应用程序的页面上显示一个问题。我能够做到这一点。我所做的是，我为每个问题添加了一个ID。每个问题ID的初始值为1。因此，在下一个按钮功能中，我将每个问题的值增加1。因此，当单击下一个或上一个按钮时，它将使问题的ID增加或减少1，然后然后决定要在页面上显示哪个问题。同样，如果问题ID为1，则下一个按钮应显示并隐藏上一个按钮。但是，如果ID大于1或小于问题总数，则应显示下一个和上一个按钮。但是我现在面临的新挑战是，当问题超过10个时，它会在页面上显示两个问题，并且没有显示完成按钮。 “完成”按钮应显示当前的问题ID（可以是任何值）是否等于我获取或想要显示的问题总数。例如，如果当前问题ID为20，而我要显示的问题总数为20，则应该显示完成按钮。否则，它应该显示下一个和上一个。

This is my code
      <form method="POST" role="form" id="form" action="result.php">
         <?php
          $number_of_question = 10;
          $qryquestions="SELECT * FROM questions WHERE  `course_title`='".$course_title."' ORDER BY RAND() LIMIT 10";
          $qryquestionscheck=$conn->query($qryquestions);
          $i = 1;
          foreach ($qryquestionscheck as $row){
            $question_id = $row['question_id'];
                $questions = $row['questions'];
               $optionA = $row['option_A'];
               $optionB = $row['option_B'];
               $optionC= $row['option_C'];
               $optionD = $row['option_D'];
               $correct_answer = $row['answer'];
               $_SESSION['course_title'] = $course_title;

            $question_rowcount = $qryquestionscheck->num_rows;
            $remainder = $question_rowcount/$number_of_question;
            $_SESSION['question_rowcount'] = $question_rowcount;
            //echo $remainder; die();

         ?>
         <?php if($i==1){?>
          <div id='question<?php echo $i;?>' class='cont'>
           <div class="form-group">
              <label style="font-weight: normal; text-align: justify;" class="questions"><b><?php echo "Question" . " " . $counter++; ?></b>&nbsp<?php echo $questions; ?></label><br>
              <div id="quiz-options">
                <label style="font-weight: normal; cursor: pointer;">
                  <input type="checkbox" name="option[]" value="A"> <?php echo $optionA; ?>
                </label><br>
                <label style="font-weight: normal; cursor: pointer;">
                  <input type="checkbox" name="option[]" value="B"> <?php echo $optionB; ?>
                </label><br>
                <label style="font-weight: normal; cursor: pointer;">
                  <input type="checkbox" name="option[]" value="C"> <?php echo $optionC; ?>
                </label><br>
                <label style="font-weight: normal; cursor: pointer;">
                  <input type="checkbox" name="option[]" value="D"> <?php echo $optionD; ?>
                </label><br> 
                <input type="hidden" name="correct_answer[]" value="<?php echo $correct_answer; ?>">
                <!-- CHANGED name to same "option[]", value to null and added class unchecked   -->
                <!--<input type="hidden" name="option[]" class="unchecked" value="null">-->              
                <button id='next<?php echo $i;?>' class='next btn btn-default pull-right' type='button' >Next</button>

              </div>
            </div>
          </div>
          <?php }elseif($i<$question_rowcount){?>
            <div id='question<?php echo $i;?>' class='cont'>
           <div class="form-group">
              <label style="font-weight: normal; text-align: justify;" class="questions"><b><?php echo "Question" . " " . $counter++; ?></b>&nbsp<?php echo $questions; ?></label><br>
              <div id="quiz-options">
                <label style="font-weight: normal; cursor: pointer;">
                  <input type="checkbox" name="option[]" value="A"> <?php echo $optionA; ?>
                </label><br>
                <label style="font-weight: normal; cursor: pointer;">
                  <input type="checkbox" name="option[]" value="B"> <?php echo $optionB; ?>
                </label><br>
                <label style="font-weight: normal; cursor: pointer;">
                  <input type="checkbox" name="option[]" value="C"> <?php echo $optionC; ?>
                </label><br>
                <label style="font-weight: normal; cursor: pointer;">
                  <input type="checkbox" name="option[]" value="D"> <?php echo $optionD; ?>
                </label><br>
                <input type="hidden" name="correct_answer[]" value="<?php echo $correct_answer; ?>">
                <!-- CHANGED name to same "option[]", value to null and added class unchecked   -->

                <!--<input type="hidden" name="option[]" class="unchecked" value="null">-->
                <br>                  
                <button id='pre<?php echo $i;?>' class='previous btn btn-default' type='button'>Previous</button>                    
                <button id='next<?php echo $i;?>' class='next btn btn-default pull-right' type='button' >Next</button>
              </div>
           </div>
          </div>
        <?php }elseif(( $remainder < 1 ) || ( $i == $number_of_question && $remainder == 1 ) ){?>
            <div id='question<?php echo $i;?>' class='cont'>
           <div class="form-group">
              <label style="font-weight: normal; text-align: justify;" class="questions"><b><?php echo "Question" . " " . $counter++; ?></b>&nbsp<?php echo $questions; ?></label><br>
              <div id="quiz-options">
                <label style="font-weight: normal; cursor: pointer;">
                  <input type="checkbox" name="option[]" value="A"> <?php echo $optionA; ?>
                </label><br>
                <label style="font-weight: normal; cursor: pointer;">
                  <input type="checkbox" name="option[]" value="B"> <?php echo $optionB; ?>
                </label><br>
                <label style="font-weight: normal; cursor: pointer;">
                  <input type="checkbox" name="option[]" value="C"> <?php echo $optionC; ?>
                </label><br>
                <label style="font-weight: normal; cursor: pointer;">
                  <input type="checkbox" name="option[]" value="D"> <?php echo $optionD; ?>
                </label><br>
                <input type="hidden" name="correct_answer[]" value="<?php echo $correct_answer; ?>">
                <!-- CHANGED name to same "option[]", value to null and added class unchecked   -->

                <!--<input type="hidden" name="option[]" class="unchecked" value="null">-->  
                 <br>      
                <button id='pre<?php echo $i;?>' class='previous btn btn-default' type='button'>Previous</button>                    
                <input class='btn btn-info pull-right' value="Finish & Submit" name="submit" type='submit'>
              </div>
           </div>
          </div>
          <?php }
          /*$option_array = $_POST['option'];
          $unanswered = 0; 
          if (in_array("null", $_POST['option'])){
            $unanswered++;
          }
          $_SESSION['unanswered'] = $unanswered;
          echo $unanswered = $_SESSION['unanswered']; die();*/
        $i++;} ?>

        </form>
This is my script code for the hiding and displaying
   <script>
     var total = parseInt(<?php echo $question_rowcount; ?>);
   $('.cont').addClass('hide');
   count=$('.questions').length;
 $('#question'+1).removeClass('hide');

 $(document).on('click','.next',function(){
     element=$(this).attr('id');
     $("input[type='submit']").hide();
     last = parseInt(element.substr(element.length - 1));
     if (total == last){
      $("input[type='submit']").show();
     }
     nex=last + 1;
     $('#question' + last).addClass('hide');

     $('#question' + nex).removeClass('hide');
 });

 $(document).on('click','.previous',function(){
     element=$(this).attr('id');
     last = parseInt(element.substr(element.length - 1));
     pre=last - 1;
     $('#question' + last).addClass('hide');

     $('#question' + pre).removeClass('hide');
 });

</script>

Answer 1

添加此jQuery代码：

<script>

var total = parseInt(<?php echo $question_rowcount; ?>);
$('.cont').addClass('hide');
count = $('.questions').length;
$('#question' + 1).removeClass('hide');

$(document).on('click', '.next', function () {
    element = $(this).attr('id');
    $("input[type='submit']").hide();
    last = parseInt(element.substr(element.length - 1));
    if (total == last) {
        $("input[type='submit']").show();
    }
    nex = last + 1;
    $('#question' + last).addClass('hide');

    $('#question' + nex).removeClass('hide');
});

$(document).on('click', '.previous', function () {
    element = $(this).attr('id');
    last = parseInt(element.substr(element.length - 1));
    pre = last - 1;
    $('#question' + last).addClass('hide');

    $('#question' + pre).removeClass('hide');
});