A simple typing tutor for programmers

I teach programming classes for students. And I observe a problem, in general, obviously, a standard one for all schoolchildren, especially middle classes - many of them have very low typing speeds on the keyboard.

Naturally, we must offer children to work on the keyboard simulator. But, first, I do not want to force children to learn the method of blind (ten-finger) printing (it will take a lot of time from children, and does not make much sense at the initial stage; then who wants to, he will learn). Secondly, for programming, of course, you need an English keyboard layout, but it is also strange to offer children who still do not know English very well, to write complex English literary texts, as is usually the case in keyboard simulators.

When I was a schoolboy myself, we had a special (self-written) simulator program in our programming classes, which used the real dictionary of a programming language as a dictionary (pulled from the reference, as I recall). I decided that today's schoolchildren should also do something similar - so that they would train in the fragments that they would actually meet in the programs. At the same time, they will not only increase their speed of recruitment, but also teach their own software constructions.

I didn’t find such standard simulators (later they told me that in Klavogonka there is a possibility to create user dictionaries, but there is still a functional that is clearly insufficient and very inconvenient), so I had to write my own.
')
At the same time, I wanted the schoolchild to get access to the simulator from anywhere: from a computer at school, from a computer or computers at home with minimal installation. Therefore, the option "paint any software on all computers" is not very suitable. As a result, I decided to make a simulator in the form of a simple web application. More precisely even just JS applications, since All interaction with the network, of course, should occur only at the initial stage, so that during the actual typing process, network delays would not affect the results.

Schoolchildren are offered one after another several lines that could be in a real program, they recruit them, the simulator calculates the speed of typing each line and the average speed of typing all the proposed lines. The row time is counted as the time elapsed from the first keystroke in the line to the final press enter; the time until the first keystroke (usually leaving to read the line) is not taken into account.

During the trial runs, I discovered two problems.

First, of course, you need to do something if the user types a text with a typo. In many simulators, the possibility of further typing is somehow blocked, I implemented a somewhat simpler approach (as it was in the simulator of my school days) - if the line is typed with a typo that was not in time (before pressing enter) corrected, it is marked as erroneous and is not taken into account when calculating the total average speed of dialing.

(Of course, this allows cheating - if there was some kind of delay in dialing, then you can simply enter erudno and press enter - but the system did not even think about as competitive, and besides, if you try to arrange competitions, then you can only take into account approaches in which everything data lines were typed correctly.)

At the same time, I still want to somehow tell the user where he was wrong. I had to implement a standard quadratic algorithm for calculating the Levenshtein distance, plus supplementing it with code for highlighting errors in a line — which was not technically as trivial as I had originally expected. (The problem is that we need to store information, whether we are already inside the error on each line or not.)

Secondly, I wanted to be not very hard in terms of gaps. The principles of placing gaps in the code are different for many programmers, I don’t want to force my students to put spaces strictly according to some standard from the very beginning - therefore I want the simulator to allow a certain liberty regarding their presence or absence. To do this, you need to be able to distinguish meaningful spaces from insignificant, but if you want to make the simulator universal for different programming languages ​​(which is certainly necessary), then it is difficult to implement a universal correct approach.

I decided to sacrifice absolute correctness and began to consider the space meaning if both the left and right of it are alphabetic characters (letters, numbers or underscores). More strictly, a group of consecutive spaces is taken, and if the left and right of it are alphabetic characters, then the first space from this group is considered significant. Of course, this is not always correct (an elementary counterexample is the spaces inside string constants), but this is a reasonable compromise between simplicity, versatility, and correctness. I had to tweak a bit the code for the Levenshtein distance and add a switch for fans of rigor.

The result was quite working, children use. Special masters learned how to get transcendental speeds by copying a given string to the clipboard and pasting it into the input field - I decided that there is no point in closing this problem, there will always be pranksters, but this problem does not interfere with normal schoolchildren.

Code on github: github.com/petr-kalinin/keyb
Live on imtqy.com: petr-kalinin.imtqy.com/keyb
(Dictionaries there, of course, are quite simple - for very, very beginner schoolchildren.)