Speed Reader

speed runner program test

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>SpeedReader</title>
    <script type="text/javascript" src="speedreader.js"></script>
    <link rel="stylesheet" type="text/css" href="speedreader2.css">
  </head>

  <body>
    <h1>SpeedReader</h1>
    <div id="display"></div>
    <div id="reader-controls">
      <fieldset>
        <p>Play Controls:</p>
        <button id="start" type="button">Start</button>
        <button id="stop" type="button">Stop</button>
      </fieldset>
      <fieldset>
        <p>Speed</p>
        <select id="speed">
          <option value="300">200 wpm</option>
          <option value="200">300 wpm</option>
          <option value="171" selected="selected">350 wpm</option>
          <option value="150">400 wpm</option>
          <option value="133">450 wpm</option>
          <option value="120">500 wpm</option>
        </select>
      </fieldset>
      <fieldset>
        <p>Size:</p>
        <label>
          <input id="36pt" type="radio" name="size" checked="checked" />Medium</label>
        <label>
          <input id="48pt" type="radio" name="size" />Big</label>
        <label>
          <input id="60pt" type="radio" name="size" />Bigger</label>
      </fieldset>
    </div>
    <div id="input">
      <fieldset>
        <p>Input Text</p>
        <textarea id="words" rows="10" cols="80"></textarea>
      </fieldset>
    </div>
    <div id="validators">
      <a href="https://webster.cs.washington.edu/validate-html.php">
        <img src="https://webster.cs.washington.edu/images/w3c-html-blue.png" alt="validator" /></a>
      <a href="https://webster.cs.washington.edu/validate-css.php"><img src="https://webster.cs.washington.edu/images/w3c-css-blue.png" alt="validator" /></a>
      <a href="https://webster.cs.washington.edu/jslint/?referer"><img src=https://webster.cs.washington.edu/images/w3c-js-blue.png alt="validator" /></a>
    </div>
  </body>

</html>

CSS

h1 {
  text-align: center;
}

body {
  background-color: #EAF6F6;
  font-family: Garamond, sans-serif;
  font-size: 12pt;
}

#display {
  width: 80%;
  height: 100px;
  margin: 0 auto;
  font-size: 36pt;
  font-family: monospace;
  line-height: 100px;
  border: 2px solid #8EBEBE;
  border-radius: 5px;
  background-color: #FFFFFF;
  text-align: center;
  overflow: hidden;
}

p {
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid #8EBEBE;
  width: 100%;
  padding: 2px;
}

fieldset {
  display: inline-block;
  vertical-align: top;
  border: none;
  margin: 0 auto;
}

#reader-controls,
#input {
  text-align: center;
}

textarea {
  border: 1px solid gray;
  background-color: #FFFFFF;
}

#validators {
  position: fixed;
  left: 5px;
  bottom: 5px;
}

#validators img {
  width: 70px;
}

button {
  background-color: white;
  border: 1px solid gray;
}

button:disabled {
  background-color: lightgray;
}

JavaScript

"use strict";

	window.onload = function() {
	  var startButton = document.getElementById("start");
	  startButton.onclick = start;

	  var stopButton = document.getElementById("stop");
	  stopButton.onclick = stop;

	  /*var sizeControl = document.getElementById(".size");
	  sizeControl.onchange = fontSizeChange;*/

	}

	function start() {
	  alert("this is working");
	  var timer = null;
	  var index = 0;
	  displayText(index, timer);
	  alert("displayText was called");
	}

	function stop() {
	  alert("stop function is working");
	}

	function fontSizeChange() {
	  var display = document.getElementById("display");
	  // double-check to see if you can initialize an array this way
	  var fontChecked = [document.getElementById("36pt"),
	    document.getElementById("48pt"),
	    document.getElementById("78pt")
	  ];
	  for (var i = 0; i < fontChecked.length; i++) {
	    if (fontChecked[i].checked == true) {
	      display.style.fontSize = fontChecked[i].id;
	    }
	  }
	  display.innerHTML = "String";
	}

	function displayText(wordIndex, timer) {
	  var text = document.getElementById("words").value;
	  var list = text.split(/[ \t\n]+/);
	  if (list.length !== 0) {
	    if (timer === null) {
	      wordIndex = wordIndex % list.length;
	      timer = setInterval(displayNext(list[wordIndex++], "display"), 171);
	    } else {
	      clearInterval(timer);
	      timer = null;
	    }
	  }
	}

	function displayNext(text, textBoxID) {
	  document.getElementById(textBoxID).innerHTML = "text";
	}