在 html 的测验网站中一次显示一个问题答案

【问题标题】：show questions one at a time in quiz website in html在 html 的测验网站中一次显示一个问题
【发布时间】：2018-04-25 10:18:45
【问题描述】：

我做了一个测验网站，其中显示了一个问题和 4 个带有单选按钮的选项。问题是从数据库中获取的。但是所有的问题都同时出现。我想在用户单击选项时一次显示一个问题。在他单击选项后不久，当前问题应该消失并显示下一个问题。我尝试了很多使用javascript的方法，但没有任何效果。谁能帮我。这是我的html代码

<div class="services">
<div class="container">

	<?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='question'> <!--check the class for plurals if error occurs-->
<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>

</div>
</div>

【问题讨论】：

Q1 -> Q2 -> Q3 还是可以像 Q1->Q3->Q2 那样混合？
一切都不是问题。我需要它一次出现一个并在单击单选按钮或提交按钮时得到下一个问题

标签： javascript php jquery html mysql

【解决方案1】：

那是因为您使用的是select * from questions，这将获取问题数据库中的所有内容，您将做的是一次请求一个问题select * from questions LIMIT 0, 1 // index_from, amount，然后下一次将您的限制增加一个@987654323 @

【讨论】：

感谢我得到了代码并且一次只得到一个问题。我怎样才能转到第二个问题？
@SawBuz 跟踪显示的问题数量并将其与 LIMIT 一起使用
@aayushi-kambariya 的答案有你需要的 JS。如果仍然无法正常工作，请将您的 JavaScript 代码放在这里，人们将能够帮助您修复您的代码。

【解决方案2】：

一种通用且有效的方法，通过在 UI 中一次加载一个问题，当您在 UI 中触发所需的事件时。让我们在这里详细说明一下策略

第一步：会有js函数调用来加载想要的问题。所需或现有的问题 id 将作为此 js 的参数函数。

第 2 步 js 函数将对带有参数的 php 脚本进行 ajax 调用。

第 3 步 后端 php 应返回一个带有所需问题和选项的 json 对象数组。

第 4 步：js 函数现在应该安排相应地打印返回值

【讨论】：

我尝试了很多 javascript 和 ajax 代码。我需要代码

【解决方案3】：

你可以试试这个：
php代码可以是：

        $sql = "SELECT * FROM questions";

        if ($result = $conn->query($sql)){
            // output data of each row
            while ($row = $result->fetch_assoc()) {?>
             <div id="question_<?php echo $row['id'];?>" class='question'>
                    <h2><?php echo $row['id'];?></h2> 
                    <input type="radio" class="quiz-radio" name="<?php echo $row['id'];?>" value="<?php echo $row['answer1'];?>"><?php echo $row['answer1'];?>
                    <input type="radio" class="quiz-radio" name="<?php echo $row['id'];?>" value="<?php echo $row['answer2'];?>"><?php echo $row['answer2'];?>
                    <input type="radio" class="quiz-radio" name="<?php echo $row['id'];?>" value="<?php echo $row['answer3'];?>"><?php echo $row['answer3'];?>
                    <input type="radio" class="quiz-radio" name="<?php echo $row['id'];?>" value="<?php echo $row['answer4'];?>"><?php echo $row['answer4'];?>
            </div>       

           <?php }
        } else {
            echo "0 results";
        }

js代码：

jQuery(document).ready(function(){
jQuery('.question').hide();
jQuery('.question').first().show();
    jQuery('.quiz-radio').change(function(){
        console.log(jQuery(this).val());//display answer
        var current=jQuery(this).closest('.question');
        current.hide();
        current.next().show();
    });
});

注意：需要调用.php 或.phtml 文件中的js 文件。我在我的系统中执行了这段代码，我所有的问题和答案都在数据库中。我已将它们存储在 php 变量中。

【讨论】：

但是你可以将每个问题与它的广播组放在一个单独的 div 中，我认为这是你可以显示和隐藏它们的最简单方法
我的数据库中有很多问题，问题和答案都是从数据库中获取的。我怎样才能为此创建单独的 div？这是不可能的
我的意思是说你可以在你的while语句之后打开一个div并在while结束之前结束那个div，它的循环很明显你不必把它们都括起来
select * from questions LIMIT 0, 1 // index_from, amount ，这个查询帮助我将问题从多限制为一。我想知道单击按钮时如何从数据库中获取下一个问题
PHP 在浏览器构建 DOM 树甚至 dom 元素之前执行，您应该将每一行存储在 php 变量中。然后在单击收音机时循环遍历它们。我不认为有任何方法可以通过 javascript 事件控制 php

【解决方案4】：

在这里，我举例说明了如何实现此解决方案。您将需要 3 个文件。

1) 下载 jquery 库并将其放在站点根文件夹中，在此示例中我使用 jquery-3.3.1.min.js

2) 使用此内容创建文件 index.php

<html>
<head>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="services">
    <div id="container"></div>
</div>

<script>
$(document).ready(function(){
        $('body').on('click','#next', function(){
            var curr_id = $(this).data('nextQuestion');
            var answer1 = $('#radio1').is(':checked'); 
            var answer2 = $('#radio2').is(':checked'); 
            var answer3 = $('#radio3').is(':checked'); 
            var answer4 = $('#radio4').is(':checked');
            getQuestion(curr_id, answer1, answer2, answer3, answer4);
    });

    function getQuestion(curr_id, answer1=false, answer2=false, answer3=false, answer4=false){
        $.post("ajax.php",
        {
            next_id: parseInt(curr_id)+1,
            answer1: answer1, 
            answer2: answer2, 
            answer3: answer3, 
            answer4: answer4,
        },
        function(data, status){
            $('#container').html(data);
        });
    }

    getQuestion(-1);
});

</script>

</body>
</html>

2) 创建ajax.php

<?php
$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 questions");
$number_of_all_questions = mysqli_num_rows($response);

if($number_of_all_questions <= $_POST['next_id']){
    $_POST['next_id'] = 0;
}

// query next question

$response=mysqli_query($con,"select * from questions 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'] ?>" class='question'> <!--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='1'><?= $result['answer1'] ?></label>
            <br/>
            <input type="radio" value="2" id='radio2' name='2'>
            <label id='ans2' for='2'><?= $result['answer2'] ?></label>
            <br/>
            <input type="radio" value="3" id='radio3' name='3'>
            <label id='ans3' for='3'><?= $result['answer3'] ?></label>
            <br/>
            <input type="radio" value="4" id='radio4' name='4'>
            <label id='ans4' for='4'><?= $result['answer4'] ?></label>
        </div>
        <br/>
        <input type="button" data-next-question="<?= $_POST['next_id'] ?>" id='next' value='Next!' name='question' class='butt'/>
    </div>
<?php }?>
<?php mysqli_close($con); ?>

【讨论】：

你改过 $con=mysqli_connect("localhost","my_user","my_password","my_db");用你的数据？
是的。这是我的数据 $con=mysqli_connect("localhost","root","","quiz");
好的，检查 $_POST['next_id'] 和 ajax.php 中的代码 print_f($_POST['next_id'] );exit; 并确保带有此 id 的行存在于 base 中。我也使用 xampp 和everithing 作品
我应该在“容器 div”中删除我的表单（查看我的源代码）。并像在您的源代码中一样将其留空
您应该像示例中那样做所有事情。您的按钮应如下所示。 <input type="button" data-next-question="<?= $_POST['next_id'] ?>" id='next' value='Next!' name='question' class='butt'/>。您不需要将问题 ID 添加到按钮。在 data-next-question 中，您将保留当前问题 ID