DISC 3371 -- Final Spring 2003 -- Parks -- Answers  

 
 
c1right.gif
 
 
 
c1left.gif
 
 
 
c2.gif
 
 
 
c3.gif
 
 
 
c4.gif 		1. (50 points) The 5 gif files shown to the right are used to make a 4 image train appear on the page. When train is moving to the right, it is composed of the 4 images: c4.gif, c3.gif, c2.gif and c1right.gif placed side-by-side. The images appear on the page in this exact left to right order. When the train is moving to the left, it is composed of the 4 images c1left.gif, c2.gif, c3.gif and c4.gif placed side-by-side. The images appear in this exact left to right order. Each image is 90 pixels wide. A global variable named status is used to store the direction of movement of the train. When moving to the right status="R" and when moving to the left status="L". A button labelled "MOVE" always appears on the page. When this button is clicked a sub named move_it is called. This sub:
1. moves each of the four images at the top of the page 10 pixels to the right when status="R" or 10 pixels to the left when status="L".
2. then checks to determine if it is time to reverse the train's direction:
If the train is moving to the right and the right-hand edge of c1right.gif" is now >= 720 a sub named set_for_left is called. This sub:
   (a) sets status="L" and
   (b) sets the top and left positions of the gifs according to columns c and d in the table below.
If the train is moving to the left and the left-hand edge of c1left.gif" is now <= 0 a sub named set_for_right is called. This sub:
   (a) sets status="R" and
   (b) sets the top and left positions of the gifs according to columns a and b in the table below.
When the page is loaded, a sub named start_it is executed. This sub: (1) sets status="R" and (2) calls the sub set_for_right.
gif
filename		 set_for_right set_for_left
a.
initial
top		 b.
initial
left		 c.
initial
top		 d.
initial
left
1 c1right.gif 30 270 1500 0
2 c1left.gif 1500 0 30 360
3 c2.gif 30 180 30 450
4 c3.gif 30 90 30 540
5 c4.gif 30 0 30 630
When assigning values to document.all.some_object_id.Top or document.all.some_object_id.Left one assigns the property an integer value. However, if you use document.all.some_object_id.Top or document.all.some_object_id.Left in an if statement's conditional or on the right-hand side of an = sign, it returns a string with the characters "px" appended to the end. To get the integer value of the property, write and use a function named fixpx. Pass this function either the .Top or .Left property and return an integer (i.e., the function takes a the string value of the property as an argument, strips the "px" off the end and returns the integer portion). Use this function whenever the .Top of .Left property appears in an if statement's condition or on the right-hand side of an = sign and you need to use an integer value.
Write the 4 subs: move_it, set_for_left, set_for_right, start_it and the function fixpx in VBScript. Write NO HTML or CSS STYLE (see these below).
CSS STYLE SHEET HTML BODY
<STYLE type="text/css">
#mb {position:absolute;Top:125px; Left:300px}
#c1left {position:absolute;Top:30px; Left:0px}
#c1right {position:absolute;Top:30px; Left:80px}
#c2 {position:absolute;Top:30px; Left:160px}
#c3 {position:absolute;Top:30px; Left:240px}
#c4 {position:absolute;Top:30px; Left:320px}
</STYLE> 		<body onLoad="start_it">
<img src="c1right.gif" id="c1right">
<img src="c1left.gif" id="c1left">
<img src="c2.gif" id="c2">
<img src="c3.gif" id="c3">
<img src="c4.gif" id="c4">
<input type="button" value=" MOVE " id="mb" onClick="move_it">
</body>

Click here for the answer

2.(50 points) An HTML page contains two elements:

     1. <DIV id="train_out"></DIV>
     2.<DIV id="bp"><input type="button" value="TRY" onClick="try_it()"></DIV>

When the button labelled "TRY" is clicked, the function try_it is executed. This function generates four random numbers between 1 and 5 inclusive (i.e., 1,2,3,4 or 5). The five possible values correspond to one of the five gif files in the last 5 rows of the table shown in problem 1 above. The function creates a string named train. This string contains the HTML to display four gif files side-by-side. The specific gif file names used in this string are determined by using the four random numbers generated. If the random number is 1, then the gif file is from the row numbered 1 above -- c1right.gif, if the random number is 2, then the gif file is from the row numbered 2 above -- c1left.gif, if the random number is 3, then the gif file is from the row numbered 3 above -- c2.gif, etc.

Once the four random numbers have been generated and the gif file names determined, the HTML for the four side-by-side images is created and stored in the string train. The string train is then displayed in the DIV block with id="train_out". If the sequence of 4 random numbers produces one of the two correctly arranged trains (i.e., the random number sequence is 5-4-3-1 or 2-3-4-5) the document's background color is set to red and the DIV block with id="bp" is set to a single blank. Write the javascript for the function try_it.

Click here for the answer