This page illustrates many of the important things you will learn by mid-semester.

External factors – visible to the viewer of the page

• User interaction – click on the 'shuffle' button
• Progressive disclosure – click on the triangles. This is one of the most important properties of good pages.
• Progressive enhancement (= graceful degradation) – no Javascript running in your browser? No problem. Page will be fully functional (but, of course, not interactive).
• Each user can customize this page to suit their own needs – click on a delete box, save the page, and then reload it. Deleted problems are gone.
• Effective page layout and typography. Structure reinforces meaning.

Internal factors – visible only to the programmer

• Clean separation of: content (text and images), structure (HTML), presentation (CSS) and behavior (Javascript).
• Use of advanced, "second level" tools – jQuery library that extneds Javascript, Blueprint CSS framework to simplify formatting, qUnit for testing (not used for this page).
• Well structured code (HTML, CSS, and jQuery).
• The HTML for this page was automatically generated by a program running on the server. Each individual problem is about 50 lines of HTML code that is generated from a succint representation of the problem. For example, the input that creates Problem 1 is

  &2#86*3#kj4##North plays the 3. East's play#K (Kantar: 50)

  Note that server side programming will not be covered until near the end of the semester.