Skip to content
This repository has been archived by the owner on May 11, 2024. It is now read-only.
/ flashcard Public archive

Reusable component to add spaced-repetition based flashcard to any webpage. No servers required because user's progress remains in localStorage.

License

Notifications You must be signed in to change notification settings

learn-awesome/flashcard

Repository files navigation

flashcard

VueJS components to add spaced-repetition based flashcard to any webpage. Less than 5KB gzipped, and 15KB unzipped.

Authors can create their article in a medium that helps their readers not just read, but also REMEMBER their content. These components make it super-easy to achieve this without requiring any servers. LocalStorage is used to store user's progress on each question.

image

In your webpage, you would use the CardSet component specifying a bunch of question-answer pairs, and it will use localStorage to store user's recall performance in order to determine practice frequency.

See FlashCard.vue and CardSet.vue to learn more about how this works.

This was inspired by https://ncase.me/remember/ and https://quantum.country

Build

The UMD files (which also includes CSS) in dist folder are generated with:

Build: ./node_modules/.bin/vue-cli-service build --target lib --name CardSet components/CardSet.vue Test: demo.html

TODO: The Web component build is currently not working correctly.

Build: ./node_modules/.bin/vue-cli-service build --target wc --name fc 'components/*.vue' Test: webcomp.html

About

Reusable component to add spaced-repetition based flashcard to any webpage. No servers required because user's progress remains in localStorage.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published