Anki template - words assembling

A template for the Anki learning app to create cards where you can assemble the answer letter by letter.


Source code and description available at GitHub.

Used Technologies

  • React
  • TypeScript

Implementation Details and Challenges

This project uses the fact that the learning cards in the Anki application are HTML snippets (which can contain JavaScript). So, here we create a React application which is then put into a specific place in the card.

The main challenge was to correctly tokenize the answer text - i.e. to split it into parts which the user will then have to select in the correct order. This needed to be taken into account:

  • correctly handle Japanese furigana (or other text ruby text - inside <ruby> HTML tags)
  • correctly choose insignificant characters (spaces, newlines etc.)
  • some tokens may be exactly the same, so the order in which the user selects them should be allowed to be arbitrary

E.g. this answer text:

なつ やすみ、 ほっ かい どう きます。

Is tokenized into:


The buttons for the user to solve the task are then created from the significant tokens, in random order.