MIS 3371 Parks Summer 2016 Exam 2

Name___________________________________________ Last 4 digits PSID___________________

 This is the DIV with id='p1out'
 1. (50 points) When this button labeled "p1" is clicked a javascript function named p1 is executed. A DIV block with id="p1out" is shown to the left.
  • There are fifty-two images of a deck of playing cards with file names: "1.png", "2.png", "3.png",...,"52.png".
  • Create a string named os that contains 52 image tags each that has 4 style properties:
    • The images are to be placed in sequence (i.e., "1.png" → "52.png") so that the images appear in thirteen rows each with 4 images in each row.There is NO table.
    • The style value for top for each of the four images in the first row is "5px",
      the second row images all have style values of top of "60px", the third row is "115px", the fourth 3 row is "170px", etc. (i.e., the value of top increases by 55 pixels on each successive row of images).
    • The style value of left for the first image is "5px", the second image has left value of "46px", the third is "87px" and the fourth "128px". This is the same for all thirteen image rows (i.e., the left changes by 41 pixels with each successive image in a row)
    • The style value for width for ALL images is "36px"
    • The style value for position for ALL images is "absolute"
  • When done, place the os string into the DIV with id="p1out".
  • Using the DOM format: document.getElementById("p1out").style.property = value;
    • Set the style property of backgroundColor of the DIV with id="p1out" to the color "gray"
    • Set the style property height of the DIV with id="p1out" to "720px"
There is NO table. Show no HTML. Show only the javascript for p1.

2. (50 points) The textarea to the left named ta2 is in a form named f2. The XML represents the current elected members of the Federal House of Representatives stored as an XML string. The DTD for the XML is:
      <?xml version="1.0"?>
      <!DOCTYPE houseofrepresentatives [
      <!ELEMENT houseofrepresentatives (state+)
      <!ELEMENT state (statename,rep+)>
      <!ELEMENT rep (district,repname,town)>
      <!ELEMENT district (#PCDATA)>
      <!ELEMENT repname (#PCDATA) >
      <!ELEMENT town (#PCDATA)>]

Assume root has been created in your code. Create a table containing: a row for each state with the statename centered in a cell that spans three columns; followed by a row for each representative from that state; each representative row contains three columns: district, name and town.
# of states is root.childNodes.length
state loop is i=0 to root.childNodes.length
statename is root.childNodes[i].childNodes[0].childNodes[0].nodeValue
rep loop is j=1 to root.childNodes[i].childNodes.length
district is root.childNodes[i].childNodes[j].childnodes[0].childNodes[0].nodeValue
repname is root.childNodes[i].childNodes[j].childnodes[1].childNodes[0].nodeValue
town is root.childNodes[i].childNodes[j].childnodes[2].childNodes[0].nodeValue
Show the repname of the representatives where town is "Houston"(one name per line)
Place the table and the list of Houston representatives in the DIV with id="p2out".
Show no HTML. Show NO heading row. Show only the javascript for p2
Data from: wikipedia

                                this is the DIV with id="p2out"