admin管理员组

文章数量:1419199

I am coding an online timed exam and for the timer to run I am using JS! The code for the timer to start and calculate the time and submit the exam when timer expires is as follows:

<script>
 //Once the plete page is loaded the GIF image disappears and questions are displayed
function StartTimer() 
{
    document.getElementById('Loading').style.display = "none";
    document.getElementById('Loaded').style.display = "block";
    document.getElementById('1').style.display = "block";
    document.getElementById('qustn1').style.backgroundColor="#dd6e23";
}
    //Sets the Interval to the time 
var ct = setInterval("calculate_time()",100); // Start clock.
setTimeOut("submitForm()", <?php echo $time_limit; ?>);
function submitForm()
{
    document.getElementById("submit").submit();
}
function calculate_time()
{
    var end_time = "<?php echo $_SESSION["start_time"]; ?>"; // Get end time from session variable (total time in seconds).
    var dt = new Date(); // Create date object.
    var time_stamp = dt.getTime()/1000; // Get current minutes (converted to seconds).
    var total_time = end_time - Math.round(time_stamp); // Subtract current seconds from total seconds to get seconds remaining.
    var mins = Math.floor(total_time / 60); // Extract minutes from seconds remaining.
    var secs = total_time - (mins * 60); // Extract remainder seconds if any.
    if(secs < 10){secs = "0" + secs;} // Check if seconds are less than 10 and add a 0 in front.
    document.getElementById("txt").value = mins + ":" + secs; // Display remaining minutes and seconds.
    // Check for end of time, stop clock and display message.
    if(mins <= 0)
    {
        if(secs <= 0 || mins < 0)
        {
            clearInterval(ct);
            document.getElementById("txt").value = "0:00";
            submitForm();
        }
    }
}

The above code runs well and even when the timer expires, the exam submits automatically. But, I am trying to call the setTimeOut() and setInterval() methods once the body is pletely loaded i.e setInterval("calculate_time()",100); // Start clock. setTimeOut("submitForm()", <?php echo $time_limit; ?>); should be in the startTimer().

    <body onload="StartTimer()">
    ......
    <script>
    .....
    function StartTimer() 
{
    document.getElementById('Loading').style.display = "none";
    document.getElementById('Loaded').style.display = "block";
    document.getElementById('1').style.display = "block";
    document.getElementById('qustn1').style.backgroundColor="#dd6e23";
    var ct = setInterval("calculate_time()",100); // Start clock.
setTimeOut("submitForm()", <?php echo $time_limit; ?>);
}
.....
    </script>

But when I do this, I am unable to execute the code exactly. Even though timer reaches 0:00 the exam cannot be submitted, instead negative timer is running!! Please help me!!

I am coding an online timed exam and for the timer to run I am using JS! The code for the timer to start and calculate the time and submit the exam when timer expires is as follows:

<script>
 //Once the plete page is loaded the GIF image disappears and questions are displayed
function StartTimer() 
{
    document.getElementById('Loading').style.display = "none";
    document.getElementById('Loaded').style.display = "block";
    document.getElementById('1').style.display = "block";
    document.getElementById('qustn1').style.backgroundColor="#dd6e23";
}
    //Sets the Interval to the time 
var ct = setInterval("calculate_time()",100); // Start clock.
setTimeOut("submitForm()", <?php echo $time_limit; ?>);
function submitForm()
{
    document.getElementById("submit").submit();
}
function calculate_time()
{
    var end_time = "<?php echo $_SESSION["start_time"]; ?>"; // Get end time from session variable (total time in seconds).
    var dt = new Date(); // Create date object.
    var time_stamp = dt.getTime()/1000; // Get current minutes (converted to seconds).
    var total_time = end_time - Math.round(time_stamp); // Subtract current seconds from total seconds to get seconds remaining.
    var mins = Math.floor(total_time / 60); // Extract minutes from seconds remaining.
    var secs = total_time - (mins * 60); // Extract remainder seconds if any.
    if(secs < 10){secs = "0" + secs;} // Check if seconds are less than 10 and add a 0 in front.
    document.getElementById("txt").value = mins + ":" + secs; // Display remaining minutes and seconds.
    // Check for end of time, stop clock and display message.
    if(mins <= 0)
    {
        if(secs <= 0 || mins < 0)
        {
            clearInterval(ct);
            document.getElementById("txt").value = "0:00";
            submitForm();
        }
    }
}

