Hide menu

Assignment 3

The third lab assignment in this course contains six separate exercises that will introduce you to interaction programming techniques using jQuery.

Learning outcomes

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
  • Using $(document).ready

Exercises

The exercises in this assignment all have different difficulty levels: Basic and Advanced. Complete each exercise on the advanced difficulty level in order to qualify for a 25 point score on this assignment.

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 the $(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 $(document).ready()?

Tip: Read http://api.jquery.com/ready/ or http://learn.jquery.com/using-jquery-core/document-ready/

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.

Three boxes

Basic level

  1. 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.
  2. 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.
  3. In preparation for the review session, make sure you understand what $(this) refers to as used in jQuery event handlers.

Advanced level

  1. Make a copy of the web page you created for the basic difficulty level and create a new JavaScript-file. Also, increase the number of options in the drop-down list from 0-5 to 0-16.
  2. Remove the existing boxes below the drop-down option input from your HTML-markup.
  3. 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

Exercise 3, basic level

  1. 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 div with the heading Story above it to the right of it.
  2. 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 div.
    • When the user presses the Change Style button 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).

Advanced difficulty level

Exercise 3, advanced level

In addition to the basic difficulty level, the following functionality should be added:

  • Add an additional button labeled New Paragraph below the text area. Pressing this button adds a new paragraph to the div to 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.

Idle rectangles

Growing rectangle

Shrinking rectangle

Exercise 6 - Putting everything together

Base layout

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:
    1. the corresponding box changes its size using an animated transition
    2. 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

Button 1 active

Button 3 active

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.

Opacity set


Updated by: Jody Foo
Last updated: 2017-10-20