University of Washington, CSE 190 M, Spring 2008
Homework Assignment 3: ASCIImation
due Wednesday, April 23, 2008, 11:00pm electronically

Special thanks to Dave Reed for the original idea of this nifty assignment.

This assignment tests your understanding of JavaScript and its interaction with XHTML user interfaces. It also gives you practice with layouts that use absolute and fixed positioning. You must match in appearance the following web page (between but not including the thick black lines):

Background Information:

ASCII art is the practice of drawing pictures that consist of text characters. ASCII art has a long history in computing as a way to draw pictures that could be printed by text-only printers or displayed on text-only computer monitors. One variation made possible on the web is animated ASCII art, or "ASCIImation." Groups of dedicated nerds are even working to recreate the entire movies Star Wars and The Matrix as ASCIImations.

The first task for this assignment is to create a web page with a user interface (UI) for creating and viewing ASCIImations, stored in a file named ascii.html. On the course web site is a skeleton file that provides a starting point for your XHTML code. You will have to edit the XHTML skeleton to add the code to display the UI controls. This page must exactly match the appearance and behavior specified in this document. The skeleton ascii.html links to a provided skeleton CSS style sheet that sets some of the basic fonts and styles, but you'll need to add your own style sheet file ascii_style.css to match the expected appearance.

After creating your page to match the expected appearance, you must make the UI interactive so that clicking the various UI controls causes appropriate behavior. Do this by writing JavaScript code in a file named ascii_script.js. The skeleton version of ascii.html links to an instructor-provided file named animations.js that contains helpful starter code. Specifically, it declares all of the ASCIImations you will use in this assignment as String variables named exercise, juggler, bike, and dive. You don't need to (and shouldn't) edit this file, but your ascii_script.js file can refer to the variables and code declared in animations.js. For example, if you have a textarea element on your page with an id of displayarea, you could set it to contain the juggler animation text with the following statement:

$("displayarea").value = juggler;

The final part of your task is to create an ASCIImation of your own, stored in a file named asciimation.txt. Your ASCIImation must show non-trivial effort, must have multiple frames of animation, and must be entirely your own work. Be creative! We will put students' ASCIImations on the course web site for voting in an anonymous contest. (No obscene animations, please.)

In total you will turn in the following files:

Appearance Details:

(All styles in this first paragraph are already specified for you in the provided CSS file.) The overall page has a background color of #CCCCFF. The preferred font for text on the page is the default sans-serif font available on the system, in size 16pt. The top of the page contains a heading in 32pt bold text, centered horizontally within the page. There is no gap between the heading content area and the top of the page.

Under the heading is a text box, positioned 10% from the top of the page and centered horizontally within the page. Its width is 80% of the page size and its height is 70% of the page size. It has no border and uses a 12pt monospace font initially. Note that you must include rows and cols attributes in your textarea XHTML element for the text box to show up at the right size. It doesn't matter what you set these to, because the true size of the text box will actually be determined by your CSS styles on it. XHTML requires a textarea element to have both a rows and cols attribute anyway for your page to validate.

Below the text entry box is a set of controls. The controls are grouped into three field sets with 5px black borders and labels. The controls and their behavior are described in the Behavior section of this document. To make the field sets all appear on the same line, set the display CSS property for fieldset elements to inline as described in the "Lecture 06 - Advanced Layout" slides.

The bottom of the page has a right-aligned section containing links to the W3C validators and our own JSLint tool. The area containing these images should always remain in the very bottom-right corner of the page, with no gap between its content and the edge of the browser window. The images should not have borders.

All other style elements on the page are subject to the preference of the web browser. The screenshots in this document were taken on Windows XP in Firefox 2.0, which may differ from your system. When the browser is resized, the percentages described above should remain constant. You may assume that the browser window is large enough to accommodate its contents.

The page's title text is: ASCIImation

Behavior Details:

The following are the groups of controls at the bottom of the page and each control's behavior:

For CSE Majors:

CSE majors in majors-only sections should also complete the following additional features. Some of these haven't been covered in class, but we expect you to learn about them on your own. Non-majors may attempt to add these features to their programs without reward or penalty, as long as that addition does not break any existing functionality or introduce poor programming style.

A screenshot of the majors-only output will be provided on the course web site.

Implementation and Grading:

We suggest writing this program using the following development strategy:

We again STRONGLY recommend that you install and use the Firebug add-on for Firefox when working on this assignment. For one, you can use it to inspect elements to diagnose problems with the box model and get your styles just right. You can also use it to debug JavaScript code, set breakpoints in JavaScript code, type arbitrary expressions into its Console tab for evaluation, and watch the state of variables.

Since this is your first exposure to JavaScript programming, you will probably encounter frustrating bugs. You may find that your code does nothing at all when you load the page, or you may see an unexpected value. We strongly recommend that if you are having JavaScript troubles, you paste your code into our JSLint tool and see if it contains any errors or warnings. JSLint can help you find many common JavaScript bugs.

Submit your assignment online from the turnin area of the course web site. For reference, our ascii.html file adds about 39 lines of XHTML to the skeleton, our ascii_style.css file is 28 lines long, and our ascii_script.js is 63 lines long including comments (excluding our custom ASCII art), though you do not need to match these values.

Implement the content of your web page using XHTML 1.1 as taught in class. For full credit, your page must successfully pass the W3C XHTML 1.1 validator. Choose appropriate XHTML tags to match the structure of the content on the page. Do not express stylistic information in the XHTML page itself, such as inline styles, inline CSS/JS code in the HTML page's header, or presentational XHTML tags such as b or font.

Express all stylistic information on the page in CSS using your style sheet file. You should use absolute and fixed positioning in your style sheet to achieve the layout appearance specified. For full credit, your style sheet must successfully pass the W3C CSS validator. You should not use HTML or CSS constructs that have not been discussed in lecture, slides, or textbook chapters during the first three weeks of the course.

Format your HTML, CSS, and JS so that they are as readable as possible, similarly to the examples shown in class. Also place a comment in each file containing your name and section. Please don't place any comments or other header information at the top of your asciimation.txt file; it should contain only your custom animation, so that if someone did a Select All, Copy, and Paste into your HW3 program, it would run as is.

Implement the behavior of each onscreen control using JavaScript event handlers defined in your script file.

For full credit, your JavaScript code should pass the provided JSLint tool with no errors reported (when the Recommended options are checked). You should also follow reasonable stylistic guidelines similar to those you would follow on a CSE 14x programming assignment. In particular, you should avoid redundant code, minimize the number of global variables, utilize parameters and return values properly, correctly use indentation and spacing, and place a comment header on top of the file and atop every function explaining that function's behavior.

Part of your grade will also come from successfully uploading your files to the Webster web server. You should place your files into your public web space in a subdirectory named hw3, so that it is possible to navigate to your page by entering the following URL into the browser:

Please do not place a solution to this assignment online on a publicly accessible (not password protected) web site. Doing so is a violation of the course academic integrity policy.