drr7731
2015-05-09 18:01
浏览 82

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

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.

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongmo3413 2015-05-09 18:35
    已采纳

    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.

    已采纳该答案
    打赏 评论
  • dqa35710 2015-05-09 18:17

    You need to run the counter on the server side probably using sessions.

    Here is how you can do it.

    $_SESSION['startTime'] = time();
    

    Then using javascript on each page you can the run the countdown timer using the session variable as starting point and when user clicks a button, you can update the value of countdown timer using:

     $currentTime = time() - $_SESSION['startTime'];
    
    打赏 评论

相关推荐 更多相似问题