Best way to implement a timer in Javascript and php

Question

I am developing a quiz application in php and Javascript. The quiz starts when the user hits a submit button(I don't control when the quiz should start). The quiz should stop after a specific time (I decide that). I don't want to rely completely on the client computer to stop the time since the client pc time can be altered. The quiz should not restart on page refresh.

I know setInterval and basic javascript. The function I have developed so far works perfectly, but the quiz restarts on page refresh.

function formatSecondsAsTime(secs) {
    var hours = Math.floor(secs / 3600);
    var minutes = Math.floor(secs / 60) - (hours * 60);
    var seconds = secs - (hours * 3600) - (minutes * 60);
    return hours + ':' + minutes + ':' + seconds;
}

function startTimer(mytime) {
    mytime = mytime.split(":");
    hrs = mytime[0];
    parseInt(hrs, 10);
    mins = mytime[1];
    parseInt(mins, 10)
    secs = mytime[2];
    parseInt(secs, 10);
    if (hrs > 0 || mins > 0 || secs > 0) {
        timerVar = setInterval(function () {
            if (secs > 0) //time is less than a minute
            {
                displayTime(hrs, mins, secs--);
            }
            else if (secs == 0 && mins > 0) {

                displayTime(hrs, mins = mins - 1, secs = secs + 59);
            }
            else if (secs == 0 && mins == 0 && hrs > 0) {
                displayTime(hrs--, mins = mins + 59, secs = secs + 59);
            }
            else if (secs == 0 && mins == 0 && hrs == 0) {
                clearTimeout(timerVar);
                displayTime(0, 0, 0);
            }
        }, 1000);
    }
    else {
        displayTime(0, 0, 0);
    }
}


function displayTime(hrs, mins, secs) {
    if (secs > 0 || hrs > 0 || mins > 0) {
        if ((secs.toString()).length < 2) secs = "0" + secs;
        if ((mins.toString()).length < 2) mins = "0" + mins;
        if ((hrs.toString()).length < 2) hrs = "0" + hrs;

        document.getElementById("quiztime").innerHTML = "Time remaining: " + hrs + ":" + mins + ":" + secs;
    }
    else {
        document.getElementById("quiztime").innerHTML = "Quiz has ended!";
        alert("Quiz has ended. Click ok to continue.");
        document.forms["answerForm"].submit();
    }
}

Please suggest me the best way to do it.

Thank you.

but don't worry abt that, i will show a error message if the user has disabled javascript. — Rajat
– Rajat, Commented Jun 27, 2012 at 20:45

Lusitanian · Accepted Answer · 2012-06-27 21:01:51Z

4

One of the best ways to achieve this is the following: on the begin of the quiz, send an AJAX request to the server telling your PHP script that it's started. Your PHP script should store a session variable for that user holding the start time. On submit of the quiz, check to make sure that the difference between the current time and the session stored start time is no greater than your allowed amount of time.

Session variables can't be edited or viewed by the client. If the client loads the page in the middle of the quiz, set the JS timer amount to whatever time is left based on the start time in the session.

answered Jun 27, 2012 at 21:01

Lusitanian

11.1k1 gold badge43 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1500341 Over a year ago

thanks it was really an answer from a experienced guy. I am developing something similar hope it works for me.

Krasimir · Accepted Answer · 2012-06-27 20:41:26Z

1

I'll suggest you to use cookies to determine if the current user is in some started quiz. I.e. when the user clicks submit you are setting a cookie with PHP and record the started time in a database. Every time when the user visits the page you will check for that cookie and will fetch the record from the database. That's how you will find out how much time is left till the end of the quiz.

answered Jun 27, 2012 at 20:41

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

1 Comment

Krasimir Over a year ago

I meant that the cookie could be used to store some hash of id of the user's record in the db. So, later you will be able to match the user.

aepheus · Accepted Answer · 2012-06-27 20:58:52Z

0

Cookies are the key to remembering the start time. Set the start time in a cookie, in php on submit. This same time should be written to the page in a script element (then both the server and client will know the start time). To protect the cookie you can encrypt it server-side. You can verify that the start time has not been tampered with by comparing the value in the cookie with the one in js (when the test completes).

If the page reloads and the cookie exists, pull the time from the cookie rather than setting new time.

answered Jun 27, 2012 at 20:58

aepheus

8,2178 gold badges39 silver badges52 bronze badges

Collectives™ on Stack Overflow

Best way to implement a timer in Javascript and php

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related