MIS 3371 SUMMER 2015 EXAM 2 PARKS

U-FRAME-THE-KID
Pick an image (name='s')
Page background color:
Red (name='r') 0 100
Green (name='g')0 100
Blue (name='b')0 100


  		1. (50 points)The data to the left has: a form named f1; a select named s (with filenames for values); three ranges (sliders) named: r; g; and b; a button labelled "execute p1" that executes the javascript function named p1. In the table left and below, nine image files, their sizes and locations are defined. Each image has 5 values for:
    1. the top location in pixels;
    2. the left location in pixels;
    3. the width of the image in pixels;
    4. the height of the image in pixels;
    5. the filename of the image to be displayed (except the 5th one).
These 5 values (for each of the 9 images) are stored in five nine element arrays:
    tp; lf; wd; ht; and fn [NOTE: Do not write these arrays].

You are to create a new "page-on-the-fly" with a string (named os) containing 3 parts:

    1. "<html><body style='background-color:rgb(value of r%,value of g%,value of b%);'>"

        for value of r, value of g, and value of b above use these three values:
        document.f1.r.value; document.f1.g.value; and document.f1.g.value

    2. nine img tag strings

   Specify four style properties: top; left; height; and width (use: tp[i], lf[i], wd[i] and ht[i])
   Specify the image source attribute with the filename in fn[i]
   NOTE: the 5th image filename is NOT found from the 5th element of the fn array.
   The drop-down menu (i.e., the select) has values that are image filenames.
   The 5th image filename is obtained from the dropdown menu named s like this:

    k = document.f1.s.selectedIndex;
    image_file_name = document.f1.s.options[k].value;

    3."</body></html>"

DO NOT declare and initialize the five arrays. Assume they are available in your program.
Write only the javascript code for p1. Show NO HTML.

2. (50 points) A textarea named ta2 in a form named f2 is shown to the left. It contains XML data for the kings and queens of Scotland. The code below retrieves the string of XML and creates an XML object named root (DO NOT write this, assume it is in the code): 
 x=document.f2.ta2.value;
 xmldoc=new ActiveXObject("Microsoft.XMLDOM");
 xmldoc.async=false;
 xmldoc.loadXML(x);
 var root=xmldoc.documentElement;
The structure of the XML is:
   • monarchs_of_scotland (the root or the outside tag) contains multiple:
   • house (the 'family name' of successive related kings and queens) contains multiple:
      • monarch (king or queen) Each contains 3 tags:
         • monarch_name (common name for the monarch)
         • begin_reign (first year as king or queen)
         • end_reign (last year as king or queen)
Using this XML data to create a 3 column report that has:
   • in the first table row, only the title "MONARCHS OF SCOTLAND" is displayed
   • for each house display a row with the string: "HOUSE OF " and then the value of house
   • for each monarch display a row with 3 columns. In the columns display:
      monarch_name, begin_reign, end_reign
After the table display the name of the longest reigning monarch and length of the reign, then place all the results in the DIV with id="p2_out".
NOTES: root.childNodes.length contains the number of house occurences.
   • the house loop is: for (i=0;i<root.childNodes.length;i++)
   • house_name is root.childNodes[i].childNodes[0].text
   • the number of monarchs in a house is root.childNodes[i].childNodes.length
   • the monarch loop is: for (j=1;j<root.childNodes[i].childNodes.length;j++)
   • monarch_name is root.childNodes[i].childNodes[j].childNodes[0].text
   • begin_reign is root.childNodes[i].childNodes[j].childNodes[1].text
   • end_reign is root.childNodes[i].childNodes[j].childNodes[2].text
When this button is clicked a javascript function named p2 is executed
Show NO HTML. Show only the javascript for p2.
This is the DIV with id="p2_out"