MIS 3371 FALL 2014 FINAL PARKS            Last 4 digits PSID ______________

NAME__________________________________________________________________________________
Top 200 Paid iphone Apps

 1. (50 points) The form (named f1) to the left contains a textarea named d1 which is string of XML. The DTD for this XML is:

<?xml version="1.0"?>
<!DOCTYPE top_200_iphone_apps [
<!ELEMENT top_200_iphone_apps(app+)>;
<!ELEMENT app (rank,change,appname,days,peak,price)>
<!ELEMENT rank (#PCDATA>
<!ELEMENT change (#PCDATA)>
<!ELEMENT appname (#PCDATA)>
<!ELEMENT days (#PCDATA)>
<!ELEMENT peak (#PCDATA)>
<!ELEMENT price(#PCDATA)>]>

This data (from http://appshopper.com/bestsellers/paid) shows the top 200 paid iphone apps. Assume the following code exists in the javascript function p1 that loads the string of XML shown to the left into the Microsoft XMLDOM (DO NOT write this code):

xmldata=document.f1.d1.value;
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.loadXML(xmldata);
var root=xmlDoc.documentElement;

  1. Create a 200 row 6 column table that shows all 200 rows and six columns that contain: (1) rank; (2) change (change in rank from previous survey); (3) appname; (4) days (on the top 200 list); (5) peak (highest rank ever for the app); (6) price (app price)
  2. Place the resulting table in the DIV with id="p1_out".
  3. After the table show the app that has been on the survey the longest (i.e., maximum days). Show the values of appname and maximum days
Note: the value for any table cell is: root.childNodes[i].childNodes[j].text

Show NO HTML. Show NO heading. Show only the javascript for p1().

This is DIV with id="p1_out"
Color Height & Width:
Red Blue
Green Yellow
2. (50 points) Four images: <img id="i0" src="red1x1.gif">, <img id="i1" src="blue1x1.gif">, <img id="i2" src="green1x1.gif">, and <img id="i3" src="yellow1x1.gif"> are inside the square DIV block shown to the left. The four textboxes shown to the left are in a form named f2 and are named: rc, bc, gc and yc. The javascript function p2 sets six CSS properties of each of the four images according to the following table:
id
CSS property
topleftheightwidthzIndexposition
i0 10 10 rc+bc+gc+yc rc+bc+gc+yc 2absolute
i1 10+rc 10+rc bc+gc+yc bc+gc+yc 3
i2 10+rc+bc 10+rc+bc gc+yc gc+yc 4
i3 10+rc+bc+gc 10+rc+bc+gc yc yc 5

1. retrieve, calculate, and place the values shown above for: height, width, top and left into two four element arrays. (NOTE: only two arrays since: (a) top and left are equal and (b) height and width are equal)

2. inside a loop (whose index varies from 0 → 3) use the following DOM reference to perform the six CSS property assignments for each of the four images:

document.getElementById("i"+ loop_index.toString() ).style.CSS_property = table_value ;

Do NOT place the images in the DIV block (they are already there).
For the height, width, top and left properties, remember to covert the numeric table values to a string and add the string "px" to the result.

Show NO HTML. Show only the javascript for p2().