Description
Goals: In this assignment you will learn about XHTML, CSS, and JavaScript programming. You will create an interactive HTML page that will show information about various campus buildings. This page will support 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
2/3www-users.cselabs.umn.edu/classes/Spring-2012/csci4131/Assignments//Assignment2.html
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 initial screen 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
3/3www-users.cselabs.umn.edu/classes/Spring-2012/csci4131/Assignments//Assignment2.html
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
