Countdown timer

I need a Countdown timer for a php/mysql quiz page. Someone gave me a JavaScript file, but I don’t know now how to make this to work for me.
The page with the quiz and and answers is php/mysql andis the same page. When I click on submit I keep the same $id in the link to show the answers.
The JS file has 2 pages. One with the quiz and the other with answers.

You will see where I have my test.php, somehow I have to have the $id for that quiz, but I don’t know how to put php in JS. I put 1, but that has to be automatically.
Can someone help me?

// how many minutes
var mins = 1;

// how many seconds (don't change this)
var secs = mins * 60;
function countdown() {
	setTimeout('Decrement()',1000);
}
function Decrement() {
	if (document.getElementById) {
		minutes = document.getElementById("minutes");
		seconds = document.getElementById("seconds");
		// if less than a minute remaining
		if (seconds < 59) {
			seconds.value = secs;
		} else {
			minutes.value = getminutes();
			seconds.value = getseconds();
		}
		secs--;
		if(secs >0)
{
setTimeout('Decrement()',1000);
} else { location.href="test.php?id=1"}

	}
}
function getminutes() {
	// minutes is seconds divided by 60, rounded down
	mins = Math.floor(secs / 60);
	return mins;
}
function getseconds() {
	// take mins remaining (as seconds) away from total seconds remaining
	return secs-Math.round(mins *60);
}

in page

Time: <input id="minutes" type="text" style="width: 22px;"> minutes <input id="seconds" type="text" style="width: 22px"> seconds

Sorry, but I don’t see test.php, and I also don’t see where you put quiz id 1 in your JS. I only see a 1 for the minutes?

I don’t know how to put php in JS. I put 1, but that has to be automatically.

Anyway, since the PHP is executed server side, and the result is a HTML/JS page, all you have to do is put something like this in your JS (it has to be part of a PHP file though):


  var id = <?php echo $id; ?>;

I see. This is the test.php page

<?php
if ((isset($_GET['id'])) && (is_numeric($_GET['id'])) ) {
	  $id = $_GET['id'];
	  } elseif ( (isset($_POST['id'])) && (is_numeric($_POST['id'])) ) {
	  $id = $_POST['id'];
	  } else {
	  echo 'Please choose a news post to view.';
	  exit();
	  } 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Page</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">
// how many minutes
var mins = 1;

// how many seconds (don't change this)
var secs = mins * 60;
function countdown() {
	setTimeout('Decrement()',1000);
}
function Decrement() {
	if (document.getElementById) {
		minutes = document.getElementById("minutes");
		seconds = document.getElementById("seconds");
		// if less than a minute remaining
		if (seconds < 59) {
			seconds.value = secs;
		} else {
			minutes.value = getminutes();
			seconds.value = getseconds();
		}
		secs--;
		if(secs >0)
{
setTimeout('Decrement()',1000);
} else { location.href="test.php?id=1"}

	}
}
function getminutes() {
	// minutes is seconds divided by 60, rounded down
	mins = Math.floor(secs / 60);
	return mins;
}
function getseconds() {
	// take mins remaining (as seconds) away from total seconds remaining
	return secs-Math.round(mins *60);
}

</script>        
</head>
<body onload="countdown();">

    <div id="main">
    	<div id="header">
	    	<div class="container">
	    		<div id="logo">
	    		
	    		
	    		</div><!-- End Logo -->
	    		<div id="login_admin">
	    			<p><a href="admin/index.php">Admin</a></p>
	    		</div>	
	    		
	    		<div id="banner">
	    	
	    		<p><span> Banner</span><br />olor, eu placerat elit bibendum id. Nullam vitae nibh vitae tellus ultricies porta. Integer pellentesque euismod ultrices. Aliquam pulvinar euismod felis vulputate vulputate. In sed enim et erat malesuada hendrerit a a elit. Integer felis enim, iaculis in mollis ac, euismod quis elit. Sed eros e</p>
	    		</div><!-- End Banner -->
	    		
	    			</div><!--End Container Header  -->
    	</div><!--  End Header -->
        
        <div id="navigation">
        	
            </div>
        </div><!-- End Navigation -->
    	<div id="page">
    
		   
    		<div class="container">
    			<div class="question-box">
              
<?php

include("config.php");


if (isset ($_POST['submit'])){
	$scor = 0;
    $display = mysql_query("SELECT * FROM quiz WHERE quiz_id='$id'  ORDER BY id");
    $total = mysql_num_rows($display);
	
	while ($result = mysql_fetch_array($display)){
    	$answer = $result["answer"];
        $userAnswer=$_POST["q${result['id']}"].$_POST["q1${result['id']}"].$_POST["q2${result['id']}"];         
		$question = $result["question"];
	}
}

?>
<form  method="post" action='<?php echo $_SERVER["PHP_SELF"]; ?>?id=<?php echo $id; ?>'>
    
