QrDroid


Tuesday, 11 October 2016

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, l'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 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 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 are used for the multiple answers.  4 radio buttons with 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] {
    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="http://www.fastlearning.in/controller/js/jquery-1.9.1.min.js"></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>

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

5 comments:


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

    ReplyDelete
  2. 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
  3. ohhh tht's really amazing buddy i hope to see some more interesting things like this.... good going

    ReplyDelete

 

Version 20.2.1 - 2016 - 2018 - © SSL Technologies And Services Private Limited | Made in India. | Copyright Content