为PHP中从数据库检索的数据创建一个后退按钮 [英] create a back button for data retreived from database in php

问题描述

我已经创建了一个用于测验考试的网站.我在文件中有以下用于调用php函数的html和ajax.我正在从数据库中询问问题.一次向用户显示一个问题.没有提交按钮，而是当用户单击选项时，显示下一个问题.

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>

下面是我用来查询问题的php文件

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.

推荐答案

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
}

这篇关于为PHP中从数据库检索的数据创建一个后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！