CSIT128 Assignment 5 Solved

Description

Task 1

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 

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. 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

Task 4 

1. Use the same structure from Task 3. Save the HTML page as “game2.html”.
   1. Modify your previous code. When the dice rolls the same number, the user can play the game again. The user will continue to play the game until the dice displays two different numbers.
   2. For example, the first roll ends with same number (number 2 and 2). Your code should calculate the total, and allow the user to continue for the second time. On the second roll, the dice display two different number (number 3 and 4). Since it’s a different number, the game will stop. Your code will calculate the total (for round 1 and 2), and display it back on the web browser.