DISC 3371 Final Fall 2002 Parks

<HTML><head><STYLE type="text/css">
#img0{position:absolute;Top:0px;Left:0px}
#img1{position:absolute;Top:0px;Left:0px}
#img2{position:absolute;Top:0px;Left:0px}
#img3{position:absolute;Top:0px;Left:0px}
#img4{position:absolute;Top:0px;Left:0px}
#img5{position:absolute;Top:0px;Left:0px}
#img6{position:absolute;Top:0px;Left:0px}
#img7{position:absolute;Top:0px;Left:0px}
#img8{position:absolute;Top:0px;Left:0px}
#bt1{position:absolute;Top:550px;Left:150px}
#bt2{position:absolute;Top:550px;Left:250px} </STYLE></head><body onLoad="one()">
<form name="sq1">
<input type="hidden"><input type="hidden">
<input type="hidden"><input type="hidden">
<input type="hidden"><input type="hidden">
<input type="hidden"><input type="hidden">
<input type="hidden"><input type="hidden">
<input type="hidden"><input type="hidden">
<input type="hidden"><input type="hidden">
<input type="hidden"><input type="hidden">
<input type="hidden"><input type="hidden">
</form>
<form name="sq2" action="echoxml.exe" method="POST">
<input type="hidden" name="xs"></form>
<img src="i0.gif" id="img0">
<img src="i1.gif" id="img1">
<img src="i2.gif" id="img2">
<img src="i3.gif" id="img3">
<img src="i4.gif" id="img4">
<img src="i5.gif" id="img5">
<img src="i6.gif" id="img6">
<img src="i7.gif" id="img7">
<img src="i8.gif" id="img8">
<input type="button" onClick="one()" value="Again?" id="bt1">
<input type="button" onClick="two()" value="Send as XML" id="bt2">
</body></html> 		1. (70 points) Given the HTML page shown to the left, write the Javascript function one. This function is executed when the page is loaded and when the user clicks the button with the "Again?" label. This function places the nine images (each of the images is 50 pixels wide and 50 pixels tall) on to the page in order (i.e., i0.gif, then i1.gif, then i2,gif, then i3.gif,...etc.) according to the following rules:

1. the top pixel position of each image is set to a random integer between 0 and 500 (this represents the upper left hand corner's vertical position of the image) AND
2. the left pixel position of each image is set to a random integer between 0 and 500 (this represents the upper left hand corner's horizontal position of the image) AND
3. NONE of the images are allowed to overlap (i.e., no part of one image can cover any part of any other image)

This can be accomplished by assuring that NONE of the four corner points of an image (upper left corner, upper right corner, lower left corner or lower right corner) lies inside the boundary of any image that already has been placed on the page. This will require that you: (1) randomly place the first image (i0.gif); (2) then generate a position for the next image (i1,gif); (3) test to be sure the images do not overlap; (4) and repeat this process (steps (2) and (3) ) for each remaining image. Note that all four corners of each image must be tested to be sure they do NOT lie within the boundaries of any other image. If they do, a new set of Top and Left positions should be generated and the tests performed again. This generate and test sequence is repeated until all the images are placed without overlapping any other.

Eighteen hidden variables appear at the beginning of the <body> on a form named sq1. Store each image's upper left hand horizontal position in the hidden variables 0,2,4,6,8,... and the upper left hand vertical position in the hidden variables 1,3,5,7,9,....

Note: Use the expressions: "document.all [some_string].style.top=..." and "document.all [ some_string ].style.left=..." to position the images. Note that the value of some_string corresponds to the id of the image found in the <BODY>

Note: When testing each of the four corner points of an image's possible position, if the corner's x (horizontal position) is less or equal to another image's right hand x position and greater or equal to another image's left hand x position and the corner's y (vertical position) is greater or equal to another image's top position and less or equal to another image's bottom position, then the images overlap. A new position is then generated and tested until the image overlaps no other.

Click here to see it work

2. (30 points) When the user clicks the second button labelled "Send as XML" a VBscript sub named two is executed. This sub creates a string named s that contains the following XML document:
  <?xml version="1.0"?>
  <!DOCTYPE squares [
  <!ELEMENT squares (square_data+)>
  <!ELEMENT square_data (square_number, gif_file_name, upper_left_x, upper_left_y) >
  <!ELEMENT square_number (#PCDATA) >
  <!ELEMENT gif_file_name (#PCDATA) >
  <!ELEMENT upper_left_x (#PCDATA) >
  <!ELEMENT upper_left_y (#PCDATA) > ]
Data for the XML document is:
   1. square_number is: 0, 1 ,2 , ... , 8
   2. gif_file_name is: i0.gif, i1.gif, i2.gif, ... , i8.gif
   3. upper_left_x is the horizontal pixel position of the upper left corner of a square stored in elements 0,2,4,6,... of the sq1 form.
   4. the upper_left_y is the vertical pixel position of the upper left corner of a square stored in elements 1,3,5,7,... of the sq1 form.
After the string s is created, the hidden variable named xs is assigned the value of s. The form named sq2 is then submitted. Show only the Vbscipt for the sub two.

Click here to see it work