Rank'em Form

Create a survey asking people to rank things, and this script will validate that everything is ranked, and no rankings are repeated. Could be adapted into a puzzle or game.

We have tested the code in IE 7.0, Firefox 2.0.0.4, Opera 9.21, Netscape 9.0b1, Netscape 8.1.3, AOL Explorer 1.5 and Safari 3.0.2. This script worked well in all platforms with no variations observed.

For your Information: Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> section and <BODY> section (incorporated into a working form) of your document.

q1a
q1b
q1c
q1d
q2a
q2b
q2c
q2d
q2e

rankem(1,4);
rankem(2,5);

To set up a ranked-list survey question as in the examples above, name the <select>s (<BODY> section of code) as q + the number of the question + a, b, c, etc. In this case, the form elements are named as shown to the left:

To use the validation, call rankem(a,b) where the parameters are the question number and its length. In this case, the form handler calls the function twice. This part of the code is located in the <HEAD> section.

Each call will generate a separate alert if there's anything amiss. The global "badrank" variable is a status flag so the main form handler knows if it's allowed to submit().
Note: This demo doesn't actually do a submit(); instead it just displays a message.

If the above is slightly confusing, see the below and it show clear it up for you.

<---- Partial <BODY> Section ---->

1. Ice Cream:<br>
<select name="q1a"> <option><option>1<option>2<option>3<option>4 </select>
vanilla<br>
<select name="q1b"> <option><option>1<option>2<option>3<option>4 </select>
chocolate<br>
<select name="q1c"> <option><option>1<option>2<option>3<option>4 </select>
raspberry<br>
<select name="q1d"> <option><option>1<option>2<option>3<option>4 </select>
mint<br>

As you can notice in the partial code on the left how the sequence is formulated. We hope this clarifies this section of reconfigurations for you. The 1. Ice Cream: and the flavors can be reconfigured to whatever your needs are for this effect.

Once all your reconfigurations have been done, in both the <HEAD> and <BODY> sections, all that is left is to incorporate the <BODY> section into a working form.

Little Extra Not Included In The Script: The last this we shall cover is to make the <HEAD> section of the script into an external.js file and called from an external location. Reason you may want to do this is quite simple. The code itself takes up space on your page and to make things simpler, you can just call the file from an external location. If you need a little refresher on howto, see below.

The <HEAD> section of code starts and ends with opening and closing JavaScript tags, See below:

Opens With:
<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here
Closes With:
// End -->
</script>

Remove the opening and closing JavaScript tags.

Copy/cut and paste everything in-between into a notepad and save it as formScreener.js*

The newly created (Saved As) file will look something like this

Upload the newly created rankem.js into your directory

Paste the below snipplet of code into the <HEAD> section of your document to call rankem.js

<script type="text/javascript" src="rankem.js"> </script>

If you have uploaded the rankem.js into a different directory, you will have to change the path of the above to reflect the location.

If changing the path is a little confusing, grab the below link and it is explained in detail.
[ Upload To Different Directory ]

* We named our external.js file rankem.js. This is just so we know what it is to at any given moment. You can name it anything you want. This is entirely up to you on this.

If you would like to see an example of this effect with the use of an external.js file in the <HEAD> section, grab the below link and you are there.
[ Rank'em Form With External.JS File ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]