Question

我想在测验系统中取得一些成就。

现在，我的测验系统运行良好。 10:00分钟过后，它将关闭测验。

但是我现在想要的是，对于每个问题，都应该有一个计时器。因此问题1将有10秒，问题2也将有10秒下降到问题20。

因此，如果您在十秒钟内未能回答任何问题，它将自动将您带到下一个问题。

现在，发生的事情是您必须先单击下一个问题按钮，然后才能转到下一个问题，这是我要更改的内容。

下面是执行计时器并在10分钟后提交的代码

<script>
         //function that keeps the counter going
        function timer(secs){
            var ele = document.getElementById("countdown");
            ele.innerHTML = "Your Time Starts Now";         
            var mins_rem = parseInt(secs/60);
            var secs_rem = secs%60;

            if(mins_rem<10 && secs_rem>=10)
                ele.innerHTML = " "+"0"+mins_rem+":"+secs_rem;
            else if(secs_rem<10 && mins_rem>=10)
                ele.innerHTML = " "+mins_rem+":0"+secs_rem;
            else if(secs_rem<10 && mins_rem<10)
                ele.innerHTML = " "+"0"+mins_rem+":0"+secs_rem;
            else
                ele.innerHTML = " "+mins_rem+":"+secs_rem;

            if(mins_rem=="00" && secs_rem < 1){
                quiz_submit(); 
            }
            secs--;
         //to animate the timer otherwise it'd just stay at the number entered
         //calling timer() again after 1 sec
            var time_again = setTimeout('timer('+secs+')',1000);
        }
    </script>


<script>
setTimeout(function() {
        $("form").submit();
    }, 600000);
</script>

这是执行onclick到下一个问题的代码

<script type="text/javascript">

    $('.cont').addClass('hide');
    count=$('.questions').length;
    $('#question'+1).removeClass('hide');


    $(document).on('click','.next',function(){
        last= parseInt($(this).attr('id'));     
        nex = last+1;
        $('#question'+last).addClass('hide');

        $('#question'+nex).removeClass('hide');
    });

    $(document).on('click','.previous',function(){
        last = parseInt($(this).attr('id'));     
        pre = last-1;
        $('#question'+last).addClass('hide');

        $('#question'+pre).removeClass('hide');
    });

    setTimeout(function() {
        $("form").submit();
    }, 120000);
</script>

请注意，我是通过Php Mysqli提取问题的。

Answer 1

在启动时将超时初始化为变量。回调应模拟单击下一个按钮。使用.click()进行模拟。它将执行与该按钮关联的所有*/2 * * * * php /var/www/Apps/Appsname/index.php controller_folder/controller_class_name > /dev/null 2>&1事件监听器。

还必须在单击按钮时（手动或不手动）重置计时器。

编辑：通过评论讨论之后，我想您为HTML中的每个问题都拥有click标签，并带有数字ID。因此，我建议您将当前进度存储在变量中。

<button.next>

现在，不要忘了问自己，您将如何处理回到上一个问题的可能性。

Answer 2

我会建议使用其他方法。

首先，将时间计入应用程序的后端（这样用户就无法篡改它）。

用户开始测验时，请将开始时间和用户标识符保存到数据库中。

实施超时（间隔2秒？）询问后端，还剩下多少时间。

创建一个简单的脚本，该脚本从db加载剩余时间（计算当前问题剩余的时间）并将其返回到前端。

php：

<?php 
$user = (int) $_GET['user'];
$questionNumber = (int) $_GET['question'];

//connect to the db
//select eg. with PDO
$st = $db->prepare('SELECT start_time FROM quiz_completion WHERE user_id = :user');
$st->bindParam(':user', $user, PDO::PARAM_INT);
$startTimeRow = $sth->execute();

//calculate remaining time
$elapsed = time() - $startTimeRow['start_time'];
$borderTime = 10 * $questionNumber;

echo $borderTime - $elapsed;
exit(0);

具有模拟的GET和数据库：https://3v4l.org/MId0K

然后在js中只需使用用户标识符和问题编号调用此脚本即可。返回小于零时，将用户移至下一个问题。

js：

$.ajax('http://localhost/your_php_script.php?user='+user+'&question='+questionNumber).done(
function(response){
 if (response < 0) {
  //move to the next q.
 } else {
  //show remaining time?
 }
});

如果要求后端获取时间，则存在等待php答案的时间过长的风险（许多用户正在完成调查）

如何使用JavaScript为每个问题创建计时器

2 个答案: