MIS 3371 FALL 2011 FINAL PARKS NAME__________________________________________________________

Last 4 Digits of Your Peoplesoft ID ________________
<XML id="polls"> <?xml version="1.0"?>
<!DOCTYPE football_rankings [
<!ELEMENT football_rankings(polldate,poll+)>
<!ELEMENT polldate (#PCDATA)>
<!ELEMENT poll (pollname,team+)>
<!ELEMENT pollname (#PCDATA)>
<!ELEMENT team (#PCDATA)>
]>
<football_rankings>
<polldate>November 28, 2011</polldate>
<poll>
<pollname>BCS</pollname>
<team>LSU</team>
<team>Alabama</team>
<team>Oklahoma State</team>
<team>Stanford</team>
<team>Virginia Tech</team>
<team>Houston</team>
<team>Boise State</team>
   ...many rows omitted...
<team>West Virginia</team>
<team>Southern Miss</team>
<team>Missouri</team>
</poll><poll>
<pollname>AP</pollname>
<team>LSU</team>
<team>Alabama</team>
<team>Oklahoma State</team>
<team>Stanford</team>
<team>Virginia Tech</team>
<team>Arkansas</team>
<team>Houston</team>
<team>Oregon</team>
   ...many rows omitted...
<team>Iowa State</team>
<team>Notre Dame</team>
</poll></football_rankings>
</XML>
1. (50 points) Several NCA football polls rank the University of Houston in the top ten for the week of November 28, 2011. Five if these polls (BCS, AP, USA Today, CBS and TeamRankings.com have polls that show the top 25 teams. An XML file containing this data is stored inside an XML tag with id="polls". A portion of the xml is shown to the left.

When the user clicks this button: , a javascript function named p1 is executed. This function retrieves the XML and creates a 6 column table showing all the rankings as follows:

  • the title row: "Five NCAA Football Pools for ", followed by the date of the poll
  • a heading row with the six column headings: "Rank"; "BCS"; "AP"; "USA TODAY"; "CBS Sports"; and "TeamRankings"
  • twenty five rows each containing:
    1. in column 1: the rank (1 to 25)
    2. in columns 2-6: the team name at that rank in each of the five polls
  • if a table cell has the value "Houston", set the background color of the cell to "red"
Accumulate the table data in a single string named os. When you are done, create a new page on-the-fly with table results.
Show only the javascript for p1. Show NO HTML.
Notes:
  • the poll date is: root.childNodes(0).text
  • the poll names are: root.childNodes(j).childNodes(0).text
        where the range of j is: j = 1 ; j < root.childNodes.length
  • team name is:
    root.childNodes(j).childNodes(i).text
        where the range of i is: i = 1 ; i < root.childNodes(1).childNodes.length

        NOTE: all the following are the same:
        root.childNodes(1).childNodes.length = 26;
        root.childNodes(2).childNodes.length = 26;
        ...
        root.childNodes(5).childNodes.length = 26;

2. (50 points) Two textboxes named t2 and fs are in a form named f2 are shown below. When the user clicks the button below a javascript function named p2 is executed.
t2   fontsize  
The sub:
  1. retrieves the string t2 from the HTML page (the first textbox)
  2. retrieves the string fs from the HTML page (the second textbox)
  3. creates a string which places the value of t2 in a span block that has the style property "font-size" set equal to the value of fs.
  4. then, place this span block in a one cell table (i.e., a one row and one column table). This table has an id="t2table" and style properties of:
    "position:absolute;top:30px;left:300px;background-color:white;border:solid black 1px;"
  5. place the resulting string (i.e., the span with text in the table) in a varibale named os1.
  6. place os1 on the page in the predefined SPAN tag with id="p2out" (i.e., p2out.innerHTML=os1)
    Note: p2out is already defined on the HTML page.
  7. once placed on the page, you can now determine the height and width of the table from this:
       table_height = document.getElementById("t2table").offsetHeight
       table_width = document.getElementById("t2table").offsetWidth
  8. using these two values, surround the table on all four sides with red holiday ornament images (<img src='sredball.gif'>). This image is 10 pixels by 10 pixels.
    each image tag with also have style attribute: position:absolute and top and left.
  9. there are to be nhor=int(table_width/10)+1 images above and below the table
  10. there are to be nvert=int(table_height/10)+2 images on the left and right of the table
  11. create a string os2 that will contain all the image tag strings with top and left and position for each:
    1. ornaments above the table t2box start at top=20, left=290, and are 10 pixels apart horizontally
    2. ornaments below the table t2box start at top=20+(nvert-1)*10 , left=290, and are 10 pixels apart horizontally
    3. ornaments to the left of the table t2box start at top=20, left=290, and are 10 pixels apart vertically
    4. ornaments to the right of the table t2box start at top=20, left=290+nhor*10 , and are 10 pixels apart vertically
    5. all ornament tags have position:absolute
  12. to place all this on the page: p2out.innerHTML=os1+os2
Show NO HTML, Show only the javascript for p2.