<?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).
<span style='position:absolute;top:[some top_value here]px;
top_value = 0 for the 1st row, 70 for the 2nd, 140 ... etc. | |
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(). |