Question 3 (15 marks) Dennis wants to promote an event for his college's science club. He desires to create a webpage wi

Post by **answerhappygod** » Sun May 15, 2022 2:11 pm

: Question 3 15 Marks Dennis Wants To Promote An Event For His College S Science Club He Desires To Create A Webpage Wi 1 (60.22 KiB) Viewed 57 times

Question 3 (15 marks) Dennis wants to promote an event for his college's science club. He desires to create a webpage with a simple animation by using DHTML. Dennis makes up an animation to mimic the earth orbiting the sun, and the output looks like what is shown in Figure 5. Figure 5 To create the animation, Dennis uses two images, namely sun.jpg, to represent a cartoon sun at the center of the orbit and earth.jpg to represent the earth (a small red ball) revolving around the cartoon sun. To allow users to have better control, Dennis creates two buttons (one start button on the right and one stop button on the left) at the bottom right comer of the window. The animation is initially at a standstill and is started by user's clicking the start button. Then the earth starts rotating clockwise around the cartoon sun for 10 times in a circular path. At the same time, the sun also starts rotating anticlockwise synchronously at the center in steps of 5 degrees for also 10 times but in reverse direction. The user can choose to stop the animation by clicking the stop button then the earth immediately stops at a point on its circular path. If the user presses the start button again, the earth will go round the cartoon sun for another 10 times from the point at which it has been stopped. To produce a smoother rotation, the circular path is divided into 360 sections represented by 360 steps. Each step denotes 1 degree of rotation when making animation with JavaScript, each degree of rotation can be converted into radian by using the following formula: 8

angle in radians = angle in degrees/360 * 27 (1) After that the coordinates (x, y) of each position on the circular path can be calculated by using the following pair of formulas: x = cx + radius * COS (angle in radian); y = cy + radius * SIN (angle in radian); (2) (3) Where cy and cx represent the x-coordinate and y-coordinate of the central point of the circular path for a given radius respectively. The central point is also where the cartoon sun is situated. For more accurate positioning of the cartoon sun, small earth and the buttons, Denis uses CSS. Dennis starts with the following code base for making this JavaScript animation: <html> <head> <style> #sund /* Fill in 1* piece of code */ } #earth /* Fill in 2nd piece of code */ } #butt_position ! /* Fill in 3rd piece of code */ } </style> <script> // Global varables for stepBall() funtion and moveSun() function var timer = null; var s = 0; //step counter for angle var radius = 300; var cx = 600; 9

var cy = 400; var deg = -2; // starting point for sun var rotation_diff =-5; // Move the sun in each step of -5 degrees function moveBallſid, left, top) /* Fill in 4th piece of code */ } function moveSun(){ /* Fill in 5th piece of code */ } function stepBall() { /* Fill in 6th piece of code */ } function stopBall() { /* Fill in 7th piece of code */ } </script> </head> <body> <img id="earth" src="earth.gif"/> <img id="sun" src="sun.jpg"/> <div id="butt_position"> <button onclick="stopBall();">Stop</button> <button onclick="stepBall();">Start</button> </div> </body> </html> (a) Complete the portion of Dennis' code with the comment “Fill in 1* piece of code” within the #sun{} CSS definition based on the following guideline: Apply absolute positioning. The cartoon sun default coordinates are, x-coordinate at 600px, and y-coordinate at 10

400px; The cartoon sun's dimensions are 120px * 120px. [2 marks] (6) Complete the portion of Dennis' code with the comment “Fill in 2nd piece of code” within the #earth {} CSS definition based on the following guideline: Apply absolute positioning; The small earth default coordinates are, x-coordinate at 900px, and y-coordinate at 400px; The small earth's dimensions are 30px * 30px. [2 marks] (c) Complete the portion of Dennis' code with the comment “Fill in 3rd piece of code” within the #butt_position{} CSS definition based on the following guideline: Apply absolute positioning. Place two buttons at the bottom right of window by adopting the x-coordinate at 90%, and y-coordinate at 90% of the window's width. [2 marks] (d) Complete the portion of Dennis' code with the comment “Fill in 4th piece of code” within the moveBall() function based on the following guideline: Get the earth object based on the element's ID in the webpage and store the obtained ID to an id object The initial position (left and top) of the earth object is also passed in as parameters to be used in style properties. Use the id object and open its style properties for changing the object's x and y coordinates, respectively. [2 marks] (e) Complete the portion of Dennis' code with the comment “Fill in 5th piece of code” within the moveSun() function based on the following guideline: Get the sun object based on the element's ID in the webpage and store the obtained ID to an id object. Use the id object and open its style property and then the transform property by using the rotate method by which the sun moves at each step of 5 degrees in the 11

anticlockwise direction with a start of 2 degrees. [2 marks] (1) Complete the portion of Dennis' code with the comment "Fill in 6th piece of code” within the stepBall() function based on the following guideline: Call the moveSun() function; Use the current step counter value (variable s) and convert the step counter value into radians by using formula (1) listed above; Calculate the corresponding coordinates (x, y) of the earth by using formula (2) and formula (3) listed above; Move the earth to the appropriate position by calling the moveBall() function; Increment the step counter value (variable s); Detect if the step counter value is not exceeding 10 rounds (each round has 360 steps) then continue calling stepBall() function recursively by using a JavaScript timer, else reset the step counter to zero. [3 marks) (E) Complete the portion of Dennis' code with the comment "Fill in 7th piece of code” within the stopBall() CSS definition based on the following guideline: It simply halts the JavaScript timer and stops the sun's rotation and earth's movement at a point in the circular path. [2 mark] 12