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

Where?

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.