[SOLVED] CSIT128 Assignment5

Description

Task 1 (1 mark):

1. Prepare HTML page as shown below (Figure 1). Use JavaScript and HTML DOM to complete the following task.
   1. Inside the HTML page, include THREE (3) images. (you can include your own image)
   2. When the user moves the mouse over an image (e.g: Strawberry), that particular image will be duplicate on the other two images (see figure 2 and 3 below). When the use moves the mouse out from the image, the image will restore as in initial page. (see figure 1 below)
   3. To complete this task, your code must use HTML DOM to access the child nodes. Link: https://www.w3schools.com/jsref/dom_obj_all.asp

Figure 1: Initial page (default page)

Figure 2: When the user mouse over the first image, the other two will display the same image

Figure 3: When the user mouse over the second image, the other two will display the same image

Task 2 (1 mark):

2. Prepare HTML page as shown below (Figure 4). Use JavaScript and HTML DOM to complete the following task.
   1. Inside the HTML page, include TWO (2) buttons: forward and backward.
   2. When the user clicks on “forward” button, the image will move forward. When the user clicks on “backward” button, it will move the opposite way.
   3. To complete this task, your code must use HTML DOM to access the child nodes, and replace the child node.

Link: https://www.w3schools.com/jsref/dom_obj_all.asp

Figure 4: Initial page (default page)

Figure 5: The user press the “forward” button, then the image will move one position to the right
(see initial position of the strawberry)

Figure 6: The user press the “forward” button, then the image will move one position to the right
(see initial position of the strawberry)

Task 3 (1 mark):

1. Prepare a HTML page to display random dice value. Save the HTML page as “game.html”.
   6. In this page, create an array to store images/value of the rolling dice. This page should also have ONE (1) button. When the user clicked the button, the page will generate TWO (2) random dice value from 1 to 6. Display back the value by using the dice image, and calculate the total random number.
   7. The user can only play this game once. The button will disappear after displaying the output. If the user wanted to play again, they should refresh the webpage.
   8. W3schools JS Array Reference:
      1. https://www.w3schools.com/js/js_arrays.asp
      2. https://www.w3schools.com/js/js_array_methods.asp

Example of Student’s declaration

Example of Student’s Code