使用JavaScript准备PHP在线测试

Question

我希望使用MySQL数据库在PHP中创建一个测试模式。我想从数据库中获取问题并在HTML页面中显示它们。现在，我想创建一个带有“下一步”按钮的部分，当用户单击该按钮时，应在相同的部分动态显示从数据库中获取的下一个问题。我猜可以通过jQquery或JavaScript实现，但无法得到逻辑。

有人能帮忙吗？

先行致谢。

这是我尝试使用JavaScript显示多个部分的示例代码。

这是从数据库中提取数据的PHP代码。

数据库结构如下：

字段：qid、question、opt1、opt2、opt3、opt4。

<?php
$result=executeQuery("select * from quest");

if(mysql_num_rows($result)>0){

while($row=mysql_fetch_array($result)){

//echo $row['qid'];echo "<br/>";
    echo $row['question']; echo "<br/>";
    ?>

<input type="radio" name="a1" value="'<?php echo $row['opt1']; ?>'" ><?php echo $row['opt1'];  echo "<br/>"; ?>
<input type="radio" name="a1" value="'<?php echo $row['opt2']; ?>'" ><?php echo $row['opt2']; echo "<br/>";?>
<input type="radio" name="a1" value="'<?php echo $row['opt3']; ?>'" ><?php echo $row['opt3']; echo "<br/>";?>
<input type="radio" name="a1" value="'<?php echo $row['opt4']; ?>'" ><?php echo $row['opt4']; echo "<br/>";?> 



            <?php
}
}

?>

<input type="submit" name="submit" value="submit">

现在这个功能一次性获取所有行并显示出来。这是JavaScript。

var x=1;
function myfunc(){

    document.getElementById(x).style.display="block" ;
    x++;

}

每次我点击按钮时，都会显示相应的部分，但是我希望每次点击按钮时都能在一个共同的部分中显示所有数据。

- Sagar Pawar

---

要么每次获取数据，要么获取一次并将其存储在数组中，然后在每次点击时显示它。 - Sagar Pawar

如果您知道的话，能否推荐一些关于分页的网站或参考资料呢？ - Sagar Pawar

它类似于带有四个选项的问答，每个选项都显示一个单选按钮。用户将选择一个答案并点击下一步按钮，该按钮应显示下一个问题。 - Sagar Pawar

我应该编辑我的帖子并重新发布，这样你就可以清楚地了解我在做什么吗？ - Sagar Pawar

@SagarPawar 当然可以。这是很正常的做法。 - Logan Wayne

Answer 1

如果您不想在单击下一个按钮时重新加载页面，我们可以使用一个名为jQuery的JavaScript库。

我建议您使用prepared statement而不是使用deprecated的mysql_* API。

首先让我们重新建立您的mysql_*并将其更改为mysqli_*：

/* ESTABLISH CONNECTION */
$con = new mysqli("Host", "username", "password", "database"); /* REPLACE NECESSARY DATA INSIDE */

/* CHECK CONNECTION */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

if($stmt = $con->prepare("SELECT qid, question, opt1, opt2, opt3, opt4 FROM quest ORDER BY qid LIMIT 1")){
  $stmt->execute(); /* EXECUTE THE QUERY */
  $stmt->bind_result($qid, $question, $opt1, $opt2, $opt3, $opt4); /* BIND THE RESULT TO THESE VARIABLES */
  $stmt->fetch(); /* FETCH THE RESULT */
  $stmt->close();
} /* END OF PREPARED STATEMENT */

在获取数据后，我们现在可以将其放入您的表单中。

  <h1 id="question"><?php echo $question; ?></h1>

  <input type="hidden" id="qid" value="<?php echo $qid; ?>">
  <input type="radio" name="a1" id="op1" value="<?php echo $opt1; ?>"><span id="op1text"><?php echo $opt1; ?></span><br/>
  <input type="radio" name="a1" id="op2" value="<?php echo $opt2; ?>"><span id="op2text"><?php echo $opt2; ?></span><br/>
  <input type="radio" name="a1" id="op3" value="<?php echo $opt3; ?>"><span id="op3text"><?php echo $opt3; ?></span><br/>
  <input type="radio" name="a1" id="op4" value="<?php echo $opt4; ?>"><span id="op4text"><?php echo $opt4; ?></span><br/>

  <input type="submit" name="submit" id="submit" value="Next"> <!-- THIS SERVES AS THE SUBMIT AND NEXT BUTTON -->

在继续之前，请下载库这里。

现在，我们可以创建一个脚本，将答案提交到数据库，并使用AJAX跳转到下一个问题。

