Skip to end of metadata
Go to start of metadata

Kagi - 鍵

Kagi means "key" in Japanese.


Learn to touch-type in a foreign language, and learn vocabulary and pronunciation at the same time.

Target Audience

Unless you can already type fast in the given language without looking at the keyboard, this activity will help you.

  • Foreign language learner, who has never typed before
  • Foreign language learner, who already knows how to type, but in a different language
  • Native language speaker, learning to type for the first time (for example: young children)
  • Native language speaker, who can type but only by looking at the letters on the keys.
The characters on your keyboard do not need to correspond to the characters you are typing. You won't need to look at your keyboard at all. For example, you can use a US QWERTY keyboard, showing Roman characters to type in ภาษาไทย or Русский язык.



  • Work progressively from the Home Keys until you can master the whole keyboard
  • Hear the name of the next character to type
  • See the position of the key to press on an on-screen keyboard
  • Type words, hear the pronunciation and see an illustration, all at the same time
  • When you have master enough keys, you can start to type complete sentences and even stories. The images will illustrate the meaning of whatever you are typing, so you can learn basic vocabulary and structural words as you learn to type.
  • No need to change the keyboard layout of your computer: the application adopts the appropriate keyboard automatically.

Additional Features

  • Select your preferred speakers
  • Create your own practice sessions, using your own text, recordings and images
  • Type your own text in a foreign script, and copy and paste the output into other documents
  • View statistics on your typing speed and accuracy for each character and character combination.

User Experience


  • User chooses language and keyboard (initial visit).
  • Assets are downloaded (see below).
  • Text to type is determined.
  • Text to type is displayed in grey.
  • User starts to type. Timer and error counter start.
  • Recordings are played and images are shown, according to preferences
  • User completes a line of text. Speed and accuracy are displayed.
  • When the user completes a level, new assets may be downloaded before the next level starts


For each language we need:

  1. A structured list of words that can be typed, according to which characters the typist has mastered
  2. Recordings of all the character names (including punctuation and other symbols)
  3. Images of words whose meaning is easy to illustrate
  4. Recordings of words
  5. A structured list of meaningful sentences that can be typed, according to which characters the typist has mastered
  6. Images to illustrate these sentences
  7. Recordings of the sentences (recorded as a complete sentence, and also recorded word-by-word)
  8. Complete texts to type, once enough characters have been mastered (to be treated as sequences of sentences).

Structured list of words

We can start with a list of words in the target language. The longer this list the better, since many words which are not often used are actually quite easy to understand. Expand the list below to see a selection of two dozen English words which are not in the top 100,000 most commonly-used words in a corpus of English for adults. In this particular corpus, the word "quantum" is likely to appear 300 times more often than the word "armchair".

 Low frequency words

Here are a dozen words that appear with low frequency in formal adult usage, but which most primary school children will understand: 

 Easy to understand


Here are a dozen words that appear with the same frequency as those in the list above, but which many adults may misunderstand:

 Specialist words


Given this long list of words, we can use a simple computer program to determine which words can be typed at each stage in the learning process. This program can create an ordered list of words. We can then select from that ordered list which words will be easiest to illustrate. 

Please use the following to link to a list of words in your native language:


  • Character names
  • Words
  • Sentences


  • Character names
    A for Apple | กอ ไก่ | ...
  • Words
  • Sentences
  • Paragraphs


  • Sentences
  • Stories

Sentences may be chosen at random from the database of sentences typed into the GlassHouse (audio chat) application, where the author has also recorded the sentence. The sentences may be chosen to use words that the learner is already very familiar with, or alternatively, words that the learner is in the process of learning. 

Code Design

  • Client

    • View
      HTML5 + JavaScript
    • Storage
  • Server

    • Database tables
      • Script (e.g.: Roman, Кириллица, อักษรไทย, カタカナ, ひらがな, 漢字, ...) 

        • Keyboard images
        • Character mappings
      • Language (e.g.: English)
      • Dialect (e.g.: UK Received Pronunciation, London, Glasgow, Texas, Australian, ...)
      • Word (defines spelling: colour | color )

      • Meaning
      • Image

      • Recording
      • MeaningImage
      • WordMeaning
      • WordRecording

    • Scripting



Language selection popup menu

Timing of audio playback (before typing | after typing | never)

Timing of image display (before typing | after typing | never)

Spell out each character name (before typing | after typing | never)

Level (shows which key are mastered and which are new)

