Web Programming

CSC 210, Spring 2011

(Monday and Wednesdays, 2:00-3:15pm in CSB 209)

Submit At my.rochester.edu

Assignment #5

This assignment tests your understanding of JavaScript and its interaction with HTML user interfaces. Please secure it using .htaccess as you did for the previous assignments - unless you turned it off, your existing .htaccess file should still be protecting it.

Contact Assignment

Your contact for this assignment is Harry Ledley. Please direct questions about this assignment to Harry (see the Contact Page) because he will best know what's going on. You can also always contact Jeff, who may end up forwarding your question to Harry.

Assignment Requirements

In this assignment, you must match the appearance and behavior of the following web page:

ASCII art is pictures that consist of text characters. ASCII art has a long history as a way to draw pictures for text-only monitors or printers. We will draw animated ASCII art, or "ASCIImation." Groups of nerds are working to recreate the entire movies Star Wars and The Matrix as ASCIImation.

Here are some resources for this assignment:

  • ascii.html (skeleton version of HTML page to start from)
  • ascii.css (skeleton version of style sheet to start from)
  • StringMaker a page that will help you convert your asciimation.txt into a JavaScript string for insertion into your ascii.js

The first task for is to create a page ascii.html with a user interface (UI) for creating/viewing ASCIImations. The skeleton ascii.html links to a skeleton CSS style sheet ascii.css. After creating your page, you must make the UI interactive using JavaScript in ascii.js so that clicking the UI controls causes appropriate behavior.

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 others to see. In total you will turn in the following files:

  • ascii.html, your web page
  • ascii.css, the style sheet for your web page
  • ascii.js, the JavaScript code for your web page
  • asciimation.txt, your ASCII animation

Appearance Details:

The page's title is "ASCIImation". The page should have a Favorites icon ("favicon") of http://www.cs.rochester.edu/u/jbigham/courses/210/assignments/5/stickman.gif

Under the page's heading is a text box with 80 columns and 20 rows, centered horizontally. Its width is 90% of the page size and its height is 400px. It has no border and uses a 12pt monospace font initially. Even though the CSS width/height properties will determine the text area's true size, you must include rows and cols attributes in your textarea XHTML element for the page to validate and display properly.

Below the text entry box is a set of controls grouped into field sets with 5px black borders and labels. Their behavior is described in the Behavior section of this document. To make the field sets display in the same line rather than each in its own block, see textbook section 4.4.4 about Element Visibility.

The bottom of the page has a center-aligned section of links to the W3C validators. Our screenshots were taken on Windows XP in Firefox 3, which may differ from your system.

Behavior Details:

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

Play Controls:

Start: When clicked (onclick), animation begins. When the the page is idle, all frames of the animation are visible. Frames are separated by 5 equals signs and a line break: "=====\n" (hint: refer to the JavaScript String Object for the methods you need).

When animation starts, whatever text is currently in the text 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 at any moment, starting with the first frame. The animation changes frames once every 200ms (hint: refer to the JavaScript Timing Events for the methods you need). When the animation reaches the last frame, it loops back around and repeats indefinitely.

You may assume that the user will not click Start again while the animation is already running.

Stop: When clicked, halts any animation in progress. When animation is stopped, the text that was in the box before animation began is returned to the box. The user should be able to click Stop multiple times in a row.

Font Size:

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 small (7pt), medium (12pt), or large (24pt).

Initially the medium button is checked and the text is 12pt in 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.

Animation:

A drop-down list of ASCII animations. When one of the animations is chosen (onchange), the main text area updates to display all text of the chosen animation. The choices available are: Blank, Exercise, Juggler, Bike, Dive, Custom

Initially the Blank animation is selected and no text is showing in the text entry box.

The ascii.html page links to a provided file animations.js that declares the ASCIImations String variables named exercise, juggler, bike, and dive. You shouldn't edit this file, but your ascii.js file can refer to these variables.

Note that the user may decide to type new text into the field after choosing a pre-set animation, and the animation shown when Play is pressed 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 here convert your asciimation.txt file into a long JavaScript string, suitable for inclusion at the bottom of your ascii.js code. 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 program, it would run as is.

Implementation and Grading:

We suggest writing this program using the following development strategy:

  • Edit the XHTML file to add the proper UI controls.
  • Write your CSS code to achieve the proper layout.
  • Write a small amount of "starter" JS code and make sure that it runs. (For example, make it so that when the Start button is clicked, an alert box appears.)
  • Implement the code to change animations and font sizes. That is, make it so that when an option is chosen in the selection box, the proper text string appears in the main text area. Also make it so that when the font size radio buttons are clicked, the text area's font size changes appropriately.
  • Implement a minimal Start behavior so that when Start is clicked, a single frame of animation is shown. Clicking Start multiple times will show successive frames of animation.
  • Use a JavaScript timer to implement the proper animation based on your previous code.

We again STRONGLY recommend that you install and use the Firebug add-on for Firefox when working on this assignment. As you know, you can use it to inspect elements to diagnose problems with the box model and fix your styles. But it also shows when you have syntax errors in your JavaScript code, and you can use it as a debugger, set breakpoints in JavaScript code, type arbitrary expressions into its Console tab for evaluation, and watch the state of variables. Learning Firebug is essential for JS programming!

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.

Implement the content of your web page using XHTML 1.1 as taught in class. Choose appropriate XHTML tags to match the structure of the content on the page. Express all stylistic information on the page in CSS using your style sheet file. 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. Implement the behavior of each onscreen control using JavaScript event handlers defined in your script file.

Part of your grade will come from successfully uploading your files to the web server. Please do not place a solution to this assignment online on a publicly accessible web site.

Extra Credit

As usual, there are a number of entertaining and challenging extra credit options to choose from for this assignment.

  • Turbo speed: Add an additional fieldset to the GUI, just to the right of the font size section, with a similar border and title of "Speed:". The field set contains a single checkbox labeled "Turbo". When the box is checked, it sets the speed of animation to use a 50ms delay instead of 200ms.

    Initially the box is unchecked and the delay is 200ms. If the animation is playing and the box is checked/unchecked, the speed changes immediately.

  • Control Enabling: Your GUI should disable any elements that the user shouldn't be able to click at a given moment. Initially and whenever animation is not in progress, the Stop button should be disabled. When animation is in progress, the Start button and selection box of animations should be disabled.

    The size radio buttons (and Turbo checkbox, if you implement it) should 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.

  • Pause and backward playing: Originally, when you click Stop, the animation is stopped and the text that was in the box before animation began is returned to the box. Then when you click Start, the animation will re-start from the first frame.

    Now add the function of pause. When you click Pause, the animation will pause at the current frame. Then when you click Start, the animation will continue from the that frame where it last paused.

    Also add the function of backward playing. When you click Back, the animation will play inversely from the last frame to the first one repeatly. When you click Pause, the animation will pause at the current frame. Then when you click Back again, the animation will still play backward and continue from the that frame where it last paused.

  • Creative custom animation: It's time to show your talent. Use your imagination!
  • Google Closure: write your Javascript so it's compatible with Google Closure and compile it. To get the bell, quantify the improvement.

Props

This document's contents are (C) Copyright 2009
Marty Stepp / Jessica Miller and licensed under Creative Commons Attribution 2.5 License.
It's been changed and adapted to the UofR by Jeffrey Bigham and Zhuan Chen.

Please email Jeffrey P. Bigham at jbigham@cs.rochester.edu with questions.

Valid XHTML 1.0 Transitional Valid CSS!