为什么我的页面只显示多个问题?

时间:2014-04-10 07:02:57

标签: php jquery html

我试图一次显示一个问题。当我只想要一个问题然后点击"下一个按钮"继续下一个问题。谁能告诉我我做错了什么?

的index.php

<?php require_once 'config.php';?>
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/watch.js"></script>
<script>
$(document).ready(function(){
    $('#demo1').stopwatch().stopwatch('start');
    var steps = $('form').find(".questions");
    var count = steps.size();
    steps.each(function(i){
        hider=i+2;
        if (i == 0) {   
            $("#question_" + hider).hide();
            createNextButton(i);
        }
        else if(count==i+1){
            var step=i + 1;
            //$("#next"+step).attr('type','submit');
            $("#next"+step).on('click',function(){

               submit();

            });
        }
        else{
            $("#question_" + hider).hide();
            createNextButton(i);
        }

    });
    function submit(){
         $.ajax({
                        type: "POST",
                        url: "ajax.php",
                        data: $('form').serialize(),
                        success: function(msg) {
                          $("#quiz_form,#demo1").addClass("hide");
                          $('#result').show();
                          $('#result').append(msg);
                        }
         });

    }
    function createNextButton(i){
        var step = i + 1;
        var step1 = i + 2;
        $('#next'+step).on('click',function(){
            $("#question_" + step).hide();
            $("#question_" + step1).show();
        });
    }

    setTimeout(function() {
          submit();
    }, 50000);
});

$.ajax({
            type: "POST",
            url: "ajax.php",
            data: $('form').serialize(),
            success: function(msg) {
              $("#quiz_form,#demo1").addClass("hide");
              $('#result').show();
              $('#result').append(msg);
            }
         });
</script>



<title>Demo Gird</title>
<meta charset='utf-8'>
<link rel='stylesheet' href='css/style.css'/>
</head>

<body>
<h1>Quiz using PHP, jQuery, Ajax and MySQL</h1>
<body>

<?php $response=mysql_query("select * from questions");?>
<form method='post' id='quiz_form'>
<?php while($result=mysql_fetch_array($response)){ ?>
<div id="question_<?php echo $result['id'];?>" class='questions'>
<h2 id="question_<?php echo $result['id'];?>"><?php echo $result['id'].".".$result['question_name'];?></h2>
<div class='align'>
<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
<label id='ans1_<?php echo $result['id'];?>' for='1'><?php echo $result['answer1'];?></label>
<br/>
<input type="radio" value="2" id='radio2_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
<label id='ans2_<?php echo $result['id'];?>' for='1'><?php echo $result['answer2'];?></label>
<br/>
<input type="radio" value="3" id='radio3_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
<label id='ans3_<?php echo $result['id'];?>' for='1'><?php echo $result['answer3'];?></label>
<br/>
<input type="radio" value="4" id='radio4_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
<label id='ans4_<?php echo $result['id'];?>' for='1'><?php echo $result['answer4'];?></label>
<input type="radio" checked='checked' value="5" style='display:none' id='radio4_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
</div>
<br/>
<input type="button" id='next<?php echo $result['id'];?>' value='Next!' name='question' class='butt'/>
</div>
<?php }?>
</form>

</body>
</html>

ajax.php

<?php
require_once 'config.php';

$response=mysql_query("select id,question_name,answer from questions");
     $i=1;
     $right_answer=0;
     $wrong_answer=0;
     $unanswered=0;
     while($result=mysql_fetch_array($response)){ 
           if($result['answer']==$_POST["$i"]){
               $right_answer++;
           }else if($_POST["$i"]==5){
               $unanswered++;
           }
           else{
               $wrong_answer++;
           }
           $i++;
     }
     echo "<div id='answer'>";
     echo " Right Answer  : <span class='highlight'>". $right_answer."</span><br>";

     echo " Wrong Answer  : <span class='highlight'>". $wrong_answer."</span><br>";

     echo " Unanswered Question  : <span class='highlight'>". $unanswered."</span><br>";
     echo "</div>";
?>

谢谢

3 个答案:

答案 0 :(得分:0)

你得到所有问题,因为在index.php文件中你有一个查询来获取所有问题,然后是while循环,它循环遍历所有问题并显示它们:

<?php $response=mysql_query("select * from questions");?>
<form method='post' id='quiz_form'>
<?php while($result=mysql_fetch_array($response)){ ?>

答案 1 :(得分:0)

最好和最简单的方法是将每个项目分配给一个类,并在循环中将它们存储在一个数组中。然后,通过在阵列中移动

,可以轻松显示每个项目

答案 2 :(得分:0)

问题是你从表中获取所有行。

<?php $response=mysql_query("select * from questions");?>

使用

<?php $response=mysql_query("SELECT * FROM questions ORDER BY RAND() LIMIT 0,1");?>

它将从数据库中随机获取1行。