Personality Quiz Maker

Do you want to add a "personality" 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. Each question needs to have the same number of answers and you can supply as many as eight. The answers will be displayed in random order. Each answer represents a particular "personality" and the "personality" that is selected the most times during the quiz will determine which results page to display.

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. quizp1.js).

Personality A Answer
Personality B Answer
Personality C Answer
Personality D Answer
Personality E Answer
Personality F Answer
Personality G Answer
Personality H Answer
Results Page Prefix: [ABCDEFGH].htm

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


Step Three - highlight and copy/paste the following styles into a separate file called quizp.css. Note that you can change the content of this file if you want your quiz to look different.


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

<link rel="stylesheet" href="quizp.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="quizpa1.js" type="text/javascript"></script>
<script src="quizso.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>

Step Seven - the quiz redirects to an answer page at the end of the script with the specific answer page it redirects to being determined by the answers selected during the quiz. The answer pages will all start with the value you entered as analPage in the first form and will have a single letter between 'a' and 'h' on the end. So if you entered 'quizresult' as the prefix for the page names the eight pages you need for the results are quizresulta.htm, quizresultb.htm, quizresultc.htm, quizresultd.htm, quizresulte.htm, quizresultf.htm, quizresultg.htm, and quizresulth.htm. Which of these will be displayed depends on which of the 'personalities' received the highest number of answers. If two or more received the same number of answers then one of those will be selected at random.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow