Typing / Keyboard input speed test
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Looking to get a really simple javascript based input test which will let users run it and work on their speed to input what is shown to them on the screen. Here is how I see it working

-We show a start button to the user. they click it

-We show a specific input (taken randomly from a big json dictionary of inputs (could be words or numbers, we can update the js as needed)

-they have to type what they see and hit the space bar button to go to the next

-The js will pull the next random item from the list and show it to the user

-In the javscript we can specify how many item should be in the test series (10-20 etc..)
-At the end we tell them how well they did. We give them the results:

Output a table with all of the input tests, if they got the input right or wrong, and the time in seconds it took them to input their value (including the spacebar time)

would be cool if we could use some cool card flip sort of animation to show the user

basically each time they hit space, we quickly animate to the next test item. using the above card code, i changed the transition time to .2s and it seems to be fast enough while still looking good.

Just a suggestion, i think using monospace font is easily readable for a typing test...
mashtullah 8 months ago
@Qdev, is there anything I missed in my solution?
mashtullah 8 months ago
@Qdev, if you have more requirements please share with us, if not select your preferred solution...
mashtullah 8 months ago
Please award the bounty...
mashtullah 8 months ago
awarded to Vlad

Crowdsource coding tasks.

2 Solutions

Winning solution

Hi Qdev,

Here's my solution:

I added a flip animation too. Hope this is what you're after.

Hi Qdev, I've also added some styling and changed the font type so it can be more readable.
Vlad 8 months ago

Hi, Qdev,

I have a simple solution in pure javascript based on your card, i decided to retain it. The card will flip each time the user presses space bar, and it will have the next word to type.

At the end i show the summary table below.

Incase of any modifications let me know...

i think after hitting space bar it should clear the inputted term so you can keep typing for the next word?
Qdev 8 months ago
I have updated my solution, after hitting spacebar, it will clear the inputbox, test it now and let me know if there is any modification needed.
mashtullah 8 months ago
I have also added some style to the table rows to differentiate the correct and the wrong words, check it out...
mashtullah 8 months ago
@Qdev , i have modified the solution to allow compatibility with IE/Edge browser. Run the codepen in Full Page View to test it well
mashtullah 8 months ago
Hi Qdev, let me know if you still have any issues with the solution, as i see it, i have covered pretty much your requirements
mashtullah 8 months ago
QDev, you went silent...
mashtullah 8 months ago
View Timeline