Skip to content

Instantly share code, notes, and snippets.

Last active October 1, 2022 20:41
Show Gist options
  • Save busypeoples/6467e46ac618c7b2f09c30022c0c86db to your computer and use it in GitHub Desktop.
Save busypeoples/6467e46ac618c7b2f09c30022c0c86db to your computer and use it in GitHub Desktop.

Notes on Modern UI Development: Taking Ideas from Spaced Repetition


I have been working on a modern typing training application for the last couple of days. One of the main motivations was to build an app with a modern UI and minimal distractions, enabling to fully focus on the training aspect. You can read more about the original idea and thought process here as well as some notes on iterating over the details here.

After adding some minimal auto close functionalities for the code training section, you can read about it here, another important feature was to make the text training part more entertaining.

While typing out a randomly generated text can be entertaining, it lacks an important aspect though, the adapting to your strong and weak keys and especially correct and incorrect words. In the current regular mode, words are always generated randomly, no matter if you were able to type them correctly or not in past sessions. But there seems to be an opportunity here that could help with increasing the chances of gaining some learning progress. This is where the idea of spaced repetition comes into the picture.

Theory and Background

"Spaced repetition is an evidence-based learning technique that is usually performed with flashcards. Newly introduced and more difficult flashcards are shown more frequently, while older and less difficult flashcards are shown less frequently in order to exploit the psychological spacing effect. The use of spaced repetition has been proven to increase the rate of learning."


In general spaced repetition is about managing how to learn a large set of information and being able to memorize this information. By generating intervals the repetition should help to keep learned vocabulary or other information in memory. For example, you wouldn't learn 100 concepts in one day and then another 100 concepts the next. At some point you have forgotten about the first concepts completely. A good example is learning a new language or algorithms. If you don't revise the learned information, at some point, that information is lost.

The technique is often used in the context of flash cards Where more complex material is shown more often as compared to less complicated cards.

So in a nutshell: any new information will decay and the repetition approach tries to prevent that decay by enabling to revisit that information till it becomes permanent.

There are a couple of well known algorithms tied to the concept of spaced repetition, with Leitner System and SuperMemo being the most prominent. You can read more about the details in the provided links above.


The current basic mode in Typing Cyclist doesn't really care about any previous sessions. It just randomly generates a sentence.

Typing Cyclist demo using basic mode

While this can be useful, implementing a mode called Weakest Words seemed to be another interesting approach due to 1. using some ideas from spaced repetition and 2. having a game like feel because we track the number of weak words. The second aspect give the type training a challenge like mode because the goal is to reduce the number of incorrectly typed words.

While we are not dealing with flash cards or learning a new language here, there are some aspects we can take into consideration. Based on your previous sessions we know which words were typed out correctly and which weren't. This information enables to show you the incorrect words in the next training sessions. To give this a more dynamic feeling, incorrect words are randomized and everytime an error happens the word will be shown a minimum of three times in the upcoming sessions. Everytime the word is typed out right, we reduce the number of times it is shown again.

What happens when you type the word correctly once, but then mistype again? The word will be shown a minimum of five times in the coming sessions. This should help with building up muscle memory.

Currently the implementation is very basic, but it should be a good starting point for building out a more advanced method.

In the UI, a incorrectly typed word is underlined, and there is information about how many times the word will show up. This should enable to get an overview of what to focus on.

Typing Cyclist with weakest mode enabled


Adding the Weakest Words mode could make the training more interesting and indirectly add a challenge like aspect.

While spaced repetition is mainly used when working with flash cards, these ideas can be applied to type training apps as well.

You can checkout the Weakest Words demo here:

Typing Cyclist Demo:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment