Free Quiz Scripts

Doesn't everybody love personality tests? If you want one on your site, I've got *dun dun duun* a free script! And not just a free script, but also a tutorial AND several different free scripts. Oh, and although it would be very polite and appreciated, you do not need to give credit for the script. (Obviously, don't claim you coded it yourself, either.) Either way, using this script requires knowledge of HTML, and if you want to be able to *really* personalize them, you need to know at least the basics of Javascript too. They both have versions for normal client-side Javascript and ASP using JScript, which is practically the same thing for the most part so if you know one you should be able to edit the other.

Step 1: The HTML

First of all, check if your host supports ASP. If it does not, you'll either have to convert my script to another server-side scripting language, or just use the client-side Javascript one provided here. Please make sure to note that from here on, this is ONLY for ASP users and this is ONLY for Javascript users. Instructions for both are normal.

For ASP, make a page. Add the layout or anything else you might want on it, and put this on it:

If you're a Javascript user, you should also make a page and put anything you want to have on it. Where you want to put the questions and all that, add this:

Of course, for the quiz HTML, you may edit it how you wish as long as you keep the inputs and the form intact. I just put it like this so you wouldn't need any complicated CSS styling.

If you're using ASP, you should now make a page called check.asp. Lay it out however you like. Then put this in the line before the <html> tag:

<%@ language=JScript %>

Then put <% as the first thing after your <body> tag.

If using Javascript, go back up to the <head> of your page and add in this line:

<script type="text/javascript">

Now, it's time to decide what kind of a personality test you want to make. There are three main types of ways to calculate a result from a personality test. Check the introduction to them all and decide which would be suitable for your quiz, and then continue the instructions under the type you decide on.

The Vote script

What is this kind of script about? If we assume this is some kind of a "What Pokémon are you", we'll say the possible results are Alakazam, Butterfree, Caterpie and Dustox. Then you would replace value1 for all the questions with "alakazam", value2 for all the questions with "butterfree", value3 with "caterpie" and value4 with "dustox" (but don't do that just yet). You would put the answer that Alakazam would answer as Answer 1, Butterfree's answer as Answer 2, Caterpie's answer as Answer 3 and Dustox's answer as Answer 4, and when somebody takes the test, the script will simply count the number of times that he or she chose the Alakazam answer, the Butterfree answer, the Caterpie answer and the Dustox answer, and the one that the user answered the most becomes the result.

Pros of the Vote script

  • Simple to code
  • Relatively few results to make
  • The right type to use in some kind of a simple "Are you this or that" where there are definitely only very few results that are possible considering the concept of the quiz's theme itself, e.g. if you claim everybody is either an A person, B person or C person and nothing in between and the test finds out which the taker is

Cons of the Vote script

  • Half of your answers can be thrown out as irrelevant - you'll get the same result with five Alakazam answers, four Butterfree answers and one Caterpie answer as you would with five Alakazam answers, four Dustox answers and one Caterpie answer - which makes the result inaccurate
  • The result is further made inaccurate by the fact that if the person is aware what the possible results are, they will be consciously or subconsciously inclined to deliberately select the answers that they think will yield the result they want to get

If this is the test you want to make, add the following in the line directly after what you put in just earlier:

If using ASP, put in this line:

         choice = Request.Form("q" + question.toString());

However, if using Javascript, use these lines instead:

         var q = document.forms['quiz'].elements['q'+question];
            for (var i = 0; i < q.length; i++) {
               if (q[i].checked) {
                  choice = q[i].value;
               }
            }

Continue with this:

Now, ONLY add in the following part if the concept of your quiz makes it a bad idea for one result to take priority over another in the case of two being tied as the ones with the highest value. If you don't mind that happening, ignore the next textarea and move on to the next one after that; this requires you to make eleven more results for your quiz, which might not be very desireable to most people who choose to do a Vote test.

Now, insert the following. If you did not include the above code, remove the "else" from the first line of this; otherwise leave it as it is:

For ASP, end the code in this:

   }
   check();

%>

For Javascript, end it in this:

        window.location = result + ".htm";
   }
</script>

If you're using ASP, then put the following (tweak as you like as long as you know what you're doing):

<img src="<%=result%>.gif">
<p>HTML:</p>
<textarea rows="3" cols="25"><a href="http://URL.to.quiz"><img src="http://your.image.URL/<%=result%>.gif"></a></textarea>
<p>BBCode:</p>
<textarea rows="3" cols="25">[url=http://URL.to.quiz][img]http://your.image.URL/<%=result%>.gif[/img][/url]</textarea>

Obviously, you change "URL.to.quiz" to the address of the quiz on your site, and "your.image.URL" to the URL to your image. Make sure that if your host doesn't support direct linking, you upload the images to an image host which preserves the original filename. That is very important. Also make sure that the URL you put there is definitely the whole URL except for the filename itself, so all directories are in but NOT the filename.

The Quiz

Now, use the replace function (in both the quiz itself and check.asp, if you're using ASP) to replace value1 with the name of the result that should take the highest priority. This basically means that if two results get the same number of votes and one of them is this one, it should be the one that you will get (this only applies if you did not include the extra results for the case of a tie; if you did, it doesn't matter which result is which). Replace value2 with the one that should take the next priority (so if value1 and value2 are tied, value1 will win, but when tied with value3 or value4, value2 will win), value3 with the third one that only beats value4, and value4 with the one that should never take priority in case of a tie. Now, make the "Question 1" and "Answer 1" things in the quiz HTML code into the actual questions and answers, making sure that the answers always match what the value beside the question says.

Time to make the result images now. If using ASP, save them as simply the result's name with a file extension (if it's not .gif, remember to change it in the code I just gave you above). If you've got other images saved under those names, you can add "quiz" or something like that in front of it, and then remember also to put it in front of <%=result%> in the last code snippet I gave you, all three times it appears. Make sure that you definitely make an image for each possibility, including the extra results if you included them (and one with an error message if using ASP; name it "oops.gif" or something else which you change in the code, making sure that it has the same extension as the normal results). The extra results should be called, to take our Alakazam/Butterfree/Caterpie/Dustox example again, something like alakazam-butterfree, alakazam-caterpie or butterfree-caterpie-dustox with your file extension. (Actually, you can check up there in the code; it tells you what they should be called and will make sure you remember all of them.)

Javascript users should now make their result pages. Basically, they should be special pages containing the result image and probably a code for displaying the results, perhaps similar to what I put there for ASP users. Save them as simply the result's name with the .htm extension; like in ASP, if those filenames are already taken, you can just add something to the filename as long as you change it in the code (if you add something in front of the result's name, such as "xyz", you would put it into that line as window.location = "xyz" + result + ".htm";). Also be sure to make an error page called oops.htm (or xyzoops.htm) containing some error information.

Now test it, and it should work. Congratulations, your test is done! If you are having problems with it, feel free to contact me and ask about it.

Scale

The way this works is that each answer will add a different number (or nothing) to one number variable, and your final score as a percentage of the maximum possible score shows how much of the personality trait tested you have.

Pros of the Scale script

  • Very simple to code
  • The percentage is always spot-on accurate if the quiz was well made
  • Does not need a certain number of result images, although they can be put in
  • Can have a different number of options per question (and in fact, it can vary between individual questions) without having to alter any other part of the code at all, making it ideal if you know no Javascript at all but still want to change the number of options
  • Ideal for any sort of measuring where you are on a simple scale between two extremes - it could test well how obsessed with Pokémon you are, how insane you are, how likely you are to rule the world some day, or whether you're more left-wing or right-wing

Cons of the Scale script

  • Despite the accuracy of the percentage itself, making result images will always mean that somebody with just one point higher than somebody else can get a completely different description
  • Is not suitable for any type of personality test other than the measuring scale I mentioned above

If you're going with this type, add the following directly after the last line of code you put in:

If using ASP, put in this line:

         choice = Request.Form("q" + question.toString());

However, if using Javascript, use this:

         var q = document.forms['quiz'].elements['q'+question];
            for (var i = 0; i < q.length; i++) {
               if (q[i].checked) {
                  choice = q[i].value;
               }
            }

Now continue with this bit with either one:

Basically, this code will by default return the variable finalresult as either none, very low, low, average, high, very high or absolute. You can of course change that and the ranges of the percentages however you like.

For ASP, end the code in this:

   }
   check();

%>

For Javascript, put in this:

      document.getElementById("score").innerHTML = percentage;
   }
</script>

