MIS 3371 Parks Summer 2018 Exam 2 Answers

 1. (50 point) The textarea named ta1 is shown to the left. It is in a form named f1 and contains XML data on the top and bottom 50 baby names for boys and girls. The list is taken from US Social Security Administration Top 1,000 Baby Names. The DTD for the data is: 
<?xml version="1.0"?>
<!DOCTYPE topbot [      
<!ELEMENT topbot(row_item+)>
<!ELEMENT row_item (topboyrank,topboyname,topboycount,botboyrank,botboyname,
botboycount,topgirlrank,topgirlname,topgirlcount,botgirlrank,botgirlname,botgirlcount)>
<!ELEMENT topboyrank (#PCDATA)> [data values from 1 → 50] 
<!ELEMENT topboyname (#PCDATA)> 
<!ELEMENT topboycount (#PCDATA)>
<!ELEMENT botboyrank (#PCDATA)> [data values from 951 → 1000] 
<!ELEMENT botboyname (#PCDATA)> 
<!ELEMENT botboycount (#PCDATA)>
<!ELEMENT topgirlrank (#PCDATA)> [data values from 1 → 50] 
<!ELEMENT topgirlname (#PCDATA)> 
<!ELEMENT topgirlcount (#PCDATA)>
<!ELEMENT botgirlrank (#PCDATA)> [data values from 951 → 1000] 
<!ELEMENT botgirlname (#PCDATA)> 
<!ELEMENT botgirlcount (#PCDATA)>]
When the "Execute p1" button is clicked:
   1. roll the XML data into a 51 row by 12 column table
   2. In the last row of the table (row 51), in columns 3,6,9,12, respectively place:
      the total number of boy names in the top 50 (sum of column 3)
      the total number of boy names in the bottom 50 (between 951 and 1,000) (sum of column 6)
      the total number of girl names ranked in the top 50 (sum of column 9)
      the total number of girl names ranked in the bottom 50 (between 951 and 1,000) (sum of column 12)
      All the other 8 cells of the last row are empty
   3. place the table in the DIV with id="p1_out".
The row loop is: for (i=0 ; i < root.childNodes.length ; i++)
The column loop is: for (j=0; j < 12; j++)
Each column value is: root.childNodes[i].childNodes[j].childNodes[0].nodeValue
Begin your code assuming root has already been defined in your code.
Provide NO table heading row. Show only the javascript for p1.
This is the DIV with id='p1_out'

Icon Data

 2. (50 points) The textarea to the left is named ta2 and is in a form named f2. It contains information to place icons on a map of Lake Lanier. Two icon types are used: (1) "boat.png" for the location of the patrol boats; and (2) "incident.png" for the location of any safety incident requiring the patrol boat's help. The format for the icon's five data values data is: 
icon type          boat or incident, codes are "B" or "I", followed by a comma;
sequence number    an integer (boat number or incident number), followed by a comma;
top                icon's vertical map position (top), followed by a comma;
left               icon's horizontal map position (left), followed by a comma;
description        text followed by a ";" (except for the last one)
The DIV with id="p2_out" contains:
  1. a 1000 pixel wide x 667 pixel map image of Lake Lanier (the id of this image is "map");
  2. a SPAN block with id="summary" (with a white background and 1 pixel black border)
  3. seven icon images with id values from "ic0" to "ic6".
All 8 of the images above have: position set to "absolute" and width set to zero (and are thus initially invisible). The SPAN block is also initially empty. When the "Execute p2" button is clicked, the function p2 is executed. It:
  1. sets the string os to the actual date/time. Use: os = new Date( ).toLocaleString( );
  2. sets the width of the image with id="map" to "1000px"
  3. retrieves the data from ta2 and splits it on the ";" character.
  4. For each icon:
    1. if icon type is "B", sets the image's src property value to "boat.png" else sets it to "incident.png"
    2. set icon's CSS property values of top and left to the 3rd and 4th value of this icon's string
    3. set icon's CSS property values of height to 24 pixels and width to 36 pixels
    4. adds to the string os:
          a <br> tag
          the word "Boat" OR "Incident", depending upon the icon type
          the sequence number, followed by a hyphen
          the description
  5. places the string os in the SPAN block with id="summary"
Show only the javascript for p2.
this is DIV with id="p2_out"