ansaurus

Question

How can you display Typing Speed using Javascript or the jQuery library?

Answer 1

A:

Typing speed is generally computed in words per minute minus a penalty for typos. To do this it seems like you'd need an inline spell-checker at the very least, plus some heavy lifting for languages and encoding schemes. (And then it starts to get complicated; when does the clock start, for instance? What do you do about people who are entering code? How about copy-and-pasting?)

Kent Brewster 2008-10-03 16:41:37

true. my original intent was to use it on a contact form so there will not be those issues of code or copy/paste like there is for SO.

Brian Boatright 2008-10-03 17:12:02

Answer 2

A:

a horribly simple, untested implementation:

var lastrun = new Date();
textarea.onkeyup = function() {
    var words = textarea.value.split(' ');
    var minutes_since_last_check = somefunctiontogetminutesdifference(new Date(), lastrun);
    var wpm = (words.length-1)/minutes_since_last_check;
    //show the wpm in a div or something
};

Jared 2008-10-03 16:48:02

Answer 3

+4 A:

Here's a tested implementation,which seems ok, but I don't guarantee the math.

A Demo: http://enobrev.info/type_speed/

And the code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Type Speed</title>
        <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
        <style type="text/css">
            form {
                margin: 20px auto;
                width: 500px;
            }

            #textariffic {
                width: 400px;
                height: 400px;
                font-size: 12px;
                font-family: monospace;
                line-height: 15px;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $('textarea')
                    .keyup(checkSpeed);
            });

            var iLastTime = 0;
            var iTime = 0;
            var iTotal = 0;
            var iKeys = 0;

            function checkSpeed() {
                iTime = new Date().getTime();

                if (iLastTime != 0) {
                    iKeys++;
                    iTotal += iTime - iLastTime;
                    iWords = $('textarea').val().split(/\s/).length;
                    $('#CPM').html(Math.round(iKeys / iTotal * 6000, 2));
                    $('#WPM').html(Math.round(iWords / iTotal * 6000, 2));
                }

                iLastTime = iTime;
            }

        </script>
    </head>
    <body>
        <form id="tipper">
            <textarea id="textariffic"></textarea>
            <p>
                <span class="label">CPM</span>
                <span id="CPM">0</span>
            </p>
            <p>
                <span class="label">WPM</span>
                <span id="WPM">0</span>
            </p>
        </form>
    </body>
</html>

enobrev 2008-10-03 17:09:37

that is perfect and with a demo, thanks!

Brian Boatright 2008-10-03 17:15:45

did you mean to make this a wiki answer? You surely deserve some rep points for this detailed answer.

Brian Boatright 2008-10-03 17:18:08

Wasn't sure what the wiki answer thing was.

enobrev 2008-10-03 17:34:45

I think you mean * 60000 (1 minute) not 6000 (6 seconds)

Chris MacDonald 2008-10-03 19:12:01

That's what I'd originally set it to, but the results were coming in pretty high, hence the math disclaimer.

enobrev 2008-10-03 19:37:01

@enobrev - whenever you set a Question or Answer to "wiki" you no longer earn reputation points.

Brian Boatright 2008-10-03 20:29:45

Ah well, quite alright. Only took a couple minutes to throw together, and I figure it would be good if people could correct any mistakes. Glad it helped!!

enobrev 2008-10-03 20:48:39

two years later: just the code i was looking for, thank you!

Zack 2010-09-26 05:52:21

ansaurus

tags:

views:

answers:

How can you display Typing Speed using Javascript or the jQuery library?

related questions