|
MouseOver the Presidents in Inauguration Order | 1. (50 points) The HTML page shown to the left contains a six row table. Each row contains two columns. Initially, the first cell in each row contains a gif image. The sequence of first images in the six rows is: clev.gif, roos.gif, wash.gif, fill.gif, jeff.gif and taft.gif. Initially the second column of each row begins with a gif named whitepres.gif. This gif is a solid white image. All gif images on the page are 60 pixels wide and 90 pixels tall. Following the whitepres.gif in the second column of each row is a text box that can contain 25 characters. All these text boxes are initially blank. A button at the bottom of the page is labelled "TRY AGAIN". When pressed the page is reloaded. The user is directed to mouseover the presidential images in the first column in the order in which they were inaugurated as president. When the user mouses over an image, the image is made to appear in the second column in the order in which they were moused over and the original image in the first column is replaced by the whitepres.gif (e.g., if the user first mouses over the sixth image, this taft.gif appears in the first row as the second image in the row and the original taft.gif is replaced by the whitepres.gif, then if the user mouses over the fifth image second, this jeff.gif appears in the second row as the second image and the original jeff.gif is replaced by the whitepres.gif. Then if the third mouseover were to be on the fourth image, this fourth image would appear as the second image on the third row, etc.). When the user has moused over six images, each image will appear once as the second image in one of the rows and all the first images in each row are whitepres.gif. Additionally, when an image is moved to the second column position, the adjacent textbox is filled with the president's inauguration date and name. This data is to be stored in an array named ptext. The six data values for ptext are: ptext[0]="1885 Grover Cleveland"; ptext[1]="1901 Theodore Roosevelt"; ptext[2]="1789 George Washington"; ptext[3]="1850 Millard Fillmore"; ptext[4]="1801 Thomas Jefferson"; ptext[5]="1909 William Howard Taft". Note that the data in ptext is in the same sequence as the original president's images in the table rows. Once the user has moused over six images (i.e., the first column of images are all white and the second column of images contains: (1) the images in the sequence the user moused over them and (2) the corresponding inauguration dates and names in the textboxes) show the user whether their answer is correct or not using an alert box. The correct sequence of mouseovers is: row 3; row 5; row 4; row 1; row 2; then row 6 (note this is shown if you examine the inauguration dates ptext). Write the HTML and the Javascript to perform this task. Name your Javascript function pick; the form is named fred. Be sure NOT TO ALLOW a mouseover on a white image in the first column to be processed. |
2. (50 points) An HTML page is made up of a frameset with two columns. The left page contains a form named xform. This form contains:(1) a single hidden variable named x and the value of x is a string of 100 integers; and (2) a button with the value "GO". The right page is initially blank. When the "GO" button is clicked, a sub named addthem is executed. This sub: (1) stores the first 50 integers in x in an array named first; (2) stores the last 50 integers of x in an array named second; (3) adds the corresponding value of first to the value in second and stores the result in a 50 element array named third; (4) then creates a page on-the-fly in the second frame with the XML representation of the values of third stored in a textarea named ta (the textarea has 40 rows and 20 columns). The form on this new page is named c. The outside tag for the XML is <sums>. Each value of the array third is surrounded by a tag that shows the row number of the value: <row1>, <row2>, <row3>,...<row50>. The contents of the tags are the values of third. A submit button is included in the second frame below the textarea that submits the contents of ta to "http://auckland.bauer.uh.edu/Students/parks/echoxml.exe". Show ONLY the VBScript code for addthem.