为在php中从数据库检索的数据创建一个后退按钮

Question

i have created a website for quiz exam. I have the following html and ajax for calling php functions in the file. i am calling questions from the database. 1 question at a time is shown to the user. there is no submit button, instead when the user clicks the option,the next question is shown.

<script>
  $(document).ready(function(){
          $('body').on('click','input[type="radio"]', function(){
              var curr_id = $('.question').data('nextQuestion');
              var answer1 = $('#radio1').is(':checked');
              var answer2 = $('#radio2').is(':checked');
              var answer3 = $('#radio3').is(':checked');
              var answer4 = $('#radio4').is(':checked');
              getCorrectAnswer(curr_id, answer1, answer2, answer3, answer4);
            setTimeout(getQuestion.bind(this,curr_id, answer1, answer2, answer3, answer4), 1000);

      });

      function getQuestion(curr_id, answer1=false, answer2=false, answer3=false, answer4=false){
        console.log(curr_id);
          $.post("mohajax.php",
          {
              next_id: parseInt(curr_id)+1,
              answer1: answer1,
              answer2: answer2,
              answer3: answer3,
              answer4: answer4,
          },
          function(data, status){
              $('#container_for_questions').html(data);
          });
      }

      function getCorrectAnswer(curr_id, answer1=false, answer2=false, answer3=false, answer4=false){
          $.post("mohajax_get_correct_answer.php",
          {
              next_id: parseInt(curr_id),
              answer1: answer1,
              answer2: answer2,
              answer3: answer3,
              answer4: answer4,
          },
          function(data, status){
              $('#container_for_questions').html(data);
          });
      }

      getQuestion(-1);
  });

  </script>

<div class="services">
    <div class="zubi"><div class="container" id="container_for_questions"></div></div>
</div>

below is my php files for calling the questions

<?php
// Start the session
session_start();

$con=mysqli_connect("localhost","root","","quiz"); // change here to your data
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

// Check the number of all questions, if next_id is more than last question, back to first or whatever you want;
$response=mysqli_query($con,"select * from moh limit 25");
$number_of_all_questions = mysqli_num_rows($response);

if($_POST['next_id'] == 0){
    // reset to default
    $_SESSION["correct_score"] = 0;
    $_SESSION["not_correct_score"] = 0;
}


if($number_of_all_questions <= $_POST['next_id']){
    // Quiz finished, show results
    echo"<div>
    <h2>Results:</h2>
    <p>Correct answers: {$_SESSION['correct_score']}</p>
    <p>Wrong answers: {$_SESSION['not_correct_score']}</p>

    </div>";



}else{

    // query next question
    $response=mysqli_query($con,"select * from moh WHERE id =(select min(id) from moh where id > {$_POST['next_id']})");
    ?>

    <?php while($result=mysqli_fetch_array($response,MYSQLI_ASSOC)){ ?>

        <div id="question_<?= $result['id'] ?>" class='question' data-next-question="<?= $_POST['next_id'] ?>"> <!--check the class for plurals if error occurs-->
            <h2><?= $result['id'].".".$result['question_name'] ?></h2>
            <div class='align'>
                <input type="radio" value="1" id='radio1' name='1'>
                <label id='ans1' for='radio1'><?= $result['answer1'] ?></label>
                <br/>
                <input type="radio" value="2" id='radio2' name='2'>
                <label id='ans2' for='radio2'><?= $result['answer2'] ?></label>
                <br/>
                <input type="radio" value="3" id='radio3' name='3'>
                <label id='ans3' for='radio3'><?= $result['answer3'] ?></label>
                <br/>
                <input type="radio" value="4" id='radio4' name='4'>
                <label id='ans4' for='radio4'><?= $result['answer4'] ?></label>
            </div>
            <br/>
            <?php /*<input type="button" data-next-question="<?= $_POST['next_id'] ?>" id='next' value='Next!' name='question' class='butt'/> */?>
        </div>
    <?php }?>
<?php }?>
<?php mysqli_close($con); ?>

i need a back button to go to the previous question. how can i do this.

</div>

Answer 1

var currentQuestion = '';
var preQuestion = false; 
function getQuestion(curr_id, answer1=false, answer2=false, answer3=false, answer4=false){
   currentQuestion = curr_id; // Set the value of curret question in global variable
   preQuestion = true; // Set previous question to true
   console.log(curr_id);
  .
  .
  $('#container_for_questions').html(data);
  if(preQuestion){
    $('#container_for_questions').append("<button onclick="getPreQuestion()">Previous<button>");
  }
}

function getPreQuestion(answer1=false, answer2=false, answer3=false, answer4=false){
  preQuestion = false;
  $.post("mohajax.php",
  {
      next_id: currentQuestion,
      .
      .
  },
  //Other code
}