As a programmer, my best advice is to make your own. Really, all you need is some script that pulls a random list item (in this case, the item will be a quote) and displays it on screen. Now, you need a second box where the user types. In HTML, this can just be your usual <input> tag.

I think it would work just fine if you detected keyDown input in your JS file whenever the <input> is active, and then compared the value of your input to the quote you displayed earlier. You can change the background of the text box to red when there's a problem simply by sending that input to your CSS file.

I believe you were looking for a library, but this task is probably too simple to require one.

Here's something to get you started!

https://pastebin.co…


The program is juggling the quote between 3 spans. Spans are just text to be shown on the webpage. The "cursor" span holds the next letter that the user is to type, the "right" span holds the rest of the text that he has to type after that, and "left" holds the stuff that he has already typed. It is empty initially.
"br" is a linebreak, and "input" is the text field.

Whenever the user types a letter into the text field we check if it is the same as the one in "cursor", and if so, shift the cursor one step to the right. If this was the first letter, remember the current time. If this was the last letter, we are done so display the users wpm, which is calculated as:

dt = (current time - start time)
wpm = (1000 * 60 * / 5 * number of letters in quote) / dt

1000 because `dt` is given in milliseconds, and there are 1000 milliseconds in a second.
60 because there are 60 seconds in a minute
5 because the average length of a word is 5.
This formula is given on the keyhero about page.