Skip to content

Instantly share code, notes, and snippets.

@teampolyglot
Last active May 1, 2020 07:34
Show Gist options
  • Select an option

  • Save teampolyglot/ce0cbc22e153eeb4469bf23b01b22e72 to your computer and use it in GitHub Desktop.

Select an option

Save teampolyglot/ce0cbc22e153eeb4469bf23b01b22e72 to your computer and use it in GitHub Desktop.
Spaced Repetition via Vue Components
<!-- Put these two lines in your <head> tag -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- skip this if your site already has VueJS -->
<script src="https://cdn.jsdelivr.net/gh/learn-awesome/flashcard@master/dist/CardSet.umd.min.js"></script>
<!-- And now in your articles, you can create multiple sets of cards.
You must give a unique ID to each question -->
<div id="cardset1">
<card-set timeunit="seconds"></card-set>
</div>
<script>
new Vue({
el: '#cardset1',
data: {
flashCards: [
{
qid: 'qid1',
question: 'Name the 5 countries who are permanent members of UN security council',
answer: 'USA, China, Russia, France, UK',
flipped: false,
answered: null
},
{
qid: 'qid2',
question: 'COVID-19 disease is caused by which family of viruses?',
answer: 'Coronavirus',
flipped: false,
answered: null
},
{
qid: 'qid3',
question: 'How many scheduled languages are there in Indian constitution?',
answer: '22',
flipped: false,
answered: null
},
{
qid: 'qid4',
question: 'In CSS, "flex" is a value for which property?',
answer: 'display',
flipped: false,
answered: null
}
]
},
components: {
'card-set': CardSet
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment