Please support us by disabling ad blocker for smarttutorials.net ...

Quiz application Using PHP, jQuery, Ajax, MySQL and HTML5

Posted by & filed under CSS, HTML5, JQUERY, MYSQL, PHP.

Everyone likes to make some hello world application, here is that type application you can make it youself.
I am going to make Quiz application using PHP, MySQL, HTML5, jQuery, Ajax and CSS3. Just follow this tutorial to make it this appliaction youself. At the end of this tutorial you are going to have nice working your Quiz Application.

Note : You can refer my latest Quiz application
 
Responsive PHP Quiz Script

 

 

quiz application using php,mysql,jquery, ajax, html5 and css3

Quiz Application using PHP, MySQL,jQuery, Ajax, html5 and css3

Here is the folder structure of the application.

quiz application using php, jQuery, ajax, MySQL and HTML5

Step 1:

Create a table for your Quiz application using following SQL Queries.

CREATE TABLE IF NOT EXISTS `questions` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `question_name` text NOT NULL,
  `answer1` varchar(50) NOT NULL,
  `answer2` varchar(50) NOT NULL,
  `answer3` varchar(50) NOT NULL,
  `answer4` varchar(50) NOT NULL,
  `answer` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

Now insert some sample data’s in it.

INSERT INTO `questions` (`id`, `question_name`, `answer1`, `answer2`, `answer3`, `answer4`, `answer`) VALUES
(1, 'What does PHP stand for?', 'Personal Home Page', 'Personal Hypertext Processor', 'Private Home Page', 'PHP: Hypertext Preprocessor', '4'),
(2, 'How do you write "Hello World" in PHP', 'Document.Write("Hello World");', 'echo "Hello World";', '"Hello World";', '"Hello World";', '2'),
(3, 'The PHP syntax is most similar to:', 'VBScript', 'JavaScript', 'Perl and C', 'Perl and C', '3'),
(4, 'How do you get information from a form that is submitted using the "get" method?', 'Request.Form;', '$_GET[];', 'Request.QueryString;', 'Request.QueryString;', '2');

 

 

Step 2:

Create config.php file to write database connection at one place.

<?php
define('DB_HOST', 'localhost');
define('DB_NAME', 'test');
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:
Now create index.php file, and include config.php file at the first.

<?php require_once 'config.php';?>

now html part. I added stylesheet in the head section and h1 tag in the body.

<!DOCTYPE html>
<html>
<head>
<title>Demo Gird</title>
<meta charset='utf-8'>
<link rel='stylesheet' href='css/style.css'/>
</head>

<body>
<h1>Quiz using PHP, jQuery, Ajax and MySQL</h1>

Next query through the database to get questions and answers from the database.

<?php $response=mysql_query("select * from questions");?>

Using that data’s we are going to dynamically generate form fields for all questions.

<form method='post' id='quiz_form'>
<?php while($result=mysql_fetch_array($response)){ ?>
<div id="question_<?php echo $result['id'];?>" class='questions'>
<h2 id="question_<?php echo $result['id'];?>"><?php echo $result['id'].".".$result['question_name'];?></h2>
<div class='align'>
<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
<label id='ans1_<?php echo $result['id'];?>' for='1'><?php echo $result['answer1'];?></label>
<br/>
<input type="radio" value="2" id='radio2_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
<label id='ans2_<?php echo $result['id'];?>' for='1'><?php echo $result['answer2'];?></label>
<br/>
<input type="radio" value="3" id='radio3_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
<label id='ans3_<?php echo $result['id'];?>' for='1'><?php echo $result['answer3'];?></label>
<br/>
<input type="radio" value="4" id='radio4_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
<label id='ans4_<?php echo $result['id'];?>' for='1'><?php echo $result['answer4'];?></label>
<input type="radio" checked='checked' value="5" style='display:none' id='radio4_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'>
</div>
<br/>
<input type="button" id='next<?php echo $result['id'];?>' value='Next!' name='question' class='butt'/>
</div>
<?php }?>
</form>

Step 4:

