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<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>
nice work thanks really helped
ReplyDeletedgsfsgfsf
ReplyDeleteThank you. I implemented this in my website.
ReplyDeleteGreat 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?
ReplyDeleteohhh tht's really amazing buddy i hope to see some more interesting things like this.... good going
ReplyDeleteHow would I implement this in google sites
ReplyDeletePlease read step by step. if you want to add the database then create a table and add this code into your PHP code.
Deletevaluble to us
ReplyDeleteafter submit button only correct value redirect and selected radio button not redirect
ReplyDeletei use php after submit button the correct value come and selected radio button value come
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
DeleteWhen we select the wrong answer, the correct answer should also appear. What to do about it
ReplyDeleteYou can add the alert when someone selects the wrong answer
DeleteYou need to add the javascript when someone selects the wrong answer and then show the write the answer.
ReplyDeleteYes, we are working on that we will publish on the next article
ReplyDelete