每次页面刷新时在计数器计时器中显示正确的时间

Question

Well!I don't know If I made the title proper even..I'm making an online examination system.. I'm stuck in a page right now.. I'm having a page where I'm displaying the questions one by one i.e on click of the buttons next and previous,the respective question is displayed from the database.Above the questions,I have a timer counter which shows the remaining time for the exam. When I go to the exam page,all works fine.1st question gets displayed and the counter starts. The problem starts when I hit the next button(next & prev are submit buttons) for the next question,the page gets refreshed as the next ques gets displayed 'n the counter starts from the beginning again.Here is the code for displaying the questions along with the counter made in JS....

<?php

require_once('connect.php');
session_start();
if(!isset($_SESSION['ta'])){
$_SESSION['ta']=0;
}
if(!isset($_SESSION['qno'])){
$_SESSION['qno']=1;
$q2=$_SESSION['qno'];

}
else{

if(isset($_POST['next'])){

    $q2=$_POST['q2'];
    $ans=$_POST['ans'];
    $_SESSION['qno']+=1;
    $reply=$_POST['question1'];
    if(isset($_POST['question1'])){

    $query="select `qno` from `answer` where `uname`='{$_SESSION['user']}'
 and `qno`='$q2'";
    $q_r=mysqli_query($con,$query);

    $n1=mysqli_num_rows($q_r);

    if($n1<1){

        $_SESSION['ta']+=1;

    }


    $query="select `qno` from `answer` where `uname`='{$_SESSION['user
and `qno`='$q2'";
    $q_r=mysqli_query($con,$query);

    $n=mysqli_num_rows($q_r);

    if($n>0){
        $new_quer="update `answer` set `reply`='$reply' where 
`uname`='{$_SESSION['user']}' and `qno`='$q2'";
        mysqli_query($con,$new_quer);

    }
    else{
        $new_q="insert into `answer`
 values('{$_SESSION['user']}',$q2,year(now()),'$ans','$reply')";
        mysqli_query($con,$new_q);
    }



    $reply="";
}
}

if(isset($_POST['previous'])){
    $_SESSION['qno']-=1;
    $query="select `reply` from `answer` where 
`uname`='{$_SESSION['user']}' and `qno`='{$_SESSION['qno']}'";
    $q_r=mysqli_query($con,$query);
    while($row=mysqli_fetch_array($q_r)){
        $reply=$row['reply'];   
    }
}


if(isset($_POST['exam_submit'])){

        $q2=$_POST['q2'];
        $ans=$_POST['ans'];
        $reply=$_POST['question1'];
        $query="select `qno` from `answer` where 
`uname`='{$_SESSION['user']}' and `qno`='$q2'";
        $q_r=mysqli_query($con,$query);

        $n=mysqli_num_rows($q_r);

        if($n>0){
            $new_quer="update `answer` set `reply`='$reply' where 
`uname`='{$_SESSION['user']}' and `qno`='$q2'";
            mysqli_query($con,$new_quer);
        }
        else{
            $all_quer="insert into `answer` 
            values('{$_SESSION['user']}',
{$_SESSION['qno']},year(now()),'$ans','$reply')";
            mysqli_query($con,$all_quer);

        }
        $new_q="insert into `answer` 
values('{$_SESSION['user']}',$q2,year(now()),'$ans','$reply')";
        mysqli_query($con,$new_q);
        header('Location:result.php');      
}
} 

$q="select * from `uquestion` where `qno`='{$_SESSION['qno']}' and 
`uname`='{$_SESSION['user']}'";
$result=mysqli_query($con,$q);

if ($result) {

while($row=mysqli_fetch_array($result)){

$qno = $row['qno'];
$question = $row['question'];
$op1 = $row['op1'];
$op2 = $row['op2'];
$op3 = $row['op3'];
$op4 = $row['op4'];
$answer = $row['answer'];

}
}

?>

<div id="counter">
<form name="counter" style="text-align:center;" action="result.php"
method="post">
<input type="text" name="hh" id="hh" size="5" style="margin-top:5px; 
height:25px; text-align:center; font-size:18px; 
font-weight:bold; font-family:Verdana; color:blue; text-align:center;"> 
<input type="text" name="mm" id="mm" size="5" style="margin-top:5px;
height:25px; text-align:center; font-size:18px; 
font-weight:bold; font-family:Verdana; color:green; text-align:center;"> 
<input type="text" name="ss" id="ss" size="5" style="margin-top:5px;
height:25px; text-align:center; font-size:18px; 
font-weight:bold; font-family:Verdana; color:red; text-align:center;">
<br>   </form> </div>
<span style="margin-left: 39.7%; font-family:Verdana; font-weight:bold;
font-size:17px; color:blue">  
Hour </span> 
<span style="margin-left: 3.3%; font-family:Verdana; font-weight:bold; 
font-size:17px; color:green;">  
Minute </span>
<span style="margin-left:2.1%; text-align:center; font-family:Verdana;
font-weight:bold; font-size:17px; color:red;">  
Second </span>

