Choose what elements can be read
The usage is simple. You can decide which content can be shown as speedread. This is always an option, no must. The user can choose to start speedread functionality.
Try it out
Click on this text. The content will be displayed in an overlay
box. The words are shown separately. This way you can read them quicker, then following the line with your eyes. Increase the speed. Make it a game. You will learn quick and be able to read faster and faster. Time is money? Here you have it, I give you the money now, by saving time.
OnDemand speed reading
How to use it
- Add the JavaScript to your website
- Add Buttons or Options to activate the speedread-Box
Add the JavaScript to your website
- Download the script
- speedread.js
- Put it on your server
- Copy the javascript file on your website server. e.g. in your website folder
httpdocs/js/.
- Add it to your HTML
-
Add following HTML code to your website to include the javascript code in your website. Place the code within the <head> section
<head>
...
<script src="js/speedread.js"></script>
</head>
Add Buttons or Options to activate the speedread-Box
- Add onclick event to content element
-
The content can have HTML inside. This will be stripped.
<div onclick="SpeedRead.setText(this.innerHTML).startReading()">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <b>At vero eos et accusam</b> et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
- Add button to start speedread-Box
-
Create your own javascript logic - by knowing the functions
API - The functions
- stop()
- Stops showing the words
- setContainer(contentDiv)
-
sets a contaier with the text to word-showing
instead setting text for word-showing, you can set an html container. The text will be extracted out of the html container.
@param html container with innerHTML or the ID of an html container
@throws exception if the html container is not defined
@return speedReading object
- setWPM(wordPerMinute)
-
sets the speed for word-showing
@param integer number words per minute
@return speedReading object
- setText(text)
-
sets the text for word-showing
use this, if you do not want to specify any html container
@param text for word-showing
@return speedReading object
- togglePause()
- start, resume or pause the word-showing
- showReader()
-
start the word-showing in an overlay html box
@return speedReading object
- closeReader()
-
stops the word-showing and hide the overlay html box
@return speedReading object
- showWoerter()
-
display the next word in the overlay html box
Only if it is not paused or stopped. It restarts self for the next word
License
Use it, change it. But please do not remove the author names.
Using this software is free of charge. You do not need to inform anybody using it, although it would be nice knowing, it helps you.
All rights reserved.
GitHub Repository
https://github.com/speedread/speedread.github.io
What the developer say
Awesome. Thank you. I know you have the idea from spritzer, but this is simple as I need it.
Saso Nikolov