Two global 16 element arrays named r and c are initialized when the page is loaded by a function named p0. This function assigns initial values to each image position (i.e., sets the value of Top and Left for each of the sixteen images). The images are arranged to create a square with four rows of four columns each (as shown above). The first row of images has Top set to 100 pixels; the second row images have Top=150; the third row has Top=200; and the fourth row has Top=250. The first column of images for each row have Left=0; the second column has Left=50; the third column has Left=100; and the fourth column has Left=150 pixels. The sixteen row and column locations of the sixteen images are stored in the arrays r and c by p0. These are NOT pixel locations -- but are the row and column numbers in the square (i.e., values of either: 0,1,2, or 3). The initial values for r and c are shown below to the left.

img0's location is stored as: r(0)=0 and c(0)=0;    img1's location is stored as: r(1)=0 and c(1)=1;    img2's location is stored as: r(2)=0 and c(2)=2;    img3's location is stored as: r(3)=0 and c(3)=3;    img4's location is stored as: r(4)=1 and c(4)=0;    img5's location is stored as: r(5)=1 and c(5)=1;       ...   img14's location is stored as: r(14)=3 and c(14)=2;   img15's location is stored as: r(15)=3 and c(15)=3;

To move the images around the square, the user clicks on a numbered image (hopefully adjacent to the black (unnumbered) image). This causes the function clk to be executed. This function uses the image which was clicked to swap locations with the black image (i.e., swap the values for r and c). Note several things must be true for this to occur. First, the image clicked must be adjacent to the empty (black) image. Two images are adjacent if: (1) they are in the same row AND the columns numbers differ by exactly one OR (2) if they are in the same column and the row numbers differ by exactly one. Secondly, clicks are ignored if the clicked image in NOT adjacent to the black image. Clicks on the black image are also ignored.

Two functions, setTop(image_id_string,pixel_location) and setLeft(image_id_string,pixel_location) have been written and may be used to set the absolute positions of an image. Both functions need: (1) a string containing the image's id (i.e., "img0", "img1","img2", "img3",...,"img14",or "img"15") AND (2) the exact pixel location for the upper left hand corner. DO NOT WRITE THESE TWO FUNCTIONS -- JUST USE THEM.
Write the javascript for clk ONLY. Show NO HTML (there are NO HTML tables used in this problem -- just absolute positioning).

2. (50 points) The XML data island is named g is shown below.

<XML id="g"> <?xml version="1.0"?> <!DOCTYPE class_roll [ <!ELEMENT class_roll (student+) > <!ELEMENT student (id,fname, mname, lname, grade)> <!ELEMENT id (#PCDATA) > <!ELEMENT fname (#PCDATA) > <!ELEMENT mname (#PCDATA) > <!ELEMENT lname (#PCDATA) > <!ELEMENT grade (#PCDATA) > ]>   xml classroll data is here </XML>

This XML contains an XML class roll with five values for each student: id; first, middle and last names; and the student's grade as shown in the DTD to the left. When the "GO" button is clicked a vbscript sub named p2 is executed. This sub creates an HTML table of all students where their grade "is greater than 59". This table contains five columns (id, first, middle and last names and grade). When completed, the table should be displayed in a DIV block named alice as shown below. NOTE: Use root.childNodes(i).childNodes(j).text to refer to the ith student and the jth column (i.e., id, fname, mname.lname, and grade) Show no HTML. Show only the vbscript for p2. This is the DIV named alice