Free Quiz Scripts

Everyone loves personality tests, and to make it easier for you to feature one on your website, I have prepared some free scripts that you can use however you please, on any kind of website. You should be able to set them up even if you don't know any Javascript, but I do assume you know at least the basic idea of HTML.

You may modify the provided quiz pages however you wish. The pages as provided include credit and a link to this page in comments in the source code, and it would be appreciated if you kept it in or even added a visible link, but it's okay if you'd rather remove the comments altogether. There is a comment saying not to edit anything below that point, but you're of course free to do so if you know what you're doing; it's only there to affirm that you don't need to edit anything further.

This page offers three different kinds of quiz scripts, suitable for different kinds of personality tests:

The Vote Quiz
The Scale Quiz
The Binary Quiz

If you're having trouble getting any of these scripts to work, feel free to contact me and I will do my best to help.

The Vote Quiz

In a vote quiz, every possible answer to a question corresponds to one of the possible results. Each answer the user picks constitutes a "vote" for its corresponding result; then, at the end, the user gets the result that had the most votes. This is one of the simplest, most common kinds of personality tests. You can see a simplified, barebones example of this sort of quiz here.

Pros of the Vote Quiz

Simple to make
Relatively few results to create
Appropriate when wanting to find a best match to one of a predetermined, limited set of categories: "Which of these four characters are you most like?"

Cons of the Vote Quiz

More than half of your answers may end up irrelevant: only the result you pick most often matters
It tends to be easy to guess which option corresponds to which result, making the test very transparent, and as a result people are prone to picking the answers for the result that they want, or the character that they like the most, instead of answering honestly

Instructions

If this is the kind of test you want to go for, download the base HTML file and then follow the instructions here or in the file to customize it to your needs.

What to Edit

The file has dummy questions ("Question 1", "Question 2", etc.), which you'll want to replace with the actual questions for your quiz, and dummy answers ("Answer 1", "Answer 2", etc.), which you'll want to replace with the possible answers to those questions. Each answer has an input element (a radio button); the value attribute of the radio buttons should be set to a result identifier for the result that answer corresponds to. For example, if one of your possible results is Alakazam, then you'll want the Alakazam answers to have value="alakazam".
In the script tag below the form with all the questions, there are a few values you'll need to edit. They have instructions in comments above them and should be fairly self-explanatory, but here's a quick overview:
- QUIZ_URL should be the URL to your quiz - this is what your result images will be linked to.
- RESULTS_FOLDER_URL should be the URL to a folder on your server containing your result images, such that it can be prefixed to the result image filenames given in RESULTS to give the full URL to each result image.
- RESULTS defines the possible results in your quiz. Each result is defined by a bit of code that looks like this:
```
RESULTS["alakazam"] = {
   name: "Alakazam",
   image: "alakazam.jpg",
   text: "You are an Alakazam!"
};
```
  The result identifiers inside the square brackets (like "alakazam" in the example above) should match the value attributes of the options in your quiz, and for each one, you can define a name, image filename and optionally text (to leave out the text, simply erase the line that starts with text: and the comma in the line above it).

Further Customization

