MIS 3371 FALL 2019 EXAM 2 AMSWERS PARKS
 
TOP 100 SMALL TOWNS & CITIES IN THE U.S.A.

1. (50 points) The textarea to the left contains XML for the TOP 100 SMALL TOWNS & CITIES IN THE USA (from here). The DTD is:

      <?xml version="1.0"?>
      <!DOCTYPE besttowns[
      <!ELEMENT besttowns( state + )>
      <!ELEMENT state (statename, town + )>
      <!ELEMENT statename (#PCDATA)>
      <!ELEMENT town (townname, reason, population)
      <!ELEMENT townname (#PCDATA)>
      <!ELEMENT reason (#PCDATA)>
      <!ELEMENT population(#PCDATA)>]

In the function named p1, assume the code to load the XML data from the textarea into the root object in javascript has already been written. (Don't write this code, just start using root).

1. Create a table that shows the 100 best small towns:
    place each of the statename values on a row by itself with colspan='3'
    set the background color of this row to 'lightgray'
    following the statename row, for each town in the state, make a row that has 3
    columns that contain: townname; reason; and population
2. count the number of towns that appear in the state and remember the count and
    the state with the largest count
3. after the table has been produced, display the state name with the most towns in
    the table and the number of towns in that state.

NOTES:
    the number of states is: root.childNodes.length
    the state loop is: for ( i=0; i < root.childNodes.length; i++ )
    the statename is: root.childNodes[i].childNodes[0].childNodes[0].nodeValue
    the town loop is: for( j=1; j < root.childNodes[i].childNodes.length; j++ )
    townname is: root.childNodes[i].childNodes[j].childNodes[0].childNodes[0].nodeValue
    reason is: root.childNodes[i].childNodes[j].childNodes[1].childNodes[0].nodeValue
    population is: root.childNodes[i].childNodes[j].childNodes[2].childNodes[0].nodeValue

Write NO HTML. Write only the javascript for p1.

this is the DIV with id="p1out"

 

 

 

 

 

 

 

 
 


DIV with
id='diamond'

textarea ta2

2. (50 points) Below the image to the left is a textarea named "ta2" in a form named "f2". This textarea contains a string composed of nine position,name pairs: like this:
(centerfield,Jamison;leftfield,Martinez;rightfield,Gonzales,...)
Each position and player name are separated by a comma. There is a semicolon following each player name (except for the last one). There is also a button labelled "execute p2". When the button is clicked the javascript function named p2:

A. Places the image of a baseball field in the DIV block with id="diamond"; uses the image source "ballfield.png"; sets z-index to 1; and sets the image width to "400px".

B. Places each player's name on the ball field image in a SPAN block. The SPAN block will have five style attributes:
  1. position:absolute;
  2. font-size:16px;
  3. z-index:2;
  4. the top pixel position for each of the 9 names are defined by:
         tp = [ 10, 30, 30, 50, 50, 80,100, 80,160];
  5. the left pixel position for each of the 9 names are defined by:
         lft = [200, 80,320,150,250,120,200,280,200];
      Adjust the left pixel position for the size of each player's
      name by subtracting:
            (the number of characters in the last name) * 8.5) / 2
      from the value of left shown above in the array named lft.

C. Appends the SPAN blocks to the DIV with id="diamond".

Show no HTML. Show only the javascript for p2. Image from here.