Hello readers, Today in this blog you'll learn how to Create a Quiz Application with Timer using HTML CSS & JavaScript. Earlier I've shared a blog on how to Create a Responsive Personal Portfolio Website and now it's a time to create Quiz Web App using JavaScript.

In this program [Quiz App with Timer], there are three layers or boxes, and these boxes shown one by one on a particular button clicked. At first, on the webpage, there is shown a button labeled as "Start Quiz" and when you clicked on that button, then the info box appears with popup animation. In this infobox, there are some rules of the quiz and two buttons labeled as "Exit" and "Continue". When you clicked on the Exit button, the info box will be hidden but when you clicked on the Continue button, then the Quiz Box appears.

Create a Quiz App with Timer using HTML CSS & JavaScript

In the Quiz Box, there is a header with a title on the left side and a timer box on the right side. This timer starts decrement from 15 to 0 sec and there is also shown a timeline indicator that is sliding from the left to right side according to the timer. If the user selects an option between 15 to 0 sec, the timer will be stopped and all available options will be disabled. If the user selected option is correct, the selected option color, background color changed to green and there is also shown the tick icon to inform the user that the selected answer is correct. If the user selects an option is incorrect, the selected option color, background-color changed to red and there is shown the cross icon to inform the user that the selected option is incorrect and the correct option will be automatically selected.

If the user doesn't select an option between 15 to 0 sec, the timer will be stopped once it comes in 0 and the correct option of that question will be selected automatically. After that, there is the next button to show the next question, and there is a total of five questions on this Quiz. In the end, the result box will be appeared and shown the user score and two buttons [Replay Quiz, Quit Quiz], if the user clicked on the replay quiz button, the quiz will again start with the number 1 question, and the score of the user will be 0 but if the user clicked on the quit quiz button, the current window will be reloaded and the quiz starts from the begin.


Video Tutorial of Create a Quiz App with Timer



In the video, you have seen the actual preview of the Quiz Application with Timer and I hope you've understood the codes behind creating this Quiz Box layout. In this video, I've only written the HTML & CSS codes, and in the second part of this video, I've completed the JavaScript codes of this program. If you haven't watched part 2 of this video, click here to watch now. 

You can use this Quiz and also you can add more questions on this Quiz. In the source codes, I've written many comments on how you can add more questions and explained each JavaScript line of this Quiz. If you're a beginner, you may have difficulties to the understand the JavaScript codes but you can easily understand the HTML & CSS codes and I've tried to explain all JavaScript line with comments, hope you will understand.

To create this program (Quiz Application with Timer). First, you need to create four Files one HTML File, CSS File and the other two are JavaScript files. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

Note: I've commented some lines of code because I got multiple errors in codes while uploading this post. So I recommend you download the source code files from the above link instead of copying codes. But If you're going to copy codes then uncomment the commented lines after pasting the following codes.

HTML FILE:

CSS FILE:


JavaScript FILE:

JavaScript FILE:

Thanks for visiting, Keep visiting.


31 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

  1. The code i pasted are not working,
    And also downloading file is not working!😢
    Help me please!

    ReplyDelete
    Replies
    1. I've rechecked my codes there is no problems. I don't why you're facing it. Please send the screenshot of error on my Instagram account.

      Delete
  2. when i click on Replay Quiz button it shows only html quiz, then i click on next button it open result box without showing css,php,sql and xml quiz
    i think there is an error in your script.js file

    ReplyDelete
    Replies
    1. No there is no error. As I've shown in the demo part, when you clicked on the replay quiz button quiz will repeat from questions without showing info box but when you clicked on the quit quiz button then quiz will begin from start. Please download files instead of copying codes.

      Delete
  3. nice work Sir,
    but here all questions are fixed in sequence.
    I wanted a shuffle question. Is there any logic in javascript to shuffle all questions?

    ReplyDelete
  4. How do you make the quiz responsive?

    ReplyDelete
  5. Is there a way to replace the question text with an image?

    ReplyDelete
    Replies
    1. Yes but you have to change the codes. I'll do in my upcoming videos. Stay tuned.

      Delete
  6. how only one file no athor file quize.html no js file no css file plese

    ReplyDelete
  7. it is working perfectly thank you so much

    ReplyDelete
  8. i created my own html , css and js files then i copied the html code above pasted in my html file and the css the the js is codes provided here i copied the questions array code and pasted in my js file then the functions code past it under the question array

    thank you !
    A.Moallim

    ReplyDelete
  9. Thanks Bro for share with community nice and clean contents. Keep it up! Everything is working fine!

    ReplyDelete
  10. nice it worked superb but one mistake when i click the wrong or correct option more than one time it shows the icon many times inside the flex display kindly check that and guide me for the solution. but anyway thank you



    ReplyDelete
    Replies
    1. No once you select an option, you can't select any other again then how you get this problem?

      Delete
  11. Hey bro, how to make this app become responsive? Any ideas? Thank you so much!

    ReplyDelete
    Replies
    1. I have given fixed with to main container just remove it and give width in percent and add some media breakpoints

      Delete
  12. Thank you very much brother, It helped me to do the quiz for my students very well.

    ReplyDelete
  13. Hello again, I have tried many attempts, but with no sucess. I put some defaults media breakpoints, and it worked partially(only for mobile), Desktop version is stretching to 100%(component is not in the middle). You said main container, but I couldn't find. Do you mind to share the version of the CSS fully responsive? I am trying to learn some css too. Thank you so much!

    ReplyDelete
    Replies
    1. Hey please email me. I'll send you the css codes with make it responsive once I'll be free

      Delete

Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post
CodingNepal

Don't forget to Subscribe to our YouTube Channel.

Subscribe To CodingNepal