1. (50 points) An apparel company sells sweatshirts on their web site. They wish to include an option for users to enter information they wish to have monogrammed on the sweat shirt they purchase. Users are allowed two lines of text with a maximum of 20 characters on a line. Users must also specify the sweat shirt color, text color and text font. The format for the options appears below:

Monogram Data Shirt Color: Red White Blue Text Color: Red White Blue Font: Arial Times New Roman Comic Sans MS Text (line 1) Text (line 2)

The page uses: a form named f1; the Shirt Color radios buttons are named c; the Text Color radios are named t; the Font radios are named f; and the two text boxes are t1 and t2. When the user clicks the button labelled "SHOW ME" the javascript function named p1 is executed. The p1 function: 1.Checks to be sure: one radio button is checked for Shirt Color; one for Text Color and; one for Font If the user fails to click any of the three radio button groups an error message is displayed and the function terminates.

2. Checks to be sure that the Shirt Color choice and the Text Color choice are not the same (e.g., you shouldn't print red text on a red shirt). If they two choices are the same, display an error message and exit the function.
3. At least one of the textboxes must contain characters. If BOTH are empty, display an error message and exit the function.
4. If the data passes the editing tests above, then create a new page on-the-fly with:
   1. The page background color set to the color chosen by the user in Shirt Color radio
      (HEX for Red is ff0000; blue is 0000ff; white is ffffff)
   2. Display the user's two text lines, centered, in bold, using their chosen font

CAPTAIN WEBB JUNIOR'S MATH GAME

2. (50 points) The game above resides in a four row table: the first row is just a title; the second row contains 5 cells each containing a gif file (The first cell has a DIV block with id="fn_id"; the third cell has a DIV block with id="sn_id"; and the fifth cell has a DIV block with id="ans_id"); the third row has an instructional gif in a DIV block with id="ins_id" and a blank button (which when clicked it calls the sub p2b); and the last row has 19 clickable gif files (each is an image of a digit 0 thru 18). The gif files for the numbers 0 thru 18 are named: "0.gif"; "1.gif";...;"17.gif"; and "18.gif". The three instructional gif files (what to do, right and wrong in row 3) AND 3 gif files (+,=, and ? in row 2) are shown below:

click.gif right.gif wrong.gif q.gif eq.gif plus.gif

When clicked, the digit images in the last row call a sub named answer and pass the value of an integer (e.g.,: <img src= '0.gif' border='1' onClick= 'answer(0)'> <img src= '1.gif' border='1' onClick= 'answer(1)'> <img src= '2.gif' border='1' onClick= 'answer(2)'> ...etc. When loaded, the program executes a sub named p2b. This sub: 1. Generates two integers (fn and sn) each between zero and 9 inclusive (i.e., 0,1,2,3,...8,or 9) 2. Displays the associated image file for fn in the first cell of the second row. 3. Displays the associated image file for sn in the third cell of the second row. 4. Places the question mark image (q.gif) in the fifth cell of the second row (using the DIV block with id="ans_id") 5. Places click.gif file in the DIV block with id="ins_id" in the third row 6. Stores the sum of fn and sn in a global variable named right_answer

The sub answer: (1) compares the value passed by the image click to the value of right_answer. If correct, the third row displays the "right.gif" image else it displays the "wrong.gif" image; and (2) places the an image of the user's answer in the ans_id DIV block (NOTE: with a DIV block the content change syntax is: DIV BLOCK id.innerHTML = some string of HTML). Write the VBscript for the p2b and answer subs. Show NO HTML.