The second assignment in this course is divided into two parts. The first is to complete certain exercises on Codecademy. The second is to create a web page with an interactive slideshow.
After this lab assignment, you should have gained knowledge about the following:
- how to define and call functions, both named and anonymous
- how to use web browser tools to debug your code
Part 1: Codecademy
- Each group member should register a user at Codecademy (free).
complete the following sections:
- Control Flow: “Control flow”
- Functions and Scope: “Functions”, “Scope”
- Arrays and Loops: “Arrays”, “Loops”
- After completing the exercises, show your TA your result page.
Part 2: Slideshow
Prepare your HTML and CSS
Create a web page (HTML and CSS) that looks like the mockup below. You can use the images in this zip-file in your slideshow, or you can use your own.
Slideshow - 15 points
- Make the left and right triangles react when the user hovers above them with the mouse cursor. You could e.g. change the opacity, the color, the size etc.
- Change the shape of the mouse cursor into a hand - this helps the user understand that he or she can click on a triangle.
- Change the image shown in the middle square when the user clicks on the buttons. The slideshow should loop, i.e. when the user clicks “show next image” and the last image is being shown, the slideshow should look and show the first image.
Try to make the script easy to modify so that more/less images can easily be added or removed.
Slideshow - 20 and 25 points
Add a semi-opaque box that contains the title or a description of the currently shown image. See mockup below. Thumbnails are not required for 20 points.
Slideshow 25 points
The 25 point challange is to add thumbnails of all the images in the slideshow below the main slideshow image. A highlight (e.g. a white frame or a change in opacity etc) should be added to the image that is currently shown. See the mockup below.
Clicking on one of the thumbnails should select and display the image represented by the thumbnail.
Extra extra (optional - for fun) challange
Only show the text-box previously created when the user mouses over the main slideshow image.
Updated by: Jody Foo
Last updated: 2017-10-29