Lab Exercise 4 CMPUT 410 (Winter 2004) Due Date: Week 6 before the end of your lab time. Objectives: Use javascript to drag and drop layers. Comments: Your TA has to see that the exercise is done. With Cascading Style Sheets with Positionning one can create layers on an HTML page and position them at an exact location on the page. With Javascript, one can dynamically change properties of objects on a Web page. Dynamic HTML (or DHTML) is the clever combination of Javascript, CSS-P and HTML. The idea of this exercise is to experiment with DHTML by manipulating layers using javascript. The exercise consists of building a simple basket-ball game on a web page. Reproduce a page containing two baskets and a basket ball. Each basket is for a given team. You should be able to drag the ball with mouse and drop it anywehre on the page. If the ball is dropped on one basket, the corresponding team would get a point and the ball should go back to the centre. The score for both teams should appear at the bottom of the page and should show the score real time. Figure 1 shows the page at the start of the game. The images for the ball and the basket could be found here (You could use other images). [ball] [basket] Figure 1 Examples with source code of javascript draging and dropping layers can be found on-line. Additional (not part of the exercise): You can make the ball roll back (i.e. slide) to its central position after it is dropped in the basket rather than just reappear at the centre. You can find an example on-line about sliding layers on-line.

End of Page