CS472- Web Programming: ASCIIanimation Solved

This assignment tests your understanding of JavaScript and its interaction with HTML user interfaces.

You must match the appearance and behavior of the following web page (However, your screen should have a title of CS472: ASCII Animation Viewer)

ASCII art is pictures that consist of text characters.  ASCII art has a long history as a way to draw pictures for textonly 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.

The first task is to create a page ascii.html with a user interface (UI) for creating/viewing ASCIImations.  Your page should link to a style sheet you'll write named ascii.css for styling the page.  After creating your page, you must make the UI interactive by writing JavaScript code in ascii.js so that clicking the UI controls causes appropriate behavior.  Your HTML page should link to your JS file in a script tag.

In total you will include the following files in your app:

html, your web page
css, the style sheet for your web page
js, the JavaScript code for your web page ñ animations.js, the JavaScript code for your web page
ñ  

Our screenshots were taken on Windows in Firefox, which may differ from your system.

Appearance Details: 

The page should have a title of ASCIImation.  Your page must link to the following JavaScript and CSS resources.  

js (copy this file frou the assignment resources) 
js (you will write this file) 
css (you will write this file) 
The overall page has a background color of #CCCCFF. The preferred font for all text on the page is the default sans-serif font available on the system, in size 14pt, in bold.

The top of the page contains a heading in 32pt bold text, centered horizontally within the page. There is no margin between the heading content area and other neighboring content on the page.

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 height is 400px.  It uses a 12pt bold monospace font initially.  CSS width/height properties will set the text box's size, but you must put rows/cols attributes in your textarea HTML element for the page to validate.

Below the text box is a set of controls grouped into several field sets, each with a 5px black border around it and a label on top.  Their behavior is described below.  To get the field sets to appear in a row horizontally, see textbook Chapter 4's section about Element Visibility and the display property.  You should make sure that the tops of the field sets line up by setting their vertical alignment.  The text area and control field sets are centered horizontally.

Below the controls is a right-aligned section with images that are links to the W3C validators and the JSLint tool.

Behavior Details: 

The following are the groups of controls at the bottom of the page and each control's behavior. (NOTE: Although we put controls in a form in past assignments, do not use a form tag on your page this time.)

Play Controls: 

Start: When clicked, animation begins.  When the page is idle, all frames of the animation are visible.  Frames are separated by 5 equals signs and a line break (\n) character.

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.  By default, the animation changes frames once every 250ms.  When the animation reaches the last frame, it loops back around and repeats indefinitely.

(You must implement your animation using a JavaScript timer with the setInterval function.)

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.

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.

Your ascii.html page should link to a provided file animations.js that declares the ASCIImations as global string variables named EXERCISE, JUGGLER, BIKE, and DIVE. You shouldn't edit this file, but your ascii.js file can refer to these variables. For example, if you have a textarea on your page with an id of mytextarea:

$("mytextarea").value = JUGGLER;

 

The provided animations.js file also defines a global associative array named ANIMATIONS that maps from indexes (keys) that are strings equal to the names of the animations, such as "Bike" or "Exercise", to values that are long strings representing the entire animation text for that image.  Using this array well can help you avoid redundancy.

Here is a short example that uses the ANIMATIONS array: var whichOne = "Juggler";

$("mytextarea").value = ANIMATIONS[whichOne];

 

