CIS 1.0/Biomedical Computing --- Fall 2006 --- Assessment Unit C, Part I

CIS 1.0/Biomedical Computing
Fall 2006
HW Unit C, Part I

INFORMATION

This assignment will be given in two parts.
Part I is listed below (given in lab on Wednesday October 4).
Part II will be given in class on Wednesday October 11.
This assignment covers the material from unit C in our syllabus: Data Representation and Storage. You may find it helpful to read chapers 12 and 14 in the Reed text in order to complete both parts of this assignment.
You also may find it helpful to the lecture notes and examples from Unit B as well as Unit C.
This assignment is worth 5 points, or 5% of your term grade.

INSTRUCTIONS

For this assignment, you will create two HTML files in Notepad. Type your name in the files and your email address as comments.
Save your work!!! BEFORE YOU LEAVE THE LAB, make sure that you save your work (both HTML files and any images files you use) by storing them on a USB flash drive or by mailing them to yourself.
When you are completely finished with all the steps, zip all your files together and email the zip file to me as an attachment.
Instructions for using WinZip are available.
My email address is: parsons@sci.brooklyn.cuny.edu.

The assignment is due (both parts) on Wednesday October 25, 2006.

BE SURE TO ASK IN THE LAB IF YOU NEED HELP WITH ANY STEPS!!!!

PART I. CREATING DYNAMIC HTML.

Step 1. Buttons and Javascript .
(1 point)

Start up Notepad.
In the file, you will write HTML and Javascript code to do the things listed below.
Look at first form example from Unit C.
Modify the example so that it uses four different buttons, labeled "RED", "BLUE", "GREEN" and "YELLOW". Note that you must give each button a different name as well as value (i.e., the button label is what is displayed on the button).
Modify the onclick function call for each button so that when you click on each button, a window pops up and displays a message like "you clicked on the RED button" (or something more creative than that), instead of the message "hello". Whatever message you use, it must contain text that indicates which color button you clicked on and the message must be different for each button!
Save the file and name it with your last name followed by the .html extension. For example, my file would be called parsons.html. Remember to tell Notepad not to put the "txt" extension after ".html"!
Try opening the file with a browser and see how it works. If any of the elements above don't work, go back into the Notepad window, and edit the file to fix them. The reload the file in your browser. Keep doing this until everything works just perfectly :-)

Step 2. Image maps and Javascript.
(1 point)

Open a new file in Notepad.
In the file, you will write HTML and Javascript code to do the things listed below.
Look at the first form example and the image map example from Unit C.
Modify the examples so you have an image map that uses this image file and when you click on each colored square, an alert box pops up.
Replace the href=... sections of each <area...> tag with onclick=alert('...'). You can fill in the argument to the alert() function using the text you put in the previous step. The argument is the text between the single quotes ('), in the case of form example, the argument is 'hello are we done yet'.
Note that you will need to update the size of the image in the <img...> tag and the corresponding coordinates in each <area...> tag.
Also note that you will need to create a fourth <area...> tag since there are four colors in the image.
When you save this file, name it with your last name, followed by the number 2, followed by the .html extension. For example, mine is: parsons2.html.

PART II.

Part II (worth 3 more points) will be available in class on Wednesday October 11.