Design Document
Project 2

 

Goals:

My main goal for this project was to design a site that would be fun. The character of Electra, the bright pink background, and the somewhat silly content are all meant to amuse and to make the user feel that they've stepped into a slightly riduclous world. I did not want anyone to feel frustrated or annoyed, however, so I tried to keep it straightforward and logical, even while leading the user in differnt directions.

Forms:

I used form elements on many pages. The Index page contains a text box and radio buttons. The Farm page has a select menu, and the Alaska page has radio buttons. The London page has radio buttons and checkboxes. The results of these form elements are not sent to another page for processing, but are rather used to control other elements within the same page, such as making invisible text or images appear so that it seems the flamingo is conversing with the user.

Cookies:

When the user enters their name on the Index page, a cookie is set. That cookie is then read on each subsequent name, with the result that Electra calls the user by whatever name they entered throughout the site. I didn't set an expiration date on the cookie because I wanted it to expire when the browser was closed, so that there would be an opportunity to enter a new name if a new user should open the site on the same computer.

Interaction:

The whole site is a kind of game, so there are interactive elements throughout, an effect which was acheived mainly through the use of the form elements mentioned above.

User Feedback:

I used a mouseover effect on the Farm page, to make a speech bubble appear when the mouse moves over the image selected from the menu. Otherwise, I completed the DHTML requirement with the Dark Room page, which I adapted from our DTML and CSS Textbook site. My Dark Room page features a follow-the-mouse-pointer effect as well as a mouseover effect that makes the door appear.

Elements from Project 1

Naturally I have used a CSS style sheet. My navigation aid is rather small, and, not counting the link to the Design Document, it offers only one option to the user, which is to start the game over. I did this because the game only works if it is played straight through; that is, it wouldn't be appropriate to jump to the end. Also, each page offers a hyperlink to at least one other after the requirements of that page have been met. Having used div blocks in Project 1, I decided I didn't really like them, so when I needed to format any of these pages I used hidden tables, as on the Alaska page. Finally, I used many images as they were critical to the theme of this site, that is that Electra traveled around the world. All photos and clipart used were either taken myself or downloaded from sites that gave permission.