https://github.com/learn-awesome/flashcard

Reusable component to add spaced-repetition based flashcard to any webpage. No servers required because user's progress remains in localStorage.
https://github.com/learn-awesome/flashcard

List: flashcard

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/learn-awesome/flashcard
• Owner: learn-awesome
• License: other
• Created: 2020-04-26T23:16:12.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-05-01T22:57:48.000Z (about 3 years ago)
• Last Synced: 2024-03-22T06:28:05.344Z (2 months ago)
• Language: Vue
• Homepage:
• Size: 840 KB
• Stars: 31
• Watchers: 2
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Lists

• awesome-vue - learnawesome-flashcard - Deck of flashcards with spaced-repetition via localStorage :bulb: (Components & Libraries / UI Components)
• awesome-vue - learnawesome-flashcard - Deck of flashcards with spaced-repetition via localStorage :bulb: (Components & Libraries / UI Components)
• awesome-vue - learnawesome-flashcard - Deck of flashcards with spaced-repetition via localStorage :bulb: (Components & Libraries / UI Components)
• awesome-vue - learnawesome-flashcard - Deck of flashcards with spaced-repetition via localStorage :bulb: (Components & Libraries / UI Components)
• awesome-vue - learnawesome-flashcard - Deck of flashcards with spaced-repetition via localStorage :bulb: (Components & Libraries / UI Components)
• awesome-vue - learnawesome-flashcard - Deck of flashcards with spaced-repetition via localStorage :bulb: (Components & Libraries / UI Components)
• awesome-vue - learnawesome-flashcard - Deck of flashcards with spaced-repetition via localStorage :bulb: (Components & Libraries / UI Components)
• awesome-vue - learnawesome-flashcard - Deck of flashcards with spaced-repetition via localStorage :bulb: (Components & Libraries / UI Components)
• awesome-vue - learnawesome-flashcard - Deck of flashcards with spaced-repetition via localStorage :bulb: (Components & Libraries / UI Components)
• awesome-vue - learnawesome-flashcard - Deck of flashcards with spaced-repetition via localStorage :bulb: (Components & Libraries / UI Components)

README

        
# 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](https://user-images.githubusercontent.com/51651338/80756518-30143100-8b22-11ea-9fdc-2a0ff13ca007.png)

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](https://github.com/learn-awesome/flashcard/blob/master/components/FlashCard.vue) and [CardSet.vue](https://github.com/learn-awesome/flashcard/blob/master/components/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](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](webcomp.html)