EXAM 2 MIS 3371 Parks Spring 2019

1. (50 points) The textarea to the left contains data for the largest 500 cities in Texas (from https://www.homesnacks.net/cities/cities-in-texas/). The data is organized in XML with the following DTD:
     <DOCTYPE texascities [
     <ELEMENT texascities(city+)>
     <ELEMENT city(rank,cityname,p1,p2,g)>
     <ELEMENT rank(#PCDATA)>
     <ELEMENT cityname(#PCDATA)>
     <ELEMENT p1(#PCDATA)>
     <ELEMENT p2(#PCDATA)>
     <ELEMENT g(#PCDATA)>]
When the button labelled execute p1 is clicked the javascript function named p1() is executed. Assume this function loads the XML from the textarea (DO NOT write this part. Assume root is the <texascities> tag). This function then produces:
  • a 501 row by 5 column table
  • the first row of the table is a heading row of your own design that describes the data in each column
  • for each city create a row with the following five columns:
    1. This is the rank from 1 → 500. Named rank in the DTD above
    2. City name. Named cityname in the DTD above.
    3. Current city population. Named p1 in the DTD above.
    4. 2010 population. Named p2 in the DTD above.
    5. Growth percentage (2010-2019) Named g in the DTD above.
  • following the table, display the city with the largest growth rate (display both the city name AND the growth rate) Place the results in a DIV block with id="p1out".
The following definitions apply:
  City loop:             for ( i=0; i < root.childNodes.length; i++ )
  Rank:                  root.childNodes[i].childNodes[0].childNodes[0].nodeValue
  City Name              root.childNodes[i].childNodes[1].childNodes[0].nodeValue
  2019 Population (p1):  root.childNodes[i].childNodes[2].childNodes[0].nodeValue
  2010 Population (p2):  root.childNodes[i].childNodes[3].childNodes[0].nodeValue
  Growth Percentage (g): root.childNodes[i].childNodes[4].childNodes[0].nodeValue
Show no HTML. Show only the javascript for p1
[this is the DIV with id='p1out']

FONT-TESTER
1. Font 2. Font-size
3. Font Color: Red Green Blue
4. Background Color: Red Green Blue
5. Enter the text for font test below. Then click "GO".

2. (50 points) The form to the left (named "f2") provides the user with choices to display a formatted string in the DIV block named "poster" shown to the left.
  1. A select named "sel" is used to choose the font. Option values are:
    Courier, Lucida Console, Comic Sans MS, Georgia and Monaco
  2. A textbox named "fz" to holds the font-size. Initially set to 14.
  3. Three text boxes to define the r,g,b foreground values (i.e, the font color)
    and are named "r1", "g1" and "b1"
    Initial values: red is 0; g is 0; blue is 255. This is a bright blue color.
  4. Three text boxes to define the r,g,b background color values (named "r2", "g2" and "b2")
    Initial values: red is 243; g is 243; blue is 203. This is a pale yellow color.
  5. A textarea named "ta" contains the string to be formatted and displayed.
    An Alan Turing quotation is shown initially
When the user clicks the button labeled "GO", the javscript function p2 is executed that:
  1. sets the fontFamily property of "poster" to: the value of the "sel" element
  2. sets the fontSize property of poster to: the value of the "fz" element + the string "px"
  3. sets the color property of "poster" to: "rgb(value1,value2,value3)"
    where value1 is "r1", value2 is "g1", value3 is "b1"
  4. sets the backgroundColor property of "poster" to: "rgb(value1,value2,value3)"
    where value1 is "r2", value2 is "g2", value3 is "b2"
  5. adds the contents of the textarea named "ta" to the DIV block with id="poster".
    Each word in "ta" should be on a line by itself (left justified -- not centered).
Show no HTML. Show only the javascript for p2.