Hey Technoz, If you want to create a simple quiz web application then this tutorial is really going to help you. If you want to build the quiz based website then you must start from simple. In this tutorials we are going to focus on the fundamental logic for building of quiz web application. In furthermore tutorials we will learn the advance tutorial of quiz building.
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 and answers 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 ) 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`) VALUES (1, 'What does PHP stand for?', 'Preprocessed Hypertext Page', 'Hypertext Markup Language', 'Hypertext Preprocessor', 'Hypertext Transfer Protocol', 'Hypertext Preprocessor', 'Hypertext Transfer Protocol'), (2, 'What will be the value of $var? ', '0', '1', '2', 'NULL', '0', '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', 'headers_list'), (4, 'Which of the following is the Server Side Scripting Language?', 'HTML', 'CSS', 'JS', 'PHP', 'PHP', 'PHP'), (5, 'From which website you download this source code?', 'Softglobe.net', 'w3school.com', 'technopoints.co.in', 'php.net', 'technopoints.co.in', 'technopoints.co.in');
Database Configuration
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 for Quiz Web Application
Now its time to code the Quiz web application, In this
The questions and its answers are store in the database table ‘quiz’ and fetch one by one after clicking the next button
$_SESSION[‘clicks’] is use to identify which question will fetch and to maintain its sequence.
session_unset() is use to unset the session variable finish the quiz after solving all of questions
And simple inserting , fetching and uploading of operations which we already covered in our previous tutorials.
<!DOCTYPE>
<html>
<?php require 'dbconfig.php';
session_start(); ?>
<head>
<title>Technopoints Quiz</title>
<style>
body {
background: url("bg.jpg");
background-size:100%;
background-repeat: no-repeat;
position: relative;
background-attachment: fixed;
}
/* button */
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 500px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.title{
background-color: #ccc11e;
font-size: 28px;
padding: 20px;
}
.button3 {
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #f4e542;
}
.button3:hover {
background-color: #f4e542;
color: Black;
}
</style>
</head>
<body><center>
<div class="title">Technopoints.co.in</div>
<?php
if (isset($_POST['click']) || isset($_GET['start'])) {
@$_SESSION['clicks'] += 1 ;
$c = $_SESSION['clicks'];
if(isset($_POST['userans'])) { $userselected = $_POST['userans'];
$fetchqry2 = "UPDATE `quiz` SET `userans`='$userselected' WHERE `id`=$c-1";
$result2 = mysqli_query($con,$fetchqry2);
}
} else {
$_SESSION['clicks'] = 0;
}
//echo($_SESSION['clicks']);
?>
<div class="bump"><br><form><?php if($_SESSION['clicks']==0){ ?> <button class="button" name="start" float="left"><span>START QUIZ</span></button> <?php } ?></form></div>
<form action="" method="post">
<table><?php if(isset($c)) { $fetchqry = "SELECT * FROM `quiz` where id='$c'";
$result=mysqli_query($con,$fetchqry);
$num=mysqli_num_rows($result);
$row = mysqli_fetch_array($result,MYSQLI_ASSOC); }
?>
<tr><td><h3><br><?php echo @$row['que'];?></h3></td></tr> <?php if($_SESSION['clicks'] > 0 && $_SESSION['clicks'] < 6){ ?>
<tr><td><input required type="radio" name="userans" value="<?php echo $row['option 1'];?>"> <?php echo $row['option 1']; ?><br>
<tr><td><input required type="radio" name="userans" value="<?php echo $row['option 2'];?>"> <?php echo $row['option 2'];?></td></tr>
<tr><td><input required type="radio" name="userans" value="<?php echo $row['option 3'];?>"> <?php echo $row['option 3']; ?></td></tr>
<tr><td><input required type="radio" name="userans" value="<?php echo $row['option 4'];?>"> <?php echo $row['option 4']; ?><br><br><br></td></tr>
<tr><td><button class="button3" name="click" >Next</button></td></tr> <?php }
?>
<form>
<?php if($_SESSION['clicks']>5){
$qry3 = "SELECT `ans`, `userans` FROM `quiz`;";
$result3 = mysqli_query($con,$qry3);
$storeArray = Array();
while ($row3 = mysqli_fetch_array($result3, MYSQLI_ASSOC)) {
if($row3['ans']==$row3['userans']){
@$_SESSION['score'] += 1 ;
}
}
?>
<h2>Result</h2>
<span>No. of Correct Answer: <?php echo $no = @$_SESSION['score'];
session_unset(); ?></span><br>
<span>Your Score: <?php echo $no*2; ?></span>
<?php } ?>
<!-- <script type="text/javascript">
function radioValidation(){
/* var useransj = document.getElementById('rd').value;
//document.cookie = "username = " + userans;
alert(useransj); */
var uans = document.getElementsByName('userans');
var tok;
for(var i = 0; i < uans.length; i++){
if(uans[i].checked){
tok = uans[i].value;
alert(tok);
}
}
}
</script> -->
</center>
</body>
</html>
CSS for Quiz Web Application
Add effects and styling to the Quiz Web Application by using CSS which give it a better look and save the file by name index.css
body {
background: url("bg.jpg");
background-size:100%;
background-repeat: no-repeat;
position: relative;
background-attachment: fixed;
}
/* button */
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 500px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.title{
background-color: #ccc11e;
font-size: 28px;
padding: 20px;
}
.button3 {
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #f4e542;
}
.button3:hover {
background-color: #f4e542;
color: Black;
}
The view of the both HTML and CSS is illustrate in the following snapshot:
After Solving the all questions we provided an option for view the result. In this you can check the number of correct answer from the question you attempted.
In this tutorial we have learn to create basic quiz web application 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
17 thoughts on “How to Create Simple Quiz using PHP and MySQL”