Flash Cards / Learning Mode

With a starter-pack of vocabulary (around 75 words) on the site, I tried putting together a “learning mode” with flash cards.

This is, in a way, the reason I started this thing in the first place: to reinvent Anki in a way that gives me more control over the cards, a better user experience, and also outputs a “book” with everything I’ve learned about Hindi.

So, I made another React component under /learn.

I hit a snag between server-side and client-side rendering (obviously — anyone who saw me start this project as a static site and then try to implement dynamic data probably saw this coming). I wanted to be able to “live” filter the words that were being generated as flash cards. My solution is as follows.

Gluing the dynamic page to Astro

On pages/learn/index.astro, the actual Astro file is pretty basic, essentially just bootstrapping the React component:

---
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
import FlashCardActivity from "@/components/FlashCardActivity";

export const prerender = false;
---

<StarlightPage
    frontmatter={{
        title: "Flash Cards",
        tableOfContents: true,
        prev: false,
    }}
>
    <FlashCardActivity client:load />
</StarlightPage>

Basic flash card functionality

FlashCardActivity.tsx does the following:

• Set up stateful React variables to keep track of the words currently in the flash card “pool”, and the filters that are currently selected
• Use the json api to pull the current collection of words and tags
• Render the overall flash card activity — basically just some headings, the checkboxes for filters, and finally, a <FlashCard /> component to actually show the flash card.

The Flash Card component mainly just takes in the word (with associated translation, and any example sentences), creates a few variants (english -> hindi; hindi -> english, and the same pair for each example sentence); then renders a stylized box with a button to flip the card over. Obviously, some React variables keep track of the card’s state.

That’s about it for the basic functionality of a flash card.

Spaced repetition

It quickly became clear that I needed a way to mark some cards as “learned” and get them out of the deck. This is the principle of spaced repetition (how Anki works): when a card comes up, you mark it as either easy, medium, or hard (basically); then, based on this and the last time the card was seen (and maybe some other factors I haven’t looked up yet), the card is given a higher or lower likelihood to show up again.

In effect, the result is that more recently learned or harder words show up more frequently; and super easy words show up very infrequently, so that you are still occasionally quizzed on them (because if they just disappeared when you “first” learn them, you’d probably forget them eventually).