<?php
    echo '<table cellspacing="0" cellpadding="0" width="100&#37;" border="0">';
	echo '<tr><td>Time: <input id="minutes" type="text" style="width: 22px;"> minutes <input id="seconds" type="text" style="width: 22px"> seconds</td></tr>';
    $display = mysql_query("SELECT * FROM quiz WHERE quiz_id='$id' ORDER BY id");
    while ($result = mysql_fetch_assoc($display)) {

    $id = $result["id"];
	$question_id = $result['question_id'];
    $question = $result["question"];
    $opt1 = $result["opt1"];
    $opt2 = $result["opt2"];
    $opt3 = $result["opt3"];
    $answer = $result["answer"];
	$photo_src = $result["photo_src"];
    $userAnswer=$_POST["q${result['id']}"].$_POST["q1${result['id']}"].$_POST["q2${result['id']}"];
?>   
     <tr><td colspan=3><br /><br /><br /><br /><b><?php echo $question_id.'.'.$question; ?></b><br /><br /></td></tr>
     <tr><td>
	 <?php 
	 if($photo_src) {
	  	print('<li><img src="' . $photo_src . '" alt="images" id="' . $id . '"  /></li>');
	 }else{
	  	//exit(); 
	 }?> </td></tr>   
     <tr><td <?php if (isset ($_POST['submit'])){user_and_correct_ans($id,'a', $userAnswer); }?>> <input type="checkbox" name="<?php echo 'q'.$id; ?>" value="<?php echo 'a'; ?>" <?php if(isset($_POST['q'.$id]) && !empty($_POST['q'.$id])){echo "checked=\\"checked\\"";} ?> class="input_checkbox" /><span class="checkbox_text"><?php echo $opt1 ; ?></span> </td></tr>
          
	 <tr><td <?php if (isset ($_POST['submit'])){ user_and_correct_ans($id,'b', $userAnswer); }?>> <input type="checkbox" name="<?php echo 'q1'.$id; ?>" value="<?php echo 'b'; ?>" <?php if(isset($_POST['q1'.$id]) && !empty($_POST['q1'.$id])){echo "checked=\\"checked\\"";}  ?>  class="input_checkbox" /><span class="checkbox_text"><?php echo $opt2; ?></span>  </td></tr>
          
	 <tr><td <?php if (isset ($_POST['submit'])){ user_and_correct_ans($id,'c', $userAnswer); }?>> <input type="checkbox" name="<?php  echo 'q2'.$id; ?>" value="<?php echo 'c'; ?>" <?php if(isset($_POST['q2'.$id]) && !empty($_POST['q2'.$id])){echo "checked=\\"checked\\"";}  ?>  class="input_checkbox" /><span class="checkbox_text"><?php echo $opt3; ?></span>  </td></tr>
<tr><td>
<?php
if (isset ($_POST['submit'])){
	if($answer==$userAnswer){
		$scor++;	
		echo "<p align=center><b>raspuns corect</b></p>";
    echo "<p>";
	}
	else{
			echo "<p align=center><b>raspuns incorect</b></p>";
    echo "<p>";
	}
}
    }
?>
</td></tr>
<?php
    echo "</table>";
	 if (!isset ($_POST['submit'])){
    echo "<input type='submit' value='Results' name='submit' class='page_form_button'>";
	 }
if (isset ($_POST['submit'])){	
	echo "<p align=center><b>You scored $scor out of $total</b></p>";
    echo "<p>";
}

?>
    </form>
    			</div>
    		</div><!-- End Container -->
    		
		   

and with your line
var id = <?php echo $id; ?>;

I get, after the time expires

http://localhost/example/test.php?id=id

instead of

http://localhost/example/test.php?id=1 (can be 2, or 3, etc)

Try this:

setTimeout('Decrement()',1000);
} else { location.href="test.php?id=<?php echo $id; ?>"}
 
    } 

Now doesn’t happen anything. When the time expires I get the same page with the quiz , not the same page, but with answers. :frowning:

I also need the same thing… need help

You will put this in your head


<!-- 
#################
	Timer
################
-->
<script type="text/javascript">
// how many minutes
var mins = 30;

// how many seconds (don't change this)
var secs = mins * 60;
function countdown() {
	setTimeout('Decrement()',1000);
}
function Decrement() {
	if (document.getElementById) {
		minutes = document.getElementById("minutes");
		seconds = document.getElementById("seconds");
		// if less than a minute remaining
		if (seconds < 59) {
			seconds.value = secs;
		} else {
			minutes.value = getminutes();
			seconds.value = getseconds();
		}
		secs--;
		if(secs >0)
{
setTimeout('Decrement()',1000);


} else {
		document.forms[0].submit.click();
		//HERE IS YOUR TEXT WHEN THE TIME EXPIRES
		alert('The time expired');
		}

	}
}
function getminutes() {
	// minutes is seconds divided by 60, rounded down
	mins = Math.floor(secs / 60);
	return mins;
}
function getseconds() {
	// take mins remaining (as seconds) away from total seconds remaining
	return secs-Math.round(mins *60);
}

</script>        

and in your body put this


/*###############################
	 		Remaining time
###############################*/
	echo '<table><tr><td>Remaining time: <input id="minutes" type="text" style="width: 22px;"> minutes<input id="seconds" type="text" style="width: 22px"> seconds</td></tr></table>';

If you want the time box to disappear after the time expired you have to put this in a if and else.(show and not show)