About Your Web Portfolio

Remember that by the day of the final exam (Friday, December 19), your Web Portfolio should be in final form, ready for grading. The Portfolio counts for 10% of your grade for the course.

To complete the Web Portfolio, you need to copy your work from your cs120 folder into your www folder. You must have an index.html file to serve as the main page for the Portfolio. The main page should have links to the work that you have done in the course, with some text describing the work. Exactly how you organize and present things is up to you, but you should have a clear organization and an attractive presentation. Ideally, you will fix any significant problems that you had with the lab work that you include in the portfolio.

In addition to your lab work, you need to include one additional new project of your choice. It is your responsibility to design and implement the project. You should do something that you know how to do and that you can finish in the time available. The level of difficulty should be not much greater than a typical lab exercise. Of course, if you are imitating an exercise from one of the labs, it would be nice if you could improve it by using some of the things that you have learned more recently. You have probably been wondering about what kind of project you might do. Here are some ideas:

• Make a really nice web page, using just HTML and CSS. Maybe a resumé.
• Create some random computer artworks, like those from Lab 5.
• Make a more sophisticated animation, like those from Lab 6.
• Make a nicer interactive game, like those from Lab 8.
• Make a slideshow of new images that you create using Gimp.
• Make an animation that uses CSS positioning and sizing to manipulate HTML elements. Or how about a background that slides around under the page (using the background-position property).

Exercise 1: Shine

Start with a short exercise in which you will use arrays that already exist. Open the file named shine.html for editing. That page shows an animation of planets going around a star (or maybe moons going around a planed, who knows?). There should be stars in the background. The script on the page already has two arrays named sx and sy that have been filled with random x and y coordinates where the stars should appear, but the stars are not actually drawn. For this first exercise, your assignment is simply to draw the stars. Each star should be drawn as a very samll white disk. The numbers sx[i] and sy[i] give the coordinates of the center of star number i.

Find the function named drawStars at the bottom of the file, and add code to draw the stars.

(This exercise is mainly to point out that you can't draw the stars at new random locations in each frame -- they need to have fixed locations, calculated in advance, that stay the same in all frames.)

Exercise 2: Pulse

In the second exercise, you will convert an animation that shows just one object into an animation that shows many objects. Open the file named pulse.html for editing. That page shows a "pulsing" disk. The alpha transparency of the disk cycles periodically between 0 and 1. The position, color, and period of the disk are selected at random and are stored in variables named centerX, centerY, color, and period. These variables are used for drawing the disk.

Your job is to make the variables centerX, centerY, color, and period into arrays. The arrays will hold the data for drawing a large number of disks. Each disk will have its own position, color, and period.

The changes that you need to make are in the functions named initialize() and drawCircles() at the end of the file. Find those functions and make the necessary changes to get an animation of a large number of pulsing disks.

Exercise 3: Disappear

The sample file getElementsByTagName.html shows how to work with the array of objects that is returned by the function document.getElementsByTagName. In this exercise, you will do something similar. Open the file named disappear.html for editing. A script at the bottom of the page already calls the function document.getElementsByTagName(p) to get an array containing all the paragraphs on the page. The script also defines a randomColor() function that you can use to set the CSS color property of an element.

Your job is to do two things to that page. First, add a for loop to the script that will set every paragraph to have a different random color for its text.

Second, add an event handler for the onclick event to each paragraph. When the user clicks the paragraph and the handler function is called, the paragraph should disappear. You will have to write the event-handler function. Remember that you can make an element disappear by setting the value of its CSS display property to "none".