Special thanks to Peter-Michael Osera of University of Pennsylvania, Marty Stepp of Stanford and Jessica Miller
You must match the appearance and behavior of the following web page:
Everyone wishes they could read faster. One method for doing so is called Rapid Serial Visual Presentation (RSVP).
RSVP is based on three observations:
Using your finger or some other pointing device to train your eyes and focus while reading increases speed.
Eliminating subvocalization, internally speaking words while reading them, can dramatically increase your reading speed.
Speed reading skills rely on the reader’s discipline to develop good reading habits, and it is easy for a reader to learn “the wrong way” and thus never see the purported benefits of speed reading.
Computer programs are a great help in this area as they force readers to accurately do one and two while avoiding three. RSVP programs do this by presenting words to the reader in quick succession. Therefore, the reader is only able to focus on a single word at a time. And furthermore, the words appear at such a speed that the reader is unable to subvocalize like normal.
In total you will turn in the following files:
speedreader.html, your web page
speedreader.css, the style sheet for your web page
Our screenshots were taken on Windows in Firefox, which may differ from your system.
The page should have a title of SpeedReader centered horizontally. The overall page has a background color of #EAF6F6. The preferred font for all text on the page is Garamond in size 12pt. If that is not available it should use the default serif font available on the system.
Under the page’s heading is a div with a width of 80% and a height of 100px, centered horizontally. It uses a 36pt bold font initially, has the system default monospace font and has a line height of 100px. It is surrounded by a solid 2px wide border in #8EBEBE with 5px curved corners. Its background color is #FFFFFF. Text inside it should be centered.
Below the div is a set of controls grouped into several field sets with a label on top of each. The labels should be bold, aligned left, have a bottom border of solid line 1px thick in #8EBEBE. They should be 100% wide and have 2px of space between the label and where the label’s border would be on all sides.
The first three field sets should appear in one line, the last on the line 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 field sets are centered horizontally.
The last field set, that should appear on its own line, contains a text box. This text box should have 10 rows and 80 columns. It should have a solid gray border 1px wide. It should have a background of #FFFFFF.
Some of the controls contain buttons. These buttons should have a white background and a solid gray border 1px wide. They should be 70px wide. When they are disabled their background color should be lightgray.
Below the controls is a left-aligned section with images that are links to the W3C validators and our own JSLint tool. Each image should be 70px wide. These images should remain 5px from the bottom left corner no matter how the page is resized. The three images are found at the following URLs:
Image: Links to:
https://webster.cs.washington.edu/images/w3c-html-blue.png https://webster.cs.washington.edu/validate-html.php https://webster.cs.washington.edu/images/w3c-css-blue.png https://webster.cs.washington.edu/validate-css.php https://webster.cs.washington.edu/images/w3c-js-blue.png https://webster.cs.washington.edu/jslint/?referer
The following are the groups of controls at the bottom of the page and each control’s behavior.
Start: When clicked, word display animation begins. Each frame of animation is a single word. Separate words on white space (spaces, tabs and new lines). You can do this by using the following method call:
var result = yourString.split(/[ \t\n]+/);
Replace yourString with whatever you would like to split on white space.
If a word ends with a piece of punctuation (comma, period, exclamation point, question mark, semicolon or colon) the punctuation should be removed and that word should be displayed for twice the normal amount of time (hint: have a list of frames to display and add this frame twice in a row). You should only remove the last piece of punctuation if there are multiple in a row.
When animation starts, whatever text is currently in the text box is broken apart to produce frames of animation as described above. These are displayed in the div. By default, the word changes once every 171ms. When the animation reaches the last word, it should stop.
Contains three radio buttons labeled “Medium”, “Big”, and “Bigger”. When one of the buttons (or the text next to it) is clicked, causing the box to become checked, it immediately sets the font size in the div.
Initially Medium is selected and the text is 36pt in size. If Big is selected the text should be 48pt and if Bigger is selected it should be 60pt. If the animation is playing and one of these buttons is clicked, the font size changes immediately.
A drop-down list of speeds. When one of the speeds is chosen, it immediately sets the speed in the div. The speed listed in the drop-down list, and the corresponding speed to set, are:
50 wpm (500ms), 300 wpm (200ms), 350 wpm (171ms), 400 wpm (150ms), 450 wpm (133ms), 500 wpm (120ms)
If the animation is playing and a different speed is selected, the change should take effect immediately (the user shouldn’t have to stop and restart the animation to see the change). Selecting the timing 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 immediately. 350 wpm should initially be selected.
Note that when you write the code for changing the speed, 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.
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 an animation is in progress, the Start button and the text area should be disabled. The Size radio buttons and the Speed box 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.
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 div. 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.
Get rid of punctuation and add longer delays at the ends of sentences and at commas.
Implementation and Grading:
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 three weeks of the course.
You should follow reasonable style guidelines similar to those of a CSE 14x programming assignment. In particular, avoid redundant code, and use parameters and return values properly.
Minimize the use of global variables. Do not ever store DOM element objects, such as those returned by the document.getElementById function, as global variables. As a reference, our own solution has four global variables, mostly related to the set of frames to draw, which frame is currently displayed, the delay between frames, and so on.
Do not place a solution to this assignment on a public web site. Upload your files to the Webster server at:
For one extra late day implement the following extra feature.
Another thing that can really help a speed reader be effective is centering the word around a specific letter in relation to its length and coloring that letter differently so that it easily maintains the reader’s focus. Use the following central letter choices:
length = 0-1 -> first letter
length = 2-5 -> second letter
length = 6-9 -> third letter
length = 10-13 -> fourth letter
length >13 -> fifth letter
hint: add extra spaces to the shorter side of the word to make sure the colored character is always the central character. Usually the beginning of the word will be shorter however in 2 letter long words the end will be shorter. You may find   (a space that doesn’t get compressed into a single space) useful.