The purpose of this assignment is to familiarize you with dynamically manipulating the Document Object Model (DOM), in response to user interaction. We know that through the DOM, our HTML documents are structured as trees. Algorithmically, we can traverse these structures using typical tree walking algorithms (e.g., Depth First Search). We can also move chunks of DOM around, via operations such as removeChild(), appendChild(), insertBefore(), and replaceChild().

Dynamic interaction can help simplify the presentation of large collections of information. It can also serve to make information engaging and fun. Create an interesting interactive experience that manipulates DOM structure in response to a user's interactive gestures. Your code should dynamicaly change the tree structure of the DOM. Human gestures you may wish to respond to include mouseover, click, drag, and entering data in a form field.

criteria of evaluation

• concept -- what are you modifying? why? how will this be interesting and/or useful to the user?
• sophistication -- how are you modifying the dom structure? what information is dynamic?
• visual -- how does the presentation look initially? how does the look change? how do you use principles of visual design to accomplish this?
• mappings -- what changes visually? what does this mean? how does it relate to the user's gestures? how does it contribute to concept and experience?
• affordances -- how does the user know how to interact?
• interactivity -- how does the user interact? how does the display change in response to the user?
• functionality -- how well does it work?
• experience -- is the experience informative? engaging? fun?

You may notice that the criteria are not mutually exclusive. They are neither orthogononal dimensions, nor branches of a tree. Once again, in the structure of knowledge, we see the rhizomatic meshwork of an ecosystem.

Notes: (1) no sharing code or using found code on this assignment; (2) must work in Mozilla and IE.