University of Washington, CSE 154

Homework Assignment 7: ASCIImation

Special thanks to Dave Reed of Creighton University for the original idea of this assignment.
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:
S!"" art is pictures that consist of te#t characters. S!"" art has a long history as a way to draw pictures for te#t$
only monitors or printers. %e will draw animated S!"" art& or 'S!""mation.' (roups of nerds are wor)ing to
recreate the entire movies Star %ars and The Matri# as S!""mation.
The first tas) is to create a page ascii.html with a user interface *+", for creating-viewing S!""mations. .o
s)eleton files are provided. Your page should lin) to a style sheet you/ll write named ascii.css for styling the page.
fter creating your page& you must ma)e the +" interactive by writing JavaScript code in ascii.js so that clic)ing the
+" controls causes appropriate behavior. Your HTML page should lin) to your JS file in a script tag.
You should also create an S!""mation of your own& stored in a file named myanimation.js. Your S!""mation
must show non$trivial effort& must have multiple frames of animation& and must be entirely your own wor). 0e
creative1 %e will put students/ S!""mations on the course web site for others to see.
"n 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
myanimation.js& your custom S!"" animation as JavaScript code *so it can be used on the page,
2ur screenshots were ta)en on %indows in 3irefo#& which may differ from your system.
dditional re4uired features for CSE majors (B and D sections) are found in a separate spec on the class web site.
.on$!S5 ma6ors * and ! sections, do not need to complete any such features.
Aearan!e "etai#s:
The page should have a title of ASCIImation. Your page must lin) to the following JavaScript and !SS resources.
+se an absolute +7L path if an absolute path is listed below8 if only a file name is shown& use a relative +7L.
https://webster.cs.washinton.ed!/js/asciimation/animations.js
https://webster.cs.washinton.ed!/js/asciimation/allery.js
myanimation.js (you will write this file)
ascii.js (you will write this file)
ascii.css (you will write this file)
"f you have lin)ed to the above files properly& you will see a red 'heart' icon appear in the top$left of your page.
The overall page has a bac)ground color of 9!!!!33. The preferred font for all te#t on the page is the default
sans$serif font available on the system& in si:e ;<pt& in bold.
The top of the page contains a heading in =>pt bold te#t& centered hori:ontally within the page. There is no margin
between the heading content area and other neighboring content on the page.
+nder the page/s heading is a te#t bo# with ?@ columns and >@ rows& centered hori:ontally. "ts width is A@B of the
page si:e and height is <@@p#. "t uses a ;>pt bold monospace font initially. !SS width-height properties will set the
te#t bo#/s si:e& but you must put rows-cols attributes in your textarea HTML element for the page to validate.
0elow the te#t bo# is a set of controls grouped into several field sets& each with a Cp# blac) border around it *with
;@p# border radius, and a label on top. To get the field sets to appear in a row hori:ontally& see te#tboo) !hapter </s
section about 5lement Disibility and the display property. You should ma)e sure that the tops of the field sets line
up by setting their vertical alignment. The te#t area and control field sets are centered hori:ontally. The legends of
the field sets should be te#t$aligned left.
0elow the controls is a right$aligned section with images that are lin)s to the %=! validators and our own JSLint
tool. 5ach image appears on its own line. The three images are found at the following +7Ls:
Imae: "in#s to:
https:--webster.cs.washington.edu-images-w=c$html.png https:--webster.cs.washington.edu-validate$html.php
https:--webster.cs.washington.edu-images-w=c$css.png https:--webster.cs.washington.edu-validate$css.php
https:--webster.cs.washington.edu-images-w=c$6s.png https:--webster.cs.washington.edu-6slint-Ereferer
$ehavior "etai#s:
The following are the groups of controls at the bottom of the page and each control/s behavior.
*$%&E: lthough we put controls in a form in past assignments& do not !se a form ta on your page this time.,
Play Controls:
Start: %hen clic)ed& animation begins. %hen the page is idle& all frames of the animation are visible. 3rames are
separated by C e4uals signs and a line brea) *\n, character.
%hen animation starts& whatever te#t is currently in the te#t bo# is bro)en apart to produce frames of animation.
This might be a pre$set animation& or te#t that the user has typed manually. Furing animation& one frame is visible at
any moment& starting with the first frame. 0y default& the animation changes frames once every '()ms. %hen the
animation reaches the last frame& it loops bac) around and repeats indefinitely.
*3or full credit& you must implement your animation using a JavaScript timer with the setInterval function.,
Stop: %hen clic)ed& halts any animation in progress. %hen animation is stopped& the te#t that was in the bo#
immediately before animation began is returned to the bo#.
Animation:
drop$down list of S!"" animations. %hen one of the animations is chosen *onchange,& the main te#t area
updates to display all te#t of the chosen animation. The choices available are: 0lan)& 5#ercise& Juggler& 0i)e& Five&
!ustom. "nitially the 0lan) animation is selected and no te#t is showing in the te#t entry bo#.
Your ascii.html page should lin) to a provided file animations.js that declares the S!""mations as global string
variables named EXERCISE& JUGGLER& BIKE& and I!E. You shouldn/t edit this file& but your ascii.js file can refer to
these variables. 3or e#ample& if you have a textarea on your page with an id of "ytextarea:
doc#"ent$getEle"entById%&"ytextarea&'$val#e ) JUGGLER*
The provided animations.js file also defines a global associative array named +,I-+.I/,S that maps from inde#es
*)eys, that are strings e4ual to the names of the animations& such as &Bi0e& or &Exercise&& to values that are long
strings representing the entire animation te#t for that image. +sing this array well can help you avoid redundancy.
Here is a short e#ample that uses the +,I-+.I/,S array:
var which/ne ) &J#ggler&*
doc#"ent$getEle"entById%&"ytextarea&'$val#e ) +,I-+.I/,S1which/ne2*
The user may type new te#t in the field after choosing a pre$set animation. The animation shown when Glay is
pressed should reflect these changes. *i.e.& Fon/t capture the te#t to animate until the user presses the Start button.,
You may assume that the user will not try to type into the te#t area while animation is in progress. You may also
assume that the user will not use the selection bo# to change to a new animation while animation is occurring8
assume that the user will stop any e#isting animation before changing to a new one.
Custom Animation:
The !ustom choice in the nimation bo# should show an animation that you have created. StringMa)er lin) on
the web site converts your animation to a string you can put into myanimation.js. The te#t of your animation
should consist entirely of plain S!"" characters& not special characters outside of the S!"" character range.
Font Size:
drop$down list of font si:es. %hen one of the font si:es is chosen& it immediately sets the font si:e in the main
te#t area. The font si:es listed in the drop$down list& and the corresponding font si:e to set& are:
Tiny *Hpt,& Small *;@pt,& Medium *;>pt,& Large *;Ipt,& 5#tra Large *><pt,& JJL *=>pt,
"nitially Medium is selected and the te#t is ;>pt in si:e. "f the animation is playing and one of these buttons is
clic)ed& the font si:e changes immediately.
.ote that when you write the code for changing the font si:es& it is easy to introduce redundancy. 0y setting a val#e
attribute on each of the options in the drop$down list& you can avoid a long series of i34else statements.
Speed:
!ontains three radio buttons labeled 'Turbo'& '.ormal'& and 'Slo$Mo'. %hen one of the buttons *or the te#t ne#t
to it, is clic)ed& causing the bo# to become chec)ed& it changes the speed of animation. Turbo uses a ()ms delay&
.ormal is '()ms& and Slo$Mo is *())ms. "nitially the .ormal button is chec)ed and the delay is >C@ms.
"f the animation is playing and the buttons are clic)ed& the change should ta)e effect immediately *the user shouldn/t
have to stop and restart the animation to see the change,. !hec)ing the bo# shouldn/t cause the animation to start if
it wasn/t already started. "t also shouldn/t reset what frame is showing8 it should 6ust change the delay immediately.
Control Enabling/Disabling:
Modify your (+" to disable elements that the user shouldn/t be able to clic) at a given time. "nitially and whenever
animation is not in progress& the Stop button should be disabled. %hen an animation is in progress& the Start button
and the select bo# of animations should be disabled. The Si:e bo# and the Speed radio buttons should always be
enabled.
5nable or disable a control with its disa5led property. 3or e#ample& to disable a control with id of c#sto"erlist:
doc#"ent$getEle"entById%&c#sto"erlist&'$disa5led ) tr#e*
"eve#oment Strategy an% Hints:
;. %rite the basic +&," content including the proper +" controls. (Dont use the form tag.)
>. %rite your CSS code to achieve the proper layout.
=. %rite a small amount of -starter- .S code and ma)e sure that it runs.
*3or e#ample& ma)e it so that when the Start button is clic)ed& an alert bo# appears.,
<. "mplement code to change the animation te/t and 0ont si1es. Ma)e it so that when an option is chosen in
the selection bo#& the proper te#t string appears in the te#t area. (et the font si:e options wor)ing.
C. "mplement a minimal Start beha2ior so that when Start is clic)ed& a single frame of animation is shown.
!lic)ing Start multiple times would show successive frames of animation.
I. +se a JavaScript timer to implement the proper animation based on your previous code.
%e strongly recommend that you install and use the 3ireb! add$on for 3irefo# on this assignment& or use the
similar tool built into other browsers such as !hrome. 0oth show synta/ errors in your JavaScript code. You can
use either as a debugger& set brea)points& type e#pressions on the !onsole& and watch variables/ values. This is
essential for serious JavaScript programming.
2ur .S"int tool can help you find common JavaScript bugs. Since this is your first JavaScript program& you will
probably encounter tric)y bugs. "f so& paste your code into JSLint to loo) for possible errors or warnings. 3or full
credit& your JavaScript code must pass the provided .S"int tool with no errors reported. *'%arnings' are o)ay.,
3or full credit& your .js file must be written in .a2aScript -strict- mode by putting this e#act line of code at the top:
&#se strict&*
Im#ementation an% &ra%ing:
Submit your assignment online from the course web site. 2ur ascii.js is around A@ lines long *C@ 'substantive',. ll
of your HTML& !SS& and JavaScript code should follow the style !ide posted on the class web site.
"mplement your page using +&,"( as taught in class. Your page must pass the %=! HTMLC 2alidator. !hoose
appropriate tags to match the structure of the page content. Fo not e#press style information in the HTML page
itself& such as inline styles or presentational HTML tags such as 5 or 3ont. +se !nobtr!si2e .a2aScript so that no
JavaScript code& onclic0 handlers& etc. are embedded into the HTML code.
5#press all stylistic information on the page in CSS using your style sheet file. 3or full credit& your style sheet must
successfully pass the %=! !SS 2alidator. You should not use HTML or !SS constructs that have not been
discussed in lecture& slides& or te#tboo) chapters during the first si# wee)s of the course.
3ormat your HTML& !SS& and JS to be readable& li)e to the e#amples in class. Glace a comment header atop each
HTML-!SS-JS file. Your JavaScript should have more descriptive comments& including a header on each function
*including anonymous, and comple# sections of code describing the relevant code& the function/s behavior& etc.
You should follow reasonable style guidelines similar to those of a !S5 ;<# programming assignment. "n particular&
avoid redundant code& and use parameters and return values properly.
Minimi:e the use of lobal 2ariables. Fo not ever store F2M element ob6ects& such as those returned by the
doc#"ent$getEle"entById function& as global variables. s 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.
3ormat yo!r code similarly to the e#amples from class. Groperly use whitespace and indentation. "n your HTML&
do not place more than one bloc) element on a line or begin a bloc) element past the ;@@th character. "n your
JavaScript& properly space-indent your code& and do not write any lines of code longer than ;@@ characters.
You should not use any e#ternal .a2aScript 0ramewor#s or libraries such as 6Kuery to solve this assignment.
Fo not place a solution to this assignment on a public web site. +pload your files to the 4ebster server at:
https://webster.cs.washinton.ed!/st!dents/yo!r5!wnetid/hw6/ascii.html
Copyright ! "arty Stepp # $essica "iller% licensed under Creative Commons &ttri'ution (.) *icense. &ll rights reserved.