DISC 3371 -- Final Exam & Answers -- Fall 2003 Parks

1. (60 points) The page below is composed of two frames arranged in columns. The HTML for the left (lepht.htm) and right (rit.htm) frames are:
<body bgcolor="#aaaaaa"><b>
<center>Pick a Color</center><form name="rform">
<input type="radio" onClick="get_curx()" name="r" checked>Black<br>
<input type="radio" onClick="get_curx()" name="r">Blue<br>
<input type="radio" onClick="get_curx()" name="r">Red<br>
<input type="radio" onClick="get_curx()" name="r">Green<br>
<input type="radio" onClick="get_curx()" name="r">Cyan<br>
<input type="radio" onClick="get_curx()" name="r">Magenta<br>
<input type="radio" onClick="get_curx()" name="r">Yellow<br>
<input type="hidden" name="curx" value="75">
</form></b></body></html> 		<html><head><style type="text/css">
#txt {position:absolute;top: 0px;left:40px}
#s {position:absolute;top: 20px;left: 0px}
#tri {position:absolute;top: 51px;left: 0px}
#ball_loc {position:absolute;top:100px;left: 0px} </style>
dim bgif(7):bgif(0)="blkball.jpg":bgif(1)="bluball.jpg":bgif(2)="redball.jpg"
bgif(3)="grnball.jpg":bgif(4)="cynball.jpg":bgif(5)="magball.jpg":bgif(6)="yelball.jpg"
<body onLoad="c1(1)"><b> <div id="txt">Click in the gray area to resize the ball</div>
<a href="" onClick="javascript:c1(2);return false;">
<img id="s" src="scale.gif" border="0"></a>
<img id="tri" src="tri.gif">
<div id="ball_loc"><img src="blkball.jpg"></div>
<form name="gform"><input type="hidden" name="curx"> </form></b>
</body></html>
When the user clicks a radio in the left frame, the color jpg file in the right frame is replaced by the newly selected jpg image. When the user clicks in the gray area in the right frame: (1) the center of the triangle image is moved horizontally to align with the horizontal value of the mouse click and (2) the size of the displayed image is also adjusted to be the value horizontal position of the mouse click (i.e., somewhere between 25 and 300). Your are to write two vbscript subs. For the left frame write the sub get_curx and for the right frame write the vbscript sub c1. The names of the colored jpg files are defined in a global array in the right frame as shown above. The gray scale in the right frame is a gif file that is 350 pixels wide and 30 pixels tall (named scale.gif) and the triangle is a gif file that is 51 pixels wide and 45 pixels tall (named tri.gif). The sub get_curx performs two actions when a radio is clicked: (1) it gets the value of the hidden variable named curx from the right frame and stores the value in its own hidden variable (also named curx) and (2) causes the right frame page to be reloaded.The sub c1 in the right frame:
(1) gets the size of the image (call this value x) in one of two ways: (a) If the page is being loaded (i.e., the argument passed to c1 is a 1 -- see the <body>'s onLoad reference) the x value is retrieved from the curx value stored in the left frame or (b) if c1 is being called from a mouse click (i.e., the argument passed to c1 is a 2 when the user clicks in the gray area) the x value is determined by the property window.event.x (this is the horizontal pixel location of the most recent mouse click);
(2) if the x value is less than 25 it is reset to 25 or if the x value is greater than 300 it is reset to 300;
(3) the x value is then stored in the hidden variable curx in both the frames;
(4) the triangle gif is moved horizontally so that its center is at x horizontal pixels from the left side of the frame ;
(5) the named jpg file to be displayed is determined by examining the radios in the left frame;
(6) the function then displays the jpg in the <div> block named ball_loc. Its size (i.e, height and width) are defined by the value of x determined after step 2 has been completed;
(7) the image is repositioned so that it is centered 150 pixels from the left side of the page.
No vertical adjustment are made to any image. Do not use the image collection (i.e., like the image swap examples on the syllabus). Absolute positions in the right frame are measured from left side of the right frame NOT from the left side of the window.

Click here for the working answer (Click view source in each of the two frames to view the code)

2. (40 points) An XML data island named edexp is sent from the server to the client as part of a web page. A portion of the data island is shown in the left cell of the table below. The entire HTML for the page if shown in the right cell of the table below.
<XML id="edexp">
<?xml version="1.0"?>
<edx>
<al>4.5</al>
<ak>2.3</ak>
<az>5.4</az>
<ar>5.1</ar>
<ca>6.4</ca>
.
.(forty states not shown)
.
<va>5.8</va>
<wa>8.5</wa>
<wv>4.7</wv>
<wi>7.1</wi>
<wy>5.2</wy>
</edx></XML> 		<body onLoad="ol()">
<div id="d1"></div>
<div id="d2"></div>
</body>
 The XML in the edexp data island represents the expenditure for higher education -- expressed as a percentage of the state's budget in each of the fifty states. The second level tags are the two character state abbreviations. The content of the tags are the higher education expenditure percentages. When the page is loaded, the function ol is executed. This function places HTML and data into the two <div> blocks named d1 and d2. Write only the javascript for the ol function.

The function will place in the first <div> block (named d1) a 50 row and 2 column table. This table contains the 2 character state abbreviation in the first column (i.e., the tag name) and the expenditue values in the second column (i.e., the content of the tag). The data appears in the same order as the tags occur in the XML.

The function will place in the second <div> block (named d2) a 10 row and 2 column table. This table contains the ten states with the highest percentage expenditures. The first column will contain the state abbreviation (i.e., the tag name) and the second column will contain the expenditure percentage (i.e., the content of the tag). The state with the highest expenditure percentage should appear in the first row, the second highest in the second row, the third highest in the third row, etc.

Click here for answer (the hard way) or here for the easy way (trailing bubble sort)