使用javascript在php中准备在线测试

我想使用MySQL数据库在PHP中创建一个测试模式。这里我想从数据库中获取问题，并在html页面中显示这些问题。现在，我想用next按钮创建一个分区，当用户单击它时，它应该显示从同一分区的数据库中动态获取的下一个问题。我想它可以通过jQquery或javascript实现，但无法获得逻辑

有人能帮忙吗

提前谢谢

下面是一个示例代码，我试图用javascript显示多个分区

这是我的数据库结构

字段：qid、问题、opt1、opt2、opt3、opt4

这是从数据库中获取数据的php代码

<?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库

我还建议您使用而不是使用

mysql.*

API

让我们首先重新建立您的

mysql\u*

，并将其转到

mysqli\u*

：

/* 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实现。然后列出所有问题并使用jQuery显示单个分区。使用“下一步”按钮上的“单击”功能显示下一个问题

如果使用此方法，请尝试以下说明。希望这对你来说很简单

显示所有问题和答案

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 }

添加脚本以使“上一步”、“下一步”按钮工作

<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>

jQuery（文档）.ready（函数（）{
jQuery（'li.test:first'）.addClass（'activequestion'）；
jQuery（'.next_q'）。单击（函数（）{
var nonext=jQuery（'.test:last'）.hasClass（'activequestion'）；
如果（非文本）
{警报（“无下一个可用”）；返回false；}
var currentdiv=jQuery（'.activequestion'）.attr（'id'）；
jQuery（'.test.activequestion'）.next（）.addClass（'activequestion'）；
jQuery（'#'+currentdiv）.removeClass（'activequestion'）；
});
jQuery（'.prev_q'）。单击（函数（）{
var noprevious=jQuery（'.test:first'）.hasClass（'activequestion'）；
如果（无上一个）
{警报（“没有以前可用的”）；返回false；}
var currentdiv=jQuery（'.activequestion'）.attr（'id'）；
jQuery（'.test.activequestion'）.prev（）.addClass（'activequestion'）；
jQuery（'#'+currentdiv）.removeClass（'activequestion'）；
});
});

每次单击“下一步”从数据库中提取数据时，每次或一次提取数据时，将其存储在数组中，然后在每次单击时显示。我认为您只能使用PHP实现这一点。它看起来像一个分页，每页有一组数据。但使用Javascript也可以实现这一点。我希望你能提供更多的信息，比如MySQL数据库/表结构等，这样我们可以帮助你。如果你知道的话，你能推荐任何站点或引用这个分页吗？如果你想不刷新就使用ajax，如果你同意刷新，就像@LoganWayne建议的那样，使用“限制为1”的分页，它只显示一个问题，当我选中“任何人”选项，然后单击“下一步”时，问题不会更改。@SagarPawar-您得到了什么？错误？如果您使用Chrome浏览器查看控制台中的错误，请点击“F12”。在注释中添加此内容，这不是问题的解决方案

<?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 */

?>

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>

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>