Setting timer for online exam using javascript and html
<p>I am trying to set a "Timer" for my online exam page using html and JavaScript where you can see code below.
 But I have problems: </p>

<p>Problem : </p>

<p>a) I need to show the time on fixed time where exam should complete on fixed time .If examiner is not able to complete the exam in time, then the page  should show  alert message about <strong>"Time up"</strong> and must show the last page of total answer that user has attempted,grade and time that user has finished the exam.</p>

<p>b)we can see running as following <strong>"Your Left Time is :1 Minutes :53 Seconds"</strong> at the bottom of my page where I have kept <strong>min=1</strong> .But it show like this <strong>Your Left Time is 0 Minutes :59 Seconds</strong> because I have kept min=1 </p>

<p>c) Here I want to show the perfect time with hours,minutes and seconds where in future if there any changes in hours,minutes and sec.</p>

<p>JSFiddle: <a href="https://jsfiddle.net/fs6xaeox/" rel="noreferrer">https://jsfiddle.net/fs6xaeox/</a></p>

<p>Code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UFT-8"&gt;
&lt;link rel="stylesheet" href="menu.css"&gt;
&lt;link rel="stylesheet" href="layout.css"&gt;


&lt;script&gt;
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;

var questions = [
        [ "Which of the following a is not a keyword in Java ?", "class", "interface", "extends", "C" ],

    [ "Which of the following is an interface ?", "Thread", "Date", "Calender", "A" ],

    [ "Which company released Java Version 8 ?", "Sun", "Oracle", "Adobe", "A" ],

    [ "What is the length of Java datatype int ?", "32 bit", "16 bit", "None", "C" ],

    [ "What is the default value of Java datatype boolean?","true","false","0","A"]
];
function _(x){
    return document.getElementById(x);
}

function renderQuestion(){
    test = _("test");

    var showscore=Math.round(correct/questions.length*100);


    if(pos &gt;= questions.length){
        document.getElementById("online_start").src = "animatedthankyou.gif";

        test.innerHTML = "&lt;h3&gt;You got "+correct+" correct of "+questions.length+" questions&lt;/h3&gt;";
        test.innerHTML += "&lt;h3&gt; Your Grade : "+showscore +"% &lt;/h3&gt;";
        test.innerHTML +="&lt;h4&gt;Exam Finished in Time:" + sec+" Seconds&lt;/h4&gt;";
        test.innerHTML += "&lt;button onclick='EndExam()'&gt;End the Exam&lt;/button&gt;";
        _("test_status").innerHTML = "&lt;h3&gt;Test Completed&lt;/h3&gt;";
        pos = 0;
        correct = 0;



        clearTimeout(tim);
        //document.getElementById("endtime").innerHTML = "&lt;h4&gt;Finished Time:"+min+" Minutes :" + sec+" Seconds&lt;/h4&gt;";
        document.getElementById("starttime").style.display += 'none';
        document.getElementById("showtime").style.display += 'none';
        //document.getElementById("showtime").style.display += 'block';


        return false;
    }
    _("test_status").innerHTML = "&lt;h3&gt;Question "+(pos+1)+" of "+questions.length+"&lt;/h3&gt;";
    question = questions[pos][0];
    chA = questions[pos][1];
    chB = questions[pos][2];
    chC = questions[pos][3];
    test.innerHTML = "&lt;h3&gt;"+question+"&lt;/h3&gt;";
    test.innerHTML += "&lt;input type='radio' name='choices' value='A'&gt; "+chA+"&lt;br&gt;";
    test.innerHTML += "&lt;input type='radio' name='choices' value='B'&gt; "+chB+"&lt;br&gt;";
    test.innerHTML += "&lt;input type='radio' name='choices' value='C'&gt; "+chC+"&lt;br&gt;&lt;br&gt;";
    test.innerHTML += "&lt;button onclick='checkAnswer()'&gt;Next&lt;/button&gt;&lt;br&gt;&lt;br&gt;";


}
function checkAnswer(){
    choices = document.getElementsByName("choices");
    choice=-1;
    for(var i=0; i&lt;choices.length; i++){
        if(choices[i].checked){
            choice = choices[i].value;
        }
    }
    if(choice == questions[pos][4]){
        correct++;
    }
    pos++;
    renderQuestion();
}

