Question

我已经在php中创建了一个简单的测验站点，我想为每个问题集成30秒的倒计时计时器，这是代码：

var timeleft = 30;
var downloadTimer = setInterval(function(){
    timeleft--;
    document.getElementById("countdowntimer").textContent = timeleft;
    if(timeleft <= 0) {
        clearInterval(downloadTimer);
    }
    document.getElementById("quiz").submit();
},1000);

计时器代码：

You have  <span id='countdowntimer'> </span> Seconds left

问题是，当测验开始时，在计时器结束之前提交了表单，我希望在计时器达到0之后提交表单。

好的yovopaw解决了我的问题，但现在又有一个测验代码：

<form action="process.php" method="get" id="quiz">
                            <ul class="list-unstyled" id="questions">
                                <li> <h3><?php echo $question['questions']; ?></h3> 
                                    <ul class="list-unstyled">  
                                        <?php
                                            while($choice = mysqli_fetch_assoc($result)){
                                         echo "<li><input type='radio' name='quiz' class='choices' value='".$choice['id']."' > ".$choice['choices']."  </li> ";
                                        } ?>
                                    </ul>
                                </li>
                                <input type="hidden" name="start" value=<?php echo $start; ?>>
                                <input type="hidden" name="cate" value=<?php echo $selected; ?>>
                                <input type="hidden" name="total" value=<?php echo $total; ?>>
                                <input type="hidden" name="qn" value=<?php echo $questionnumber; ?>>
                                <li> <input type="submit" value="Next" class="btn btn-primary" id="next"> </li> 
                            </ul>
                        </form>

这也是JavaScript代码，用于在未选择任何选项的情况下停止使用以转到下一个问题

document.getElementById("quiz").onsubmit = function(event){
            var btn = document.getElementById("next");

    var choices = document.getElementsByClassName("choices");
    for(var i=0;i<choices.length;i++){
        if(choices[i].checked){
            return true;
        }
    }
        event.preventDefault();
        return alert("you must choose option first");
    }

所以问题是，当用户单击选择并单击下一步时，它可以按预期工作，但是当计时器达到0并提交表单时，它不会转到下一个问题，我只是得到空白页，其中的URL填充了这些隐藏字段的值。

Answer 1

尝试一下

var timeleft = 30;
var downloadTimer = setInterval(function() {
  timeleft--;
    document.getElementById("countdowntimer").textContent = timeleft;
    if(timeleft <= 0) {
        clearInterval(downloadTimer);
        console.log(`SUBMIT`)
    }},1000);

You have  <span id='countdowntimer'> </span> Seconds left

我的测验倒数计时器无法正常工作

1 个答案: