javascript - 如何使用 JavaScript 创建每个问题的计时器

Question

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

现在我有一个运行良好的测验系统。 10:00 分钟过后，测验将结束。

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

因此，当您在十秒内未能回答任何问题时，它会自动带您进入下一个问题。

现在，您必须单击“下一个问题”按钮才能进入下一个问题，这就是我想要更改的内容。

下面是执行计时器并在 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>

这是单击下一个问题的代码

<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() 模拟。它将执行所有 click与按钮关联的事件监听器。

您还必须在单击按钮时重置计时器(手动或手动)。

编辑:通过评论讨论后，我猜你有 <button.next> HTML 中每个问题的标签，带有数字 ID。因此，我建议您将当前进度存储在一个变量中。

// Initializes
let currentQuestion = 1;
let question_timer = setTimeout(question_timeout_callback, 10000);

// Function which simulates the click.
function question_timeout_callback() {
    // Simulates
    $(document).find(`#${currentQuestion}`).click();
}

// your code...

// And in your click event listener:
$(document).on('click','.next', function () {
    // Resets timer
    clearTimeout(question_timer);
    question_timer = setTimeout(question_timeout_callback, 10000);

    // Update question tracking
    currentQuestion++;

    // your code...
});

// Do NOT forget to update .previous buttons with "currentQuestion--"

现在，不要忘记问自己，如果有可能回到上一个问题，您将如何应对。