Make online quizzes template for website using html , css and javascript

In this tutorial, we will show you how to make an online quiz using HTML, CSS  and the least  Javascript usage. There are so many websites available to provide the online quizzes code but their codes are very difficult to understand as well as difficult to implement. You can easily make online quizzes with the help of simple tags of HTML, CSS, and a bit of javascript.

In the above demo screenshot, I've created only 1 question with 4 multiple choice answers. You can create as many as you like. If you want to add a new question, you just need to copy the code. There is no need to write the code again.

In this quiz system, we used just a bit of javascript. If you don't know how to write/ use  HTML, CSS, and javascript, don't worry, i will give you the entire code. If you want to learn HTML, CSS and javascript then visit the below links. Here you can learn basic concepts of HTML, CSS, and many more languages.

HTML Tutorials : HTML Introduction

CSS Tutorials : CSS Introduction

JavaScript Tutorials: JavaScript Introduction

Let us start to make a quiz system :

HTML Code 
Design the structure of quiz. Here,we have 2 div elements. First div class "class="scp-quizzes-main"" is main div  to control the quiz structure.  Second div "class="scp-quizzes-data"" is used to control the quiz questions and answers.
<div class="scp-quizzes-main">
<div class="scp-quizzes-data">
  <h3>1. What is the output of the below c code?</h3>
   int x = 5;
      if(x=5) printf("Fast");
    <input type="radio" id="Fastlearning" name="question1">
       <label for="Fastlearning">1. Fastlearning</label><br/>
    <input type="radio"  name="question1">
       <label>2. learning</label><br/>
    <input type="radio" name="question1">
       <label>3. learningFast</label> <br/>
    <input type="radio" name="question1">
     <label>4. Fast</label> 
Ratios button is used for multiple answers.  4 radio buttons with the same name are used for each question.
Note : The label for="answer" and input id ="answer" is  written with same name to display the correct answer. To make any option as correct answer, write its label for=" answer" and input id ="answer".

CSS Code
This CSS used for the radio button to change the radio button style.
input[type=radio] {
input[type=radio] + label {
 border:1px solid #ddd;
input[type=radio] + label:hover{ border:1px solid #000000;}
input[type=radio]:checked + label { 
   background-image: none;
 border:1px solid #0C0 !important;
 -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;

Wrong answer style
.worngans{ background-color:#F36;color:#fff; border:1px solid #F36 !important;-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}
JavaScript Code
jquery.min.js Javascript files will need to be referenced on the page your quiz is on, in order for the quiz to work. To reference, you'll need to add this line between the opening and closing head tags.
<script src="" type='text/javascript'></script>

This is the javascript where the wrong answer is specified. Add this javascript code between the opening and closing head tags.
<script type="text/javascript">
 $(document).ready(function() {
    $('label').click(function() {

If you have any doubts regarding the creation of an android app then leave your doubts in the comment box.

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. nice work thanks really helped

  2. Thank you. I implemented this in my website.

  3. Great post, has been really handy for what I am making at the moment. I was wondering if there is a way to get a message to come up in case I wanted to give some more information for the answer when the right or wrong answer is clicked?

  4. ohhh tht's really amazing buddy i hope to see some more interesting things like this.... good going

  5. How would I implement this in google sites

    1. Please read step by step. if you want to add the database then create a table and add this code into your PHP code.

  6. after submit button only correct value redirect and selected radio button not redirect
    i use php after submit button the correct value come and selected radio button value come

Post a Comment

buttons=(Accept !) days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top