当用户点击某个选项时，用勾号或html

时间：2018-06-18 04:59:36

标签： javascript php jquery html css

我在php中有一个测验网站，显示数据库中有4个选项的问题。每个问题一次显示1个。我在问题表中提问，并使用列答案在同一个表中将答案标记为数字。我有一个后退按钮，供用户移动到上一个问题并进行编辑。下面是我用ajax的html：

  <script>
  var currentQuestion = '';
  var preQuestion = 'false';
  function getPreQuestion(answer1=false, answer2=false, answer3=false, answer4=false){
      $.post("mohajax.php",
      {
          next_id: currentQuestion,
          answer1: answer1,
          answer2: answer2,
          answer3: answer3,
          answer4: answer4,
      },
      function(data, status){
          $('#container_for_questions').html(data);
      });
  }
  function getQuestion(curr_id, answer1=false, answer2=false, answer3=false, answer4=false){
      if(curr_id != -1){
        currentQuestion = curr_id; // Set the value of curret question in global variable
        preQuestion = 'true'; }// Set previous question to true // Set previous question to true
      $.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);
          if(preQuestion == 'true'){
            $('#container_for_questions').append("<button onclick='getPreQuestion()'>Previous<button>");
          }
      });
  }

  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);
      });
  }
  $(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);

      });
      getQuestion(-1);
  });

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

使用以下php文件获取问题：

<?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); ?>

并使用以下php文件获取正确答案。

<style>
.green{
  background-color:;
  margin:2px;
  padding:2px;
  color:black;
}
.red{
  background-color:;
  margin:2px;
  padding:2px;
  color:black;
}
</style>

<?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 correct unswer
if($_POST['next_id'] >= 0){
$correct_unswer=mysqli_query($con,"select answer from moh WHERE id =(select min(id) from moh where id > {$_POST['next_id']})");
$result=mysqli_fetch_array($correct_unswer,MYSQLI_ASSOC);
$correct_answer = $result["answer"];

//get user answer
$user_answer = 1;
if($_POST['answer2'] != 'false') $user_answer = 2;
if($_POST['answer3'] != 'false') $user_answer = 3;
if($_POST['answer4'] != 'false') $user_answer = 4;

// Save results in session
if($correct_answer == $user_answer){
  $_SESSION["correct_score"] += 1;
}else{
  $_SESSION["not_correct_score"] += 1;
}



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

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

<div id="question_<?= $result['id'] ?>" data-id="<?= $result['id'] ?>" class='question'> <!--check the class for plurals if error occurs-->
  <h2><?= $result['id'].".".$result['question_name'] ?></h2>
  <div class='align'>
    <?php $answer_class = ($correct_answer == 1)? 'green' : 'red' ; ?>
    <div class="<?=$answer_class?>"><?= $result['answer1'] ?></div>
    <?php $answer_class = ($correct_answer == 2)? 'green' : 'red' ; ?>
    <div class="<?=$answer_class?>"><?= $result['answer2'] ?></div>
    <?php $answer_class = ($correct_answer == 3)? 'green' : 'red' ; ?>
    <div class="<?=$answer_class?>"><?= $result['answer3'] ?></div>
    <?php $answer_class = ($correct_answer == 4)? 'green' : 'red' ; ?>
    <div class="<?=$answer_class?>"><?= $result['answer4'] ?></div>
  </div>
</div>
<?php }?>
<?php mysqli_close($con); }?>

如果用户点击后退按钮，我需要设置刻度标记，以显示他之前访问过的选项。提前谢谢。

1 个答案:

答案 0 :(得分：1)

我已就此问题提供了一些意见：https://stackoverflow.com/a/50854971/5503275

将一个标志与之前的答案请求一起传递

function getPreQuestion(answer1=false, answer2=false, answer3=false, answer4=false){
      $.post("mohajax.php",
      {
          'previous_question' : 'Yes', 
          next_id: currentQuestion,
          answer1: answer1,
          answer2: answer2,
          answer3: answer3,
          answer4: answer4,
      },
      function(data, status){
          $('#container_for_questions').html(data);
      });
  }

在一个会话中添加last_answer的值

$_SESSION["last_answer"] = $user_answer;

使用条件

创建无线电选项时添加 
<div class='align'>
    <input type="radio" value="1" id='radio1' name='1' <?= (isset($_POST['previous_question']) && $_SESSION["last_answer"] == '1') ? 'checked="checked"' : '' ?>>
    <label id='ans1' for='radio1'><?= $result['answer1'] ?></label>
    <br/>
    <input type="radio" value="2" id='radio2' name='2' <?= (isset($_POST['previous_question']) && $_SESSION["last_answer"] == '2') ? 'checked="checked"' : '' ?>>
    <label id='ans2' for='radio2'><?= $result['answer2'] ?></label>
    <br/>
    <input type="radio" value="3" id='radio3' name='3' <?= (isset($_POST['previous_question']) && $_SESSION["last_answer"] == '3') ? 'checked="checked"' : '' ?>>
    <label id='ans3' for='radio3'><?= $result['answer3'] ?></label>
    <br/>
    <input type="radio" value="4" id='radio4' name='4' <?= (isset($_POST['previous_question']) && $_SESSION["last_answer"] == '4') ? 'checked="checked"' : '' ?>>
    <label id='ans4' for='radio4'><?= $result['answer4'] ?></label>
</div>
相关问题
最新问题