Project 2 Design Document: Kate Fox and Maeve Montalvo

Required Elements

Forms

• We use a text box/ submit button which returns the name of the user on Sophia's ransom note (See it)
• Radio buttons serve as input type for trivia in the Planthouse page (See it)
• Buttons are used to open mailboxes (swap images) (See it)
• Mad Lib page (See it)

Cookies

• The cookie is taken by the name request in Sophia's ransom note (See it)
• The data taken from the cookie appears on the flashlight page (See it) and later on the piano page (See it).

Interaction

• Buttons to turn music on and off in two locations.
• Text box requesting and returning name (Sophia ramsom note--See it)
• Flashlight page (See it)
• Radio button trivia (Planthouse Page--See it)
• KITCHEN PAGE
• Buttons in mailroom page (See it)
• Password in piano page (See it)
• Mad Lib (See it)

User Feedback

• On links, underline appears on rollover (CSS-defined)
• After correct answers or accomplishments in challenges, user is given link to the next site and the next lantern appears.
• Rollovers in kitchen page (See it)

Elements from Project 1

• Style sheet determines layout (See CSS)
• Links are used where appropriate
• Images are used all over and are an integral part of the site as a whole (not merely decoration!)

Other neat stuff we included

• Embedded multimedia--use of sound on multiple pages
• Flashlight page (thanks to The Adventures of Electra the Flamingo by Laura Evans for the idea. We copied most of her code but tweaked it a bit for our own purposes).
• Slide show intro and piano page--JavaScript/ Loops and Arrays (Thanks to Nick for helping us work it out before we actually learned about these tools in class. See it)
• Circling images/ flying ghosts--Javascript. (Thanks to Nick again for teaching us this tool. We were able to pick up the skill and duplicate ghosts and tweak their positionings and paths successfully. See it)

Notes and Other Thoughts on the Site

Maeve made:

• Flashlight page
• Bonus Page
• Kitchen Page
• Piano pages

Kate made:

• Intro page and Sophia ransom note page
• Planthouse page
• Lost/ ghost page
• Mailroom page
• Final Sophia letter page

Images taken by Kate and Maeve and from the following sources:

Sophia parchment image---http://www.sxc.hu/photo/341929

Envelope image---http://userwww.sfsu.edu/~hl/JFLayher.html

Graduation cap---http://www.my-ecoach.com/online/resourcepub.php?resourceid=1392

Sophia Smith---http://clio.fivecolleges.edu/smith/sophia/who/who.htm

sophia smith 2---http://www.historic-northampton.org/Articles/213/543/4/953579634/

martha ghost--http://www.binghamton.edu/womhist/mcw/image1.htm

florence ghost--http://www.nlm.nih.gov/changingthefaceofmedicine/gallery/photo_283_2.html

forensic ghost--http://www.forensicgenealogy.info/the_digital_detective.html

Explanations

We attempted to include as much interaction and as many effects as possible. We also tried to use certain effects more than once so that the site would have some degree of consistency. We also learned some new skills in the process (e.g. circling images on the page). It was important for our site to be fun, functional, and interesting. Some notes for Nick: look out for hidden links. In the Flashlight page, there is one on the left hand side. In the Kitchen page, there is one on the sink.