10 Fast Fingers — Hacked

Published in

CodeX

4 min readSep 17, 2020

10 Fast Fingers is a website where you can challenge your own abilities (and others abilities) in fast typing with your keyboard. I tried it and I became addicted to it ignoring the reason why. Every day I do my typing run. As a developer, I can say that it may be good warming up exercise for your fingers before starting to work!

The code is here.

What is WPM?

WPM is the abbreviation of Words per Minute, so, basically, this concept is self-explanatory. To measure this factor, a “single word” is standardized in 5 keystrokes. It means that every 5 keystrokes, you write a word. For instance, if you type incredible, technically you are writing 2 words.

incre (5) + dible (5) = 2 words

A good typist has an average rate that goes from 50 WPM to 80 WPM. Now you know if you are a good one.

Records

The highest WPM rate is owned by Stella Pajunas-Garnand, an IBM employee. In far 1946 she reached the incredible score of 216 WPM;
Barbara Blackburn has scored the highest WPM rate for endurance. She scored 150 WPM for 50 minutes with a peak of 212 WPM using the Dvorak Simplified Keyboard.

Why hack this?

You know, boredom is a bad companion. No, no, I am just joking. The reality is that I have a bunch of very skilled friends in fast typing and we are two asses, so, the only way to beat them is cheating. But, hey, don’t tell anyone.

The Hack

Proof Of Concept

Since words to type are not images, we can hook into the DOM to get the text content of each word and make our script type it for us in the game input field. Then we would simulate a spacebar press by triggering a KeyboardEvent to let the game jump to the next word.

Bind to the game input

Using the browser dev tools we can easily get the element ID of the game input field. Since jQuery is defined in the page, it’s very easy to create a reference to it:

var inputField = $('#inputfield');

Simulate the spacebar press

Every time a user presses a key on a web page, a KeyboardEvent is triggered. We need to create an event of type keyup and assign it to the keyCode of the spacebar, which is 32. To get this value we can use a simple function to log a keyup event object:

window.addEventListener('keyup', function(event) {
    console.log(event);
});

If we press the spacebar, the script above will make the console log a KeyboardEvent. Dig into its properties to find the keyCode we need.

Each time we finish to write the right word we would call the .trigger() method on the input field, passing a jQuery.Event of type keyup (which is very similar to the native DOM Event). We store it once to avoid re-create an instance of it inside of each function call:

var keyup = jQuery.Event('keyup');
keyup.which = 32;

Get the right word

Since the words array is accessible in the global scope we can access it by referencing to window.words. The array in object is containing all the words you are supposed to write during the run you are performing. It is used to forecast the words you should “type” to get the result wanted.

Delay calculation

The delay is the exact time, in milliseconds, that has to pass between a word and another one. It is calculated starting from the expected words (counter variable) needed to reach the result you set. A run has a standard time of 60 seconds, then the delay is calculated for 59, in this way the last “typed” word will be always on time.

function getDelay() {
    return Math.ceil((59 / counter) * 1000);
}

Simulate the user typing

Once we have the word to type, we would simulate each letter typing in the game input field. To get this done we’ll use setInterval, which executes the function passed as the first argument every N milliseconds, passed as the second argument.

function typeWordAndNext(word) {
    // split the word into an array of letters
    var chars = word.split('');
    var interval = setInterval(function() {
        if (chars.length) {
            /*
             * shift the chars array to remove the first letter it
             * and assign it to a variable in a single shot
             */
            var char = chars.shift();
            // update the input field value adding that letter
            inputField.val(inputField.val() + char);
        } else {
            // array is empty, clear this interval to stop its exec
            clearInterval(interval);
            // trigger the spacebar keyup to jump to the next word
            inputField.trigger(keyup);
        }
    }, 30); // type each letter every 30ms
}