在测验网站上以html一次显示一个问题

abithluo 于 2021-06-24 发布在 Mysql

关注(0)|答案(4)|浏览(394)

我做了一个测验网站，显示了一个问题和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>

mysql php jquery JavaScript Html

来源：https://stackoverflow.com/questions/50019737/show-questions-one-at-a-time-in-quiz-website-in-html

4条答案

按热度按时间

gr8qqesn1#

你可以试试这个：
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变量中。

赞(0）回复(0）举报 2021-06-24

kx5bkwkv2#

这里我举了一个例子来说明如何实现这个解决方案。你需要3个文件。
1）下载jquery库并将其放在site根文件夹中，在本例中我使用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); ?>

赞(0）回复(0）举报 2021-06-24

ni65a41a3#

当你想要的事件在ui中触发时，一次在ui中加载一个问题，这是一种通用而有效的方法。让我们在这里详细说明一下策略
第一步：将有js函数调用来加载所需的问题。所需或现有的问题id将是此js函数的参数。
步骤2 js函数将使用参数对php sript进行ajax调用。
第3步后端php应该返回一个带有desired问题和选项的json对象数组。
步骤4:js函数现在应该相应地打印返回值

赞(0）回复(0）举报 2021-06-24

bgtovc5b4#

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

赞(0）回复(0）举报 2021-06-24