Speed Reader

index.pug

.reader
  #output
    span
    span
    span
  #input
    textarea#inputText(cols=92 rows=10)
    input(type='submit' onClick='startReading()' value='Start Reading')
    input#pause(type='button' onClick='togglePause()' value='Pause' disabled)

script.js

// Configuration
var speed = 200;

// Globals
var index = 0;
var elements = document.getElementsByTagName('span');
var pauseBtn = document.getElementById('pause');
var inputText = document.getElementById('inputText');
var words;
var interval;

// Reset the speed reader to the start
function reset() {
  clearInterval(interval);
  interval = false;
  index = 0;
}

// Populates the word boxes with previous, current, next
function populateBoxes() {
    elements[0].innerText = words[index-1] || '';
    elements[1].innerText = words[index] || '';
    elements[2].innerText = words[index+1] || '';
}

// Pause the speed reader
function togglePause() {
  
  // Pause if it's currently running
  if (interval) {
    pauseBtn.value = 'Continue';
    clearInterval(interval);
    interval = false;
    
  // Continue if we are already paused
  } else {
    pauseBtn.value = 'Pause';
    read();
  }
}

// Start reading from the beginning
function startReading() {
  reset();
  read();
  
  pauseBtn.value = 'Pause';
}

// Continue reading the text
function read() {  
  pauseBtn.disabled = false;
  words = inputText.value.split(' ');

  // Main loop
  interval = setInterval(function() {
    populateBoxes();
    index++;
    
    // If we've reached the end, reset to the beginning
    if (index > words.length) {
      reset();
    }
  }, speed)
}

// Example text
function init() {
  inputText.value = 'Speed reading is the art of silencing subvocalization. Most readers have an average reading speed of 200 wpm, which is about as fast as they can read a passage out loud. This is no coincidence. It is their inner voice that paces through the text that keeps them from achieving higher reading speeds. They can only read as fast as they can speak because that\'s the way they were taught to read, through reading systems like Hooked on Phonics. However, it is entirely possible to read at a much greater speed, with much better reading comprehension, by silencing this inner voice. The solution is simple - absorb reading material faster than that inner voice can keep up. In the real world, this is achieved through methods like reading passages using a finger to point your way. You read through a page of text by following your finger line by line at a speed faster than you can normally read. This works because the eye is very good at tracking movement. Even if at this point full reading comprehension is lost, it\'s exactly this method of training that will allow you to read faster. With the aid of software like Spreeder, it\'s much easier to achieve this same result with much less effort. Load a passage of text (like this one), and the software will pace through the text at a predefined speed that you can adjust as your reading comprehension increases. To train to read faster, you must first find your base rate. Your base rate is the speed that you can read a passage of text with full comprehension. We\'ve defaulted to 300 wpm, showing one word at a time, which is about the average that works best for our users. Now, read that passage using spreeder at that base rate.  After you\'ve finished, double that speed by going to the Settings and changing the Words Per Minute value. Reread the passage. You shouldn\'t expect to understand everything - in fact, more likely than not you\'ll only catch a couple words here and there. If you have high comprehension, that probably means that you need to set your base rate higher and rerun this test again. You should be straining to keep up with the speed of the words flashing by. This speed should be faster than your inner voice can \'read\'. Now, reread the passage again at your base rate. It should feel a lot slower – if not, try running the speed test again). Now try moving up a little past your base rate – for example, at 400 wpm – , and see how much you can comprehend at that speed. That\'s basically it - constantly read passages at a rate faster than you can keep up, and keep pushing the edge of what you\'re capable of. You\'ll find that when you drop down to lower speeds, you\'ll be able to pick up much more than you would have thought possible. One other setting that\'s worth mentioning in this introduction is the chunk size – the number of words that are flashed at each interval on the screen. When you read aloud, you can only say one word at a time. However, this limit does not apply to speed reading. Once your inner voice subsides and with constant practice, you can read multiple words at a time. This is the best way to achieve reading speeds of 1000+ wpm. Start small with 2 word chunk sizes and find out that as you increase, 3,4, or even higher chunk sizes are possible. Good luck!';
  words = inputText.value.split(' ');
  populateBoxes();
}

init();

speed-reader.markdown

Speed Reader

Simple speed reader

A Pen by gstorbeck on CodePen.

License.

style.scss

@import 'https://fonts.googleapis.com/css?family=Roboto+Slab';

* {
  font-family: 'Roboto Slab', Arial;
}

.reader {
  width: 760px;
  margin: 10px auto;
}
span {
  display: inline-block;
  width: 250px;
  height: 50px;
  border: 1px solid hsla(0, 0, 0, .2);
  vertical-align: top;
  line-height: 3em;
  text-align: center;
}

span:nth-child(2) {
  font-size: 2em;
  line-height: 1.4em;
}

input {
  border: 1px solid hsla(0, 0, 0, .2);
  background-color: white;
  width: 200px;
  height: 40px;
  box-shadow: 0 2px 5px hsla(0, 0, 0, .2);
  cursor: pointer;
  &:active {
    box-shadow: none;
    outline: none;
    background-color: darken(white, 5%);
  }
  &:focus {
    outline: none;
  }
  &:disabled {
    cursor: auto;
    background-color: darken(white, 5%);
  }
}