MIS 3371 Spring 2014 Final Exam Parks (IE browser only)
<?xml version="1.0"?>
<!DOCTYPE filmquotes[
<!ELEMENT filmquotes (film+)>
<!ELEMENT film (rank,quote,url,filmtitle,yr)>
<!ELEMENT rank (#PCDATA)>
<!ELEMENT quote (#PCDATA)>
<!ELEMENT url (#PCDATA)> <!ELEMENT filmtitle (#PCDATA)>
<!ELEMENT yr (#PCDATA)>
]>
<filmquotes><film><rank>1</rank><quote>Frankly, my dear, I don't give a damn.</quote><url>http://www.afi.com/members/catalog/DetailView.aspx?s=$Movie=1181</url><filmtitle>GONE WITH THE WIND</filmtitle><yr>1939</yr></film> <film><rank>2</rank><quote>I'm gonna make him an offer he can't refuse.</quote><url>http://www.afi.com/members/catalog/DetailView.aspx?s=$Movie=54023</url><filmtitle>THE GODFATHER</filmtitle><yr>1972</yr></film> <film><rank>3</rank><quote>You don't understand! I coulda had class. I coulda been a contender. I could've been somebody, instead of a bum, which is what I am.</quote><url>http://www.afi.com/members/catalog/DetailView.aspx?s=$Movie=51286</url><filmtitle>ON THE WATERFRONT</filmtitle><yr>1954</yr></film>

...lotsa data omitted ...

</filmquotes>

1. (50 points). The XML shown to the left is the AFI's Top 100 Greatest Movie Quotes.
Each of the 100 film quotes contains the elements:
   1. rank -- an integer 1-100
   2. quote -- the text of the quote
   3. url -- the URL of the AFI webpage for the movie
   4. filmtitle -- the movie name
   5. yr -- the year released
When the user clicks this button the javascript function named p1 is executed.
(click and see below). Assume the XML data is placed in the javascript XML object named root. This sub:
   a. creates and displays a 100 row - four column table in the DIV with id="p1out" (at the bottom of this page).
   (at the bottom of the page).
      Columns show:
      1. the numeric rank
      2. the text of the quote
      3. a link to AFI webpage for the movie. The link is created with:
          an anchor tag; the url (from item 3 above);
          and the link text displayed is the filmtitle (from item 4 above)
      4. the release year
   b. After the table is displayed, also show:
      1. the shortest quote in the top 100 (byte size and filmtitle)
      2. the longest quote in the top 100 (byte size and filmtitle)
NOTE 1: Each url value originally contained an "&" sign in the web address
       (these url value are NOT PCDATA).
       So, all these "&" values were converted to "$"
       So, you must convert ALL the "$" characters in the url field back to "&"
       before they are placed on the page.
NOTE 2: the number of nodes in the XML is root.childNodes.length
NOTE 3: the child nodes of film nodes are root.childNodes(i).childNodes(j).text
               j varies from 0 to 4.

Write the javascript for p1. Show NO HTML.
2. (50 points) There are 24 images shown to the left in a DIV block
with id="tout" like this:

<div id="tout" style="position:absolute;top:566px;left:10px;"></div>

The images are arranged in four rows and six columns (there is NO table).
The 24 images are positioned using the style values of top and left.
The images are each 70 pixels by 70 pixels and are named:
"julian0.png" → "julian23.png". These images have been randomly
placed in the "tout" DIV block.
The images are each placed like this:

<span style='position:absolute;top:[some top_value here]px;
left:[some left_value here]px;'>
<img src='julian[some image_number here].png'>
</span>

  • top_value = 0 for the 1st row, 70 for the 2nd, 140 ... etc.
  • left_value = 0 for the 1st column, 70 for 2nd column, 140 ... etc.
  • image_number = 0 through 23

Create a javascript function named p2 that places the images in the right order into the DIV with id="tout" (i.e., "julian1.png" is in the first row-first column, "julian2.png" is the first row-second column,...,"julian23.png" is in the fourth row-sixth column). The images must be in a SPAN block as shown above. The appropriate values for "top" and "left" are needed to create a the "appearance" of single image 420 pixels wide by 280 pixels tall by using 24 images that are all 70 pixels wide and 70 pixels tall in four rows and six columns.
NOTE: do not use the square brackets [ ] shown in the span block above. They are used to tell you where to put the numeric values. Click here to execute p2
Show NO HTML. Show the javascript only for p2().

This is the DIV block with id="p1out"