The user may type new text in the field after choosing a pre-set animation.  The animation shown when Play is pressed should reflect these changes.  (i.e., Don't capture the text to animate until the user presses the Start button.)

You may assume that the user will not try to type into the text area while animation is in progress.  You may also assume that the user will not use the selection box to change to a new animation while animation is occurring; assume that the user will stop any existing animation before changing to a new one.

Font Size: 

A drop-down list of font sizes. When one of the font sizes is chosen, it immediately sets the font size in the main text area.  The font sizes listed in the drop-down list, and the corresponding font size to set, are: ñ Tiny (7pt), Small (10pt), Medium (12pt), Large (16pt), Extra Large (24pt), XXL (32pt)

Initially Medium is selected and the text is 12pt in size. If the animation is playing and one of these buttons is clicked, the font size changes immediately.

Note that when you write the code for changing the font sizes, it is easy to introduce redundancy.  By setting a value attribute on each of the options in the drop-down list, you can avoid a long series of if/else statements.

Speed: 

Contains a single checkbox labeled "Turbo".  When the box (or the text next to it) is clicked, causing the box to become checked, it sets the speed of animation to use a 50ms delay instead of 250ms.  When unchecked, the speed goes back to 250ms.  Initially the box is unchecked and the delay is 250ms.

If the animation is playing and the box is checked/unchecked, the change should take effect immediately (the user shouldn't have to stop and restart the animation to see the change).  Checking the box shouldn't cause the animation to start if it wasn't already started.  It also shouldn't reset what frame is showing; it should just change the delay.

Control Enabling/Disabling: 

Modify your GUI to disable elements that the user shouldn't be able to click at a given time.  Initially and whenever animation is not in progress, the Stop button should be disabled.  When animation is in progress, Start and the select box of animations should be disabled.  The Size box and Turbo checkbox should always be enabled.

Enable or disable a control with its disabled property.  For example, to disable a control with id of customerlist: document.getElementById("customerlist").disabled = true;

 

Development Strategy and Hints: 

Write the basic HTML content including the proper UI controls. (Don't use the form) 
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 code to change the animation text and font sizes. Make it so that when an option is chosen in the selection box, the proper text string appears in the text area.  Get the font size options working.
Implement a minimal Start behavior so that when Start is clicked, a single frame of animation is shown. Clicking Start multiple times would show successive frames of animation.
Use a JavaScript timer to implement the proper animation based on your previous code.
We strongly recommend that you use Chrome console for debugging.  You can use it as a debugger, set breakpoints, type expressions on its Console, and watch variables' values.  The console is essential for serious JavaScript programming.

A lint tool can help you find common JavaScript bugs.  Since this is one of your first JavaScript programs, you will probably encounter tricky bugs.  If so, paste your code into JSLint to look for possible errors or warnings, or configure your IDE to include a lint tool such as JSLint or JSHint.

 

Implementation and Grading: 

Submit your assignment online from the course web site.  Our ascii.js is around 90 lines long (50 "substantive").

Implement your page using HTML5 as taught in class and ES6.  Your page must pass the W3C HTML5 validator.  Choose appropriate tags to match the structure of the page content.  Do not express style information in the HTML page itself, such as inline styles or presentational HTML tags such as b or font.

Express all stylistic information on the page in CSS using your style sheet file.  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 six weeks of the course.

Format your HTML, CSS, and JS to be readable, like to the examples in class. Place a comment header atop each HTML/CSS/JS file.  Your JavaScript should have more descriptive comments, including a header on each function and complex sections of code describing the relevant code, the function's behavior, etc.

For full credit, your JavaScript code should pass the provided JSLint tool with no errors reported.  Be sure to check your JavaScript file with jsLint or jsHint while developing it.  Your submitted html file must include the jsLint button shown above.  Use the following anchor:

You should follow reasonable style guidelines (e.g., Java coding conventions or the Javascript Coding Style guidelines at http://jshint.com/hack/) .  In particular, avoid redundant code, and use parameters and return values properly.

Minimize the use of global variables.  Do not store DOM element objects, such as those returned by the document.getElementById function, as global variables.  As a reference, our own solution has five global variables, mostly related to the set of frames to draw, which frame is currently displayed, the delay between frames, and so on.

Format your code similarly to the examples from class.  Properly use whitespace and indentation.  In your HTML, do not place more than one block element on a line or begin a block element past the 100th character.  In your JavaScript, properly space/indent your code, and do not write any lines of code longer than 100 characters.