now using jQuery i will show only one questions at a time.Here is jQuery script.

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/watch.js"></script>
<script>
$(document).ready(function(){
	$('#demo1').stopwatch().stopwatch('start');
	var steps = $('form').find(".questions");
	var count = steps.size();
	steps.each(function(i){
		hider=i+2;
		if (i == 0) { 	
    		$("#question_" + hider).hide();
    		createNextButton(i);
        }
		else if(count==i+1){
			var step=i + 1;
			//$("#next"+step).attr('type','submit');
            $("#next"+step).on('click',function(){

			   submit();

            });
	    }
		else{
			$("#question_" + hider).hide();
			createNextButton(i);
		}

	});
    function submit(){
	     $.ajax({
						type: "POST",
						url: "ajax.php",
						data: $('form').serialize(),
						success: function(msg) {
						  $("#quiz_form,#demo1").addClass("hide");
						  $('#result').show();
						  $('#result').append(msg);
						}
	     });

	}
	function createNextButton(i){
		var step = i + 1;
		var step1 = i + 2;
        $('#next'+step).on('click',function(){
        	$("#question_" + step).hide();
        	$("#question_" + step1).show();
        });
	}
	setTimeout(function() {
	      submit();
	}, 50000);
});
</script>

At the end final question I am posting all the answers to ajax.php file using ajax to validate right, wrong and unanswered questions.

$.ajax({
			type: "POST",
			url: "ajax.php",
			data: $('form').serialize(),
			success: function(msg) {
			  $("#quiz_form,#demo1").addClass("hide");
			  $('#result').show();
			  $('#result').append(msg);
			}
	     });

Step 5:

Finally create ajax.php file that’s going to validate your answers.

<?php
require_once 'config.php';

$response=mysql_query("select id,question_name,answer from questions");
	 $i=1;
	 $right_answer=0;
	 $wrong_answer=0;
	 $unanswered=0;
	 while($result=mysql_fetch_array($response)){ 
	       if($result['answer']==$_POST["$i"]){
		       $right_answer++;
		   }else if($_POST["$i"]==5){
		       $unanswered++;
		   }
		   else{
		       $wrong_answer++;
		   }
		   $i++;
	 }
	 echo "<div id='answer'>";
	 echo " Right Answer  : <span class='highlight'>". $right_answer."</span><br>";

	 echo " Wrong Answer  : <span class='highlight'>". $wrong_answer."</span><br>";

	 echo " Unanswered Question  : <span class='highlight'>". $unanswered."</span><br>";
	 echo "</div>";
?>

