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):
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:
ascii.html, your web pageascii_style.css, the style sheet for your web pageascii_script.js, the JavaScript code for your web pageasciimation.txt, your ASCII animation
(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
The following are the groups of controls at the bottom of the page and each control's behavior:
Start: When clicked, this button causes animation to begin. When the the page is idle, all frames of the animation are visible. Frames are separated by 5 equals signs in a row and a line break: "=====\n"
When animation starts, whatever text is currently in the text entry box is broken apart to produce frames of animation. (This might be a pre-set animation, or text that the user has typed manually.) During animation, one frame is visible within the text entry box at any given moment, starting with the first frame. The animation changes frames once every 200ms. When the animation reaches the last frame, it loops back around and repeats indefinitely.
You may assume that the user will not click Start twice in a row; that is, the user will not click Start while the animation is already running. The user should be able to click Stop multiple times in a row with no harmful side effects.
Stop: When clicked, halts any animation in progress. When animation is stopped, the text that was present in the box before animation began is returned to the box.
Contains three radio buttons. When one of these buttons (or the text next to it) is clicked, it immediately sets the font size in the main text area to 8pt, 12pt, or 20pt as appropriate.
Initially the 12pt button is checked and the text in the text area is shown in a 12pt font size. Only one font size button can be selected at a time. If the animation is playing and one of these buttons is clicked, the font size changes immediately.
A drop-down list of pre-set ASCII animations. When a choice is clicked, the main text area updates to display all the text of the chosen animation. The following choices are available in the box:
Initially the Blank animation is selected and no text is showing in the text entry box.
Note that the user may decide to type new text into the field after choosing a pre-set animation, and the animation shown should reflect these changes. (In other words, don't capture and split the text to animate until the moment the user presses the Start button.)
You may assume that the user will not try to type into the text area while animation is occurring. You may also assume that the user will not change to a new animation while animation is occurring; assume that the user will stop any existing animation before changing to a new one.
The Custom choice should show your own custom ASCIImation that you have created. A utility will be available on the course web site to convert your asciimation.txt file into a long JavaScript string, suitable for inclusion in your code.
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.
http://www.cs.washington.edu/education/courses/cse190m/08sp/homework/3/stickman.gif.
Initially the Medium speed is selected and the delay is 200ms. Only one speed button can be selected at a time. If the animation is playing and one of these buttons is clicked, the speed changes immediately.
The two sets of radio buttons always remain enabled regardless of whether the animation is currently playing. The drop-down list should be enabled when the page is idle but should be disabled while the animation is playing.
Set a control to be enabled or disabled by changing its boolean disabled property. For example, to disable a control with id of customerlist, you would write:
$("customerlist").disabled = true;
.js file in the page's header. In other words, no onclick or other event handlers should be embedded in the XHTML body code. Instead, attach all event handlers using window.onload and the Document Object Model (DOM) methods as described in lecture.
A screenshot of the majors-only output will be provided on the course web site.
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.
Except where otherwise noted, this document's contents are © Copyright 2008 Marty Stepp / Jessica Miller and licensed under Creative Commons Attribution 2.5 License.