INFORMATION

• This assignment covers the material from unit III 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, posted on the "syllabus" portion of the class web page (see sessions on Monday Sep 24 and Monday Oct 1).

• This assignment is worth 7 points, or 7% of your term grade.

INSTRUCTIONS

1. For this assignment, you will create several HTML files in Notepad.
   
2. Type your name in the files and your email address as comments.
   
3. 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.
4. When you are completely finished with all the steps, zip all your files together and email the zip file to me as an attachment.
   
5. The subject line of your email should say: cc3.12 hwIII
   
6. My email address is: sklar@sci.brooklyn.cuny.edu.

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

PART I. CREATING DYNAMIC HTML.

Step 1. Buttons and Javascript .
(2.5 points)

1. Look at the following Javascript example:
   http://www.sci.brooklyn.cuny.edu/~sklar/cc3.12/examples/js.html

2. Copy the HTML file to your computer and edit it in Notepad.

3. 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).

4. 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 are we done yet". 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!

5. Save the file and name it with your last name followed by the .html extension. For example, my file would be called sklar.html. Remember to tell Notepad not to put the "txt" extension after ".html"!

6. 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.
(3 points)

1. Look at the following (broken) example:
   http://www.sci.brooklyn.cuny.edu/~sklar/cc3.12/examples/im.html

2. Copy the HTML file to your computer and edit it in Notepad. Note that you will need to copy: im.html, blue.html and yellow.html to your computer in order to complete the assignment. You access the "blue" and "yellow" pages by clicking on the blue and yellow regions in the image map on the example page listed above (im.html).

3. Correct the example so that you can click on each of the four colored regions in the image map and go to another page.
   1. The "blue" page works fine. Use that as an example.
   2. The "yellow" page has a problem (hint: click on "go back" on the yellow page). You have to fix the problem.
   3. The "red" and "green" don't work at all---fix them (hint: you will need to fix the coordinates in the image map and also create files like "red.html" and "green.html" to link to).

4. When you save the main file with the image map, name it with your last name, followed by the number 2, followed by the .html extension. For example, mine is: sklar2.html. Then save the "color" files with your name, like "sklar-red.html", etc.

PART II.

1.
(0.5 points)
Go to http://www.speakeasy.net/speedtest/, take the speed test and report your DOWNLOAD speed and UPLOAD speed by connecting to the SERVER in NEW YORK, NY. Enter the two speeds in your Notepad file.
Do this both AT HOME and ON CAMPUS. Compare the numbers---where is your internet access faster?
(If you don't have internet access at home, then don't worry about it.)

2.
(0.5 points)
Convert the binary value 00101101 to base 10 and base 16 (hexadecimal).

3.
(0.5 points)
Convert the base 10 value 43 to base 2 (binary) and base 16 (hexadecimal).