Hide menu

Assignment 4

The fourth and final assignment in this course consists of three exercises. In the first exercise you will use a jQuery plugin to create a slideshow. In the second exercise you will use jQuery UI and in the final exercise you will use jQuery plugins, jQuery UI and your own code.

Learning outcomes

After this lab assignment, you should have gained knowledge about the following:

  • How to use jQuery UI
  • How to use jQuery plugins
  • How to use drag and drop using jQuery.


You should be familiar with how to download and set up jQuery. In addition you will need to download and set up jQuery UI. You can find instructions on how to do so here: http://learn.jquery.com/jquery-ui/getting-started/

Exercises and points

  • Complete all basic level exercises to score 15 points on this assignment.

For 20 and 25 points, see the additional tasks in exercise 3.

Exercise 1 - jQuery UI

Exercise: Create a set of web pages that demonstrate different jQuery UI widgets.

Details: In this exercise you task is to create a number of web pages that use jQuery UI widgets. You will have to learn how to use the different jQuery widgets and how to read and search for information in API documentation. Depending on the choosen difficulty level, you will be creating between three to four pages.

Basic level

  • A start page (Home)
  • A page that demonstrates a content accordion component
  • A page that demonstrates a tabbed content component

Start Page and menu: You are free to have any content you want on the home page. Create the menu using the jQuery UI menu widget. The sub menu containing the “Accordion” and “Tabs” items fold out. The menu should also contain a link to the slideshow page you will create in Exercise 2.

Home page

Accordion Page: The content of the accordion page is an accordion jQuery UI widget. The accordion widget in your page should have at least three sections with content.

Accordion page

Tabs Page: The content of the tabs page is a tabs jQuery UI widget. The tabs widget in your page should have at least three tabs with content.

Tabs page

Advanced level

Add two additional pages that demonstrate the following jQuery UI widgets:

  • Selectable Page: Add a page that has elements that can be selected using the jQuery selectable interaction.
  • Sortable: Add a page that has element that can be sorted using the jQuery Sortable interaction.

Exercise 2 - Slideshow using jQuery plugin

Exercise: Create a web page that uses a jQuery plugin to create a slideshow. You can use the same images as in Assignment 2.

Details: In this exercise, your task is to select a jQuery plugin for making slideshows and create a slideshow page using that plugin. You will have to read the documentation for the different plugins and decide which to use. Different plugins have different setup requirements such as CSS-files, JS-files and compatible versions of jQuery. In order for you to succeed in using the plugin, you must make sure you follow these setup instructions.

Requirements: The slideshow should either have thumbnails, or some kind of position markers/dots. You should also be able to the previous slide or the next slide in the slideshow, either by clicking on a button, or using the keyboard.

Select a plugin: You can use one of the following plugins, or another if you find one that is more attractive to you. Do not use a solution that you have used in a previous assignment.

Exercise 3 - Combining jQuery plugins, jQuery UI and your own code

Basic level

Exercise: Create a web page that according to the wireframe below. The webpage should

  • use the Draggable and Droppable jQuery interactions to drag an image thumbnail to one of the three main images
  • use a lightbox jQuery plugin to implement lightbox functionality for the images on the page.

Details: The page should contain a three images placed beside each other, above a table with five columns. The last column should contain images that can be dragged to one of the three main images above.

  • When an image is dragged and then dropped ontop of one of the three top images, the image that recieved the dropped image should change so that it shows the dropped image. The images in the table should remain the same. See jQuery UI Draggable and jQuery UI Droppable
  • Clicking on one of the three images above the table should bring up a larger lightboxed version of the image. Use e.g. jQuery Lighter or fancyBox
  • The table should be sortable using the tablesorter-plugin

Links to plugin pages and github repositories

Web shop, initial state

Web shop, zoomed in

For 20 and 25 points

Use a plugin to make the table sortable. E.g. the tablesorter plugin.

For 25 points

  • Add a button that resets the top images.
  • Do not allow the same image to be shown in more than one square.

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