Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap

  September 15, 2013   by:  muni   46 Comments

In this tutorial i had some of new features to the quiz application comparing previous one (Quiz application Using PHP, jQuery, Ajax, MySQL and HTML5). Following features are added

1. This Quiz application is responsive one, it will automatically render in desktop, mobile and tablet based on screen size and resolution.

2. This application has both previous and next button functionality.

3. For demo purpose I added user simple user registration.

4. User can choose category when they going to start an Quiz application.

5. Finally user score will be saved in database.

Note: Once you completed this tutorial.please refer part-2 of this tutorial(Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap part-2)

This is very simple application, please follow the this tutorial at the end you can make it yourself.

Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap

Demo

Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap

Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap

Step 1: Create following three tables

1. users

2. categories

3. questions

Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap

Download

using following sql queries.

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_name` varchar(50) NOT NULL,
  `score` int(11) NOT NULL,
  `category_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
CREATE TABLE IF NOT EXISTS `categories` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `category_name` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
CREATE TABLE IF NOT EXISTS `questions` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `question_name` text NOT NULL,
  `answer1` varchar(250) NOT NULL,
  `answer2` varchar(250) NOT NULL,
  `answer3` varchar(250) NOT NULL,
  `answer4` varchar(250) NOT NULL,
  `answer` varchar(250) NOT NULL,
  `category_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=21 ;

Now add the following sample data’s in it.

INSERT INTO `categories` (`id`, `category_name`) VALUES
(1, 'Sports'),
(2, 'HTML'),
(3, 'PHP'),
(4, 'CSS');
INSERT INTO `questions` (`id`, `question_name`, `answer1`, `answer2`, `answer3`, `answer4`, `answer`, `category_id`) VALUES
(1, 'Where did India play its 1st one day international match?', 'Lords', 'Headingley', 'Taunton', 'The Oval', '2', 1),
(2, 'Who was the 1st ODI captain for India?\r\n', 'Ajit Wadekar ', 'Bishen Singh Bedi', 'Nawab Pataudi', 'Vinoo Mankad ', '1', 1),
(3, 'Who has made the Fastest Test century in Test Cricket ?\r\n\r\n\r\n\r\n', 'Sachin Tendulkar', ' Sahid Afridi', ' Virender Sehwag', 'Vivian Richards', '4', 1),
(4, 'Which Bowler had the Best figures in a Test Match ?\r\n\r\n\r\n\r\n\r\n', 'Muttiah Muralitharan', 'Bob Massie', 'Jim Laker', 'George Lohmann', '3', 1),
(5, 'Which team has the Largest successful run chase record in ODIs ?\r\n\r\n\r\n\r\n\r\n', 'England', 'South Africa', 'Australia', 'India', '2', 1),
(6, 'What does HTML stand for?\r\n\r\n	\r\n	\r\n	', 'Hyper Text Markup Language', 'Hyperlinks and Text Markup Language', 'Home Tool Markup Language', 'Highly Text Markup Language', '1', 2),
(7, 'Who is making the Web standards?\r\n\r\n	\r\n	\r\n	\r\n	\r\n', 'Microsoft', 'Google', 'The World Wide Web Consortium', 'Mozilla', '3', 2),
(8, 'What is the correct HTML for creating a hyperlink?\r\n\r\n	\r\n	\r\n	\r\n	', '<a name="http://smarttutorials.net">Smart Tutorials</a>', '<a>http://smarttutorials.net</a>', '<a url="http://smarttutorials.net">Smart Tutorials</a>', '<a href="http://smarttutorials.net">Smart Tutorials</a>', '4', 2),
(9, 'What is the HTML element to bold a text?\r\n\r\n\r\n\r\n\r\n', '<b>', '<bold>', '<wide>', '<big>', '1', 2),
(10, 'What is the HTML tag for a link?\r\n\r\n\r\n\r\n\r\n', '<link>', '<ref>', '<a>', '<hper>', '3', 2),
(11, 'What does CSS stand for?\r\n\r\n	\r\n	\r\n	\r\n	', 'Creative Style Sheets', 'Colorful Style Sheets', 'Computer Style Sheets', 'Cascading Style Sheets', '4', 4),
(12, 'Where in an HTML document is the correct place to refer to an external style sheet?\r\n\r\n	\r\n	\r\n	\r\n	', 'In the <body> section ', 'At the end of the document', 'At the top of the document', 'In the <head> section ', '4', 4),
(13, 'Which HTML tag is used to define an internal style sheet?\r\n\r\n	\r\n	\r\n	', '<script>', '<css>', '<style>', '<link>', '3', 4),
(14, 'Which is the correct CSS syntax?\r\n\r\n	\r\n	\r\n	\r\n	', 'body:color=black;', '{body;color:black;}', 'body {color: black;}', '{body:color=black;}', '3', 4),
(15, 'Which property is used to change the background color?\r\n\r\n	\r\n	\r\n	', 'background-color', 'color', 'bgcolor', 'bg-color', '1', 4),
(16, 'What does PHP stand for?\r\n\r\n	\r\n	\r\n	', ' PHP: Hypertext Preprocessor', 'Personal Hypertext Processor', 'Personal Home Page', 'Private Home Page', '1', 3),
(17, 'PHP server scripts are surrounded by delimiters, which?\r\n\r\n	\r\n	\r\n	\r\n	', '<?php>...</?>', '<?php ... ?>', '<script>...</script>', '<&>...</&>', '2', 3),
(18, 'How do you write "Hello World" in PHP\r\n\r\n	\r\n	\r\n	', '"Hello World"', 'echo "Hello World"', 'Document.Write("Hello World");', 'print_f("Hello World");', '2', 3),
(19, ' Which of the following is the way to create comments in PHP?\r\n\r\n\r\n	\r\n	\r\n	', '// commented code to end of line', '/* commented code here */', '# commented code to end of line', 'all of the above - correct', '4', 3),
(20, 'What is the correct way to end a PHP statement?\r\n\r\n	\r\n	\r\n	\r\n	', '</php>', '.', ';', 'New line', '3', 3);

Here is the sample database relational daigram of above three tables.

Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap

Step 2:

Create config.php file to keep database connection in a separte file.

<?php
/*
 * Site : http:www.smarttutorials.net
 * Author :muni
 * 
 */

define('BASE_PATH','http://localhost/new_quiz/');
define('DB_HOST', 'localhost');
define('DB_NAME', 'quiz');
define('DB_USER','root');
define('DB_PASSWORD','');

$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());

?>

Step 3:

Create index.php file and the following scripts in it, which take care user registration process.

<?php
session_start();
?>
<!---
Site : http:www.smarttutorials.net
Author :muni
--->

<?php
require 'config.php';
?>
<!DOCTYPE html>
<html>
	<head>
		<title>Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
		<link href="css/style.css" rel="stylesheet" media="screen">
		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
		<script src="../../assets/js/html5shiv.js"></script>
		<script src="../../assets/js/respond.min.js"></script>
		<![endif]-->

	</head>
	<body>
		<header>
			<p class="text-center">
				Welcome <?php if(!empty($_SESSION['name'])){echo $_SESSION['name'];}?>
			</p>
		</header>
		<div class="container">
			<div class="row">
				<div class="col-xs-14 col-sm-7 col-lg-7">
					<div class='image'>
						<img src="image/logo.png" class="img-responsive"/>
					</div>
				</div>
				<div class="col-xs-10 col-sm-5 col-lg-5">
					<div class="intro">
						<p class="text-center">
							Please enter your name
						</p>
						<?php if(empty($_SESSION['name'])){?>
						<form class="form-signin" method="post" id='signin' name="signin" action="questions.php">
							<div class="form-group">
								<input type="text" id='name' name='name' class="form-control" placeholder="Enter your Name"/>
								<span class="help-block"></span>
							</div>
							<div class="form-group">
							    <select class="form-control" name="category" id="category">
							        <option value="">Choose your category</option>
                                  <option value="1">Sports</option>
                                  <option value="2">HTML</option>
                                  <option value="3">PHP</option>
                                  <option value="4">CSS</option>                                
                                </select>
                                <span class="help-block"></span>
							</div>

							<br>
							<button class="btn btn-success btn-block" type="submit">
								Kiss Me!!!
							</button>
						</form>

						<?php }else{?>
						    <form class="form-signin" method="post" id='signin' name="signin" action="questions.php">
                            <div class="form-group">
                                <select class="form-control" name="category" id="category">
                                    <option value="">Choose your category</option>
                                  <option value="1">Sports</option>
                                  <option value="2">HTML</option>
                                  <option value="3">PHP</option>
                                  <option value="4">CSS</option>                                
                                </select>
                                <span class="help-block"></span>
                            </div>

                            <br>
                            <button class="btn btn-success btn-block" type="submit">
                                Kiss Me!!!
                            </button>
                        </form>
						<?php }?>
					</div>
				</div>
			</div>
		</div>
		<footer>
			<p class="text-center" id="foot">
				&copy; <a href="http://smarttutorials.net/" target="_blank">Smart Tutorials </a>2013
			</p>
		</footer>
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="js/jquery-1.10.2.min.js"></script>
		<script src="js/bootstrap.min.js"></script>

		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/jquery.validate.min.js"></script>

		<script>
			$(document).ready(function() {
				$("#signin").validate({
					submitHandler : function() {
					    console.log(form.valid());
						if (form.valid()) {
						    alert("sf");
							return true;
						} else {
							return false;
						}

					},
					rules : {
						name : {
							required : true,
							minlength : 3,
							remote : {
								url : "check_name.php",
								type : "post",
								data : {
									username : function() {
										return $("#name").val();
									}
								}
							}
						},
						category:{
						    required : true
						}
					},
					messages : {
						name : {
							required : "Please enter your name",
							remote : "Name is already taken, Please choose some other name"
						},
						category:{
                            required : "Please choose your category to start Quiz"
                        }
					},
					errorPlacement : function(error, element) {
						$(element).closest('.form-group').find('.help-block').html(error.html());
					},
					highlight : function(element) {
						$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
					},
					success : function(element, lab) {
						var messages = new Array("That's Great!", "Looks good!", "You got it!", "Great Job!", "Smart!", "That's it!");
						var num = Math.floor(Math.random() * 6);
						$(lab).closest('.form-group').find('.help-block').text(messages[num]);
						$(lab).addClass('valid').closest('.form-group').removeClass('has-error').addClass('has-success');
					}
				});
			});
		</script>

	</body>
</html>

Step 4:

Now create check_name.php file which take care unique name check in the database while user registring.

<?php
/*
 * Site : http:www.smarttutorials.net
 * Author :muni
 * 
 */
 require_once 'config.php';

 if(!empty($_POST['name'])){
     $name=$_POST['name'];
     $res=mysql_query("select count(user_name) as count from users where user_name='$name'") or die(mysql_error()); 
     $count=mysql_fetch_array($res);
     if($count[0]==0){
         echo 'true';
     }else{
         echo 'false';
     }
 }
?>

Step 5:

Now create question.php and add following scripts. This is main file  of this quiz application which gets questions randomily from database for each the user. As well it take care previous and next button functionality using jQuery.

<?php
session_start();
?>
<!---
Site : http:www.smarttutorials.net
 Author :muni
--->

<?php 
require 'config.php';
$category='';
 if(!empty($_POST['name'])){
     $name=$_POST['name'];
     $category=$_POST['category'];
     mysql_query("INSERT INTO users (id, user_name,score,category_id)VALUES ('NULL','$name',0,'$category')") or die(mysql_error());
     $_SESSION['name']= $name;
     $_SESSION['id'] = mysql_insert_id();
 }
$category=$_POST['category'];
if(!empty($_SESSION['name'])){
?>
<!DOCTYPE html>
<html>
	<head>
		<title>Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
		<link href="css/style.css" rel="stylesheet" media="screen">

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
		<script src="../../assets/js/html5shiv.js"></script>
		<script src="../../assets/js/respond.min.js"></script>
		<![endif]-->
		<style>
			.container {
				margin-top: 110px;
			}
			.error {
				color: #B94A48;
			}
			.form-horizontal {
				margin-bottom: 0px;
			}
			.hide{display: none;}
		</style>
	</head>
	<body>
	    <header>
            <p class="text-center">
                Welcome : <?php if(!empty($_SESSION['name'])){echo $_SESSION['name'];}?>
            </p>
        </header>

		<div class="container question">
			<div class="col-xs-12 col-sm-8 col-md-8 col-xs-offset-4 col-sm-offset-3 col-md-offset-3">
				<p>
					Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap
				</p>
				<hr>
				<form class="form-horizontal" role="form" id='login' method="post" action="result.php">
					<?php 
					$res = mysql_query("select * from questions where category_id='$category' ORDER BY RAND()") or die(mysql_error());
                    $rows = mysql_num_rows($res);
					$i=1;
                while($result=mysql_fetch_array($res)){?>

                    <?php if($i==1){?>         
                    <div id='question<?php echo $i;?>' class='cont'>
                    <p class='questions' id="qname<?php echo $i;?>"> <?php echo $i?>.<?php echo $result['question_name'];?></p>
                    <input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer1'];?>
                   <br/>
                    <input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer2'];?>
                    <br/>
                    <input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer3'];?>
                    <br/>
                    <input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer4'];?>
                    <br/>
                    <input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>                                                                      
                    <br/>
                    <button id='next<?php echo $i;?>' class='next btn btn-success' type='button'>Next</button>
                    </div>     

                     <?php }elseif($i<1 || $i<$rows){?>

                       <div id='question<?php echo $i;?>' class='cont'>
                    <p class='questions' id="qname<?php echo $i;?>"><?php echo $i?>.<?php echo $result['question_name'];?></p>
                    <input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer1'];?>
                    <br/>
                    <input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer2'];?>
                    <br/>
                    <input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer3'];?>
                    <br/>
                    <input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer4'];?>
                    <br/>
                    <input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>                                                                      
                    <br/>
                    <button id='pre<?php echo $i;?>' class='previous btn btn-success' type='button'>Previous</button>                    
                    <button id='next<?php echo $i;?>' class='next btn btn-success' type='button' >Next</button>
                    </div>

                   <?php }elseif($i==$rows){?>
                    <div id='question<?php echo $i;?>' class='cont'>
                    <p class='questions' id="qname<?php echo $i;?>"><?php echo $i?>.<?php echo $result['question_name'];?></p>
                    <input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer1'];?>
                    <br/>
                    <input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer2'];?>
                    <br/>
                    <input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer3'];?>
                    <br/>
                    <input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer4'];?>
                    <br/>
                    <input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>                                                                      
                    <br/>

                    <button id='pre<?php echo $i;?>' class='previous btn btn-success' type='button'>Previous</button>                    
                    <button id='next<?php echo $i;?>' class='next btn btn-success' type='submit'>Finish</button>
                    </div>
					<?php } $i++;} ?>

				</form>
			</div>
		</div>
       <footer>
            <p class="text-center" id="foot">
                &copy; <a href="http://smarttutorials.net/" target="_blank">Smart Tutorials </a>2013
            </p>
        </footer>

<?php

if(isset($_POST[1])){ 
   $keys=array_keys($_POST);
   $order=join(",",$keys);

   //$query="select * from questions id IN($order) ORDER BY FIELD(id,$order)";
  // echo $query;exit;

   $response=mysql_query("select id,answer from questions where id IN($order) ORDER BY FIELD(id,$order)")   or die(mysql_error());
   $right_answer=0;
   $wrong_answer=0;
   $unanswered=0;
   while($result=mysql_fetch_array($response)){
       if($result['answer']==$_POST[$result['id']]){
               $right_answer++;
           }else if($_POST[$result['id']]==5){
               $unanswered++;
           }
           else{
               $wrong_answer++;
           }

   }

   echo "right_answer : ". $right_answer."<br>";
   echo "wrong_answer : ". $wrong_answer."<br>";
   echo "unanswered : ". $unanswered."<br>";
}
?>
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="js/jquery-1.10.2.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.validate.min.js"></script>

		<script>
		$('.cont').addClass('hide');
		count=$('.questions').length;
		 $('#question'+1).removeClass('hide');

		 $(document).on('click','.next',function(){
		     element=$(this).attr('id');
		     last = parseInt(element.substr(element.length - 1));
		     nex=last+1;
		     $('#question'+last).addClass('hide');

		     $('#question'+nex).removeClass('hide');
		 });

		 $(document).on('click','.previous',function(){
             element=$(this).attr('id');
             last = parseInt(element.substr(element.length - 1));
             pre=last-1;
             $('#question'+last).addClass('hide');

             $('#question'+pre).removeClass('hide');
         });

		</script>
	</body>
</html>
<?php }else{

 header( 'Location: http://localhost/new_quiz/index.php' ) ;

}
?>

Step 6:

Finally create result.php file and add the following lines of script in it.

<?php
session_start();
?>
<!---
Site : http:www.smarttutorials.net
Author :muni
--->

<?php 
require 'config.php';
if(!empty($_SESSION['name'])){

    $right_answer=0;
    $wrong_answer=0;
    $unanswered=0; 

   $keys=array_keys($_POST);
   $order=join(",",$keys);

   //$query="select * from questions id IN($order) ORDER BY FIELD(id,$order)";
  // echo $query;exit;

   $response=mysql_query("select id,answer from questions where id IN($order) ORDER BY FIELD(id,$order)")   or die(mysql_error());

   while($result=mysql_fetch_array($response)){
       if($result['answer']==$_POST[$result['id']]){
               $right_answer++;
           }else if($_POST[$result['id']]==5){
               $unanswered++;
           }
           else{
               $wrong_answer++;
           }
   }
   $name=$_SESSION['name'];  
   mysql_query("update users set score='$right_answer' where user_name='$name'");
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="css/style.css" rel="stylesheet" media="screen">
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="../../assets/js/html5shiv.js"></script>
        <script src="../../assets/js/respond.min.js"></script>
        <![endif]-->

    </head>
    <body>
        <header>
            <p class="text-center">
                Welcome <?php 
                if(!empty($_SESSION['name'])){
                    echo $_SESSION['name'];
                }?>

            </p>
        </header>
        <div class="container result">
            <div class="row"> 
                    <div class='result-logo'>
                            <img src="image/Quiz_result.png" class="img-responsive"/>
                    </div>    
           </div>  
           <hr>   
           <div class="row"> 
                  <div class="col-xs-18 col-sm-9 col-lg-9"> 
                    <div class='result-logo1'>
                            <img src="image/cat.GIF" class="img-responsive"/>
                    </div>
                  </div>

                  <div class="col-xs-6 col-sm-3 col-lg-3"> 
                     <a href="<?php echo BASE_PATH;?>" class='btn btn-success'>Start new Quiz!!!</a>                   
                     <a href="<?php echo BASE_PATH.'logout.php';?>" class='btn btn-success'>Logout</a>

                       <div style="margin-top: 30%">
                        <p>Total no. of right answers : <span class="answer"><?php echo $right_answer;?></span></p>
                        <p>Total no. of wrong answers : <span class="answer"><?php echo $wrong_answer;?></span></p>
                        <p>Total no. of Unanswered Questions : <span class="answer"><?php echo $unanswered;?></span></p>                   
                       </div> 

                   </div>

            </div>    
            <div class="row">    

            </div>
        </div>
        <footer>
            <p class="text-center" id="foot">
                &copy; <a href="http://smarttutorials.net/" target="_blank">Smart Tutorials </a>2013
            </p>
        </footer>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/bootstrap.min.js"></script>

        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/jquery.validate.min.js"></script>

    </body>
</html>
<?php }else{

 header( 'Location: http://localhost/new_quiz/index.php' ) ;

}?>

Step 7:

Finally create logout.php file which take care user logout process as well it redirects the user to index page.

<?php
session_start();
session_destroy();
header( 'Location: http://localhost/new_quiz/index.php' ) ;
?>

<!---
Site : http:www.smarttutorials.net
Author :muni
--->
  • murugan

    thanks. however it is not working if the data records exceed more than 10? Could be due to fixation of random number for the range from 0 to 9. Or have you restricted the number of records to 10 and if so in which file?

    murugan

    • muni

      Hi,

      Thanks Murugan,

      once I fixed, I will leave you comments here………

      Regards,
      muni

      • muni

        now it fixed.

        please download latest code.

        Regards,

        muni

  • murugan

    Great. Now it is working. Thank you very much. I will check the latest code and find where it went wrong.
    Once again I thank you for your guidance.

    murugan

    • muni

      Welcome Murugan.

      Regards,

      muni

  • http://www.livepositiveway.com Jagan

    Dear Muni,
    Your work is great & it’s helping plenty of programmers.
    But I asked assistance for something from you that you’d probably remember… There’s not even one in that list that is capable for writing tutorial ?

    • muni

      Sure Jagan..

      I will…

      muni

  • naveen

    i want be a full quiz coding with timer…

    also a website is very useful

  • Okezie Micael

    Nice, Good work. wishing you more knowledge and Grace.

    Please how do i add a timer to it ?

  • Muthu

    nice website, thanks for sharing your code, please share with source code with category selection

    • muni

      Sure … i will do it and share…..

  • mile

    hey muni, how to dont use ajax in mean not show question if touch CTRL+U
    I mean more safe if use session, right? how show from database with random question+answer and know what question was answered.

  • Luis

    very good project, congratulations, greetings from Mexico, my English is not very good, but I wonder how it could save your responses in bsade data’m somewhat novice in web development, agradececia much any suggestions of yours, I hope you can help me .

    In advance thank you very much.

  • Tusar

    Hi Muni. In a situation, where I have to show checkboxes instead of radio buttons for teh answer options, where user can select multiple answers. I have stored the answers in the db as comma separated value. How do i validate the serialize data. Can you please suggest.

    Yhanks

  • Vitor Sousa

    Hi :::I still have no answer about css files sorry…

    Thanks

  • Vitor Sousa

    You give us a path like this in questions.php

    …But where are the files?…

    “”

    The next buton apears in all page and doesn’t work:::

    How can i fix it?

    Thank you:::

  • Vitor Sousa

    sorry i was talking about this files
    css/bootstrap.min.css” rel=”stylesheet” media=”screen
    css/style.css” rel=”stylesheet” media=”screen

    “js/jquery-1.10.2.min.js

    js/bootstrap.min.js
    script src=”js/jquery.validate.min.js

    • muni

      Hi Vitor,

      I had provided all the source files in the downloaded link. Please find the download button at the start of tutorial and download all the source files….

      Many Thanks,
      muni

  • http://www.grecenter.net/model_test/ omar faruque

    Dear Bro,
    Thanks a lot for this type of tutorial. But I have a problem. If you fix my problem. This is my file link: http://www.grecenter.net/model_tesst/

    When i click “next” then come “next-2″ question but after 9th question they show 2 “container div” at a time. i meen number 10th & number-1 show at time. In this position what can i do?

    Thanks
    Omar Faruque
    Bangladesh.

    • http://dreamlib.vn nguyenquocuy

      Can you send me the source code, please!

      • muni

        Sent :-)

  • http://v.youku.com/v_show/id_XNTUwODk5Nzg4.html 七彩神仙鱼

    Great article.

  • http://tinyurl.com/np32dll drukarnia

    After I originally left a comment I seem to have clicked on the -Notify me when new comments are added- checkbox and from now on whenever a
    comment is added I get four emails with the same comment.

    Perhaps there is a way you can remove me from that
    service? Thanks a lot!

  • Layla

    I’ve tried to download the source file but it didn’t work.
    I subscribed with 2 emails and I didn’t get the download link
    I need the css files please

  • http://dreamlib.vn nguyenquocuy

    Send me source file please. I did subscribe, but no download link has been sent to me. Thank you so much, very nice quiz!

  • vipin

    I subscribed but still dn’t get the download link

    • muni

      Sent :-)

  • Vishwanath

    I need to know how may written online exam on a particular date..

    please send me code for this

  • Her

    Hi Muni! For me the questions are all appearing in the same page.
    How do I make only one question appear in the page?

  • https://www.youtube.com/watch?v=yjx-LlQUbKg unlock iphone ios 8

    It’s an awesome post in favor of all the web people; they will take advantage from it
    I am sure.

  • Filipe

    I subscribed but still don’t get the download link =(

  • David

    Hello, thanks for this tutorial, i’m starting to learn how to code and i have some problem making this tutorial.
    can u send me the complete source code?

    thanks

  • Cristian

    Hi muni! Can you please send me through email the source code please? I’m already subscribed and can’t get your mail with the code automatically

  • Rodrigo

    In this example there is the possibility of adding new questions? If so, how?

  • http://stanleytips.com Cristian

    Hello! I there any simple way to display the list of questions and answers on the results page? I mean I want to display all the questions with selected answers and correct answers! Important for users to reviews answered questions:).

    Thank you

  • megu

    thank for the great tutorial! :D it would be a big help

  • Rodrigo

    Good morning this example when I create a User and beginning to play the quiz. Now when do i get out of this User session and try to put your credential accuses the system that already has a registered User and not play the quiz

    • muni

      will add this functionality soon

      Thank you :-)

  • Domy

    i cant check the comments after login. What can be the problem? Can you please tell me to make code work for more than 10 questions?

    • http://smarttutorials.net/ muni

      Pls refer following tutorial it fixed issue to display more than 10 questions…

      • Domy

        Thank You so much….i really appreciate your help….keep on posting tutorials..will be following you…thank you again!!

        • http://smarttutorials.net/ muni

          :-)

  • Mech Clavano

    good morning sir! your tutorials are great. I subscribed already to get the source code but i didn’t receive. can you give me the source code??? this is the best quiz game i’m looking for. Im a student and part of our project is to make a quiz game. please help me.

    Thank you! :)