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.
1 2 3 4 5 6 7 8 9 10 |
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
1 2 3 4 5 6 |
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:
1 2 3 4 5 6 7 8 9 |
<?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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
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
12 thoughts on “How to Create Simple Quiz using PHP and MySQL”