Spaced repetition for the entire Web

Spaced repetition, when embedded within the content you're reading, is extraordinarily effective for not just improving retention but also conceptual understanding of complex topics. Try that yourself with Nicky Case's interactive about spaced-repetition itself and Michael Nielson and Andy Matuschak's series about Quantum Mechanics.

I built a reusable component that allows Web authors to embed sets of flashcards (question-answer pairs) within their writing, but that stores users' progress in the browser's localStorage. With this, anyone can create content in a "mnemonic medium" like the above two articles. Authors don't need to write code or use a third-part server, and users don't need to download apps. Ideally, I wanted to build and as standard HTML custom elements - which would have been easier to use, and also allowed questions and answers to be arbitrary HTML (pictures, math, audio or video clips etc), but due to the limitations of VueJS and WebComponents, this is the best I could do for now. Improvements are welcome!

I had earlier built a FlashCard-module in LearnAwesome.org with two features that I think are very cool: (a) A browser-extension that infers the question from the text surrounding the answer and lets you quickly create a flashcard about something you want to remember from your online reading and (b) a tool that can bulk-create flashcards from your notes, thus helping you remember things from non-textual or offline learning: videos, meetings, conferences etc. This new component should make it even more easier for online writers to adopt SRS.

Screenshot:

There are 10 levels, and a card moves to next level if recall is working after 2^level days. But for this demo, that factor has been scaled to 2^level seconds.

Code:

If you run into any bugs, or need any features / customizations, please come over to the GitHub repo or ping me on Twitter.