Repetition frequency (by usage | by accuracy | by speed | by mastery)

Keyboard layout (QWERTY | AZERTY | Dvorak | ...)

Keyboard arrangement (position of Enter key and \ key)

Text display colours (to be typed | next character | incorrect | correct | corrected)

Use complete words | use statistically generated nonsense words

Required accuracy, speed and consistency

End of line character (SPACE | RETURN)

Behavior on error (correct and continue | remain on current character | obligatory BACKSPACE | ignore and continue)

On completing a level (play reward animation | continue with no fanfare)

Script-specific keyboard

Lower-case image + Upper-case image: dark key outlines and dark characters in an otherwise transparent image

White highlight rectangles: Position of next key to press (+ position of Shift keys, if they need to be pressed, too)

Black background, so that keyboard appears dark grey on black

Input field

Mono-spaced web font for appropriate script

Two layers of text:

Text to be typed in light grey in lower layer

Typed text in in upper layer

Special colours:

Text that hasn't been typed yet: light grey

Next letter to type: dark blue

Correctly typed letter: black

Incorrectly typed letter: red

Corrected mistake: dark red

Input text

Determined by keys currently mastered + frequency generator




For all languages
  • Define keyboard arrangements
For each script
  • Assign characters to all keys 
For each language
  • Create levels, by selecting which new characters are added at each level
  • Determine which words can be typed at each level
  • Determine which of those words can be meaningfully illustrated
  • Generate meaningful sentences with the words from each level (where possible)
  • Find a list of words in the language (by frequency, if possible)

  • Find existing images for words
  • List words which can be illustrated but for which no image exists yet.
    • Create additional illustrations


Language Manager
  • Selects keyboard images
  • Requests word, sentence and story lists
  • Requests levels list
Data Manager
  • Queries local database for data
  • Requests data from server if it is missing locally
  • Stores it locally for future queries
Level Manager
  • Determines what characters, words, sentences and stories are to be used at the current level
  • Requests the images and recordings for the level to be downloaded, if necessary
  • Makes characters, words, sentences and stories available to the Text Manager as their assets become available locally
Text Manager
  • Determines what text is to be typed in the current exercise
  • Displays the input text
  • Loads the recordings and images required
Input Manager
  • Monitors the user's input and shows the text as it is typed
  • Plays the recordings at the appropriate moments
  • Shows the illustrations at the appropriate moments
Keyboard Manager
  • Holds hard-coded list of key rects
  • Shows next character to type on the keyboard
Score Manager
  • Keeps track of typing speed and errors over last n occurrences
  • Keeps track of the performance for each characters and character combination
  • Keeps track of successful completion of last n exercises
  • Tells Level Manager when the user has reached a new level


  • Keyboard images for the current script
  • Character mappings for the current script
  • Characters for all preceding levels, plus the current level
  • Words in current language
    • Containing only characters from the current set
    • Associated with at least one image
    • And at least one recording
  • An image for a given word or character
  • A recording for a given word or character


Show the preferences overlay, with the default settings, and [ Go ] button:
  • Target language: English 
  • Target script: Roman
  • Level: 1 (Home Keys)
  • Use words: TRUE
  • Spell all character names: TRUE

  • Show images: Before typing
  • Play audio: Before typing

  • Repetition frequency: by mastery
  • Keyboard layout: QWERTY
  • Keyboard arrangement: Mac standard

  • Text display colours: to be typed | next character | incorrect | correct | corrected)
  • Required accuracy: 100%
  • Required speed: 20 wpm
  • Required consistency: 2 / 3 times
  • End of line: SPACE
  • Behavior on error: Remain on current character
  • Request keyboard
  • Request character mappings
  • Request characters at current level
  • Request words with current characters
  • Ensure that enough images and audio are ready to start
  • Generate text for input
  • Request images for generated text
  • Request audio for generated text
  • Display text
  • Show first image (if required)
  • Play first sound (if required)
  • Wait for keyboard input
On keypress
  • Start total timer and current timer if not already started
  • Check if correct key was pressed
  • Calculate time since last key was pressed
  • Reset current timer
  • Update accuracy and speed data for the target key
  • Set "correct" flag for next key press, as that determines the colour of the typed character
  • Show entered character in the appropriate colour
  • Check if the text is now complete and accurate and if so
    • Calculate typing speed
    • Display speed and accuracy information
    • Check if the user has reached a new level