MIS 3371 FALL 2011 FINAL PARKS ANSWERS
id="time_out"
Clock Width (cw) 		1. (50 points) The clock (on the left -- currently 100 pixels square) is made from 4 images. It now displays: 7:00:50.
A small version of background image tick0000.gif is shown to the left. The format on the clock face is now:
<img id="cback" src="tick0000.gif" style="width:100px;z-index:1;position:absolute;top:20px;left:0px;">
One of 60 "minute hand" images clk0000.gif thru clk0059.gif
A small version of "clk0000.gif" is shown to the left. The format on the current clock face is:
<img id="mt" src="clk0000.gif" style='z-index:3;position:absolute;top:20px;left:0px;width:100px;'>
One of 60 "seconds dot" images sec0000.gif thru sec0059.gif
A small version of "sec0050.gif" is shown to the left. The format on the clock face is now:
<img id="sc" src="sec0050.gif" style='z-index:2;position:absolute;top:20px;left:0px;width:100px'>
An "hour hand" image made from the same sixty images used for the minute hand -- but reduced in size by 66% and offset at the top and left to place the image at the center. A small version of "clk0035.gif" is shown to the left. The format on the clock face is now:
<img id="hr" src="clk0035.gif" style='z-index:4;position:absolute;top:37px;left:17px;width:66px;'>
Only the white or red pixels are visible in the "sec0000 thru sec0059 images AND in the clk0000 thru clk0059 images. All other pixels in the images are transparent. All pixels are visible in the tick0000.gif above. When the "p1" button is clicked a javascript function named p1 is executed. This sub has one line of code: vt_name2 = setInterval ("p3",1000). This code creates a interval timer that executes the sub named p3 every 1000 milliseconds (i.e., every second). Using document.getElementByID("id value").style.css property, document.getElementById("id value").src or innerHTML, change the ten CSS property and src values shown in the ten shaded cells below in the sub p3. Show NO HTML, Show only the javascript for p3.
id valuez-indexwidth topleftimage name for srcto calculate values for image name
cback1cw 20 0tick0000.gifdoes not apply
mt 2cw 20 0clk00[min_value].gifmin_value=Minute(Time) [returns an integer 0 to 59]
convert min_value to 2 digit string (e.g., 3 → "03", 45 → "45")
sc 3cw 20 0sec00[sec_value].gifsec_value=Second(Time) [returns an integer 0 to 59]
convert min_value to 2 digit string (e.g., 3 → "03", 45 → "45")
hr 4cw*0.66 20+(cw-cw*.66)/2 (cw-cw*.66)/2clk00[hr_value].gifhr_val=Hour(Time) [returns an integer 0 to 23]
if hr_value >= 12 subtract 12
hr_value=hr_value*5+min_value/12
convert hr_value to 2 digit string (e.g., 3 → "03", 11 → "11")
time_outSet the innerHTML="Time: "+cstr(Time)
<?xml version="1.0"?>
<!DOCTYPE hubble [
<!ELEMENT hubble (rank_date,base_url,archive_url,page+)>
<!ELEMENT rank_date (#PCDATA)>
<!ELEMENT base_url (#PCDATA)>
<!ELEMENT archive_url (#PCDATA)>
<!ELEMENT page (rank,page_name,txt)>
<!ELEMENT rank (#PCDATA)>
<!ELEMENT page_name (#PCDATA)>
<!ELEMENT txt (#PCDATA)>
]><hubble><rank_date>December 3, 2012</rank_date>
<base_url>http://www.spacetelescope.org/images</base_url>
<archive_url>
http://www.spacetelescope.org/static/archives/images/screen/
</archive_url>
<page><rank>1</rank><page_name>heic1107a</page_name><txt>A rose made of galaxies</txt></page>
<page><rank>2</rank><page_name>heic0715a</page_name><txt>Extreme star cluster bursts into life in new Hubble image</txt></page>
<page><rank>3</rank><page_name>heic0706a</page_name><txt>Stellar Nursery in the arms of NGC 1672</txt></page>
...lotsa rows omitted...
<page><rank>99</rank><page_name>opo9935e</page_name><txt>NGC 2440</txt></page>
<page><rank>100</rank><page_name>opo9935c</page_name><txt>Hubble's Variable Nebula (NGC 2261)</txt></page>
</hubble>
This is the DIV with id="p2out"

 2. (50 points) Information about the top 100 Hubble Space Telescope images are summarized in the XML structure shown to the left. This XML is stored inside an XML tag with id="h". A portion of the XML is shown to the left. When the user clicks this button: , a javascript function named p2 is executed. This function retrieves the XML and creates a 4 column table showing all the Hubble data as follows:
  • the title row (colspan=4): "Top 100 Hubble Space Images for ", followed by the date of the rankings (i.e., the value in rank_date)
  • a heading row with the four column headings: "Rank"; "Page Link"; "Image"; and "Description"
  • one hundred rows, each containing four columns:
      in column 1: display the rank (1 to 100)
      in column 2: make a link to the page like this:
       <a href="base_url/page_name/">page_name</a>
      in column 3" display the image (the image file is "page_name.jpg") -- like this:
       <img id='rank' width='100' src='archive_url/page_name.jpg
       onmouseover='makebig(rank)' [Note: this function sets width to 600px]
       onmouseout='makesmall(rank)'>" [Note: this function sets width back to 100px]
      [Note: the "id" for the image is same as its rank value]
      in column 4: display the txt value
    The javascript functions makebig and makesmall use the id (i.e., rank) to change the image width. Both these functions are already written. DO NOT WRITE THEM. Place the table data in the DIV block with id="p2out". Show only the javascript for p2. Show NO HTML. Notes:
  • the rank_date is: root.childNodes(0).text
  • the base_url is: root.childNodes(1).text
  • the archive_url is: root.childNodes(2).text
  • the page data is found in the range: i = 3 ; i < root.childNodes.length
  • rank is: root.childNodes(i).childNodes(0).text
  • page_name is: root.childNodes(i).childNodes(1).text
  • txt is: root.childNodes(i).childNodes(2).text