MIS 3371 Parks Fall 2016 Final Exam

(for answers in IE Click "View", then "Source")

Name___________________________________________ Last 4 digits PSID___________________

1. (50 points) The top 100 places to live in the US are shown in XML in the textarea to the left. The city's livability score is measured by adding up eight measures for each city (the titles for the measures are in the array titles:

var titles=["Economic","Health","Housing","Civic","Educational","Amenities","Demographics","Infrastructure"];

These measures are referred to as the tags: s1 → s8. The total of the 8 measures is the liveablity score (the tag named score below).
The DTD for the XML is:
      <?xml version="1.0"?>
      <!DOCTYPE livability [
      <!ELEMENT livability(cty+)
      <!ELEMENT cty (rnk,citystate,score,s1,s2,s3,s4,s5,s6,s7,s8)>;
             all eleven XML elements (tag names: rnk → s8) above are:
      <!ELEMENT tag name (#PCDATA)>]
Write the javascript function p1. Assume the function contains the code necessary to retrieve the XML from the textarea to the left. Assume the following are available in p1:
a) number of cities is: root.childNodes.length
b) the eleven data elements for each city are:
   root.childNodes[i].childNodes[j].childNodes[0].nodeValue
   where i=0 to root.childNodes.length (city loop)
      and
   where j=0 to root.childNodes[i].childNodes.length (loop for the 11 values)
The function p1 should produce a 100 row by 11 column table (with headings). Show no HTML. Show only the javascript for p1.


Data from: http://livability.com/best-places/top-100-best-places-to-live/2016/ranking-data
this is the DIV with id='p1out'
Text to display:

this is the DIV with id="p2out"
 2. (50 points) There are 26 image files that are 30 pixels wide and 23 pixels tall. Each image is of a character of the alphabet (a → z) and the name of the image file is "t" followed by the character (a → z) and then ".gif". (e.g., the image filename for the character "a" would be "ta.gif", for the character "b" the image filename is "tb.gif", etc.).
Write the javascript function p2 that is executed when the "execute p2" button below is clicked. The function p2 performs the following actions:
1. Retrieves the textbox value shown to the left (It is named tb and is in the form is named f2 ).
2. Creates an empty string named os.
3. Creates two variables:topval and leftval and initializes both to zero.
4. Examines each character in tb.
   a. For each non-blank character in tb, add the image tag for the character to os:

<img src='image filename' style='position:absolute;top:"+topval+"px;left:"+leftval+"px;'>

      Then add 30 to leftval
   b. For each blank character in tb, DO NOT add an image to os.
       Instead set leftval to zero and add 25 to topval
5. Place the resulting os string into the DIV block with id="p2out"

Show no HTML. Show only the javascript for p2