Assignment #3 (Photo Viewer)   CMSC122
Due Fri Nov 13 6:00 pmFall 2009

Objectives

• To practice JavaScript functions, one-dimensional arrays, events and for loops.
• To understand, validate, and present data associated with a research topic.

Overview

This project has two parts. First, you will implement a photo viewer that allows you to look at photos available in a folder. Photos can be seen in sequential order (based on the photo's number) or randomly. A video that illustrates the functionality of the application can be found at: Application Video section. The second part, consists in providing a presentation about a research topic, using the photo viewer you designed.

Grading

• (65 pts) Photo Viewer
  • (15 pts) Form
  • (10 pts) Sequential Slide Show Functionality
  • (10 pts) Random Slide Show Functionality
  • (10 pts) Implementation of Functions
  • (5 pts) Invalid Range Alert
  • (5 pts) Good Variable Names
  • (5 pts) Good Indentation
  • (5 pts) CSS requirement
• (35 pts) Research Topic Presentation

Notice that you don't have to submit a fully functional application in order to receive credit for this project. We will look at each one of the above items individually. Students that don't use arrays to implement the project will receive 0 credit for the JavaScript component of the project.

Specifications

Before you start implementing the web page, download the following zip file: a3.zip. This file has a folder named a3 which contains files you will need for the project. You need to write your program in a file named PhotoViewer.html.

Functions

Your project must define and use the functions below:

• main
• getArrayPhotosNames - This function has the following prototype: function getArrayPhotosNames(); This function will read the folder name, common name, start photo number, and end photo number and will return an array with the names of the photos that belong to the specified number range. Each photo's name consists of the folder name, followed by the common name, the photo's number and the ".jpg" extension. You can assume only .jpg files will be provided. Notice you don't need to add "/" (it is assumed the folder name will provide it). After reading the start and end photo numbers the function must check that the end number is larger than or equal to the start number. If that is not the case the message "Invalid Numbers" must be displayed via the alert function.
• randomize - This function has the following prototype: function randomize(dataArray). This function will randomize the contents of the dataArray. You are free to use any approach to randomize the array contents as long as you don't use any JavaScript functions (aside from Math.random()) that randomize the array for you. Notice that this function should randomize any kind of array (e.g., array of numbers, array of strings, etc.).
• Feel free to add any functions you may need.

Global Variables

In this project you will define and use three global variables. We need these global variables in order to keep track of the array of photos being displayed. These are the only global variables you can have in your project. You will lose a significant number of points if you add additional global variables.

• photosArrayGlobal- Represents array of photos being displayed.
• photoIndexGlobal - Represents index of photo being displayed.
• displayGlobal-Represents the img element where we display the photo.

CSS

There will be no css file for this project. Any style information will be provided in the html file (in the head section in between <style></style> tags). The background color for the page is: #FFF1CC. The additional style element you must add is an underline under the Viewer heading and a border around the img element.

Photo Viewer Requirements

• Selecting "Slide Show" generates a sequential slide show based on the photo numbers
• Selecting "Random Slide Show" generates a random slide show. Notice that if you continue pressing "Next Slide" eventually you will display the same set of random pictures.
• When the user selects the "Previous Slide" button the previous photo (previous in sequential order or previous in random order) must be displayed. If the currently displayed photo is the first photo then you must display the last photo.
• When the user selects the "Next Slide" button the next photo (next in sequential order or next in random order) must be displayed. If the currently displayed photo is the last photo then you must display the first photo.
• Only pictures in the specified number range should be used in any slide show.
• Your project must work with folders of pictures different from the one (i.e., umcp) we have provided.
• You can assume users have already selected "Slide Show" or "Random Slide Show" when clicking on "Previous Slide" or "Next Slide".
• The next picture should be displayed when we click on the currently displayed image.
• You must use good indentation.
• Your html file must be implemented using XHTML 1.0 (Strict) and must validate according to the http://validator.w3.org/#validate-by-upload validator.
• You may not use any authoring tool (e.g., frontpage, dreamweaver, etc.) which generates the HTML code for you.
• You must implement this project by yourself.
• Do not post your project in a web site (people will see your code).
• Make sure you view your code using Firefox (that is the environment we will use to grade your project).
• You do not need to provide any pseudocode.
• You must use good variable names.

Research Topic Presentation

You will research how computing and increasingly interconnected information sources have changed the set of problem solving and research skills needed by society during the last decade. The results of your research work should be presented using a set of photos/slides that can be shown through the photo viewer you designed for this assignment. Put your presentation in a folder named research and named all the photos/slides with the name research1.jpg, research2.jpg, etc. Regarding the presentation:

• You need to do your research using the technologies discussed in class.
• You need to validate the data found on the web using the techniques/tools described in class.
• Your presentation must include references

Application Video

A video showing the functionality of your system can be found at Video. A snapshot of the web site's main page is provided below.

Submission

To submit your project, follow these steps:

1. Create a zip file that includes the a3 folder without the umcp folder (we already have that folder). Make sure it has the research folder.
2. Upload the zip file you created in the previous step using the submit server available at: https://submit.cs.umd.edu:8443/. Make sure you select the submit server entry (Assign #3) that corresponds to this project.
3. After submitting your project make sure you download the submitted file and verify that what you have submitted is correct. Please do not e-mail your project.

Academic Integrity

Please make sure you read the academic integrity section of the syllabus so you understand what is permissible in our assignments. We want to remind you that we check your assignment against other students' assignments and any case of academic dishonesty will be referred to the University's Office of Student Conduct