Description
Aim:
The objectives of this assignment include learning:
• jQuery (Syntax, Selector, Events)
• jQuery (Effects & HTML)
• jQuery (UI (User Interface))
For all the tasks, you can only make use of jQuery, HTML5, CSS, and JavaScript. No
other library/framework should be used.
Part A (6 marks)
Task 1:
Create a web page using jQuery with a kitten image and two buttons on it. The first
button causes the kitten to move from left to right and vice versa continuously on the
screen. The second button causes the kitten to stop. When you click on the first button
again after the kitten is stopped, the kitten will move in the same direction as before.
[note: if the kitten originally moved from left to right and it stopped, then it should
move from left to right again after it resumes movement]
Task 2:
Create a web page to illustrate the following task:
Write a piece of jQuery code so that when you click a paragraph, an image, a button,
or a link, it will disappear from the screen.
Note: use the respective html elements (do not use id or class)
Part B (9 marks)
Task 3:
Create a web page with a table with at least 3 rows and 3 columns. Either colspan or
rowspan should be used.
Write a piece of jQuery code so that when you click on any of the cell in the table, the
cell will be highlighted. In addition, the content of the highlighted cell needs to be
displayed outside the table.
Note: no matter how many cells you have clicked, only the latest cell that you clicked
should be highlighted and the cell content to be displayed outside the table.
Task 4:
Create a web page using jQuery to illustrate the following task:
Create a special dice object such that each of its three faces is a different image, with
a number from 1 to 3 (the image needs to show the number). The dice object should
have a method called “specialDice” which causes one of the faces of the dice to be
selected randomly. Then whenever you click a button on the screen, the function of
“specialDice” is called and hence one of the images on the dice randomly appears on
the screen.
Task 5:
Create a web page and incorporate 5 different functionalities of jQuery UI (User
Interface) in your web page. You must number the functionalities sequentially in the
web page.
Due:
2 Feb 2021 23:55pm (Singapore Time)
Demo: You must demo your solution to your tutor on the following date:
Full-Time students during tutorial 4
Part-Time students during tutorial 3
Submission:
You need to submit your solutions on all the tasks to moodle before the due date.
You are to create five folders, all files needed for task 1 must be in a folder call
“Task1”, all files needed for task 2 must be in a folder call “Task 2”, and so on. Zip
the five folders together and upload it to moodle. Include your student name and
student ID (UOW ID) as comments in all the files.
