The third lab assignment in this course contains six separate exercises that will introduce you to interaction programming techniques using jQuery.
After this lab assignment, you should have gained knowledge about the following:
- How to use jQuery to select elements to manipulate
- How to use jQuery to edit an element’s attribute values
- How to use jQuery to edit an element’s CSS
- How to create new elements in the DOM using jQuery
- How to animate transitions using jQuery
- Implicit and explicit iteration in jQuery
Exercises and points
- 15 points: Complete each exercise on the basic difficulty level.
- 20 points: Complete each exercise on the basic and advanced difficulty levels.
- 25 points: Complete each exercise on the basic and advanced difficulty level with minimal layout differences from the mockup images. Minor size and positional differences are allowed.
Note: The yellow comments on the images are not part of the mockups!
Exercise 1 - First steps
Create a web page with a single, centered, blue circle in the middle of the page (it is possible to create circles using just CSS).
Using jQuery, make the square disappear when the mouse moves on top of it. Use
$(document).ready() function to wait until the document has loaded before
adding your event handler.
What does the
$(document).ready() function do? What information is possibly
not available if you use
Exercise 2 - using information from a option list element
The web page for exercise 2 is a page where the user uses a drop-down list to select the number of squares to be displayed in centered line. See image below (Note: the yellow comments on the images are not a part of the mockup).
- Create a web page with a form containing the drop-down list
and five squares (empty
div-elements). The available option values should be the numbers 0-5.
- Add an event handler using jQuery to the drop-down option input that shows or hides boxes so that the total number of visible boxes matches the selected value.
- In preparation for the review session, make sure you understand what
$(this)refers to as used in jQuery event handlers.
- Remove the existing boxes below the drop-down option input from your HTML-markup.
- For the advanced level, rather than showing or hiding existing boxes, you should create and delete boxes dynamically from the DOM using jQuery.
Exercise 3 - Adding text with class
In exercise 3, you will use keyboard events to monitor a text area and make changes to text on the web page. The user should also be able to change the style of the text. See wireframes below.
Basic difficulty level
- Create a web page according to wireframe above. The web page should have a
text area with a drop-down list and a button below it, and a
divwith the heading
Storyabove it to the right of it.
- Implement the following page functionality using jQuery:
- When the user enters text into the text area to the left, the corresponding
text should appear in the right
- When the user presses the
Change Stylebutton below the text area, the style selected typographic style should be applied to to the current text in the right
div(you can make up your own style names and decide its attributes).
- When the user enters text into the text area to the left, the corresponding text should appear in the right
Advanced difficulty level
In addition to the basic difficulty level, the following functionality should be added:
- Add an additional button labeled
New Paragraphbelow the text area. Pressing this button adds a new paragraph to the
divto the right.
- The new paragraph becomes the active paragraph. Old paragraphs cannot become active paragraphs.
- Only the active paragraph is affected by style changes.
Exercise 4 - Manipulating CSS properties
The aim of the fourth exercise is to practice different kinds of CSS manipulation with jQuery.
Use the files found here: assignment3/a3e4.zip
Basic & Advanced difficulty level
All the following should be completed.
- When the user clicks on a circle, the circle toggle between two colors.
- When the user clicks on a square, the square should be resized to half its current size.
- When the user clicks on a rectangle, it should move down 10px.
Bonus CSS trick: Examine the code to find out how to make circles.
Exercise 5 - Start and stop animation
In exercise 5 you will learn how to initiat and cancel animated CSS changes. Use the files found here: assignment3/a3e5.zip
Basic & advanced difficulty level
- When the mouse is over any single rectangle, it starts to grow downwards until it reaches a certain size (you decide).
- As soon as the mouse leaves any single rectangle, it stops growing and starts to shrink to its original size.
Exercise 6 - Putting everything together
Basic difficulty level
Create a web page that reproduces the layout above, then implement the following functionality:
- Each button should be connected to a box
- When the user clicks a button, two things happen:
- the corresponding box changes its size using an animated transition
- the button is marked visually as being activated, also using an animated transition
- when the user clicks another button, any previously activated button and box reverts to its original appearance, also using animated transitions
Advanced difficulty level
Implement all functionality of the basic difficulty level and add the following:
- Add a slider that is used to set the opacity of the square connected to the activated button.
- When a button is activated, the slider is set to the connected square’s opacity level.
Updated by: Jody Foo
Last updated: 2017-10-29