MIS 3371 -- SUMMER 2012 -- FINAL EXAM ANSWERS -- PARKS

Time to Display

This is the span block with id="fred"

1. (50 points) The data in the two tables (below right) specify how to draw the images that make up characters that appear on a digital clock face.
Four Attributes The 12 possible digital clock characters
Images to include (y=yes)
image
src
value
height
OR
width
offset
from
top
offset
from
left
0123456789:blank
1dig_top.gif height=10 2 0 ynyynynyyynn
2dig_left.gif width=10 0 1 ynnnyyynyynn
3dig_right.gif width=10 0 29 yyyyynnyyynn
4dig_middle.gifheight=1030 0 nnyyyyynyynn
5dig_left.gif width=10 31 1 ynynnnynynnn
6dig_right.gif width=10 31 29 yynyyyyyyynn
7dig_bottom.gifheight=1059 0 ynyynyynynnn
8dig_colon.gif width=10 15 15 nnnnnnnnnnyn
dig_top
dig_middle
dig_bottom
dig_left
dig_colon
dig_right
The textbox above named t is in a form named f1. When the button labelled "Show Time" is clicked a javascript function named p1 is executed. Data from the tables above are specified in the following six javascript declarations in p1 (don't write these).
    dchars = "0123456789: "     imgval = Array("dig_top.gif","dig_left.gif","dig_right.gif","dig_middle.gif","dig_left.gif","dig_right.gif","dig_bottom.gif","dig_colon.gif")
    hw = Array(" height='10'"," width='10'", " width='10'", " height='10'", " width='10'", " width='10'", " height='10'"," width='10'")
    tp = Array(2,0, 0,30,31,31,59,15)
    lf = Array(0,1,29, 0, 1,29, 0,15)
    let = Array("yyynyyyn","nnynnynn","ynyyynyn","ynyynyyn","nyyynynn","yynynyyn","nynyyyyn","ynynnynn","yyyyyyyn","yyyynynn","nnnnnnny","nnnnnnnn") The sub p1:
    1. retrieves the time value from the textbox named t1;
    2. constructs several HTML image tags for each character
    3. accumulates these image files in a string (named os);
    4. when done, displays in the string of image tags (i.e., os) in the SPAN block with id="fred" shown above.
Each character in the textbox (either: 0,1,2,3,4,5,6,7,8,9,0,:, or a blank space) is created by using some of the six images shown above to the right. Which ones are used are shown by the "y" or "n" below each character in the table above (in the program use the let array). Each HTML image tag has:
    (a) a specific file name (i.e., src from the imgval array);
    (b) either a width OR height attribute (i.e., from the hw array);
    (c) style="position:absolute;" AND ;
    (d) a value for top (i.e., from the tp array);
    (e) a value for left (i.e., from the lf array); and
Each image looks like this:

<img src="[value from imgval array]" [value from the hw array] style="position:absolute;top:[value from tp array]px;left:[value from the lf array]">

The time characters start at 30 pixels from the left of the page. Each time character starts 40 pixels further to the right than the previous one (so the first character starts at left=30, the second at left=70, the third at left=110...etc.). All time characters start 90 pixels from the top of the page.

Write only the javascript code for p1. Show NO HTML.

<XML id="t500"><?xml version="1.0"?>
<!DOCTYPE top500highschools [
<!ELEMENT top500highschools(school+)>
<!ELEMENT school (rank,name,city,state,str,gr,tests,cb,sat,ns)>
<!ELEMENT rank (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT city (#PCDATA)>
<!ELEMENT state (#PCDATA)>
<!ELEMENT str (#PCDATA)>
<!ELEMENT gr (#PCDATA)>
<!ELEMENT tests (#PCDATA)>
<!ELEMENT cb (#PCDATA)>
<!ELEMENT sat (#PCDATA)>
<!ELEMENT ns (#PCDATA)>
]>
<top500highschools>
<school><rank>1</rank><name>School of Science and Engineering Magnet</name> <city>Dallas</city><state>TX</state><str>21</str><gr>100</gr> <tests>17.2</tests><cb>100</cb><sat>1786</sat><ns>2.874</ns></school> <school><rank>2</rank><name>School for the Talented and Gifted Magnet</name> <city>Dallas</city><state>TX</state><str>15</str><gr>100</gr> <tests>16.7</tests><cb>93</cb><sat>1885</sat><ns>2.807</ns></school> <school><rank>3</rank><name>BASIS Tucson</name> <city>Tucson</city><state>AZ</state><str>12</str><gr>100</gr> <tests>13.2</tests><cb>96</cb><sat>1854</sat><ns>2.531</ns></school> <school><rank>4</rank><name>Stanton College Preparatory</name> <city>Jacksonville</city><state>FL</state><str>22</str><gr>99</gr> <tests>11.8</tests><cb>99</cb><sat>1864</sat><ns>2.175</ns></school>
        ...lotsa schools NOT shown here...
<school><rank>497</rank><name>George Washington</name> <city>San Francisco</city><state>CA</state><str>34</str><gr>95</gr> <tests>1.9</tests><cb>91</cb><sat>1441</sat><ns>0.092</ns></school> <school><rank>498</rank><name>South Hamilton</name> <city>Jewell</city><state>IA</state><str>12</str><gr>97</gr> <tests>0.2</tests><cb>87</cb><sat>NA</sat><ns>0.084</ns></school> <school><rank>499</rank><name>Bartow IB School, Summerlin Academy</name> <city>Bartow</city><state>FL</state><str>13</str><gr>90</gr> <tests>2.7</tests><cb>86</cb><sat>1666</sat><ns>0.082</ns></school> <school><rank>500</rank><name>New Century Technology</name> <city>Huntsville</city><state>AL</state><str>18</str><gr>95</gr> <tests>1.3</tests><cb>88</cb><sat>NA</sat><ns>0.081</ns></school> </top500highschools> </XML>
2. (50 points) An XML data island with id=t500 contains information on Newsweek's 2011 "Top 500 US High Schools" in the USA. The DTD and a small partial list of the data is shown to the left. The ten tags for each school are: (1) Rank; (2) Name; (3) City; (4) State; (5) Student Teacher Ratio; (6) Graduation Rate; (7) AP/IB Tests; (8) % College Bound; (9) Average SAT; (10) Newsweek Score. Using this XML data, write the javascript program named p2 to perform four tasks:
  1. Produce a ten column 500 row HTML table to display the XML's entire content (make NO column headings)
  2. Create a 2 row 50 column table that shows the two-letter state in row 1 and the number of schools in the top 500 in the state in row 2. Assume the following 50 element array of state name abbreviations is available in p2 like this:

    var s = new Array('AK','AL','AR','AS','AZ','CA','CO','CT','DE','FL','GA','GU','HI','IA','ID','IL', 'IN','KS','KY','LA','MA','MD','ME','MH','MI','MN','MO','MS','MT','NC','ND','NE','NH','NJ','NM','NV', 'NY','OH','OK','OR','PA','PR','PW','RI','SC','SD','TN','TX','UT','VA','VI','VT','WA','WI','WV','WY');

    There is also a fifty element array named c used to store these counts like this:

    var c = Array (0,0,0,0,0,0,0...fifty zeroes here...,0,0,0,0,0,0,0,0,0)

    Do not write these array declarations on your exam. Just assume they exist in p2

  3. Show the school with the lowest "Graduation Rate" on a single line (Show the tag value for: name; city; state; and gr -- DO NOT USE A TABLE)
  4. Show the school with the highest "Average SAT" on a single line (Show the tag value for: name; city; state; and sat -- DO NOT USE A TABLE)
   any tag value is root.childNodes[i].childNodes[j].text ( j is 0 through 9; i is 0 thru 499 )
  there are root.childNodes.length school tags

When this button is clicked, the javascript function named p2 is executed and it produces the output for the four required tasks above on a new HTML page (i.e., on-the-fly).

Show NO HTML. Show only the javascript for p2.

Data from here:
http://www.thedailybeast.com/newsweek/features/2011/americas-best-high-schools.html