Skip to content

README.md

Latest commit

 

History

History
107 lines (83 loc) · 4.58 KB

README.md

File metadata and controls

107 lines (83 loc) · 4.58 KB
Raw

🎴 JLPT Flashcards

A simple, interactive web-based flashcard tool for learning JLPT N5 and N4 kanji and vocabulary. It includes flashcards, multiple-choice quizzes, searchable reference lists, saved progress, and light spaced-repetition ordering.

Demo

You can run the webpage locally by opening index.html in your browser, or check out the live version here:

🌐 View Live Website

Modes

Choose your study type (Kanji or Vocabulary) and level (N5, N4, or N5 + N4) from the selectors, then study the selected list in either mode.

Note: JLPT level lists are study references rather than official fixed exam lists. The vocabulary decks are curated starter lists and can be expanded over time.

1. Flashcard Mode

Test yourself by recalling the meaning and readings before revealing the answer.

Kanji Quiz Kanji Answer

How it works:

  • A kanji or vocabulary word is displayed.
  • Press "Show Answer" (or S key) to reveal its answer details.
  • Mark it as Correct (C key) or Wrong (W key).
  • Progress is saved locally and used to bring newer, due, and harder cards earlier in future sessions.
  • All wrong answers can be reviewed later in the “Review Wrong” section.

2. Multiple Choice Mode

Choose the correct meaning or reading from 4 possible answers.

Multiple Choice Quiz Multiple Choice Answer

How it works:

  • A kanji or vocabulary word is shown with 4 possible answers.
  • Multiple-choice questions can ask for meaning, reading, Japanese from English, or Japanese from reading.
  • Vocabulary quiz cards show the kana reading above words that use kanji.
  • Select your answer with a click or by pressing 1, 2, 3, or 4.
  • Correct answers are highlighted in green, wrong ones in red.
  • Press "Next" / "Finish" (or N key) to move forward.
  • Counters for correct, wrong, remaining, and success rate are tracked for the current session.

Keyboard Shortcuts

Flashcard Mode:

  • S → Show answer
  • C → Mark correct
  • W → Mark wrong

Multiple Choice Mode:

  • 1–4 → Select an answer
  • N → Next question

Both Modes:

  • T → Switch between modes
  • R → Review wrong kanji

Features

  • Separate JLPT N5 and JLPT N4 kanji lists.
  • Separate JLPT N5 and JLPT N4 vocabulary starter lists, including hiragana-only and katakana words.
  • Combined N5 + N4 sessions for studying both levels together.
  • Searchable and filterable browse pages for the full included kanji and vocabulary lists.
  • Two modes: Flashcards and Multiple Choice.
  • Tracks correct, wrong, remaining, success rate, and saved progress.
  • Light spaced-repetition scheduling using browser localStorage.
  • Quiz variety includes Japanese to meaning, Japanese to reading, English to Japanese, and reading to Japanese.
  • Ends the session cleanly after each card has appeared once.
  • Review section for studying mistakes.
  • Responsive design that works on desktop and mobile.
  • Matching color scheme for correct/wrong answers for visual clarity.

Files

  • index.html – Main HTML structure.
  • kanji.html – Browse page for all included N5 and N4 kanji.
  • vocabulary.html – Browse page for all included N5 and N4 vocabulary.
  • study-utils.js – Shared card normalization, quiz generation, filtering helpers, and deck utilities.
  • progress-store.js – Saved progress and spaced-repetition scheduling.
  • list-pages.js – Search, filter, sort, and rendering logic for the browse pages.
  • style.css – Styles for flashcards, multiple choice, and responsive layout.
  • Lists/kanjiN5.js – Data file containing the list of N5 kanji with readings and meanings.
  • Lists/kanjiN4.js – Data file containing the list of N4 kanji with readings and meanings.
  • Lists/vocabN5.js – Data file containing N5 vocabulary, including hiragana and katakana words.
  • Lists/vocabN4.js – Data file containing N4 vocabulary, including hiragana and katakana words.
  • script.js – JavaScript logic for both modes, scoring, shortcuts, and review.
  • tests/logic.test.js – Basic logic tests for decks, quiz choices, and saved progress.

Development

Run syntax checks and logic tests with:

npm run check
npm test