PHP Quiz Application Using jQuery Ajax MySQL and Bootstrap

Posted 3:41 pm by muni & filed under Ajax, CSS, HTML5, JAVASCRIPT, JQUERY, MYSQL, PHP.

In this php quiz application i have combined the two of my previous tutorial and added few features to make this quiz application is useful one.

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

This PHP Quiz Application has following features.

1. This online Quiz Application has user login, registration and forget password functionality.
2. User can able to view their previous quiz results.
3. Each questions can have minimum two options or maximum of six options.
4. This online PHP Quiz Application has session message system to indicate success or failure of the user actions.
5. Removed old timer, and added new javascript or jQuery timer countdown with very few lines of code.
6. User has my account page where user can able to change his password.
7. This php quiz system has warning popup when user want to leave in mid of his current Quiz test.

This are following two tutorials I had combined.

1. User registration and Login Using PHP5, MySQLi, jQuery and Bootstrap

2. Responsive Quiz Application Using PHP, MySQL, jQuery, Ajax and Twitter Bootstrap Part-3

Download PHP Quiz Script:

PHP Quiz Application Relational Database Design:

PHP Quiz System Relational Database SQL Script:

Create Database and it’s tables using following SQL script

--
-- Database: `user_login`
--
CREATE DATABASE IF NOT EXISTS `user_login` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `user_login`;

-- --------------------------------------------------------

--
-- Table structure for table `categories`
--

CREATE TABLE IF NOT EXISTS `categories` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `category_name` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

-- --------------------------------------------------------

--
-- Table structure for table `questions`
--

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,
  `answer5` varchar(250) NOT NULL,
  `answer6` 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=1;

-- --------------------------------------------------------

--
-- Table structure for table `scores`
--

CREATE TABLE IF NOT EXISTS `scores` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) NOT NULL,
  `category_id` int(11) NOT NULL,
  `right_answer` int(11) NOT NULL,
  `wrong_answer` int(11) NOT NULL,
  `unanswered` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `user_id` (`user_id`,`category_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `email` varchar(60) NOT NULL,
  `password` varchar(60) NOT NULL,
  `social_id` varchar(100) NOT NULL,
  `picture` varchar(250) NOT NULL,
  `created` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `uuid` varchar(70) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `email` (`email`),
  KEY `login` (`password`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Integrate User Login, Regisration and Forget Password Functionality in Quiz Application:

As I said I had integarted my previous tutorial on User registration and Login Using PHP5, MySQLi, jQuery and Bootstrap in  this Online Quiz Using PHP. Please refer the above tutorial for detail integration.

If you may want integrate Social logins (i.e. Facebook, Twitter and Google Plus) in your Quiz Application, Please refer this following tutorial.

Facebook OAuth 2 Login Using PHP

Login with Google OAuth 2 Using PHP and MySQL

Sign in with Twitter OAuth API Using PHP

OAuth Login for Facebook Twitter and Google Plus Using PHP

PHP Quiz Script:

I had added few functionalities with this version of Quiz application, So please my previous tutorial on this making of PHP online Quiz Application Using jQuery, Ajax , MySQL and Twitter Bootrap.
This are my previous versions of this php quiz application.

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

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

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

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

Timer Integration In Quiz Application:

I had removed timer in the previous version of Quiz application, and added new timer for this multiple choice quiz application with very few lines of jQuery script.

    var c = 60;
    var t;
    timedCount();
    function timedCount() {
    	var hours = parseInt( c / 3600 ) % 24;
    	var minutes = parseInt( c / 60 ) % 60;
    	var seconds = c % 60;
    	var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
    	$('#timer').html(result);
        if(c == 0 ){
        	setConfirmUnload(false);
            $("#quiz_form").submit();
        }
        c = c - 1;
        t = setTimeout(function(){ timedCount() }, 1000);
    }

I had set my quiz application for 60 seconds. If you may want to change Quiz timings, then change in the following line.
For 10 Minutes

var c = 60*10;

For 20 Minutes

var c = 60*20;

For 1 hour

var c = 60*60;

PHP Flash Session Message Integration:

When user do some action in our application, we must properly communicate wheteher that action is success or failure to the user.

Assign your message in the Session like this…

session_start();
$_SESSION['success'] = 'Sample session message';

Display that message like this…

<?php if( isset( $_SESSION['error']) && !empty( $_SESSION['error'] )){ ?>
	<div class="message_error message_div">
		<p class="text-center"> <?php echo $_SESSION['error']; ?>  </p>
	</div>
<?php $s = 1;  ?>
<?php }elseif ( isset( $_SESSION['success']) && !empty( $_SESSION['success'] )){ ?>
<?php //print_r( $_SESSION );exit; ?>
	<div class="message_success message_div">
		<p class="text-center"> <?php echo $_SESSION['success']; ?> </p>
	</div>
<?php $s = 1; ?>
<?php }else{
	$s =0;
} ?>




<?php if($s){ $s = 0; ?>
	<script>
		$(document).ready(function(){
			$('.message_div').delay(5000).slideUp();
		});
    </script>
<?php } ?>

Once it displayed, we must unset that session using unset() function.

<?php unset($_SESSION['success'] ); unset($_SESSION['error']);  ?>  

.