MIS 3371 Fall 2017 Parks Exam 2 Answers
 1. (50 points) The textarea named ta1 in a form named f1 is shown to the left. The textarea contains population statistics for the largest 51 cities in the US in XML format as defined by the DTD shown here: 
<?xml version='1.0'?>
<!DOCTYPE pops [<!ELEMENT pops(city+)>
<!ELEMENT city (rank,cityname,p2014,p2013,p2010,p2005,p2000,p1990)>
<!ELEMENT rank (#PCDATA)>
<!ELEMENT cityname (#PCDATA)>
<!ELEMENT p2014 (#PCDATA)> [population for 2014]
<!ELEMENT p2013 (#PCDATA)> [population for 2013]
<!ELEMENT p2010 (#PCDATA)> [population for 2010]
<!ELEMENT p2005 (#PCDATA)> [population for 2005]
<!ELEMENT p2000 (#PCDATA)> [population for 2000]
<!ELEMENT p1990 (#PCDATA)> [population for 1990]
]>
  1. retrieve the XML from the textarea
  2. produce a 51 row x 9 column table and place the result in the DIV block with id="p1_out".
  3. Assume the column headings are already prepared and stored in a variable named headings. Use this data for the table heading.
  4. Data for first 8 columns comes from the XML. The value in the 9th column is found by calculating the difference between the 2014 and 1990 populations
    (for both of the two values, first remove commas and then convert to integers).
  5. After the table, show the maximum population gain between 1990 and 2014 (the maximum value in column 9). Show the city name where the maximum occurred.
  6. Also, after the table show the minimum population gain between 1990 and 2014 (the minimum value in column 9). Show the city name where the minimum occurred.
  7. Some cities have a value of "na" for the 1990 population. If this occurs, you cannot calculate the population difference for column 9. If so, display "No Calculation" in column 9.
NOTES:
row loop: for (i=0;i<root.childNodes.length;i++)
column loop (cols 1 →8): for (j=0;j<root.childNodes[i].childNodes.length;j++)
data values (cols 1 →8): root.childNodes[i].childNodes[j].childNodes[0].nodeValue
column 9 = parseInt(root.childNodes[i].childNodes[2].childNodes[0].nodeValue)
           - parseInt(root.childNodes[i].childNodes[7].childNodes[0].nodeValue)
[you must remove the commas in both items BEFORE you do the arithmetic above]
Show only the javascript for p1.
Data is from: https://www.infoplease.com/us/us-cities/top-50-cities-us-population-and-rank
This is the DIV with id='p1_out'

2. (50 points) The same fifty-one city data items in Problem 1 have been rearranged into two arrays in p2: first is an array of 51 strings named city_data. Each city has seven data items separated by semicolons: city and state followed by six population values: 
city_data=["New York, N.Y.     ;8,491,079;8,405,837;8,175,133;8,143,197;8,008,278;7,322,564",
           "Los Angeles, Calif.;3,928,864;3,884,307;3,792,621;3,844,829;3,694,820;3,485,398",
           "Chicago, Ill.      ;2,722,389;2,718,782;2,695,598;2,842,518;2,896,016;2,783,726",
           "Houston, Tex.      ;2,239,558;2,195,914;2,100,263;2,016,582;1,953,631;1,630,553",
           ...
           "Arlington, Tex.    ;  383,204;  379,577;  365,438;  362,805;  332,969;  261,721"];
and a six element array of strings named years that correspond to the six populations values above: 
years = ["2014","2013","2010","2005","2000","1990"];
The user will choose one of the 51 cities from this drop down menu:

Then click this button: that executes the function p2.

  1. The drop down menu is named "sel". The value of the option selected (a city name) is:

    document.getElementById("sel").options[document.getElementById("sel").selectedIndex].text;

  2. Use this city name to find the array element in city_data array for that city
  3. Create a seven row by three column table:
    1. Row one spans three columns and contains the city/state name
    2. Rows 2 through 7 each contain three table cells:
      1. year (2014 → 1990)
      2. population (from elements 1 to 6 of the data in the city_data row)
      3. an image made by using the src='green1x1.gif' and setting the following style properties:
        • set the style height to 30 pixels;
        • calculate: (city population for a specfic year)/10000.0
          then set image's style width to this number of pixels
  4. place the table in the DIV with id="p2_out"
this is div with id="p2_out"