Flashcards

Flashcards

Flashcards is a lightweight HTML5 study tool for Japanese vocabulary. The layout follows a two-column workflow with a card stage on the left and a control panel on the right, keeping navigation and deck selection close to the content.

A live version of the app is available here.

Core features

• JSON-driven decks: Decks are loaded from a list file, so new sets can be added without touching the interface code.
• Fast reveal: A single click or tap flips the card to show translation and reading.
• Local resume: The last deck and card index are stored locally and restored on load.
• Responsive layout: The two-column layout collapses cleanly for mobile screens.

Deck list

The deck list file defines each deck entry with a stable identifier, a display name, and the JSON path to the cards.

{
  "decks": [
    {
      "id": "animals",
      "name": "Animals",
      "path": "/data/json/apps/sandbox/flashcards/decks-1.min.json"
    },
    {
      "id": "places",
      "name": "Places",
      "path": "/data/json/apps/sandbox/flashcards/decks-2.min.json"
    }
  ]
}

Deck format

Each deck file contains a list of cards with a front label, translation, and optional reading.

{
  "id": "animals",
  "name": "Animals",
  "cards": [
    { "id": "cat", "front": "猫", "back": "cat", "reading": "ねこ" },
    { "id": "dog", "front": "犬", "back": "dog", "reading": "いぬ" }
  ]
}

State persistence

Local storage keys are used to keep the current deck and card position between sessions.

• Active deck: flashcardsActiveDeck
• Card index: flashcardsCardIndex_<deckId>

Reveal flow

The card face flip is handled by toggling a class and updating the visible text fields.

flashcard.addEventListener("click", () => {
  revealed = !revealed;
  updateCard();
});

flashcard.classList.toggle("is-revealed", revealed);