Create javascript timer for online examination

Question

1.00/5 (2 votes)

See more:

i am developing a php application. but i cannot create a timer that the session can use for all the questions. i have seen some code but on refresh of the page, it starts counting again

What I have tried:

i have pretty done alot of research on what to do, for now everything seem abortive. the javascript will start counting again once the page is refreshed

Posted 17-Mar-16 12:24pm

Member 12400101

Updated 12-Nov-21 22:59pm

Add a Solution

Comments

Patrice T 17-Mar-16 18:38pm

Show you code!
There so many tutorials on internet that it is unbelievable that you didn't found something working.

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

koolprasad2003 · Answer 1 · 2016-03-17T18:23:00

what about 'setTimeout' method in javascript ? have you tried once ?
checkout below count down timer code snippet see if it works for you

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language ="javascript" >
        var tim;
       
        var min = 20;
        var sec = 60;
        var f = new Date();
        function f1() {
            f2();
            document.getElementById("starttime").innerHTML = "Your started your Exam at " + f.getHours() + ":" + f.getMinutes();
             
          
        }
        function f2() {
            if (parseInt(sec) > 0) {
                sec = parseInt(sec) - 1;
                document.getElementById("showtime").innerHTML = "Your Left Time  is :"+min+" Minutes ," + sec+" Seconds";
                tim = setTimeout("f2()", 1000);
            }
            else {
                if (parseInt(sec) == 0) {
                    min = parseInt(min) - 1;
                    if (parseInt(min) == 0) {
                        clearTimeout(tim);
                        location.href = "default5.aspx";
                    }
                    else {
                        sec = 60;
                        document.getElementById("showtime").innerHTML = "Your Left Time  is :" + min + " Minutes ," + sec + " Seconds";
                        tim = setTimeout("f2()", 1000);
                    }
                }
               
            }
        }
    </script>
</head>
<body onload="f1()" >
    <form id="form1" runat="server">
    <div>
      <table width="100%" align="center">
        <tr>
          <td colspan="2">
            <h2>This is head part for showing timer and all other details</h2>
          </td>
        </tr>
        <tr>
          <td>
            <div id="starttime"></div>
 
            <div id="endtime"></div>
 
            <div id="showtime"></div>
          </td>
        </tr>
        <tr>
          <td>
          </td>
        </tr>
      </table>
    </div>
    </form>
</body>
</html>

Member 15429039 · Answer 2 · 2021-11-12T22:59:00

Your Code is Nice..Bt The exam timer stop before 1 min left to complete the examination..

I like to to change this section of code

if (parseInt(sec) == 0) {
min = parseInt(min) - 1;
if (parseInt(min) == 0)
{
clearTimeout(tim);
location.href="/KB/answers/default5.aspx";

}
Like below

if (parseInt(sec) == 0) {
min = parseInt(min) - 1;
if (parseInt(min) == -1)
{
clearTimeout(tim);
location.href="/KB/answers/default5.aspx";
}

I just change a single value is to get the expected output..That is,
if (parseInt(min) == -0) To if (parseInt(min) == -1)

tungpns · Answer 3 · 2023-10-04T20:19:00

Based on Solution 1 but I fixed many errors

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language ="javascript" >
        var tim;
       
        var min = 0;
        var sec = 6;
        var f = new Date();
        function f1() {
            f2();
            document.getElementById("starttime").innerHTML = "Your started your Exam at " + f.getHours() + ":" + f.getMinutes();
             
          
        }
        function f2() {
        	debugger;
            if (parseInt(sec) > 0) {
                sec = parseInt(sec) - 1;
                document.getElementById("showtime").innerHTML = "Your Left Time  is "+ (min < 10 ? "0" + min : min) +":" + (sec < 10 ? "0" + sec : sec);
                tim = setTimeout("f2()", 1000);
            }
            else {
                if (parseInt(sec) == 0) {
                    min = parseInt(min) - 1;
                    if (parseInt(min) < 0) {
                        clearTimeout(tim);
                        document.getElementById("showtime").innerHTML = "Times up";
                        //location.href="/KB/answers/default5.aspx";
                    }
                    else {
                        sec = 59;
                        document.getElementById("showtime").innerHTML = "Your Left Time  is "+ (min < 10 ? "0" + min : min) +":" + (sec < 10 ? "0" + sec : sec);
                        tim = setTimeout("f2()", 1000);
                    }
                }
               
            }
        }
    </script>
</head>
<body onload="f1()" >
    <form id="form1" runat="server">
    <div>
      <table width="100%" align="center">
        <tr>
          <td colspan="2">
            <h2>This is head part for showing timer and all other details</h2>
          </td>
        </tr>
        <tr>
          <td>
            <div id="starttime"></div>
 
            <div id="endtime"></div>
 
            <div id="showtime"></div>
          </td>
        </tr>
        <tr>
          <td>
          </td>
        </tr>
      </table>
    </div>
    </form>
</body>
</html>

Create javascript timer for online examination

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0