The above code runs well and even when the timer expires, the exam submits automatically. But, I am trying to call the setTimeOut() and setInterval() methods once the body is pletely loaded i.e setInterval("calculate_time()",100); // Start clock. setTimeOut("submitForm()", <?php echo $time_limit; ?>); should be in the startTimer().

    <body onload="StartTimer()">
    ......
    <script>
    .....
    function StartTimer() 
{
    document.getElementById('Loading').style.display = "none";
    document.getElementById('Loaded').style.display = "block";
    document.getElementById('1').style.display = "block";
    document.getElementById('qustn1').style.backgroundColor="#dd6e23";
    var ct = setInterval("calculate_time()",100); // Start clock.
setTimeOut("submitForm()", <?php echo $time_limit; ?>);
}
.....
    </script>

But when I do this, I am unable to execute the code exactly. Even though timer reaches 0:00 the exam cannot be submitted, instead negative timer is running!! Please help me!!

  • javascript
  • timer
Share Improve this question edited Aug 25, 2013 at 9:57 Niket Malik 1,1051 gold badge15 silver badges23 bronze badges asked Aug 25, 2013 at 9:48 user2644795user2644795 851 gold badge1 silver badge7 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

The problem is incorrect scope for variable ct in the second code. Actually, you should put this variable in a context that is available for *calculate_time* function.

For example, you can try out this code which moves variable ct to the out-most scope:

<body onload="StartTimer()">
......
    <script>
    .....
    var ct = null;
    function StartTimer() {
        document.getElementById('Loading').style.display = "none";
        document.getElementById('Loaded').style.display = "block";
        document.getElementById('1').style.display = "block";
        document.getElementById('qustn1').style.backgroundColor="#dd6e23";
        ct = setInterval("calculate_time()",100); // Start clock.
        setTimeOut("submitForm()", <?php echo $time_limit; ?>);
    }

    function submitForm() {
        document.getElementById("submit").submit();
    }
    function calculate_time() {
        var end_time = "<?php echo $_SESSION["start_time"]; ?>"; // Get end time from session variable (total time in seconds).
        var dt = new Date(); // Create date object.
        var time_stamp = dt.getTime()/1000; // Get current minutes (converted to seconds).
        var total_time = end_time - Math.round(time_stamp); // Subtract current seconds from total seconds to get seconds remaining.
        var mins = Math.floor(total_time / 60); // Extract minutes from seconds remaining.
        var secs = total_time - (mins * 60); // Extract remainder seconds if any.
        if(secs < 10){secs = "0" + secs;} // Check if seconds are less than 10 and add a 0 in front.
        document.getElementById("txt").value = mins + ":" + secs; // Display remaining minutes and seconds.
        // Check for end of time, stop clock and display message.
        if(mins <= 0) {
            if(secs <= 0 || mins < 0) {
                clearInterval(ct);
                document.getElementById("txt").value = "0:00";
                submitForm();
            }
        }
    }

    .....
    </script>
......
</body>

The best way to find the root of problems like this, is using a javascript debugger like FireBug that will easily pinpoint the root of your problem.

I worked on a Online Quiz app where I have to implement timer. I created one Javascript function that I call on body load

`< script language ="javascript" >
           var tim;       
           var min = '${sessionScope.min}';
           var sec = '${sessionScope.sec}';

        function customSubmit(someValue){  
         document.questionForm.minute.value = min;   
         document.questionForm.second.value = sec; 
         document.questionForm.submit();  
         }  

    function examTimer() {
        if (parseInt(sec) >0) {

            document.getElementById("showtime").innerHTML = "Time Remaining :"+min+" Minutes ," + sec+" Seconds";
            sec = parseInt(sec) - 1;                
            tim = setTimeout("examTimer()", 1000);
        }
        else {

            if (parseInt(min)==0 && parseInt(sec)==0){
                document.getElementById("showtime").innerHTML = "Time Remaining :"+min+" Minutes ," + sec+" Seconds";
                 alert("Time Up");
                 document.questionForm.minute.value=0;
                 document.questionForm.second.value=0;
                 document.questionForm.submit();

             }

            if (parseInt(sec) == 0) {               
                document.getElementById("showtime").innerHTML = "Time Remaining :"+min+" Minutes ," + sec+" Seconds";                   
                min = parseInt(min) - 1;
                sec=59;
                tim = setTimeout("examTimer()", 1000);
            }

        }
    }
< /script>

` Value of variable min and sec are set by sessionVariable which hold the exam time in session.

The plete application with Timer functionality is available here

http://www.edureka.co/blog/creating-an-online-quiz-application-implementing-countdown-timer/

本文标签： javascriptonline quiz timer using Java ScriptStack Overflow

版权声明：本文标题：javascript - online quiz timer using Java Script - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745302017a2652426.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。