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

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