The sample file has ten questions with four options each. This is purely for the sake of the example - you can add or remove questions or options as you see fit, and you can even have a different number of options for each question. All you have to do is make sure that the name attribute of the options is different for each question (in the file it's "q1" for the first question, "q2" for the second and so on, and you can simply follow that pattern), and that the value attribute for each option matches one of the possible results. (It's fine if not all questions have an option for each result, or even if there are two options for the same result on a single question - but that might make things confusing or even make it impossible to get some results, so be careful to think about the balance of your quiz if you're going to do that.)
The HTML of the actual questions and answers can also be changed however you like, just so long as the input elements for the options remain within the form and have the appropriate name and value attributes. You can even change the input type to checkbox to make them into checkboxes and allow the user to select multiple answers for each question!
If you need to integrate more content into the quiz page or customize it in other ways, that's fine, and the file itself can have any filename and extension you like - if you're using PHP, say, you can save the quiz file as quiz.php and insert your layout, any includes you use, or whatever you like into the page. All you have to do is ensure that the form named quizform contains all the questions and options, that the result_div element is present where the result should appear, and that you include the script element in its entirety somewhere below the form element.
If you would like to tweak how the result is presented, you can simply change the HTML of the result_div element. The script uses IDs to show the correct result - so long as you have an image with id="result_image" somewhere, that will show the correct result image, and so on, regardless of what other HTML you put around it or what CSS you apply to it.
By default, when you press the submit button, the page will show the result image, text (if any) and HTML/BBCode for that result inside the result_div element. If you would instead like to make completely customized pages for each result, then instead of defining name, image and text for the results in RESULTS, you can simply define link as the location you want to redirect to. For example:
```
RESULTS["value1"] = {
   link: "http://www.dragonflycave.com",
};

RESULTS["value2"]: {
   link: "/quiz/value2.html"
};
```
If you do this for every result, you can remove the result_div element in its entirety.

Advanced

If you would like to make special joint results for ties, instead of ties being broken in favor of the first one defined in RESULTS, you can add additional results whose identifiers consist of other results joined with an ampersand. The base results must appear in the order in which they're defined in RESULTS. For example, a complete set of results with ties for a quiz with the three base results value1, value2 and value3 might look like this:

RESULTS["value1"] = {
   name: "Value 1",
   image: "value1.jpg"
};

RESULTS["value2"] = {
   name: "Value 2",
   image: "value2.jpg"
};

RESULTS["value3"] = {
   name: "Value 3",
   image: "value3.jpg"
};

RESULTS["value1&value2"] = {
   name: "Value 1/Value 2 tie",
   image: "value1-value2.jpg"
};

RESULTS["value1&value3"] = {
   name: "Value 1/Value 3 tie",
   image: "value1-value3.jpg"
};

RESULTS["value2&value3"] = {
   name: "Value 2/Value 3 tie",
   image: "value2-value3.jpg"
};

RESULTS["value1&value2&value3"] = {
   name: "Value 1/Value 2/Value 3 tie",
   image: "value1-value2-value3.jpg"
};

You don't have to include every possible joint result - you could include just one and have all other ties get broken normally if you wanted.

If for some reason you need the form tag to have a name other than quizform, you can set the FORM_NAME variable below the possible results to whatever you changed the form's name to.

Troubleshooting

Not working? Here are some things to check:

Make sure to keep the quotation marks around the values in the variable definitions. If the value itself contains quotation marks, you will have to escape them by writing them as \"; the backslash will not be shown in the final result. For example:
```
RESULTS["value1"] = {
   name: "Something with \"quotation\" marks in it",
   image: "value1.jpg"
};
```
Also ensure that you include the last line of each result definition (};) - it doesn't look like much, but it's important for the script to work correctly.
There should be a comma after each of the attributes for each result (name/image/text/link) except the last one - make sure you've got them in there.

Still not working? E-mail me with your quiz page attached and I'll help you find what's wrong.

The Scale Quiz

This kind of quiz measures a single quantity, with each answer simply giving a certain number of points. The result then depends on how many points the user earned in total. You can see a simplified example here.

Pros of the Scale Quiz

Very simple to create
Flexible number of results
Ideal for any quiz measuring the user's position on a single scale between two extremes: "How tidy are you?" "Are you introverted or extroverted?"
While not designed for it, can be used to make a trivia quiz as well as a personality test

Cons of the Scale Quiz

Not suitable for any quiz that can't be described as measuring position on a single scale; don't try this with any kind of "Which character are you?" or similar multi-dimensional test

Instructions

If this is the test you want, download the sample HTML file and then edit it according to the instructions here or within the file.

What to Edit

