Need help with quiz timer and pagination

marun2060 · September 18, 2016, 7:30am

Hi all! I created a online quiz which is pagination format and contains a javascript timer. the problem is when the next page is selected the timer gets refreshed with original time. but i want that timer should start with remaining time . Plzzz help!

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title> Quiz</title>
</head>
  <body onload="var e=document.getElementsByTagName('input');var i=0;while(i<e.length){if(e[i++].type=='radio'){e[i].checked=false;}}">
<div style="font-weight: bold" id="quiz-time-left"></div>
<script type="text/javascript">
var total_seconds =60*10;    /////for changing time change value of 10
var c_minutes = parseInt(total_seconds/60);
var c_seconds = parseInt(total_seconds%60);
function CheckTime()
{
document.getElementById("quiz-time-left").innerHTML
='Time Left:' +c_minutes + ' minutes ' + c_seconds + 'seconds';
if(total_seconds <=0)
{
document.forms["myform"].submit();

}
else{
	total_seconds = total_seconds -1;
	c_minutes = parseInt(total_seconds/60);
	c_seconds = parseInt(total_seconds%60);
	setTimeout("CheckTime()",1000);
}
}
setTimeout("CheckTime()",1000);
</script>
<div id="box1">
<?php
error_reporting(0);
 mysql_connect("127.0.0.1","root","")or die ("Could not connect to server");
mysql_select_db("quiz")or die("Could not connect to database");

$page=$_GET["page"];
if($page=="" || $page=="1")
{
	$page1=0;
	
}
else{
	$page1=($page*1)-1;
	
}



 $data = mysql_query("SELECT * FROM quiz limit  $page1,1");
while($row = mysql_fetch_assoc($data))
{
	$question_id = $row['Question_id'];
	$question = $row ['Question'];
	$answer1 = $row['Answer1'];
	$answer2 = $row['Answer2'];
	$answer3 = $row['Answer3'];
	$answer4 = $row['Answer4'];
    $correct = $row['Correct'];
	if(empty($answer1))
	{
		echo"
		<div id= 'box'>
<form action='quiz.php' method='POST' id='myform'>
<h3>$question_id)
$question
<ol type='A'>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h4><li><input type='radio' name='".$question_id."'   value='".$answer2."'>$answer2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><input type='radio' name='".$question_id."'   value='".$answer3."'>$answer3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><input type='radio' name='".$question_id."'    value='".$answer4."'>$answer4
</h4></ol></div><br>
  ";
		
	}
	
	elseif(empty($answer2))
	{
		echo"
		<div id= 'box'>
<form action='quiz.php' method='POST' id='myform'>
<h3>$question_id)
$question
<ol type='A'>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h4><li><input type='radio' name='".$question_id."'   value='".$answer1."'>$answer1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><input type='radio' name='".$question_id."'   value='".$answer3."'>$answer3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><input type='radio' name='".$question_id."'    value='".$answer4."'>$answer4
</h4></ol></div><br>
  ";
		
	}
		elseif(empty($answer3))
	{
		echo"
		<div id= 'box'>
<form action='quiz.php' method='POST' id='myform'>
<h3>$question_id)
$question
<ol type='A'>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h4><li><input type='radio' name='".$question_id."'   value='".$answer1."'>$answer1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><input type='radio' name='".$question_id."'   value='".$answer2."'>$answer2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><input type='radio' name='".$question_id."'    value='".$answer4."'>$answer4
</h4></ol></div><br>
  ";	}
		elseif(empty($answer4))
	{
		echo"
		<div id= 'box'>
<form action='quiz.php' method='POST' id='myform'>
<h3>$question_id)
$question
<ol type='A'>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h4><li><input type='radio' name='".$question_id."'   value='".$answer1."'>$answer1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><input type='radio' name='".$question_id."'   value='".$answer2."'>$answer2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><input type='radio' name='".$question_id."'    value='".$answer3."'>$answer3
</h4></ol></div><br>
  ";
		
	}
else{
echo"
	<div id= 'box'>	
<form action='quiz.php' method='POST' id='myform'>
<h3>$question_id)
$question
<ol type='A'>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h4><li><input type='radio' name='".$question_id."' value='".$answer1."'> $answer1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><input type='radio' name='".$question_id."'   value='".$answer2."'> $answer2
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><input type='radio' name='".$question_id."'   value='".$answer3."'> $answer3
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><input type='radio' name='".$question_id."'   value='".$answer4."'> $answer4
</h4>
 </ol>
</div>
<br>
 ";      
}
}
$result=mysql_query("select * from quiz");
$count=mysql_num_rows($result);
$a=16;
echo"<br>" ;echo"<br>";
for($i=1;$i<=$a;$i++)
{
	?> <a href="index.php?page=<?php echo $i; ?>"> <?php echo $i."";?></a><?php
	
	
	
}
?>
<button class="button">Submit</button>
</body>
</div>
</head>
</html>

nimasdj · September 18, 2016, 2:58pm

What about cookieing the timer before submit and next page get the cookie? Or use doctrine-cache to cache the timer and fetch from cache?

Just out of topic: doctrine-cache is 9x faster than zend-cache.

SpacePhoenix · September 18, 2016, 6:03pm

You’re a sitting duck with that code for SQL Injection attack! Also you need to be aware that the mysql_* extension that you’ve used was REMOVED from version 7 of PHP. You should really be migrating over to the mysqli_* extension (note the i there) or to PDO and should always validate the data submitted by the user and use prepared statements

m3g4p0p · September 18, 2016, 6:22pm

Hi @marun2060, I wouldn’t do this server side but using JS – you could just store the end time in the session storage, like

var limit = 60000;
var endTime;
var timerEl = document.getElementById('quiz-time-left');

var timerFunc = function() {
  var remainingTime = endTime - Date.now();

  if (remainingTime < 0) {
    delete sessionStorage.endTime;
    alert("Time's up!");
  } else {
    timerEl.textContent = Math.floor(remainingTime / 1000);
    window.setTimeout(timerFunc, 1000);
  }
};

endTime = sessionStorage.endTime = sessionStorage.endTime || (Date.now() + limit);
timerFunc();

If you want to take account of the page loading latencies, you could do this in a similar way like

if (sessionStorage.endTime && sessionStorage.latency) {
  sessionStorage.endTime = parseInt(sessionStorage.endTime) + Date.now() - sessionStorage.latency;
}

window.addEventListener('beforeunload', function() {
  sessionStorage.latency = Date.now();
});

Although in such a case it would probably be advisable to at least cache the SQL query results beforehand, so that the user doesn’t get interrupted too long – may the time be actually ticking or not.

marun2060 · September 19, 2016, 3:14pm

thank u m3g4p0p u are simply awesome it worked for me
thanks again

system · December 19, 2016, 10:15pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Countdown timer PHP	6	22740	February 10, 2010
Handling differences in timezones PHP	18	978	July 12, 2019
Javascript - The countdown timer is not working properly JavaScript	14	5059	March 7, 2019
Trouble: Timer countdown and alert JavaScript php	2	1485	August 12, 2016
Countdown Check Question JavaScript	1	374	March 9, 2010

Need help with quiz timer and pagination

Related topics