Create Simple Quiz Web application using PHP and MySQL

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;

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');

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();
  }
?>

<?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'];?>">&nbsp;<?php echo $row['option 1']; ?><br>
  <tr><td><input required type="radio" name="userans" value="<?php echo $row['option 2'];?>">&nbsp;<?php echo $row['option 2'];?></td></tr>
  <tr><td><input required type="radio" name="userans" value="<?php echo $row['option 3'];?>">&nbsp;<?php echo $row['option 3']; ?></td></tr>
  <tr><td><input required type="radio" name="userans" value="<?php echo $row['option 4'];?>">&nbsp;<?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:&nbsp;<?php echo $no = @$_SESSION['score']; 
 session_unset(); ?></span><br>
 <span>Your Score:&nbsp<?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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

<!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>

<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>

<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><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:&nbsp<?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;
}

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

3 thoughts on “How to Create Simple Quiz using PHP and MySQL”

A
Austin says:

“clicks” is never defined. When you run this you get the following error message
Notice: Undefined index: clicks in /opt/lampp/htdocs/testing/theQuiz.php on line 19
Surely you know this, is there a fix?


December 4, 2018 at 3:20 am
m
mohdshaidai says:

fix the click problem


April 6, 2019 at 9:51 am
b
bhupinder singh says:

Sir, what if i want to show the wrong answers in column too..


May 7, 2019 at 11:46 am

How to Create Simple Quiz using PHP and MySQL

Creating database

Dumping data for table ‘quiz’

Database Configuration

Code for Quiz Web Application

CSS for Quiz Web Application

Download Source Code

Download link

More from Technopoints

3 thoughts on “How to Create Simple Quiz using PHP and MySQL”

Leave a Reply Cancel reply