With some games you want the player to be able to choose between a number of different options. Each of these options has a 'cost' in points so that they can select more than one option provided that the number of points required for the selected options does not exceed the points available. This script will display the number of points that remain available as the various options are selected and stop options being selected if the required points exceeds the number remaining.
To start with let's look at an example of how the script works. In this example there are fifty points available and four options. As you select the options the number of points remaining will be reduced accordingly. If you attempt to select an option that exceeds the number remaining an "insufficient points" alert will be displayed and the option will be unchecked.
The first step in using this script is to select the code from the text box below (there is a highlight all button beneath it to make this easier) and copy it into a file called sel.js.
The lines at the bottom of the script will need to be changed to match your particular points distribution requirements. The maxpts value should match the number of points that you are making available to be distributed (in my example there are 50 points available). Each pt[selbx++] value should be set to the number of points required for each of the available options to be selected in the order that they are going to be numbered in the form (in the example the options cost 5, 15, 35, and 30 points respectively).
You attach this updated script into your web page that that needs to perform the points distribution validation by adding the following code just before the </body> tag.
Now that we have set up the script and attached it to our web page, all that remains is to put the necessary fields into our form and set them up to work with the script.
The first field we need to add to our form is one to display the number of points that are remaining. The code for this field looks like this:
<input type="text" name="remain" size="5" value="50"/>
This field must be named remain to work with the script and it should be assigned the same value as you gave maxpts or it will look a bit strange when the points are adjusted when the first option is selected.
We also need to add the check boxes for the individual options that are available to be selected. Each of these should be coded similarly like this:
<input type="checkbox" name="opt0" onchange="ptAdjust(myform,this);"/>
These fields need to be named opt0, opt1, opt2, etc. with the number of points required to select the options being the same as the respective value assigned to pt[selbx++] (the array entries start from 0).
The actual script functioning is called from the onchange event code and the name associated with the form needs to be passed as the first parameter.
With these codes in place, whenever any of the check boxes is checked or unchecked the total number of points for all of the checked boxes will be recalculated by the script and if insufficient points are available then the last box checked will be unchecked again and the 'insufficient points' message displayed.
This article written by Stephen Chapman, Felgall Pty Ltd.