The file has dummy questions ("Question 1", "Question 2", etc.), which you'll want to replace with the actual questions for your quiz, and dummy answers ("Answer 1", "Answer 2", etc.), which you'll want to replace with the possible answers to those questions. Each answer has an input element (a radio button); the value attribute of each radio button should be set to the number of points that that answer should give on the scale.
In the script tag below the form with all the questions, there are a few values you'll need to edit. They have instructions in comments above them and should be fairly self-explanatory, but here's a quick overview:
- QUIZ_URL should be the URL to your quiz - this is what your result images will be linked to.
- RESULTS_FOLDER_URL should be the URL to a folder on your server containing your result images, such that it can be prefixed to the result image filenames given in RESULTS to give the full URL to each result image.
- RESULTS defines the possible results in your quiz. Each result is defined by a bit of code that looks like this:
```
RESULTS[10] = {
   name: "Result",
   image: "result_10.jpg",
   text: "Result text"
};
```
  The number inside the square brackets is the minimum total score needed to get that result; the user will get the highest result that they qualify for. For example, if you have one result labeled 0, one labeled 10 and one labeled 20, then if the user's score is between 0 and 9 inclusive they'll get the first result, if it's between 10 and 19 inclusive they'll get the second, and if it's 20 or higher they'll get the third. Make sure you define the results in ascending order, with the lowest-scoring one first. For each result, you can define a name, image filename and optionally text (to leave out the text, simply erase the line that starts with text: and the comma in the line above it).

Further Customization

The sample file has ten questions with four options each. This is purely for the sake of the example - you can add or remove questions or options as you see fit, and you can even have a different number of options for each question. All you have to do is make sure that the name attribute of the options is different for each question (in the file it's "q1" for the first question, "q2" for the second and so on, and you can simply follow that pattern), and that the value attributes for the options are numbers.
The HTML of the actual questions and answers can also be changed however you like, just so long as the input elements for the options remain within the form and have the appropriate name and value attributes. You can even change the input type to checkbox to make them into checkboxes and allow the user to select multiple answers for each question!
If you need to integrate more content into the quiz page or customize it in other ways, that's fine, and the file itself can have any filename and extension you like - if you're using PHP, say, you can save the quiz file as quiz.php and insert your layout, any includes you use, or whatever you like into the page. All you have to do is ensure that the form named quizform contains all the questions and options, that the result_div element is present where the result should appear, and that you include the script element in its entirety somewhere below the form element.
If you would like to tweak how the result is presented, you can simply change the HTML of the result_div element. The script uses IDs to show the correct result - so long as you have an image with id="result_image" somewhere, that will show the correct result image, and so on, regardless of what other HTML you put around it or what CSS you apply to it.
By default, when you press the submit button, the page will show the result image, text (if any) and HTML/BBCode for that result inside the result_div element. If you would instead like to make completely customized pages for each result, then instead of defining name, image and text for the results in RESULTS, you can simply define link as the location you want to redirect to. For example:
```
RESULTS[0] = {
   link: "http://www.dragonflycave.com"
};

RESULTS[10]: {
   link: "/quiz/result10.html"
};
```
If you do this for every result, you can remove the result_div element in its entirety.

Advanced

If for some reason you need the form tag to have a name other than quizform, you can set the FORM_NAME variable below the possible results to whatever you changed the form's name to.

Troubleshooting

Not working? Here are some things to check:

Make sure to keep the quotation marks around the values in the variable definitions. If the value itself contains quotation marks, you will have to escape them by writing them as \"; the backslash will not be shown in the final result. For example:
```
RESULTS[0] = {
   name: "Something with \"quotation\" marks in it",
   image: "result0.jpg"
};
```
Also ensure that you include the last line of each result definition (};) - it doesn't look like much, but it's important for the script to work correctly.
There should be a comma after each of the attributes for each result (name/image/text/link) except the last one - make sure you've got them in there.

Still not working? E-mail me with your quiz page attached and I'll help you find what's wrong.

The Binary Quiz

The binary quiz has nothing to do with computers: rather, it involves placing the user into one of two categories (hence binary) for each of a few orthogonal traits. For example, you could have your quiz measure both whether the user is more cautious or adventurous and whether they're more cooperative or competitive, with four main results: cautious and cooperative, cautious and competitive, adventurous and cooperative, or adventurous and competitive. You can see a basic example of how this kind of quiz works here.

Pros of the Binary Quiz

Measures personality along multiple dimensions, giving a bit more depth
Theoretically supports any number of personality axes, although each axis doubles the number of results
The underlying traits can be completely opaque to the user - you can map "cautious and cooperative" onto a character, a Pokémon, a color, or some other fun categorization, without having to make it obvious exactly what you're measuring and how, which encourages more genuine answers
Ideal for multidimensional quizzes with many, varied results, chosen to fit the personalities output from the quiz rather than the other way around: "What Pokémon are you?"

Cons of the Binary Quiz

A little more complex to edit than the other types
The number of possible results rises fast as you add more dimensions
Requires some thought to put together: the quiz is most effective when the personality axes are close to orthogonal, so that you don't get combinations that seem redundant or self-contradictory
Usually not well suited to matching the user to one of a predetermined set of characters, since you would have to find traits that happen to work out in such a way as to have each possible combination map onto exactly one character

Instructions

If this sounds like the quiz you want, download the sample HTML file and then edit it to suit your needs, following the instructions below or in the file itself.

What to Edit

The file has dummy questions ("Question 1", "Question 2", etc.), which you'll want to replace with the actual questions for your quiz, and dummy answers ("Answer 1", "Answer 2", etc.), which you'll want to replace with the possible answers to those questions. Each answer has an input element (a radio button); the value attribute of the radio buttons should be set to a trait that this answer corresponds to, as defined in the TRAIT_PAIRS variable (see below).
In the script tag below the form with all the questions, there are a few values you'll need to edit. They have instructions in comments above them and should be fairly self-explanatory, but here's a quick overview:
- QUIZ_URL should be the URL to your quiz - this is what your result images will be linked to.
- RESULTS_FOLDER_URL should be the URL to a folder on your server containing your result images, such that it can be prefixed to the result image filenames given in RESULTS to give the full URL to each result image.
- TRAIT_PAIRS defines the pairs of traits that the quiz measures. This is a list inside square brackets, with each item in the list being a pair of traits inside a separate pair of square brackets. Each pair should consist of two opposite traits: [["cautious", "adventurous"], ["cooperative", "competitive"], ["stoic", "emotional"]] would be a valid list of three trait pairs, for instance.
- RESULTS defines the possible results in your quiz. Each result is defined by a bit of code that looks like this:
```
RESULTS["cautious&cooperative&stoic"] = {
   name: "Alakazam",
   image: "alakazam.jpg",
   text: "You are an Alakazam!"
};
```
  The value inside the square brackets ("cautious&cooperative&stoic" in the example above) should consist of one of the traits from each trait pair, joined by ampersands. For each one, you can define a name, image filename and optionally text (to leave out the text, simply erase the line that starts with text: and the comma in the line above it). Make sure that you define a result for each possible combination of traits! There should be four results if you have two trait pairs, eight if you have three pairs, sixteen if you have four pairs, and so on.

Further Customization

