You are here:About>Computing & Technology>JavaScript> Script Makers> Quiz Scripts>        Personality Quiz Script Generator     
About.comJavaScript

Personality Quiz Maker

1. Question/Answer Script

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.

You can also easily set up multiple quizes with this script without having to know any Javascript as the following instructions will take you step by step through all that you need to do to create your quiz and add it to your page.

Let's start by defining your questions and the answers that represent the different personalities. We'll do this using the following form to create a Javascript file. To start, you simply enter a quiz question and between two and eight answers (the letters alongside the answers identify the particular personalities to the script) and press the "Add Question" button. When you enter the first question you will also need to specify the prefix for the results pages for this script. The results pages will be named by adding A.htm through H.htm to the and of this prefix. The code for your script including all of the questions and answers you have entered so far will appear in the textarea below the button. Simply repeat the process until you have entered all of the questions and answers for the multiple choice quiz questions that you require.

Question:
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

Once the above textarea contains all of your questions and answers you can use the "Highlight All" button to select all of the code and copy and paste it into a separate file. You can give this file whatever name you like as long as it ends in .js (for example you might call it quizp1.js). The only change that you may want to make to the code in this file is to change the number of questions to display on each page by changing the 2 in the last line to 1 if you want to put each question on a separate page.

The next step is to set up a second Javascript file containing the personality quiz script code that will display the quiz. NEXT >>

From Stephen Chapman,
Your Guide to JavaScript.
FREE Newsletter. Sign Up Now!
Newsletters & RSSEmail to a friendSubmit to Digg
 All Topics | Email Article | | |
Advertising Info | News & Events | Work at About | SiteMap | Reprints | HelpOur Story | Be a Guide
User Agreement | Ethics Policy | Patent Info. | Privacy Policy©2008 About, Inc., A part of The New York Times Company. All rights reserved.