Now, it's time to make the questions and answers. You can take out or add options if you want. When you've filled them in, replace the "value1", "value2", "value3" and "value4" with numbers - if it should give one point, put in "1"; if it should give three points, put in "3". Now, go to the start of the code where it says "maxvalue = 0;" and replace the 0 with the highest possible points (that is, the highest values for each question added together). Make sure that each question has at least one answer with the value 0; otherwise the lowest possible result will be something more than 0 and that will make the test inaccurate.

Now, you can put the result in whatever context you like. If you want to have result images, just make images named "none", "verylow", "low", "average", "high", "veryhigh" and "absolute" (if you changed that in the code, change it here too) and give them all the same file extension.

If using ASP, use the code <img src="<%=finalresult%>.(your extension here)"> to show the image. If you want to show the exact percentage too, just insert <%=percentage%>% where you want it.

If you're a Javascript user, put in this code if you want the exact percentage to appear (which can as well be in the middle of a paragraph):

<span id="score"></span>%

Then, if you want to show an image, it's best just to put a button, since there is always the possibility that the user has the ability for scripts to change images turned off:

<input type="button" id="resultbutton" style="display:none;" value="Click here to get your result image!" onclick="window.location = final + '.htm';">

After the line document.getElementById("score").innerHTML = percentage; you would then put document.getElementById("resultbutton").style.display = "inline"; and if you don't want the percentage to show up at all, remove the former entirely.

Now you can test your quiz, and it should work. If it doesn't, you can contact me.

Extreme

This is the type I used to use for my own What Pokémon Are You, although I've now moved on to a different type. Just for fun, I'll explain how the code works here; since you don't need to read those paragraphs if you're not interested in how it works, those comments will be in []. This is based on having two scales between extremes, and your result depends on which side of the middle you are on in each scale and which is higher.

The difference in concept between this and a Vote test is really that the Vote test gives you one of several results that are all extremes and therefore none of them probably fit you exactly, while the Extreme test gives you a more fitting result that respects all your answers.

Pros of the Extreme script

  • Fairly accurate
  • Offers much more flexibility than a Vote test
  • The best type to use for "What Pokémon Are You?" and other similar quizzes that are not measuring simply your position on a scale or which of relatively few results you fit into

Cons of the Extreme script

  • Extremely complicated to edit; if you don't know Javascript pretty well, there's practically nothing you can do with it other than copy-paste and follow my instructions to the letter
  • A horrible, horrible, HORRIBLE number of possible results considering the aspects of personality you are really testing with it

Think you're up for it?

All right. The way this test works exactly is that you have an even number of options for each question, and the options are in pairs. A pair should contain two personality extremes that are opposites of each other - for example, one could be what an angelically nice person would answer, and one could be what an extremely evil person would answer. Other suggestions for pairs are for example hyperactive/calm, optimistic/pessimistic, etc. Therefore, to start with, you'll probably want to make your pairs. I highly recommend that you keep it to the default four options, which means two pairs. You don't need to replace value1/value2/value3/value4 yet, though. Just make your answers, and make sure that you know your pairs. And always place them in the same order and so that the options with the values value1 and value2 are one pair and the value3 and value4 ones are another pair; you can change the order around once you've finished the whole thing.

Now, copy and paste this after the last line you put in.

[What you're doing here is first telling the script that we're making a function called check, and then defining the variables we're going to use. First we have the variable question, which is just used when the script is going through the questions and finding the options, and stands for the number of the current question. Then we have the variables value1, value2, value3 and value4, which will be changed into your personality extremes later. The variable result, which is actually defined before we start the function since in ASP, we need the variable after the function has been executed, will be changed once the script runs to the result that matches the user. Then we have the variable choice, which the script will put as the user's answer to each question, and then the balance variables - value1_value2 and value3_value4. You will see their purpose in a moment. Then, it starts a loop; it starts with the variable question set to 1, it will continue while the value of the variable is less than or equal to ten, and when it has looped through it once, it will add one to the question variable. Basically, everything in the loop, defined by the {}, will happen ten times, once with the variable question as 1, once with it as 2, once with it as 3, etc. until it has looped with question as 10.]

If using ASP, put in this line:

         choice = Request.Form("q" + question.toString());

If using Javascript, use these lines instead:

         var q = document.forms['quiz'].elements['q'+question];
            for (var i = 0; i < q.length; i++) {
               if (q[i].checked) {
                  choice = q[i].value;
               }
            }

[Here we are just fetching the user's selection. In ASP, we just need one line, since we have Request.Form; it basically requests the value of the chosen button in group of radio buttons that has the name q[value of the question variable] and defines the variable choice as the value of that radio button. That is, if the loop is looping for the first time, it will find the value of the radio set called q1, which is the first question, and so on. In Javascript, it's a bit more complicated; we first need to define the variable q as the question (that is, as q1, q2, etc.) and then we have to start another loop; this loop first defines the variable i, and then cycles through the options for that question, each time checking if that option is selected and, if it is, defines the variable choice as that option's value.]

Continue with this:

[We're still looping through the questions, but this is the last thing we do each time we loop through: we check the value of choice, and if it's "value1", we increase value1's value by 1, and the same for the other options. Then we close the loop with a }, and define the balance variables. They are really just there for convenience so that the next part isn't as complicated, but basically, we subtract value2 from value1 and value4 from value3. That means that if value1_value2 is greater than zero, value1 was higher than value2; if it's less than zero, value2 is higher than value1, and if it's exactly zero, they were equal. Same with value3_value4.]

[Okay, I know your eyes are probably popping out of your skull now, but this isn't as complicated as it looks. First, we check if nothing was checked at all (that is, if the four primary variables were all equal to zero). If that is true, it will return an error result which I will just call "oops". Then we start the real stuff. We check both the balance variables and see if they are greater than, less than or equal to zero, which technically is just checking which of the extremes in each pair was greater, and then, just to make the result even more accurate, we check which of the ones that were greater is greater. That is, if we assume that value1 was greater than value2 and value3 was greater than value4 (which is if both balance variables were greater than zero), we also check which was greater, value1 or value3. Then we go through all the possibilities, have a "no result found" possibility in the end just in case, and define result accordingly.]

Now you can replace "value1", "value2", "value3" and "value4". Just use the replace function (remember to do it for both files if you're using ASP) to change them into the personality extreme that each answer fits as you made the answers earlier; for example, if you decided that value1 and value2 should be "good" and "evil", you would use the replace function in Notepad or whatever text editor you might be using to replace "value1" with "good" and "value2" with "evil". Do this for both pairs. Now this code I just told you to put in is starting to make some sense; my comments (the things after the //) are basically instructing you on what the script means, and if you decide that the result for mainly value1 and also value3 should be Alakazam, you just type "alakazam" instead of the "result for that". Of course, you can make many possibilities return the same result, if you don't want to make seventeen different results for two balance variables, but that makes the test less accurate.

Once you've set all the results, finish the code.

For ASP:

   }
   check();

%>

For Javascript:

      window.location = result + ".htm";
   }
</script>

[Here, we need to close the function with a last }, and make sure that the user gets the result. In ASP, you say after closing the function that the function should run, because you haven't actually told it to run anywhere. Because it's not inside the function, it will happen as this part of the page is loading - remember that this page is check.asp, so the user has already been directed to another page, but the function has not been told to run. In Javascript, you tell the browser (before closing the function) that it should redirect the user to a page that has the filename of the result's name with the .htm extension, since in Javascript you've already told it to execute the script but not to redirect to a different page. Then, in both cases, we end the script.]

If using ASP, put this code into the <body> to give the user the result. Tweak if you know what you're doing.

<img src="<%=result%>.gif">
<p>HTML:</p>
<textarea rows="3" cols="25"><a href="http://URL.to.quiz"><img src="http://your.image.URL/<%=result%>.gif"></a></textarea>
<p>BBCode:</p>
<textarea rows="3" cols="25">[url=http://URL.to.quiz][img]http://your.image.URL/<%=result%>.gif[/img][/url]</textarea>

Obviously, you change "URL.to.quiz" to the address of the quiz on your site, and "your.image.URL" to the URL to your image. Make sure that if your host doesn't support direct linking, you upload the images to an image host which preserves the original filename. That is very important. Also make sure that the URL you put there is definitely the whole URL except for the filename itself, so all directories are in but NOT the filename. Make an image for each result, including "oops".

If you're a Javascript user, make your result pages. Be sure to make all the results that you made possible earlier, and an "oops" page. If the extension is not .htm, change it in that line of the script itself.

If one of the filenames already exists, just add something else before or after the actual result name when you make the filenames of them all and then, put that before the .gif in the code I just gave you if using ASP or if using Javascript, add it in the line of the script where it redirects you.

Now you should be done, so test it. If you're having problems, feel free to contact me for help.

Page last modified August 12 2016 at 22:34 GMT