The sample file has ten questions with four options each. This is purely for the sake of the example - you can add or remove questions or options as you see fit, and you can even have a different number of options for each question. (For the binary quiz, it often makes sense for each question to focus on only one trait pair, with only two answers representing opposite traits.) All you have to do is make sure that the name attribute of the options is different for each question (in the file it's "q1" for the first question, "q2" for the second and so on, and you can simply follow that pattern), and that the value attribute for each option matches one of the traits defined in your trait pairs.
Similarly, this is touched on above, but while the sample file has two trait pairs, you can have any number of them, just so long as you make sure to define a result for every possible combination.
The HTML of the actual questions and answers can also be changed however you like, just so long as the input elements for the options remain within the form and have the appropriate name and value attributes. You can even change the input type to checkbox to make them into checkboxes and allow the user to select multiple answers for each question!
If you need to integrate more content into the quiz page or customize it in other ways, that's fine, and the file itself can have any filename and extension you like - if you're using PHP, say, you can save the quiz file as quiz.php and insert your layout, any includes you use, or whatever you like into the page. All you have to do is ensure that the form named quizform contains all the questions and options, that the result_div element is present where the result should appear, and that you include the script element in its entirety somewhere below the form element.
If you would like to tweak how the result is presented, you can simply change the HTML of the result_div element. The script uses IDs to show the correct result - so long as you have an image with id="result_image" somewhere, that will show the correct result image, and so on, regardless of what other HTML you put around it or what CSS you apply to it.
By default, when you press the submit button, the page will show the result image, text (if any) and HTML/BBCode for that result inside the result_div element. If you would instead like to make completely customized pages for each result, then instead of defining name, image and text for the results in RESULTS, you can simply define link as the location you want to redirect to. For example:
```
RESULTS["cautious&cooperative"] = {
   link: "http://www.dragonflycave.com",
};

RESULTS["cautious&competitive"]: {
   link: "/quiz/result2.html"
};
```
If you do this for every result, you can remove the result_div element in its entirety.

Advanced

You can define extra results in case of ties within a trait pair. By default, ties are broken in favor of the trait defined first in TRAIT_PAIRS, but you can change this by introducing results that contain "both" instead of one of the traits you've defined. For example:

RESULTS["both&cooperative"] = {
   name: "Cooperative, but neither cautious nor adventurous",
   image: "both-cooperative.jpg"
};

RESULTS["both&competitive"] = {
   name: "Competitive, but neither cautious nor adventurous",
   image: "both-competitive.jpg"
};

RESULTS["cautious&both"] = {
   name: "Cautious, but neither cooperative nor competitive",
   image: "cautious-both.jpg"
};

RESULTS["adventurous&both"] = {
   name: "Adventurous, but neither cooperative nor competitive",
   image: "adventurous-both.jpg"
};

RESULTS["both&both"] = {
   name: "Neither cautious nor adventurous, and neither cooperative nor competitive",
   image: "both-both.jpg"
};

You don't have to include every possible "both" result - you could include just one and have all other ties get broken normally if you wanted - and of course, they are completely optional. Because they add a slew of extra results, I don't recommend including them if you have more than two trait pairs.

If for some reason you need the form tag to have a name other than quizform, you can set the FORM_NAME variable below the possible results to whatever you changed the form's name to.

Troubleshooting

Not working? Here are some things to check:

Make sure to keep the quotation marks around the values in the variable definitions. If the value itself contains quotation marks, you will have to escape them by writing them as \"; the backslash will not be shown in the final result. For example:
```
RESULTS["cautious&competitive"] = {
   name: "Something with \"quotation\" marks in it",
   image: "cautious-competitive.jpg"
};
```
Also ensure that you include the last line of each result definition (};) - it doesn't look like much, but it's important for the script to work correctly.
There should be a comma after each of the attributes for each result (name/image/text/link) except the last one - make sure you've got them in there.
The two traits in each trait pair must be enclosed in quotes and have a comma between them; the pair itself must be enclosed in square brackets; the trait pairs themselves must have commas between them; and the whole list must be enclosed in a separate set of square brackets. Any mistake in this formatting will cause the script to fail to run, so make sure to double-check it.

Still not working? E-mail me with your quiz page attached and I'll help you find what's wrong.

Page last modified January 1 2018 at 21:08 UTC

Comments

No comments on this page as of yet.

Post comment

Inflammatory or off-topic comments will be deleted; please go to the guestbook for discussion unrelated to this page. You can use BBCode (forum code) to format your messages.

[b]Bold[/b]
[i]Italic[/i]
[u]Underlined[/u]
[s]Strikethrough[/s]
[url=http://www.dragonflycave.com]Link[/url]
[spoiler]Spoiler[/spoiler]