Multiple Choice Quiz Maker

Do you want to add a multiple choice quiz to your web page? This quiz uses the Javascript Document Object Model to dynamically insert one or two quiz questions into a web page where ever you want simply by placing two div tags in the body of your page where you want them to go. It also provides sufficient id and class names to allow you to change the appearance of the quiz to suit your own requirements.

Step One - Fill out the following form for each question that you want to contain within your quiz. Each time you press the "Add Question" button the code in the textarea immediately below will be updated to add the new question and answers to those you have already added to the quiz. Once you have all your questions entered highlight the content of the text area and copy/paste it into a new JavaScript file (eg. quizqa1.js).

Question:
Answer One
Answer Two
Answer Three
Answer Four
Answer Five
Answer Six

Step Two - highlight and copy/paste the following styles into a separate file called quizmc.css.

quizmc.css

Step Three - highlight and copy/paste the following JavaScript into a separate file called quizmc.js.

quizmc.js

Step Four - add the following code immediately before the </head> tag in the page where you want the quiz displayed.

<link rel="stylesheet" href="quizmc.css" type="text/css">

Step Five - add the following code immediately before the </body> tag in the page where you want the quiz displayed.

<script src="quizqa1.js" type="text/javascript"></script>
<script src="quizmc.js" type="text/javascript"></script>

Step Six - add the following tags into the body of the page where you want the quiz questions to appear. Note that you can if you wish place other content between these two divs. You can also add more divs if you want to have more than two questions display per page.

<div id="quiz1" class="quiz"></div>
<div id="quiz2" class="quiz"></div>

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate