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.

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>
    <pre>#include&lt;stdio.h> 
main() 
{
   int x = 5;
   
   if(x=5)
   { 
      if(x=5) printf("Fast");
   } 
   printf("learning");
}</pre>
<br/>
    <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> 
 </div>

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 the same name to display the correct answer. To make an option a correct answer, write its label for=" answer" and input id ="answer".

CSS Code 

This CSS is used for the radio button to change the radio button style.

input[type=radio] {
    display:none; 
}
input[type=radio] + label {
    display:inline-block;
 width:95%;
 padding:10px;
 border:1px solid #ddd;
 margin-bottom:10px;
 cursor:pointer;
}
input[type=radio] + label:hover{ border:1px solid #000000;}
input[type=radio]:checked + label { 
   background-image: none;
   background-color:#0C0;
 color:#fff;
 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="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" 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() {
        $('label').removeClass('worngans');
        $(this).addClass('worngans');
    });
});
</script>

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

Sharecodepoint

Sharecodepoint is the junction where every essential thing is shared for college students in the well-defined packets of codes. We are focused on providing you the best material package like Question papers, MCQ'S, and one NIGHT STUDY MATERIAL. facebook twitter youtube instagram

10 Comments

  1. nice work thanks really helped

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

    ReplyDelete
  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?

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

    ReplyDelete
  5. How would I implement this in google sites

    ReplyDelete
    Replies
    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.

      Delete
  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

    ReplyDelete
    Replies
    1. Your need to change the id="" and for="" in the very question. Example: For 1 question id and for ="" should be the same, not different, and not the same in the second question

      Delete
Previous Post Next Post

Contact Form