Multiple Choice Quiz Maker
4. Add the Quiz
Join the Discussion
More of this Feature
Example Quiz Question/Answer Script Main Quiz Script Stylesheet Random Quiz Addon
Now that we have created three files (one Javascript containing your quiz questions and answers, a second Javascript containing the quiz script itself, and a stylesheet file defining how your quiz should look) all that remains is to add the actual script into your web page.
There are three pieces of HTML that you need to add to your page to add a quiz to the page. The first piece of code goes in the head of the page.
The second goes at the very bottom of the body just before the </body> tag.
<script src="quizmc.js" type="text/javascript"></script>
If you have qiven your files different names when you created them then simply change the filenames within the above code when you add it to your page so that it references the three files by the names that you gave them.
With that added to your page the quiz script will be run just as soon as it can work out where in the page that it should display the quiz. To tell the quiz where to display the two questions that it displays on each page we just need to insert two div tags into the body of the page where we want the questions to appear. (Of course if you changed the number of questions to display one each page you will need to include the appropriate number of divs to match the number of questions).
<div id="quiz2" class="quiz"></div>
While I have these immediately following one another in my example quiz, you can have whatever you want appear between the two quiz questions, they don't have to appear one immediately after the other.
If you want more quiz questions per page then just add extra divs where you want them with appropriately numbered ids. The quiz script now has no limit on the number of questions it can display per page, you just need the right number of divs and the right value in the qpp field.
The button allowing the person to submit their answers and move on to the next page will always appear below the last question on the page (if your quiz has an odd number of questions when displaying two per page then the last question will appear on a page by itself similarly if there are not enough questions to fill all the spots if you display more than two questions per page).
There is one last thing you can change and that is at the very bottom of the file you generated with your quiz questions. There you will find a statement creating a field called reslink. If you set that to the address of another page then the result box will have an additional link at the bottom going to that page. The link will have the text "Find Out More" and can be used to link to whatever you think is an appropriate page to follow on from the completion of the quiz.
