Description
Goals:
In this assignment you will learn about XHTML, CSS, and JavaScript programming. You will create an
interactive HTML page that willshow information about various campus buildings.
This page willsupport two modes of operation. In the manual mode, it will provide buttons for the user to
manually browse the information about various campus buildings.
In this mode, the user may also click on an image thumbnail to display that image as a bigger image.
In the slide show mode, the web page will automatically keep on displaying information about various campus
buildings.
Problem Statement:
You will have to write JavaScript code to create an interactive campus building information HTML page.
This page should contain the following:
x Following Buttons: Start, Next, Previous, Display Information, Start Slide Show, Stop Slide Show.
x A Select box that contains the following options: ³None´, ³Architect´, ³Year´, and ³Description´.
x Thumbnail building images
x An area to display an image of a campus building in bigger size
Functionalit\:
x The ³Start´ button should display the image of the first building. You will also display the type of
information that has been selected.
x The ³Next´ button should display the image of the next building. You will also display the type of
information that has been selected.
x The ³Previous´ button should display the image of the previous building. You will also display the type
of information that has been selected.
x If a thumbnail image is clicked, it should be displayed as the bigger image.
x The thumbnail images should have the size 50 by 50.
x The bigger image will have the size of 500 by 300.
x The ³Display Information´ button will display the selected information type based on the option selected
from the select box.
R The information should appear to the right of the bigger image.
R The information should appear in bold, and font size of 20.
x The ³Start Slide Show´ button should start the slide show. Each image should be displayed for a period
of 1 second.
x While a slide show is active, it should not be possible to start another slide show. You should display an
2/13/12 Assignment #4
www-users.cselabs.umn.edu/classes/Spring-2012/csci4131/Assignments/«/Assignment2.html 2/3
alert if the ³Start Slide Show´ button is clicked while the previous slide show is still active.
x The ³Stop Slide Show´ button should stop the slide show.
x The specific thumbnail image that is being displayed in the bigger image area should be highlighted in red
color border box.
R This requirement should be satisfied in both manual mode, and slide show mode.
Here are the screenshots demonstrating the campus building information HTML page corresponding to above
functionality.
Screenshot 1: This is the initialscreen shot when no button has is clicked.
Screenshot 2: This is the screen shot after ³Start´ button is clicked. Notice that ³Architect´ is being
displayed.
Screenshot 3: This is the screen shot after ³Next´ button is clicked.
Screenshot 4: This is the screen shot after ³Previous´ button is clicked.
Screenshot 5: This is the screen shot after an image is clicked.
Screenshot 6: This is the screen shot after the slide show has been started (by clicking the ³Start Slide
Show´ button).
Screenshot 7: This is the screen shot when the ³Start Slide Show´ button is clicked while a previous slide
show is already active.
You can download the images here, and building information here.
We are giving you information about ten campus buildings. You should use the following order while displaying
the building information:
Armory, Pillsbury Hall, Folwell Hall, Jones Hall, Pillsbury Statue, Wesbrook Hall, Nicholson Hall, Eddy Hall,
Music Education, Wulling Hall.
Design Guidelines:
You can assume that the images are stored in the same directory as your HTML files.
Grading Criteria:
1. Functionality of Start, Next and Previous buttons – 30 points
Appropriate image and related information should be displayed as specified in the requirement above.
2. Display Information Functionality – 10 points
3. Thumbnails are displayed and have red border – 10 points
4. Images have specified dimensions – 10 points
5. Slideshow Functionality – 40 points
a. Functionality of Start Slide Show and Stop Slide Show – 20 points
b. Starting another slide show while once slide show is active should not be allowed – 10 points
c. If the user changes the information type while the slide show is active, appropriate information should be
displayed along with the images – 10 points
2/13/12 Assignment #4
www-users.cselabs.umn.edu/classes/Spring-2012/csci4131/Assignments/«/Assignment2.html 3/3
Submission Instructions:
Include the following files in your submission:
a. An HTML file containing presentation and JavaScript code. Name the file as assignment2.html
b. README file
