TSOFA - The Simple, Offline Flashcard App

TSOFA ("tee-sofa") - The Simple, Offline, Flashcard App - is a flash card app that exists entirely in a single HTML file you can view in the browser. Here is a basic demo.

You can edit the flashcards directly in the file, using just text or HTML tags. It also supports a CSV string for the flashcard content so you can import flashcards from other apps. Otherwise, it's just a simple, free flashcard app: No server, no ads, no registration, no premium features to pay for, no dependencies, no build process, no cloud sync.

Features

  • Single HTML file - Everything in one HTML file, easy to share and view on any device
  • Keyboard controls - Space to flip, arrows to navigate
  • HTML support - Embed images, format text, add links
  • Shuffle cards - Randomize order for practice
  • Invert Q/A - Swap questions with answers
  • Remove flashcards - Remove cards as you master them, reload the page to bring them back
  • Center toggle - Uncheck for code with preserved indentation
  • Integrated timer - If you want to time your run through the flashcard deck
  • CSV import - Paste data from spreadsheets
  • Printable - Print a paper copy of the flashcards
  • Zero setup - Works immediately offline, no programming skills needed
  • Free - No registration, no paywall

Example Flashcard Sets

(These flashcards are AI-generated and not thoroughly reviewed for correctness.)

Array/JSON Format for Flashcards

For the array/JSON format, I recommend using backticks (on the keyboard to the left of the 1 key) for the FLASHCARDS string values so you can include quote characters and span multiple lines. You can optionally add a TOPIC setting as well to display on the page.

const TOPIC = "(Put a topic to display on the page here, or leave this empty.)";

let FLASHCARDS = [
[`What is the capital of France?`, `Paris`],
[`What is 2 + 2?`, `4`],
[`What is the largest planet in our solar system?`, `<b>Jupiter</b><br><i>It has a mass of 1.898 × 10²⁷ kg</i>`],
[`What year did World War II end?`, `1945`],
[`Who wrote 'Romeo and Juliet'?`, `William Shakespeare<br><img src="shakespeare.png">`],
[`What is HTML?`, `<b>HyperText Markup Language</b><br>The standard markup language for creating web pages`],
];

CSV String Format for Flashcards

Alternatively, you can also load flashcards from a single string of CSV (comma-separated values) text. This format is often used by spreadsheets or as an export format in other flashcard apps.

const TOPIC = "(Put a topic to display on the page here, or leave this empty.)";

let FLASHCARDS = `"Question 1","Answer 1"
"Question 2","Answer 2"
"Question with, comma","Answer with, comma"`;

Create Your Own TSOFA Flashcard Sets

Download the tsofa.html file and open it in any text editor. Find the FLASHCARDS variable (and optionally the TOPIC variable) near the top of the <script> section, and edit the text string values.

You can put any HTML tags you want and they will be rendered in the flash card. You can use this to display images in the flash cards.

If you don't have or know what a text editor is, you can use this page to create a TSOFA HTML file. Put the flashcard topic in between the double quotes next to TOPIC and the questions and answers in between the backtick characters after FLASHCARD. Add or remove question/answer rows as needed. Click "Download Flashcards" to get an HTML file with the TSOFA flashcard app. Open this file in a web browser.

You can suggest improvements or report bugs on the GitHub repo.