在html測驗網站中一次顯示一個問題

Question

我已經完成了一個測驗網站，其中顯示了一個問題和帶有單選按鈕的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>

Answer 1

那是因為您使用的是select * from questions ，這將獲取問題數據庫中的所有內容，您要執行的操作是一次請求一個問題，請select * from questions LIMIT 0, 1 // index_from, amount ，然后下一步時間將您的限額增加一個LIMIT 1, 1

Answer 2

通過在UI中觸發所需事件時一次將問題加載到UI中的一種通用且有效的方法。 讓我們在這里詳細說明策略

步驟1：將有js函數調用來加載所需的問題。 所需或現有的問題ID將作為此js函數的參數。

第2步 js函數將使用參數對php sript進行ajax調用。

步驟3后端php應該返回帶有所需問題和選項的json對象數組。

步驟4 ：js函數現在應安排相應地打印返回值

Answer 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變量中。

Answer 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); ?>

在html測驗網站中一次顯示一個問題

問題描述

4 個解決方案

解決方案1
1 2018-04-25 10:31:12

解決方案2
1 2018-04-25 10:39:48

解決方案3
1 2018-04-25 10:46:33

解決方案4
0 已采納 2018-04-26 04:24:00

在html測驗網站中一次顯示一個問題

問題描述

4 個解決方案

解決方案1 1 2018-04-25 10:31:12

解決方案2 1 2018-04-25 10:39:48

解決方案3 1 2018-04-25 10:46:33

解決方案4 0 已采納 2018-04-26 04:24:00

解決方案1
1 2018-04-25 10:31:12

解決方案2
1 2018-04-25 10:39:48

解決方案3
1 2018-04-25 10:46:33

解決方案4
0 已采納 2018-04-26 04:24:00