Tread Width (w) in 1/10 inch  Riser Height (r) in 1/10 inch  Wood Thickness (t) in 1/10 inch  Number of Steps (n)	1. (50 points) The form (left) allows the user to enter a description of a staircase: (1) Width of the stair tread in units of 1/10 inch; (2) Height of the stair riser in units of 1/10 inch; (3) Thickness of the wood boards used to cut BOTH the treads and the risers; and (4) the number of stairs (steps) in the staircase. These values are in a form named f1. When the button labelled "Draw the Stairs" is clicked a javascript function named p1 is executed. The sub retrieves the four textbox values and stores them in variable: (1) w; (2) r; (3) t; and (4) n, respectively.
The image shown above and to the left uses these four values and two gif files to draw a partial cross-section of how two treads and a riser are assembled. Assume 1 pixel = 1/10 of an inch. In the example, the horizontal tread shown is created by streching the gif file "black1x1.gif" to be 85 pixels wide (this is w) and 15 pixels tall (this is t). The vertical riser shown is created by stretching the gif image named "blue1x1.gif" to be 15 pixels wide (this is t) and 45 pixels tall (this is r). The riser is place below the tread with its right side in the same horizontal location as the right side of the tread above. The next tread below the first riser has the same left distance as the riser above it as shown above. Create a new page on-the-fly that shows the entire cross-section the staircase with n steps. Assume the upper left corner of the first (top) tread is 100 pixels from the Top of the page and 100 pixels from the Left side of the page. Each tread image and each riser image should have the appropriate height and width attributes set based on w, r, and t. Each tread image and each riser image should be placed in a <span> block with style parameters: "position:absolute;" and a Top and Left value set to create the desired staircase image. Show NO HTML. Show only the javascript for p1.
<XML id="mbm"> <?xml version="1.0"?> <!DOCTYPE marx_brothers_movies [ <!ELEMENT marx_brothers_movies (movie+)> <!ELEMENT movie (title, year,role+)> <!ELEMENT title (#PCDATA)> <!ELEMENT year (#PCDATA)> <!ELEMENT role (actor, character)> <!ELEMENT actor (#PCDATA)> <!ELEMENT character (#PCDATA)> ]> <marx_brothers_movies><movie> <title>The Cocoanuts</title><year>1929>/year> <role><actor>Zeppo Marx</actor> <character>Jamison</character></role> <role><actor>Groucho Marx</actor> <character>Hammer</character></role> <role><actor>Harpo Marx</actor> <character>Harpo</character></role> <role><actor>Chico Marx</actor> <character>Chico</character></role> <role><actor>Margaret Dumont</actor> <character>Mrs. Potter</character></role> </movie><movie> <title>Animal Crackers</title><year>1930>/year> <role><actor>Groucho Marx</actor> <character>Captain Jeffrey T. Spaulding</character></role> <role><actor>Harpo Marx</actor> <character>The Professor</character></role> <role><actor>Chico Marx</actor><character>Signor Emanuel Ravelli</character></role> <role><actor>Zeppo Marx</actor><character>Horatio Jamison</character></role> <role><actor>Margaret Dumont</actor><character>Mrs. Rittenhouse</character></role> </movie><movie> <title>Monkey Business</title><year>1931>/year> <role><actor>Groucho Marx</actor><character>Groucho</character> </role> <role><actor>Harpo Marx</actor><character>Harpo</character></role> <role><actor>Chico Marx</actor><character>Chico</character></role> <role><actor>Zeppo Marx</actor><character>Zeppo</character></role> </movie><movie> <title>Horse Feathers</title><year>1932>/year> <role><actor>Groucho Marx</actor> <character>Prof. Quincy Adams Wagstaff</character></role> <role><actor>Harpo Marx</actor> <character>Pinky</character></role> <role><actor>Chico Marx</actor> <character>Baravelli</character></role> <role><actor>Zeppo Marx</actor> <character>Frank Wagstaff</character></role> </movie> ...lotsa line omitted ... </marx_brothers_movies></XML>	2. (50 points) The XML data to the left is stored inside an <XML> tag with id="mbm". The XML DTD shown to the left describes a "marx_brothers_movies" XML file that shows for each "movie", the "title", "date" and many "role" tags (which specify each "actor" and their "character"). MARX BROTHERS MOVIES The Cocoanuts (1929) Zeppo Marx Jamison Groucho Marx Hammer Harpo Marx Harpo Chico Marx Chico Margaret Dumont Mrs. Potter Animal Crackers (1930) Groucho Marx Captain Jeffrey T. Spaulding Harpo Marx The Professor Chico Marx Signor Emanuel Ravelli Zeppo Marx Horatio Jamison Margaret Dumont Mrs. Rittenhouse ...Lotsa rows omitted... Margaret Dumont appears in 7 movies. The desired output is a two-column table that has: A heading row that says "MARX BROTHERS MOVIES" in bold with a gray background. For each "movie": A row with "title" followed by the "date" in parenthesis centered in bold. A row for each role shows the "actor" in the first column and the character they played in the second column. Following the table is a count of the number of movies which have "Margaret Dumont" as an "actor". The number of "movie" tags is root.childNodes.length The number of children for EACH "movie" is root.childNodes(i).childNodes.length (i is the movie index) The "title" is root.childNodes(i).childNodes(0).text The "year" is root.childNodes(i).childNodes(1).text The "role" tags begin at 2 and go to root.childNodes(i).childNodes.length e.g., using the index j for "role" index, then 2 <= j < root.childNodes(i).childNodes.length. So: "actor" = root.childNodes(i).childNodes(j).childNodes(0).text; "character" = root.childNodes(i).childnodes(j).childNodes(1).text; Show the javascript for p2 that rolls out the entire XML structure into the HTML table and produces the "Margaret Dumont" count -- as shown above. Show NO HTML. Show NO XML. Data from Internet Movie Database