hey Tochnoz , In this tutorial we are going to create PHP Quiz with Countdown timer. In previous tutorial, We have learn how to create simple php quiz and its fundamentals. As we promised in the previous tutorial we come up with the advancement of quiz. Additionally we have provided an option for adding questions and answer into the quiz.
Creating database
A database need to be create to store the information about questions, answers and user’s submitted answers.
So lets create the database by using following queries. The following SQL creates quiz table which consist of id, questions, options ,answers and timer details.
CREATE TABLE `quiz` ( `id` int(255) NOT NULL, `que` text NOT NULL, `option 1` varchar(222) NOT NULL, `option 2` varchar(222) NOT NULL, `option 3` varchar(222) NOT NULL, `option 4` varchar(222) NOT NULL, `ans` varchar(222) NOT NULL, `userans` text, `timer` varchar(50) NOT NULL DEFAULT '03:00' ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Dumping data for table ‘quiz’
Now lets insert records into the table by using following queries
INSERT INTO `quiz` (`id`, `que`, `option 1`, `option 2`, `option 3`, `option 4`, `ans`, `userans`, `timer`) VALUES (1, 'What does PHP stand for?', 'Preprocessed Hypertext Page', 'Hypertext Markup Language', 'Hypertext Preprocessor', 'Hypertext Transfer Protocol', 'Hypertext Preprocessor', '', '02:00'), (2, 'What will be the value of $var? ', '0', '1', '2', 'NULL', '0', '', ''), (3, ' ____________ function in PHP Returns a list of response headers sent (or ready to send)', 'header', 'headers_list', 'header_sent', 'header_send', 'headers_list', '', ''), (4, 'Which of the following is the Server Side Scripting Language?', 'HTML', 'CSS', 'JS', 'PHP', 'PHP', '', ''), (5, 'From which website you download this source code?', 'Softglobe.net', 'w3school.com', 'technopoints.co.in', 'php.net', 'technopoints.co.in', '', '');
First, to make it convenient, we will create a new PHP file for database configuration named dbconfig.php that holds all configured parameters:
<?php
$con = mysqli_connect("localhost","root","","technopoints");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>
Code of PHP Quiz with Countdown timer
Now its time to code the Quiz web application, In this we have use bit JavaScript code to modifying client data object module.
<!DOCTYPE html>
<html>
<?php require 'dbconfig.php';
session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Simple Online Quiz">
<meta name="author" content="Val Okafor">
<title>Simple Quiz</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<!-- Custom styles for this template -->
<link href="css/theme.css" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body role="document">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="www.technopoints.com">Technopoints | PHP Quiz</a>
</div>
<div class="navbar-collapse collapse" class="toactive">
<ul class="nav navbar-nav" class="list-inline">
<li class="cli active"><a href="index.php">Home</a></li>
<li class="cli"><a href="add_quiz.php">Add Quiz</a></li>
<li class="cli"><a href="result.php">View Result</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<head>
<title>Technopoints Quiz</title>
</head>
<body onload="hidder();">
<center>
<div class="time" id="navbar">Time left :<span id="timer"></span></div>
<button class="button" id="mybut" onclick="myFunction()">START QUIZ</button>
</center>
<div id="myDIV" style="padding: 10px 30px;">
<form action="result.php" method="post" id="form">
<table><?php $fetchqry = "SELECT * FROM `quiz`";
$result=mysqli_query($con,$fetchqry);
$num=mysqli_num_rows($result);
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
?>
<tr><td><h3><br><?php echo @$snr +=1;?> - <?php echo @$row['que'];?></h3></td></tr>
<tr><td> a ) <input required type="radio" name="<?php echo $snr;?>" value="<?php echo $row['option 1'];?>"> <?php echo $row['option 1']; ?><br>
<tr><td> b ) <input required type="radio" name="<?php echo $snr;?>" value="<?php echo $row['option 2'];?>"> <?php echo $row['option 2'];?></td></tr>
<tr><td> c ) <input required type="radio" name="<?php echo $snr;?>" value="<?php echo $row['option 3'];?>"> <?php echo $row['option 3']; ?></td></tr>
<tr><td> d ) <input required type="radio" name="<?php echo $snr;?>" value="<?php echo $row['option 4'];?>"> <?php echo $row['option 4']; ?><br><br><br></td></tr>
<?php }
?>
<tr><td align="center"><button class="button3" name="click" >Submit Quiz</button></td></tr>
</table>
<form>
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
var b = document.getElementById("mybut");
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
b.style.visibility = 'hidden';
x.style.display = "block";
startTimer();
}
}
window.onload = function() {
document.getElementById('myDIV').style.display = 'none';
};
</script>
<?php $fetchtime = "SELECT `timer` FROM `quiz` WHERE id=1";
$fetched = mysqli_query($con,$fetchtime);
$time = mysqli_fetch_array($fetched,MYSQLI_ASSOC);
$settime = $time['timer'];
?>
<script type="text/javascript">
document.getElementById('timer').innerHTML = '<?php echo $settime; ?>';
//03 + ":" + 00 ;
function startTimer() {
var presentTime = document.getElementById('timer').innerHTML;
var timeArray = presentTime.split(/[:]+/);
var m = timeArray[0];
var s = checkSecond((timeArray[1] - 1));
if(s==59){m=m-1}
if(m==0 && s==0){document.getElementById("form").submit();}
document.getElementById('timer').innerHTML =
m + ":" + s;
setTimeout(startTimer, 1000);
}
function checkSecond(sec) {
if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
if (sec < 0) {sec = "59"};
return sec;
if(sec == 0 && m == 0){ alert('stop it')};
}
</script>
<script>
window.onscroll = function() {myFun()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop -50;
function myFun() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>
- b.style.visibility = ‘hidden’; is use to hide the start quiz button after clicking.
- x.style.display = “block”; is use to render as a block-level element.
- window.onload = function() { document.getElementById(‘myDIV’).style.display = ‘none’; }; is use to hide the question fetch from the database before user click to the start quiz button.
- startTimer() this function invokes when user click the start button and it is use to display the live countdown.
The preview of above code is shown in following image:
Add Questions and timer
By following code add_quiz.php user can able to add the question and answer with its choices into the database.
<?php
include 'dbconfig.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Simple Online Quiz">
<meta name="author" content="Val Okafor">
<title>Simple Quiz</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<!-- Custom styles for this template -->
<link href="css/theme.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body role="document">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="www.technopoints.com">Technopoints | PHP Quiz</a>
</div>
<div class="navbar-collapse collapse" class="toactive">
<ul class="nav navbar-nav" class="list-inline">
<li class="cli"><a href="index.php">Home</a></li>
<li class="cli active"><a href="add_quiz.php">Add Quiz</a></li>
<li class="cli"><a href="result.php">View Result</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<style>
</style>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h1>Add Quiz</h1>
<form action="" method="post">
<div class="form-group">
<label for="question">Ask Question</label>
<input type="text" class="form-control" id="question" name="question" placeholder="Enter your question here" Required>
</div>
<div class="form-group">
<label for="correct_answer">Correct answer</label>
<input type="text" class="form-control" id="correct_answer" name="correct_answer" placeholder="Enter the correct answer here" Required>
</div>
<div class="form-group">
<label for="wrong_answer1">Wrong Answers</label>
<input type="text" class="form-control" id="wrong_answer1" name="wrong_answer1" placeholder="Wrong answer 1" Required>
</div>
<div class="form-group">
<label class="sr-only" for="wrong_answer2">Wrong Answers 2</label>
<input type="text" class="form-control" id="wrong_answer2" name="wrong_answer2" placeholder="Wrong answer 2" Required>
</div>
<div class="form-group">
<label class="sr-only" for="wrong_answer3">Wrong Answers 2</label>
<input type="text" class="form-control" id="wrong_answer3" name="wrong_answer3" placeholder="Wrong answer 3" Required>
</div>
<button type="submit" class="btn btn-primary btn-large" value="submit" name="submit">+ Add Question</button>
</form>
</div>
</div>
<?php if(isset($_POST['submit'])){
$fetchqry = "SELECT * FROM `quiz`";
$result=mysqli_query($con,$fetchqry);
$num=mysqli_num_rows($result);
@$id = $num + 1;
@$que = $_POST['question'];
@$ans = $_POST['correct_answer'];
@$wans1 = $_POST['wrong_answer1'];
@$wans2 = $_POST['wrong_answer2'];
@$wans3 = $_POST['wrong_answer3'];
$qry = "INSERT INTO `quiz`(`id`, `que`, `option 1`, `option 2`, `option 3`, `option 4`, `ans`) VALUES ($id,'$que','$ans','$wans1','$wans2','$wans3','$ans')";
$done = mysqli_query($con,$qry);
if($done==TRUE){
echo "Question and Answers Sumbmitted Succesfully";
}
}
?>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h2>Set New Timer</h2>
<form action="" method="post">
<div class="col-sm-3">
<label for="minute" >Minutes</label>
<input type="digit" class="form-control input-group-lg reg_name" name="min" placeholder="Min" Required>
</div>
<div class="col-sm-3">
<label for="second" >Seconds</label>
<input type="digit" class="form-control input-group-lg reg_name" name="sec" placeholder="Sec" Required>
</div><br>
<button type="submit" class="btn btn-primary btn-large" value="submit" name="timesubmit">+Set Timer</button>
<form>
</div></div>
<?php
if(isset($_POST['timesubmit'])){
@$min = $_POST['min'];
@$sec = $_POST['sec'];
$timer = $min.':'.$sec;
$fetchqry3 = "UPDATE `quiz` SET `timer`='$timer' WHERE`id`=1";
$result3 = mysqli_query($con,$fetchqry3);
if($result3==TRUE){
echo "The timer currently set to $timer";
}
}
?>
The quiz taker can set time limit for the quiz. For which separate field are provided so that we can concatenate it with colon purposely so that we can direct fetch and allocate it into JavaScript variable.
The preview of above code is shown in following image:
Instant Result of Quiz
As soon as quiz submitted, The user redirect to the result.php and able to see result of the quiz instantly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Simple Online Quiz">
<meta name="author" content="Val Okafor">
<title>Simple Quiz</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<!-- Custom styles for this template -->
<link href="css/theme.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body role="document">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="www.technopoints.com">Technopoints | PHP Quiz</a>
</div>
<div class="navbar-collapse collapse" class="toactive">
<ul class="nav navbar-nav" class="list-inline">
<li class="cli"><a href="index.php">Home</a></li>
<li class="cli"><a href="add_quiz.php">Add Quiz</a></li>
<li class="cli active"><a href="result.php">View Result</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<?php
include 'dbconfig.php';
$fetchqry = "SELECT * FROM `quiz`";
$result=mysqli_query($con,$fetchqry);
$num=mysqli_num_rows($result);
$i=1;
for($i;$i<=$num;$i++){
@$userselected = $_POST[$i];
$fetchqry2 = "UPDATE `quiz` SET `userans`='$userselected' WHERE `id`=$i";
mysqli_query($con,$fetchqry2);
}
$qry3 = "SELECT `ans`, `userans` FROM `quiz`;";
$result3 = mysqli_query($con,$qry3);
while ($row3 = mysqli_fetch_array($result3, MYSQLI_ASSOC)) {
if($row3['ans']==$row3['userans']){
@$_SESSION['score'] += 1 ;
}
}
?>
<div class="col-md-offset-2 col-md-8">
<h2>Result:</h2><br><br>
<span><b>No. of Correct Answer:</b> <?php echo $no = @$_SESSION['score'];
//var_dump($_SESSION['ids']);
//session_unset(); ?></span><br><br>
<span><b>Your Score:</b> <?php if(isset($no)) echo $no*2; ?></span>
</div>
- mysqli_num_rows() is use to calculate the number question present in the quiz so that we can put the query in for loop.
- The for loop repeat until all $_POST[$i] fetch from the previous quiz page index.php
- ($row3[‘ans’]==$row3[‘userans’]) checks if the user answer match with the correct answer if yes, $_SESSION[‘score’] += 1 ; score count equal to +1.
- Each question carry 2 marks so session variable multiplied by two to get actual score.
The preview of the above code is shown in following snapshot:
In this tutorial we have learn to create PHP Quiz with Countdown timer and again in furthermore tutorials we will learn some advance method to improve features of this. So make sure you have connected with us via Subscribe button.
If you have any doubts regarding to this tutorial feel free to ask in the comment section below.
To catch even more knowledgeable and easy understandable tutorials please subscribe to get email notification.
Download Source Code
Download Link