Last four digits SSN____________________ Userid__________________________________________________

BlueStuffWithYourNameOnIt.com Your Name: Total Order= $ 0.00

1. (60 points) The page above contains a two column table. The first column contains (in order): (1) a title; (2) a form (named fred); (3) a textbox named yourname; (4) a DIV block (id=topleft -- the contents of this DIV block is initially an image file named "your0.gif" -- as shown above); (5) a DIV block (id=orderamt initially set to "Total Order = $ 0.00"); (6) a button labelled "Add To Order" that when clicked calls a VBScript sub named addit; (7) a button labelled "Submit" that when clicked calls a Javascript function named submit_it; (8) a hidden variable named ord initially set to ""; (9) a second form named xorder (action is to "http://auckland.bauer.uh.edu/students/parks/echoxml.exe"); and (9) a hidden variable named xmlstring.
        The second column contains a two row three column table with no borders. Each table cell contains a gif image (named your1.gif, your2.gif, your3.gif,...,your6.gif). Each image can be clicked. When clicked the image calls a VBScript sub named showit. This call passes a single integer. For example: the first image's HTML (the shirt) is : <img src="your1.gif" border="1" onClick="showit(1)">; the second image's HTML (the cap) is: <img src="your2.gif" border="1" onClick="showit(2)">, etc. The contents of this second column NEVER change.

BlueStuffWithYourNameOnIt.com Your Name: Buy Total Order= $ 0.00

When the user clicks on a product, the showit sub modifies the contents of the topleft DIV block by displaying: (1) the image that was clicked; (2) the word "BUY"; (3) a textbox of size=2 named quantity that holds the quantity the user wishes to purchase; and (4) a hidden variable named product. This hidden variable is assigned the product number that was clicked (i.e., a 1,2,3,4,5 or 6). The result in the first column by clicking on the WATCH image is shown to the left. Note that the textbox named quantity and the hidden object named product are part of the first form named fred.         When the "Add to Order" button is clicked a VBscript sub named addit is called. This sub retreives the quantity and product values from fred and creates a three byte string. The first byte is the product (1 through 6) and the last two bytes are the quantity the user entered. If the quantity is only one digit, a zero is added to create a two byte value. The resulting 3 byte string is then appended (i.e., added to) the end of the ord string. The sub then: (1) replaces the contents of the first DIV block (id=topleft) with the "your0.gif" image and (2) calculates the a new total order amount. This order amount is found by using the ord string to get the product and quantity values for each item ordered. The six product prices are to be stored in a six element array named price. The total is found by summing the quantity * price value for each product ordered. The sub then replaces the contents of the second DIV block (id=orderamt) with: (1) the words "Total Order = $" and (2) the new total order amount.         Write the VBScript for showit and addit. Show NO HTML. Do NOT use on-the-fly creation (i.e., document.write)

2. (40 points) Write the Javascript function named submit_it. This function is called when the user clicks the "Submit" button. The function: retrieves the ord string and the yourname string from the fred form. A string of XML is then created. The outside tag is <blue_order>. The first interior tag is <your_name> and contains the value the user entered in the "Your Name" textbox. Then for each product ordered there is a tag named <order_line>. This tag contains two tags: <product> (which contains the product number) and <quantity> (which contains the quantity of the product purchased). When completed this XML string is assigned to the hidden variable xmlstring. The function then submits the xorder form. Show NO HTML. Do NOT use on-the-fly creation (i.e., document.write)