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

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


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


using following sql queries.

Now add the following sample data’s in it.

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.

Step 3:

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

Step 4:

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

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.

Step 6:

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

Step 7:

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

Posted by:



  1. murugan -  September 23, 2013 - 10:02 am

    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?


    • muni -  September 24, 2013 - 2:10 am


      Thanks Murugan,

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


      • muni -  September 24, 2013 - 6:23 pm

        now it fixed.

        please download latest code.



        • Chris -  December 10, 2013 - 12:31 am

          Hi muni,
          I have the same issue with the script not allowing for more than 10 records. You said you fixed that. What was the problem? I guess it has to do with the javascript that hides and unhides the questions.
          Could you pls share the corrected code here? Would be kind thank you!
          Cheers Chris

  2. murugan -  September 27, 2013 - 9:46 am

    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.


    • muni -  September 27, 2013 - 6:08 pm

      Welcome Murugan.



  3. Jagan -  September 28, 2013 - 2:52 am

    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 -  September 29, 2013 - 3:24 am

      Sure Jagan..

      I will…


  4. naveen -  October 4, 2013 - 10:23 am

    i want be a full quiz coding with timer…

    also a website is very useful

  5. Okezie Micael -  October 22, 2013 - 4:50 pm

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

    Please how do i add a timer to it ?

  6. Muthu -  October 28, 2013 - 4:35 am

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

    • muni -  October 29, 2013 - 5:34 pm

      Sure … i will do it and share…..

  7. mile -  November 18, 2013 - 6:10 am

    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.

  8. Luis -  December 10, 2013 - 12:33 am

    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.

  9. Tusar -  December 28, 2013 - 8:44 pm

    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.


  10. Vitor Sousa -  February 8, 2014 - 12:45 pm

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


  11. Vitor Sousa -  February 8, 2014 - 12:51 pm

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

  12. Vitor Sousa -  February 8, 2014 - 12:57 pm

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


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

    • muni -  February 8, 2014 - 3:35 pm

      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,

  13. omar faruque -  March 15, 2014 - 7:42 am

    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:

    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?

    Omar Faruque

    • nguyenquocuy -  July 6, 2014 - 12:12 am

      Can you send me the source code, please!

      • muni -  July 17, 2014 - 1:57 am

        Sent :-)

  14. drukarnia -  May 8, 2014 - 10:36 am

    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!

  15. Layla -  May 12, 2014 - 4:35 pm

    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

  16. nguyenquocuy -  July 6, 2014 - 12:11 am

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

  17. vipin -  July 9, 2014 - 4:09 pm

    I subscribed but still dn’t get the download link

    • muni -  July 17, 2014 - 1:58 am

      Sent :-)

  18. Vishwanath -  July 14, 2014 - 6:44 am

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

    please send me code for this

  19. Her -  August 8, 2014 - 11:14 am

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


Leave A Comment

Your email address will not be published. Required fields are marked (required):

Related articles

Back to Top