JavaScript Flashcard Generator

Ouicards - Fancy Schmancy Flashcards

Ouicards allows you to easily build flashcards to study for... everything!

Ouicards uses a 3-bucket Leitner System and relies on jQuery and localStorage.

Here is the official OuiCards page.

About the Leitner System

From the Wikipedia page:

The Leitner system is a widely used method to efficiently use flashcards that was proposed by the German science journalist Sebastian Leitner in the 1970s. It is a simple implementation of the principle of spaced repetition, where cards are reviewed at increasing interval.

In this method flashcards are sorted into groups according to how well you know each one in the Leitner's learning box. This is how it works: you try to recall the solution written on a flashcard. If you succeed, you send the card to the next group. But if you fail, you send it back to the first group. Each succeeding group has a longer period of time before you are required to revisit the cards.


Here's a ouicards example, created for the New York State Immigration Naturalization test.

Note: This example was built in June 2013 and may be outdated by the time you see it.

Using Ouicards

> As a jQuery plugin

If you'd like to quickly get running with OuiCards, you can simply create a <ul> with the right CSS Classes and OuiCards will take care of the rest.


Here's some example code (also available here):

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="../ouicards.js"></script>
    $(function() { 

  <h1>Ouicards jQuery!</h1>
  <div id='flashcards'>
    <div id='current-question'></div>
    <div id='current-answer'></div>
        <div class='question'>Question 1</div>
        <div class='answer'>Answer 1</div>
        <div class='question'>Question 2</div>
        <div class='answer'>Answer 2</div>
        <div class='question'>Question 3</div>
        <div class='answer'>Answer 3</div>
    <a id='show-answer' href='#'>Show answer</a>
    <a id="correct" href="#">Correct</a>
    <a id="wrong" href="#">Wrong</a>

> As a JavaScript Library

Welcome to the big leagues! The first thing you'll need is an array of Question/ Answer objects.


var flashcards = [
  {question: "Who build this?", answer: "Carl Sednaoui"}, 
  {question: "Where was Ouicards made?", answer: "In NYC, during Hacker School"}

You can then use the functions outlined below.

Functions Available

  // [{question: q1, answer: a1}, {question: q2, answer: a2}]
ouicards.loadFromBrowser(jQuerySelector, Delimiter)
  // Your delimeter will most likely be ',' or '\t'
  // Get the questions and buckets from localStorge
  // Call this when the current question was answered correctly
  // Call this when the current question was answered incorrectly
  // Call this to receive a new Question/ Answer object

Everything You Have Access To

ouicards.currentBucket: The bucket from which the current card is being pulled.
ouicards.flashcards: Your array of flashcards.
ouicards.bucketA: All questions available in Bucket A.
ouicards.bucketB: All questions available in Bucket B.
ouicards.bucketC: All questions available in Bucket C.
ouicards.counter: A running counter. Used to know which bucket to get the next question from.

ouicards.loadFromBrowser(selector, delimiter) 
  // Uses jQuery to load the value of a given selector.
  // This saves the questions into ouicards, localStorage AND 
    // returns an object with Flashcards, Bucket A, B and C.
  // Loads the array of questions provided into ouicards and localStorage.
  // Gets a question for a given bucket and returns the built question HTML for it.
  // Returns a question/ answer HTML object {question: questionEl, answer: answerEl}.
ouicards.moveQuestion(fromBucket, toBucket)
 // Moves a question from a given bucket to another given bucket.

  // Returns a new question/ answer object.
  // Moves the current question to the next appropriate bucket.
  // Moves the current question to Bucket A.
  // Saves your flashcards, Bucket A, Bucket B and Bucket C to localStorage.
  // Gets your flashcards, Bucket A, Bucket B and Bucket C from localStorage. 
  // This also sets ouicards.currentBucket and ouicards.counter.
  // Resets ouicards buckets. 
  // Bucket A will equal your flashcards array. Bucket B and C will be empty arrays.  
  // Your currentBucket will also be empty and all of this will get saved to localStorage.


Have feedback or suggestions? I'd love to hear from you, feel free to contact me here via Github or via Twitter.



Completed while attending Hacker School