window.addEventListener("load", renderQuestion, false);


function EndExam(){

location.href="Loginpage.htm";
}


    var tim;
       var showscore=Math.round(correct/questions.length*100);
        var min = 1;
        var sec = 60;
        var f = new Date();
        function starttime() {
            showtime();
            document.getElementById("starttime").innerHTML = "&lt;h4&gt;You started your Exam at " + f.getHours() + ":" + f.getMinutes()+"&lt;/h4&gt;"; 
        }
        function showtime() {
            if (parseInt(sec) &gt; 0) {
                sec = parseInt(sec) - 1;
                document.getElementById("showtime").innerHTML = "Your Left Time is :"+min+" Minutes :" + sec+" Seconds";
                tim = setTimeout("showtime()", 1000);
            }
            else {
                if (parseInt(sec) == 0) {
                    min = parseInt(min) - 1;
            document.getElementById("showtime").innerHTML = "Your Left Time is :"+min+" Minutes :" + sec+" Seconds";
                    if (parseInt(min) == 0) {
                        clearTimeout(tim);
            alert("Time Up");


            /*_("test_status").innerHTML = "Test Completed";
            test.innerHTML = "&lt;h2&gt;You got "+correct+" of "+questions.length+" questions correct&lt;/h2&gt;";
            test.innerHTML = "&lt;h2&gt;You got "+showscore +"% out of "+questions.length+"&lt;/h2&gt;";
            test.innerHTML = "&lt;button onclick='EndExam()'&gt;End the Exam&lt;/button&gt;";
            pos = 0;
            correct = 0;
            clearTimeout(tim);
            document.getElementById("endtime").innerHTML = "You Finished exam at Time is :"+min+" Minutes :" + sec+" Seconds";
            document.getElementById("starttime").style.display += 'none';
            document.getElementById("showtime").style.display += 'none';
            //document.getElementById("showtime").style.display += 'block';
            return false;*/

                        window.location.href = "Loginpage.htm";
                    }
                    else {
                        sec = 60;
                        document.getElementById("showtime").innerHTML = "Your Left Time is :" + min + " Minutes :" + sec + " Seconds";
                        tim = setTimeout("showtime()", 1000);
                    }
                }

            }
        }




&lt;/script&gt;
&lt;/head&gt;

&lt;body onload="starttime()" &gt;

&lt;div id="Holder"&gt;
&lt;div id="Header"&gt;&lt;/div&gt;
&lt;div id="NavBar"&gt;
&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="Loginpage.htm"&gt; Login&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="Registrationpage.htm"&gt;Registration&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;


&lt;div id="Content"&gt;
&lt;div id="PageHeading"&gt;
&lt;h1&gt;&lt;marquee direction="right" behavior="alternate"&gt;All the Best&lt;/marquee&gt;&lt;/h1&gt;
&lt;/div&gt;

&lt;div id="ContentLeft"&gt;
&lt;h2&gt;&lt;/h2&gt;&lt;br&gt;
&lt;img id="online_start"&gt;
&lt;br&gt;
&lt;h6&gt;Online Examination System(OES) is a Multiple Choice Questions(MCQ) based 
examination system that provides an easy to use environment for both 
Test Conducters and Students appearing for Examination.&lt;/h6&gt;
&lt;/div&gt;
 &lt;div id="ContentRight"&gt;
&lt;section class="loginform_cf"&gt;
&lt;table&gt;
    &lt;tr&gt;
          &lt;td id="test_status"  style="text-align:left" &gt;&lt;/td&gt;
          &lt;td id="starttime"    style="text-align:right"&gt;&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
    &lt;td id="test" colspan="2"&gt;&lt;/td&gt;
    &lt;/tr&gt;

&lt;/table&gt;    
&lt;div id="showtime" &gt;&lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;

&lt;/div&gt;


&lt;div id="Footer"&gt;Developed by - K.P.RAJU&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>can any help for this problem.</p>