1. (50 points) The form (named f1) to the left contains a string in a textbox named txt to be displayed in 3D. When the "execute p1" button is clicked, a javascript function sub named p1 is executed. This sub:
retrieves the string to be displayed from element 0 of the form;
determines the string's color from radio button checked (elements 1 or 2 or 3);
the "3D Orientation" radio button checked (elements 4 or 5 or 6 or 7);
the "font-family" name from the select (element 8);
and the "Apparent 3D Depth" from the textbox (element 9).
The 3D effect is created by writing the string multiple times in black, each time moving the position of the string: up or down by 1 pixel AND left or right by one pixel and the last time the string is written a non-black color is used. To create this "drop shadow" effect:
(1) create an empty string;
(2) add SPAN blocks to this empty string (use the value from item (e) above to
determine how many SPAN blocks to add);
Each SPAN contains the string from (a) above.
Each SPAN block has CSS attributes:
color is black for all images (except the last one where you use item (b) above)
font-family (from elements (d) above, use: document.f1.elements(8).options(document.f1.elements(8).selectedIndex).text
position (always absolute)
top (the first image is at 5 px, then for subsequent images see the table below)
left (the first image is at 5 px, then for subsequent images see the table below)
top and left values change for each span block:
3D Orientation radio chosen
element #
CSS changes to:
left
top
Up & Right
4
+1
-1
Down & Right
5
+1
+1
Up & Left
6
-1
-1
Down & Left
7
-1
+1
(3) When the string of SPAN blocks has been created, place the string in the DIV block with id="p1_out".
2. (50 points) An XML data island with id="centurynames" contains information on US Social Security Administration's "Top 100 Male/Female Names in the Past 100 Years". The DTD and a small partial list of the data is shown to the left. The tags are: (1) r (rank 1 thru 100); (2) mn (male name); (3) mc (male count); (4) fn (female name); (5) fc (female count). Using this XML data, write the javascript program named p2 to perform five tasks:
Produce a 100 row by 5 column HTML table that shows the XML data to the left.
Column contents are: r (rank); mn (male name); mc (male count); fn (female name); fc (female count)
Following the table, show the number of male names that occured more than 1,000,000 times.
Then, show the number of female names that occured more than 1,000,000 times.
Then show the percentage of all the "male names that are in the top 100" of the 166,148,800 "total male births during the last century" (all male births are NOT shown in the XML).
Then show the percentage of all the "female names that are in are top 100" of the 163,307,183 "total female births during the last century" (all female births are NOT shown in the XML).
Notes:
root.childnodes.length is the number of ranks in the XML
root.childNodes(i).childNodes(0).text is "rank"
root.childNodes(i).childNodes(1).text is "male name"
root.childNodes(i).childNodes(2).text is "male name count"
root.childNodes(i).childNodes(3).text is "female name"
root.childNodes(i).childNodes(4).text is "female name count"