<div style="margin-top:13px; background:-moz-linear-
gradient(top,white,#FCF,#E6E6E6,#FFF8DC); 
width:50%; margin-left:22%; padding-top:11px; padding-bottom:12px; 
padding-left:2%;">

<form name="exam" method="post" action="exam.php">
<input type="hidden" name="ans" value="<?php echo $answer; ?>">
<input type="hidden" name="q2" value="<?php echo $_SESSION['qno']; ?>">
 <table width="100%" cellpadding="5">
<tr> <td style="border-bottom:2px solid blue; font-size:15px; color:blue; 
font-weight:bold;
text-shadow:rgba(160,160,200,0.5) 5px 6px 4px; font-family:Verdana;">
Question : </td> </tr>
<tr> <td style="font-size:16px; color:red; font-weight:bold; 
text-shadow:rgba(200,160,170,0.6) 6px 7px 4px;
font-family:verdana;"> 
<?php echo $question ?> </td> </tr>

<tr> <td style="text-shadow:rgba(160,200,270,0.5) 5px 6px 4px; 
font-size:14px; color:green; font-weight:bold;
font-family:verdana;">

<input type="radio" name="question1" id="q1" value="op1" <?php    
if($reply=="op1"){ echo 'checked="checked"';}

 ?> />
<?php echo $op1; ?></td> </tr>
<tr> <td style="text-shadow:rgba(160,200,270,0.5) 5px 6px 4px; 
font-size:14px; color:green; font-weight:bold;
font-family:verdana;">
<input type="radio" name="question1" id="q2" value="op2" <?php 
if($reply=="op2"){ echo 'checked="checked"';}?> /> 
<?php echo $op2;  ?> </td> </tr>
<tr> <td style="text-shadow:rgba(160,200,170,0.5) 5px 6px 4px; 
font-size:14px; color:green; font-weight:bold;
font-family:verdana;">
<input type="radio" name="question1" id="q3" value="op3" <?php 
if($reply=="op3"){ echo 'checked="checked"';}?> /> 
<?php echo $op3;  ?> </td> </tr>
<tr> <td style="text-shadow:rgba(160,200,170,0.5) 5px 6px 4px; 
font-size:14px; color:green; font-weight:bold;
font-family:verdana;">
<input type="radio" name="question1" id="q4" value="op4" <?php 
if($reply=="op4"){ echo 'checked="checked"';}?> /> 
<?php echo $op4;  ?> </td> </tr>
<tr> <td>
<input type="submit" name="previous" value="Previous" style="width:16%; 
 height:30px;" <?php if($qno==1)
 echo 'disabled="disabled"'?>>
 <input type="submit" name="next" value="Next" style="width:16%; 
height:30px;" <?php if($qno==5)
echo 'disabled="disabled"'?>>  </td> </tr>

<tr> <td style="text-shadow:rgba(160,160,200,0.5) 4px 5px 4px; 
font-size:12px; color:#03F; font-weight:bold;
font-family:verdana; border-top:2px solid blue;"> Question <?php 
echo $qno; ?> of 10 </td> </tr>
<tr> <td style="text-shadow:rgba(160,160,200,0.5) 4px 5px 4px;
font-size:12px; color:#03F; font-weight:bold;
font-family:verdana;"> Total Attempted : <?php echo $_SESSION['ta']; ?> 
</td> </tr>

<tr> <td>
<input type="submit" name="exam_submit" value="I'm done!Submit Test"
onclick="return confirm('Are you Sure?')"
style="width:97%; height:37px; background:green;
color:white; font-family:Verdana; font-size:15px; font-weight:bold;">
  </td> </tr> 
 </table>
</form>

<script language="javascript">

var sec=0; 
var mins=1; 
document.counter.hh.value=00;
document.counter.mm.value=mins;
document.counter.ss.value=sec;
function display(){
if(document.counter.mm.value=="00" &&  document.counter.ss.value=="00"){
    document.counter.submit();
}

if (sec<=0){ 
sec=60 
mins-=1 
} 
if (mins<=-1){ 
sec=0 
mins+=1 
} 
else 
sec-=1

if(sec<10){
sec=sec*1;
sec='0'+sec;
}
if(mins<10){
mins=mins*1;
mins='0'+mins;
}

document.counter.mm.value=mins;
document.counter.ss.value=sec;

setTimeout("display()",1000)

}

display();

</script>
</div>

Please suggest how to deal with it.Your help is really really appreciated.

Answer 1

You should use only seconds for a counter so it is easier to manage, anyway I have made this which fits your JavaScript code.

First add an hidden field in your exam-named form and give it a value with PHP:

<?php
if(isset($_POST["howMuchTime"]) && $_POST["howMuchTime"] > 0) {
    $hmt = $_POST["howMuchTime"];
}
else { $hmt = 0;}
?>
<input type="hidden" name="howMuchTime" value="<?php echo $hmt; ?>" />

Then, in your JavaScript code declare the following vars:

var totalTime = 450; // 7 minutes and 30 seconds
var hmt = document.exam.howMuchTime.value: // Keeps track of how much time is elapsed from the examination start
var timer = totalTime - hmt;

And change your hours-mins-seconds vars like this:

var hours = parseInt(timer / 3600); // Changes the "timer" var in hours
var mins = parseInt((timer - (hours * 3600)) / 60); //Changes the "timer" var in minutes
var sec = timer - (hours * 3600) - (mins * 60); // Changes the "timer" var in seconds
// And then the counter hh-mm-ss displayed
document.counter.hh.value = hours;
document.counter.mm.value = mins;
document.counter.ss.value = sec;

Change the condition in your first if statement in your display() function:

if(document.counter.hh.value == "00" && document.counter.mm.value == "00" && document.counter.ss.value == "00")

And add this in your display() function:

if(hours < 10) {
    // Add the first 0 to the "hours" value like you have done for minutes and seconds
    hours = hours * 1;
    hours = '0' + hours;
}

Then update the hours value too each time the function is executed:

document.counter.hh.value = hours;

And in the display() function update the howMuchTime counter you created (hidden input) in your exam-named form:

document.exam.howMuchTime.value++;

This is tested and works perfectly.