Creating Calculated Fields

Your next task will be to include rating scale of your website so viewers can rate your web design skills. Sections will be rated 0 to 5, 0 being the least liked and 5 being the most liked.

The following fields will be rated:

<TR>

<TD COLSPAN=2>Rate our Website. Rate the following web components in order for us to better serve you in the future. The categories are explained below:<BR>&#183 Content (How well the content is presented)<BR>&#183 Use of Graphics, Sound, Animation and Video (All of the photographs, graphics, sound and/or video enhance the content and are of high quality)<BR>&#183 Organization (Web page structure is organized for easy navigation)<BR>&#183 Internal and External Navigation (All of the menus, navigation links and all internal links and sections of the website connect back to the home page and/or sitemap)<BR>&#183 Grammatical Content (Website is free of grammatical errors)<BR>&#183 Layout and Text Elements (The typography is easy-to-read and point size varies appropriately for headings and text)<BR>&#183 Contact Person, Copyright and Update Information (Each Web page includes a footer with a working email link to the author of the website or contact person, a connecting link to homepage, date of creation or revision, and copyright information)<BR>&#183 Speed Web Pages Load (The Web page graphics are small in byte-size or optimized by providing image height= and width= tags, and pages download quickly for the target audience)<BR><BR>Rate each component from 0 to 5, 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 web page evaluation should now appear between the suggestion and comment box and the send contest form and cancel buttons.

Next you will create input boxes that will hold the number for the rating of each web component. Return to surveyform.html in your text editor. Under the directions for rating the website 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>

Content:

</TD>

<TD>

<INPUT NAME=CONTENT VALUE=0 SIZE=1 MAXLENGTH=1 onBlur="RATE();">

</TD>

</TR>

Now you will create the remaining seven categories using the format above. Assign the INPUT NAME a one word value. The rest of the values (value, maxlength, onBlur) are the same for the other seven categories. Create them just below the one you just created.

Your next task is to calculate the total rating automatically and store this value in the TOTAL field, which we will create a little later. Notice the code above, the function name is RATE(). Now you need to create the RATE() 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 surveyform.html file in your text editor. Just above the stop hiding comment in the script section located in the head section, type in the following:

function RATE() {

var C = eval(document.SVY.CONTENT.value)

You will then assign the rest of the variables and names. I used the letter C because I would associate the word content with the letter C. You cannot assign two variables with the same letter!!! Notice the name of the form (document.SVY) and the input name (CONTENT) is followed by the word value. Here is a list of the values I used. Yours will be different depending on what you assigned you input name and variable name. Make the modifications, then place the remaining variables below the variable you placed above.

var G = eval(document.SVY.GRAPHICS.value);

var O = eval(document.SVY.ORGANIZATION.value);

var N = eval(document.SVY.NAVIGATION.value);

var R = eval(document.SVY.GRAMMATIC.value);

var L = eval(document.SVY.LAYOUT.value);

var P = eval(document.SVY.CONTACT.value);

var S = eval(document.SVY.SPEED.value);

document.SVY.TOTAL.value = C + G + O + N + R + L + P + S;

Just below the last evaluation statement, add the following code below. This will calculate the total of the input boxes. Your values be different, so make the correct modifications.

document.SVY.TOTAL.value = C + G + O + N + R + L + P + S;

}

where SVY 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 surveyform.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="RATE();">

</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 websote rating scores. Just under the total row you just entered, type in the following:

<TR>

<TD COLSPAN=2>

Score of 32 and above our website rates well!!!<BR>

Score of 25-31 shows we have improvements to make.<BR>

Score or 24 and below, our website needs a lot of work.

</TD>

</TR>