.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

  • Onyx

    Thanks for the nice tutorial.
    What modifications does it need to show questions in random order?

    Is an ORDER BY rand(); enough or needs more code added?

  • vijay

    how can we create prev button functionality if i have to move back an forth before submitting

  • isun

    hei..great tutorial…but why the result keeps appearing(more than one result)?how to stop it and make to give only one result?

  • muni

    Hi Isun,

    Sorry for delay,
    Remove following lines of javascript

    setTimeout(function() {
    submit();
    }, 50000);
    it will solve your problems

  • muni

    hi all,

    I added some of new features to this quiz application and posted in the following URL.
    Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap
    http://www.smarttutorials.net/responsive-quiz-application-using-php-mysql-jquery-ajax-and-twitter-bootstrap/

  • Vitor Sousa

    Hi there, where are the .css file called style?

    And js??

    Thank you

  • omar faruque

    hello muni. Thanks for your nice tutorial. I use your code in my page. But i face a new problem, I want to show a single question. But my all question are hide. plz want to know why?

    Thanks,
    I am weating for your response.
    Omar Faruque from Bangladesh.

  • muni
  • Narasinga Rao

    Sir, What changes should i make in watch.js, if i need to decrement my counter, i.e, i need to show countdown timer in quiz. Please help me out in this

  • muni

    Hi Rao,

    Please refer following my tutorial you will get detailed info about timer usage.

    http://www.smarttutorials.net/responsive-quiz-application-using-php-mysql-jquery-ajax-and-twitter-bootstrap-part-2/

    Many Thanks,

    muni

  • Narasinga Rao

    Thanks a lot muni,

    Another Problem is that, when i fetch questions from database, its displaying half a question. I mean, it is not displaying full question. Is there any restriction on displaying number of characters of question?

  • Hi Rao,

    Please refer my latest tutorials on this quiz application, If you still have any problem let me know…

    http://www.smarttutorials.net/responsive-quiz-application-using-php-mysql-jquery-ajax-twitter-bootstrap-part-3/

    Many Thanks,

    muni

  • khufu23

    Would it be a simple task to have the correct answer and an explanation displayed before jumping to the next question? Any ideas how to do that?

  • Narasinga Rao

    Hi Muni, There is a problem in timer programming in version 2 and version 3 of your code, when we refresh the quiz page in browser the timer once again restarts from initial value. In Quiz that shouldn’t happen. Kindly provide me the answer for this. Accessing timestamp value to set it as session variable to avoid this problem.

  • Keerthivasan

    I want source code bro urgently send me plz

  • Jordan

    I’ve done the step by step process that you did in order to make the simple quiz application but my quiz application is displaying all the questions at the same time and I don’t know why. I need help getting it fixed. I’ve tried subscribing so that I can download the files directly but for some reason I can’t do that either. I just want to use the Quiz application Using PHP, jQuery, Ajax, MySQL and HTML5 Part-1 not part 2 or 3. Can you send the coding files directly to me? thank you.

  • Swapnil

    Hey u jave given link to download but its not working so could u plz provide me the code for the above example

  • Komal

    In your code is the no of questions are fixed because when I fetch the question from database and question is greater than 5 the page went broken. plz give me the solution

  • eko

    i dont understand in file ajax.php, when $_POST[‘$i’] fill in. . ? in this statemen if($result[‘answer’]==$_POST[“$i”])

  • Ginny

    Where can i download the .css and .js files??
    I need them asap… Please send the link,..i have subscribed also. when will i get the link?

  • Rafael Diaz

    Hello, i suscribe for your page, but don’t have the code. Please, send me code, thanks!

  • Hello Muni/Narasinga,

    Any answers to your question? I am facing thew same issue. Any help would be appreciated.

    Thanks & Regards,
    Textus Intentio

  • if some one get the code please send me to my email add,smritiranjan@hotmail.com
    Thanks

  • muni

    Sent

  • dane

    please send me the complete source files

  • dane
  • muni

    sent 🙂

  • Farooq

    here is a error in js

  • Baljeet

    thanks a lot bro, really i am thankful to you, i become ur fan…

  • Mehran

    Thank you very much for your help and your advices.

  • Adheesh

    sir plz send me the complete source code please please asap 🙂

  • Adheesh

    sir plz send me the complete source code please asap my email is adheesh.iit@gmail.com

  • Dinesh

    Muni pls send the full source code for the quiz app to mail id dineshcandid015@gmail.com asap

  • Rodrigo Macedo

    How to strip one time? or at least increases more? Why when the 50 seconds the quiz closes

  • Rodrigo Macedo

    Stayed in this application server only modified the configuration in the database and does not return me the ajax.php

    http://quizprogrammer.hol.es/quiz/index.php

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

    my email account — mech_clav87@yahoo.com.ph

    Thank you! 🙂

  • islam mrwan

    please sent me source files 🙂 thanks advanced
    my email : deveslam5@gmail.com

  • Dao Yong

    please sent me the source files at daoyong@hotmail.sg thanks

  • payal

    please send me the code for quiz

  • Dao Yong

    How do you create a back button and randomize and limit the questions. I need help. my email is daoyong@hotmail.sg

  • Rahul wadile

    How do you create a back button and randomize and limit the questions. I need help. my email is wadilerahul1234@gmail.com

  • Rahul wadile

    are u geting that code plase send me…this is my email Id: wadilerahul1234@gmail.com

  • Rahul wadile

    geting that code plase send me…this is my email Id: wadilerahul1234@gmail.com

  • abhishek raj

    Hello sir, I need source code of this quiz. Would you like to send me complete code at my email address?
    My email address is: akrj21896@gmail.com
    I have already subscribed here..
    Thanks in advance. 🙂

  • Wellington Lopes

    Hello, I subscribed yesterday and asked for the .php file but I didn’t get it yet. Can you send it to me?

    If you can send the .js and .css I’d be glad too. Thanks.

  • vivek

    send me php js and css file as early as possible plzz..id- vivekjpro@gmail.com

  • Ramkumar Boopathi

    Please provide this example with ‘Back’ button to go to previous question..

  • Rocky Manalu

    dane,, Muni,, Please send me complete source file, thank you
    if313103@gmail.com

  • Rocky Manalu

    please help me, i want this project
    send me in if313103@gmail.com.

    thank you

  • Sumanth Dg

    please send me a source file of above example to sumanth6738@gmail.com

  • Mirsaid

    ????

  • Mirsaid

    Send it to me pleace

  • Jitendra

    Sir
    Plz send me source code of quiz app.
    My email id
    mcajayesh@yahoo.co.in

  • Durai

    Hi,

    Can you plz send me the .js and .css file.

  • Durai
  • Durai

    Hi,

    Plz send me the code for quiz.
    I subscribed my mail id but not yet receive any mail.
    My Mail id is banusubramaniam@gmail.com

  • shanaya bhatt

    please send me code sir and with mysqli if possible 🙂
    shanayabhatt26@gmail.com

  • sai kumar

    I subscribed with my mail id but not yet receive any download link.
    please send me the code to email sai@xookey.com

Get Instant Script Download Access!