How to Easily Make an Online Quiz

In this tutorial I'll show you how to make a quick and easy HTML quiz with a bit of javascript. If you don't know how to write/use javascript, don't worry, as I'll give you everything you need below. First, here's a sample of what you'll be able to do:


1. What is the answer to this question?





2. What is the answer to this question?






Show me the answers!

Question 1: The correct answer is the Answer 1.

Question 2: The correct answer is Answer 2.

You answered them all right!


In the demo above I've used only 2 questions, each with 4 multiple choice answers. Of course, you can use as many questions and answers as you like. In the files below, I'll include the code for 10 questions.

What You'll Need

You'll need 4 things to make this quiz work: the HTML quiz code that goes on the page you want the quiz to be on, the javascript quiz code that will be located in a separate file, the jquery file to make it all work, and the CSS code (below) to create the styling along with helping to hide and display the correct answers. Below, I'll explain what's in the code and how to edit it to customize your quiz.

The HTML Code

You can download a text file with the HTML code for 10 questions, each with 4 multiple choice answers here. For each question, you'll see code like this:

<p class="question">1. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>
</ul>

Obviously, you'll need to replace the questions and answers with your own questions and answers.

Here is the code for the button:

<div id="results">
Show me the answers!
</div>

You can change the "Show me the answers!" text to change the text that is displayed in your button.

Below the code for the button, you'll see the code that will be displayed after the quiz is finished. This includes correct answers to questions that were incorrectly answered, like this:

<div id="category1">
<p><strong>Question 1:</strong> The correct answer is the <strong>Answer 1</strong>.</p>
</div>

In the code above, you'll want to change each answer to the correct answer for the given question.

The last category div id includes the "You've answered them all right!", for when the visitor gets all the answers correct.

In order for the quiz to work, you'll need to use some javascript, which we'll put in a separate file.

The Javascript Code

You can download the javascript code you'll need to make the quiz work here. The file is named quiz-1.js. It's not important for you to understand how the javascript code is working. All you really need to know is that the correct answers are entered in the lines that look like this:

var cat1 = ($("input[@name=q1]:checked").val() != "a");

var cat2 = ($("input[@name=q2]:checked").val() != "b");

In the code above, you'll see the "a" and "b" at the end of the lines. That's where the correct answer is specified. Once you write your questions and know where the correct answers are, you'll need to change the answers appropriately to "a", "b", "c", or "d".

In addition to the javascript code with the answers written in, you'll also need one more javascript file, which you will not have to edit at all. You can download that file here.

Both of these javascript files will need to be referenced on the page your quiz is on, in order for the quiz to work. To reference them, you'll need to add these two lines between the opening and closing head tags:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/quiz-1.js"></script>

Notice that I've put both of the javascript files in a folder named js. You can put the files wherever you like, as long as you make sure to reference them properly as above.

The CSS Code

Finally, you'll need to add a little bit of code to your style.css file in order to formate your questions and answers, and to hide the content that appears after the quiz is finished. Here's the CSS code I'm using for the demo above (edited to take 10 questions into account, as I've only got 2 in the demo):

.answers li {
list-style: upper-alpha;
}

label {
margin-left: 0.5em;
cursor: pointer;
}

#results {
background: #dddada;
color: 000000;
padding: 3px;
text-align: center;
width: 200px;
cursor: pointer;
border: 1px solid gray;
}

#results:hover {
background: #3d91b8;
color: #ffffff;
padding: 3px;
text-align: center;
width: 200px;
cursor: pointer;
border: 1px solid gray;
}

#categorylist {
margin-top: 6px;
display: none;
}

#category1, #category2, #category3, #category4, #category5, #category6, #category7, #category8, #category9, #category10, #category11 {
display: none;
}

#closing {
display: none;
font-style: italic;
}

And that's it! If you have any questions please feel free to contact me. If you liked this tutorial, please share it with anyone you think may find it valuable!

More Cool Stuff

Want to make even more cool stuff for your visitors? Check out this post, where I show you four types of engaging content you can easily add to your site.