Assignment #5: Programming with JavaScript Solution

Task: The purpose of this assignment is to illustrate the use of JavaScript programming and the Document Object Model (DOM) in a HTML document. Ad Rotation is a feature used on almost every website in the internet today to produce revenue or forward traffic to other websites. In this assignment, you will create an interactive HTML page that will show a collection of books images from O’REILLY publishing. The ads (images) are weighted, so you have to show each ad (image) for specified amount of time provided below before going to the next one. This page will support two major modes of operations:  Rotating Slideshow mode: The webpage will automatically keep on changing each ad (image) based on the given duration without any manual intervention.  Manual direct access mode: The webpage will provide buttons for navigating to the previous and next ad for accessing each ad directly.

Problem Statement: You will have to write JavaScript code to create an interactive Ad Rotator on your web page. The Ad rotator should be displayed centered within your page.  The Ad Rotator should contain the following: A Hyperlink: to open the current ad (image) in a new window. Buttons or Hyperlinks: Next and Previous, an Invisible Window Timer: to change the ads based on the given durations.

Functionality:

There are four ads to rotate here:

1)      JavascriptCookbook.jpg Duration: 3 seconds

2)      learningPerl.jpg Duration: 5 seconds

3)      modernPHP.jpg Duration: 3 seconds

4)      mysqlCookbook.jpg Duration: 7 seconds

 

 Loading the page should activate the Automatic Ad Rotation functionality. Once the page is loaded, first ad needs to be displayed. After each ad's stated time limit, the next ad needs to be displayed. If it is the last ad in the list, it should go back to the first ad. The “Next" button overrides the slideshow/rotation functionality, and shows next ad on the list. The time needs to be reset according to the new ad's duration. The “Previous" button overrides the rotation functionality and shows previous ad on the list. If it is the first ad, it should go to the last one on the list. The time also needs to be set for the new ad. Clicking on these buttons will show the corresponding ad and reset the timer. The ad size is 800 by 295 pixels, and each individual ad is provided in the assignment files.

You should download the images you will need from the Moodle website from the Assignment 4.

Design Guidelines: You can assume that the images are stored in the same directory as your HTML files. When the “Next" button is pressed on the last ad, it should loop back to the first ad's image. When the “Previous" button is pressed on the first ad, it should loop back to the last ad's image.

Grading Criteria:

1. Your submitted HTML and CSS files pass their respective HTML and CSS validator checks - 10 points 2. Functionality of automatic Ad Rotation. The appropriate image and URL above – 25 points. 3. Each ad displayed in the correct order for the correct amount of time. - 10 points. 4. Functionality of Next and Previous - 25 points. 5. The correct order and duration of each ad should resume after overriding the automatic Ad Rotation by pressing the Next, Previous, or any individual bullet - 10 points. 6. Clicking on an ad should open the correct URL in a new window - 10 points. 7. Show the correct tool-tip box for each ad when the mouse pointer is hovering on them - 10 points

Submission Instructions:

Your submission should be packaged  in a tarball  or zip file. When opened,  it must  create  a directory titled  ‘<UMN internet ID’ containing  all of your files.   UMN internet id should be your x.500 id. You will lose AT LEAST 5 points if you do not do this correctly. Include all the files we require to run your Web Pages in your the following files in your submission including pictures and external JavaScript files.  Your submission should include at least:

• The HTML file containing your AdRotator Code. • A CSS stylesheet containing your code (You may have more than one) • All the pictures you used (including the ones we gave you) • A JavaScript file containing your code • A README file: the file should include your student ID, name, and x500 ID, and anything else you want