Assignment 4: 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 an advertisement banner of upcoming movies at Coffman Union Theater. The ads are weighted, so you have to show each ad 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 based on the given duration without any manual intervention.

     Manual direct access mode: The webpage will provide individual bullet buttons underneath the main banner for accessing each ad directly.

 

Problem Statement: You will have to write JavaScript code to create an interactive Ad Rotator on the Form page that you developed in your previous assignments. The Ad rotator section should be displayed above the form data as shown in the screenshots provided.  The Ad Rotator part should contain the following.

 

         An Image: To display the banner image at the top and to display the “tooltip”.

         A Hyperlink: to open the current ad URL in a new window.

         Buttons or Hyperlinks: Next, Previous, and individual Bullet buttons.

         Invisible Window Timer: to change the ads based on the given durations.

 

Functionality:

 

There are three ads to rotate here:

 

   First Ad: Nerve

         File: Nerve.jpg

         URL: http://sua.umn.edu/events/calendar/event/14781/

         Show Time: Fri, Sep 30 7:00PM

         Duration: 7 seconds

   Second Ad: The Secret Life of Pets

         File: secret-life-of-pets.jpg

         URL: http://sua.umn.edu/events/calendar/event/14786/

         Show Time: Fri, Oct 7 7:00PM

         Duration: 5 seconds

   Third Ad: Suicide Squad

         File: suicide-squad.jpg

         URL: http://sua.umn.edu/events/calendar/event/14794/

         Show Time: Fri, Oct 14 8:00PM

         Duration: 3 seconds

 

     Loading the page should activate the Automatic Ad Rotation functionality.

     Once the page is loaded, first ad needs to be displayed on the banner area, and the URL and

“tooltip" values need to be set.

   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.

   “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.

   “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.

   Individual “Bullet buttons" override the rotation functionality and have a one-to-one relationship to each ad's banner. Clicking on these buttons will show the corresponding ad and reset the timer.

     Clicking on the banner will open the related event's URL page .

     The banner size is 800 by 295 pixels, and each individual ad is provided in the assignment files.

     The buttons and bullet images are provided in the assignment files.

 

 

The following screenshots demonstrating the Ad Rotator functionality are provided under Homework

Assignment4 in the Moodle:

 

         Screenshot 1: This is the initial screen shot showing the first ad.

     Screenshot 2: This is the screen after the Ad Rotator automatically changed the first ad after 7 seconds of being idle. This also shows the Tooltip.

         Screenshot 3: This is the screen after the Ad Rotator automatically changed the second ad after

5 seconds of being idle. This also shows the Tooltip.

         Screenshot 4: This is the screen shot after the “Next” button is clicked on the last ad.

     Screenshot 5: This is the screen shot after the “Previous” button is clicked while displaying the first ad.

     Screenshot 6: This is the screen shot right before the second bullet on the middle is going to be pressed.

         Screenshot 7: This is the screen shot right after the second bullet on the middle is pressed.

     Screenshot 8: This is the screen shot after clicking on the banner while the second ad was showing.

 

You should download the images you will need from the Moodle website from the Assignment 4 folder, they are in the zip file named “For_Students”. In the zip file, one folder, named “Screenshots,” contains the screenshots described above, the other folder (named “Images”) contains the images you will use in your assignment. You should use the following order and timing when automatically displaying the ads:

 

Nerve (7 seconds), The Secret Life of Pets (5 Seconds), Suicide Squad (3 Seconds).

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.

     The individual bullets for each ad need to be updated to reflect the current ad with highlighted state.

     The selected bullet no longer can change the banner nor change the rotation functionality. Other bullets need to be active and working.

     Use the provided images: “bullet_blue.png" for selected and inactive bullet, “bullet_gray.png" for the active but not selected bullets, “bullet_orange.png" for hovering over active bullets but not on selected one.

 

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, URL, and related tool-tip should be displayed and function as specified per the requirements above – 25 points.

3.   Each ad displayed in the correct order for the correct amount of time. - 10 points.

4.   Functionality of Next, Previous, and individual one-to-one bullets with appropriate highlighting state - 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 the following files in your submission:

 

         The HTML file containing your Calendar code.

         The HTML file containing your Form code and AdRotator Code.

         A CSS stylesheet containing your code (You may have more than one)

     A README file: the file should include your student ID, name, and x500 ID, and anything else you want us to know.