<script src="jquery-1.9.1.min.js"></script> <!-- REPLACE NECESSARY JQUERY FILE DEPENDING ON THE VERSION YOU HAVE DOWNLOADED -->
<script>
  $(document).ready(function(){
    $("#submit").click(function(){ /* WHEN SUBMIT IS CLICKED */
      var qid = $("#qid").val(); /* GET THE question id */
      var selected = $("input[type='radio'][name='a1']:checked");
      if (selected.length > 0) { /* CHECK THE SELECTED RADIO BUTTON */
        answer = selected.val();
      }
      $.ajax({
        type: "POST", /* THE METHOD WE WILL BE USING TO PASS THE DATA */
        url: "action.php", /* THIS IS WHERE THE DATA WILL GO */
        data: {"questionid" : qid, "answer" : answer}, /* THE DATA WE WILL BE PASSING */
        dataType : 'json',
        success: function(result){ /* WHEN IT IS SUCCESSFUL */
          /* THIS WILL REPLACE THE DATA IN OUR QUESTION PAGE */
          $("#qid").val(result.questionid);
          $("#question").html(result.question);
          $("#op1").val(result.op1);
          $("#op2").val(result.op2);
          $("#op3").val(result.op3);
          $("#op4").val(result.op4);
          $("#op1text").html(result.op1);
          $("#op2text").html(result.op2);
          $("#op3text").html(result.op3);
          $("#op4text").html(result.op4);
        }
      }); /* END OF AJAX */
    });
  });
</script>

然后，我们可以创建一个名为 action.php 的文件，从问题页面获取数据/答案。

<?php

  if(isset($_POST["questionid"])){

    /* INCLUDE OUR NEW ESTABLISHED CONNECTION HERE */

    /* PUT HERE YOUR INSERT QUERY WHICH STORES THE USER'S ANSWERS */

    /* THEN FETCH THE NEXT QUESTION */
    if($stmt = $con->prepare("SELECT qid, question, opt1, opt2, opt3, opt4 FROM quest WHERE qid > ? ORDER BY qid LIMIT 1")){
      $stmt->bind_param("i", $_POST["questionid"]);
      $stmt->execute();
      $stmt->bind_result($qid, $question, $opt1, $opt2, $opt3, $opt4);
      $stmt->fetch();
      $stmt->close();
    } /* END OF PREPARED STATEMENT */

    /* THIS SET OF DATA WILL REPLACE THE DATA IN OUR CURRENT QUESTION PAGE */
    echo json_encode(array("questionid" => $qid, "question" => $question, "op1" => $opt1, "op2" => $opt2, "op3" => $opt3, "op4", => op4));

  } /* END OF ISSET */

?>

- Logan Wayne

---

当我选中一个选项并点击下一步时，它只显示一个问题，并且问题不会改变。 - Sagar Pawar

@SagarPawar - 你得到了什么？错误吗？如果你使用Chrome浏览器，请按“F12”键查看控制台以查看错误。 - Logan Wayne

Answer 2

如果您不想使用ajax实现，那么请列出所有问题并使用jQuery来显示单个div。使用“click”函数在下一个按钮上显示下一个问题。

如果您选择这种方法，请尝试以下说明。希望对您来说很简单。

显示所有问题和答案。

while($row=mysql_fetch_array($result)){ ?>
<li class="test " id="qid_<?php echo $row['id']; ?>" >
<?php echo $row['question']; /* here display the stuff */ ?></li>
<?php }

创建“上一页”和“下一页”按钮。

<span class="prev_q">Prev</span>      
<span class="next_q">Next</span>

添加以下 CSS（使第一个问题处于活动状态）

li.test { display:none; }
li.activequestion{ display:block;background:#cccccc; color:#c40001; }

添加脚本以使上一页、下一页按钮起作用

<script>
jQuery(document).ready(function(){
jQuery('li.test:first').addClass('activequestion');

jQuery('.next_q').click(function(){
var nonext=jQuery('.test:last').hasClass('activequestion');
if(nonext)
{ alert("no next available"); return false; }
var currentdiv=jQuery('.activequestion').attr('id');
jQuery('.test.activequestion').next().addClass('activequestion');
jQuery('#'+currentdiv).removeClass('activequestion');
});

jQuery('.prev_q').click(function(){
var noprevious=jQuery('.test:first').hasClass('activequestion');
if(noprevious)
{ alert("no previous available"); return false; }
var currentdiv=jQuery('.activequestion').attr('id');
jQuery('.test.activequestion').prev().addClass('activequestion');
jQuery('#'+currentdiv).removeClass('activequestion');
});
});
</script>

- Muthu kumar

---

请在注释中添加此内容，这并不是问题的解决方案。 - saurabh kamble