Creating Calculated Fields

Your next task will be to include an ice cream personality test that will calculate the total score automatically and store this value in the TOTAL field. The ice cream personality score when calculated will tell the participant their personality. This is just a fun gimmick that the company hopes will get you to tell others to visit this Web site.

The tastes that will be rated 0 to 5, 0 being the least liked and 5 being the most liked.

  • Bold
  • Crunchy
  • Rich
  • Creamy
  • Smooth
  • Subtle
  • Fruity
  • Tart
  • Tingling

Return to your text editor and place another table row between the ice cream description row and the row that contains your submit and cancel button. Insert a new row above the row that contains your submit and cancel buttons as follows:

<TR>

<TD COLSPAN=2>Take our Ice Cream Personality Contest. Rate the following taste to determine what type of personality you have. The taste I like in Ice Cream, 0 being the least and 5 being the best, is:</TD>

</TR>

Save these changes and view them in your Web browser. The directions for filling in the personality contest should now appear between the ice cream description box and the send contest form and cancel buttons.

Next you create input boxes that will hold the number for the rating of each taste. Return to contestform.html in your text editor. Under the directions for taking the personality you just placed in you file above, press the enter key to start a new line. You will now begin inserting separate rows for each of the nine taste fields. The first one is shown below, however, you will need to create the other eight on your own. The first taste field input code is:

<TR>

<TD>

Bold:

</TD>

<TD>

<INPUT NAME=BOLD VALUE=0 SIZE=1 MAXLENGTH=1 onBlur="PERS();">

</TD>

</TR>

Notice that the name and INPUT NAME are the same. The rest of the values are the same for the other eight categories.

Your next task is to calculate the total Personality score automatically and store this value in the TOTAL field, which we will create a little later. Notice the code above, the function name is PERS(). Now you need to create the PERS() function. This function will add up the values entered into each of the component fields. In order to add these numbers together, you will need to use the eval() function. To get a better understanding of this function, turn to pages 8.28-8.29 in your textbook.

You will now create the eval() function which will automatically add the numbers in the input box and place it in the TOTAL input box. This function will also appear in the <HEAD> within your <SCRIPT> tags.

Return to the contestform.html file in your text editor. Just above the stop hiding comment in the script section, type in the following:

function PERS() {


var B = eval(document.CON.BOLD.value);

var C = eval(document.CON.CRUNCHY.value);

var R = eval(document.CON.RICH.value);

var M = eval(document.CON.CREAMY.value);

var T = eval(document.CON.SMOOTH.value);

var S = eval(document.CON.SUBTLE.value);

var F = eval(document.CON.FRUITY.value);

var A = eval(document.CON.TART.value);

var G = eval(document.CON.TINGLING.value);

document.CON.TOTAL.value = B + C + R + M + T + S + F + A + G;


}

where CON is the name assigned to the form and the value that appears after the period is the name assigned to the input field. Next you will have to create the TOTAL input box where your score will appear.

Locate the last taste row in your contestform.html in your text editor. You will now create the total input box, placing it after your last taste input and just before your submit buttons. Enter the following to create the TOTAL field:

<TR>

<TD>

TOTAL:

</TD>

<TD>

<INPUT NAME=TOTAL VALUE=0 SIZE=1 MAXLENGTH=1 onBlur="PERS();">

</TD>

</TR>

Save your changes and then load it in a Web browser. Click in each of the input boxes and type a value. In the Total input box you should see the total calculated as you enter numeric values.

Return to your text editor to enter the personality result scores. Just under the total row you just entered, type in the following:

<TR>

<TD COLSPAN=2>

Score of 25 and above your Wild and Adventurous<BR>

Score of 15-24 your Reserved and Sophisticated<BR>

Score or 14 and below, you are Shy and Timid

</TD>

</TR>