Canvas Flashcards - Ryan-Rutledge/FlashcardStacks GitHub Wiki

Canvas Flashcards

1. Link to "flashcard.js" in the head tag

<script src="flashcardStacks.js" type="text/javascript"></script>

2. Create a div of class fc_container

The container can be placed anywhere, and be any size. The flashcards will automatically appear inside the container, and re-size to fit within it if the dimensions change.

<!-- The `fc_container` element must have a unique id. -->
<div id="unique_id" class="fc_container">
</div>

3. Declare a JavaScript class that contains drawFront and drawBack methods

The drawFront and drawBack methods are executed whenever the sides of a flashcard need to be redrawn. Both methods are passed a parameter pointing to the 2d context of the appropriate canvas.

var CustomCardClass = function(param1, param2) {
  this.val1 = param1;
  this.val2 = param2;
}

CustomCardClass.prototype.drawFront = function(ctx) {
  // Code to draw front of card goes here
}

CustomCardClass.prototype.drawBack = function(ctx) {
  // Code to draw back of card goes here
}

4. Run fc.init() on page load

fc.init() accepts a dictionary with the unique id of the fc_container elements as keys, and an array of objects as its values. It will assign the functions to each card, and draw the first card of each stack.

function customInit() {
  fc.init(
    'unique_id': [
      new CustomCardClass('Card One', 1),
      new CustomCardClass('Card Two', 2),
      new CustomCardClass('Card Three', 3)
    ]
  )
}
<body onload="customInit()">
  <!-- etc. -->
</body>
⚠️ **GitHub.com Fallback** ⚠️