It's a flash card web app that runs off a Google doc and it works offline. https://superflash.cards
All of your flash cards are stored in a public Google doc spreadsheet, which you can edit at will and simply reload your https://superflash.cards/?id=your_doc_id page to pick up the changes. The spreadsheet format is simple. Three columns: deck name, question text, and answer text (in that order).
Works offline! Use it on a plane, or a train! You just need to be online for the very first visit in order to load the app itself along with all the flash card data from your Google doc, but subsequent visits will not require network access. (Though if you update your cards in Google Docs you need to be online to fetch those changes.)
Information about which cards have been answered correctly and incorrectly is maintained in local storage in your browser, which means it's preserved across page reloads within that same browser.
Text in the question and answer columns of your flash card spreadsheet is parsed as Markdown, which means you can type *italic* and it will come out italic, **bold** and it will come out bold. See https://en.wikipedia.org/wiki/Markdown to learn more about what's available in Markdown. Keep reading for info on handling newlines.
Use AsciiMath notation between two %% delimiters and it will render as a
properly typeset mathematical expression using MathJax. (Known bug: MathJax does
not load when offline.) See http://asciimath.org/ for all the things you can do
with AsciiMath. Important: you must sandwich your AsciiMath between two
pairs of "%%", signs, not two ` signs, which is the default
delimiter used in all the examples on http://asciimath.org. The reason here is
because ` is already a reserved character in Markdown.
For example, this AsciiMath text...
%%Delta C ~~ (del C)/(del v_1)*Delta v_1 + (del C)/(del v_2)*Delta v_2 + cdots + (del C)/(del v_n)*Delta v_n%%
...becomes this subliminal beauty
Newlines (the thing you get when you hit the "Enter" key) are an essential part of Markdown but cumbersome to type in a spreadsheet. You can do it, but you have to keep hitting Ctrl+Enter. For faster and easier text entry there are some additional preprocessing steps done to convert regular spaces into newlines.
- ↩️ ↩️ Three consecutive spaces are replaced with two newline characters.
- ↩️ Two consecutive spaces are replaced with one newline character.
- ↩️ "\n" is replaced with a single newline character (in case you don't want to mess around with lots of spaces)
- Three consecutive underscores ("___") are replaced with a blank line, about the width of a 5 letter word. This is so you can write fill-in-the-blank questions.
- Three consecutive underscores followed by three consecutive periods ("___...") are replaced with a single blank line that has a "…" symbol hovering just above it. This is so you can fill-in-the-blank questions where the blank represents mutiple words to be filled in.
Water is composed of two parts ___ and one part ___
Water is composed of ___...
🚧 Consider this a work in progress. It works best on a phone and in fact has a weird interaction mode on desktop.
📱 I've only ever tested this on my own personal iPhone. If stuff doesn't work for you, definitely file an issue.
⌛ ApplicationCache is the older, less cool offline technology. I know, I know.
🔁 You can only cycle one-way through a deck. You can't automatically skip over cards you don't know, and you can't jump to certain cards. You can't move backwards through a deck. You can't Jeopardy-style invert the cards and see the answer first.
💾 Keep in mind that any time you switch to a different device, from a phone to a laptop, you are implicitly switching browsers and will not see your progress synchronized between those browsers. Sorry.
- Create a Google spreadsheet and make note of the id. It's the long
alphanumeric string between
/d/and/edit/in the document's URL. - Format the sheet with three columns: deck, question, answer, in that order. You may want to use those exact strings as the column headers in cells A1, B1, and C1, respectively.
- Make the sheet publicly accessible by clicking File > Publish to the web.... To be clear, this is doing exactly what it sounds like, it's making your flash cards publicly accessible to everyone on the internet. Do not include information in this spreadsheet which you wouldn't mind anyone in the world seeing.
- Access your flash cards by visiting https://superflash.cards/?id=your_doc_id
Take a look at the URL and note the id.
https://docs.google.com/spreadsheets/d/1gjMUw1XFuFAhU1DFCEcIg7HY980pnc6fFy7OKSKV09U/edit#gid=0
In this example, it's 1gjMUw1XFuFAhU1DFCEcIg7HY980pnc6fFy7OKSKV09U.
Create three columns, deck name, question, and answer.
Warning! This will make your sheet public to the world!
https://superflash.cards/?id=your_doc_id
This isn't that important, but you may interested to know that user settings are maintained in a special hidden deck named info. The info deck is a special deck where the "question" content is the name of a setting, and the "answer" content is the value for that setting. There is currently just one user setting available: the page title.
| deck | question | answer |
|---|---|---|
| info | title | The title of your entire flash card set. Something like "My Awesome Flash Cards". This comes in handy if you're bookmarking the page and want a more meaningful default page title. |
This is a static app built on top of a robust "starter kit" developed over at React Static Boilerplate. Refer to that project's README for all the details.