HTML Flashcards - Ryan-Rutledge/FlashcardStacks GitHub Wiki

Creating a Basic Stack of 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. Insert divs of class fc_content into fc_container

There must be an even number of fc_content elements. These elements will become the sides of the flashcards.

<div id="unique_id" class="fc_container">

  <!-- Card one -->
  <div class="fc_content">
    <!-- Front of card one -->
  </div>
  <div class="fc_content">
    <!-- Back of card one -->
  </div>

  <!-- Card two -->
  <div class="fc_content">
    <!-- Front of card two -->
  </div>
  <div class="fc_content">
    <!-- Back of card two -->
  </div>

  <!-- etc. -->
</div>

4. Run fc.init() on page load

<body onload="fc.init()">
  <!-- etc. -->
</body>
⚠️ **GitHub.com Fallback** ⚠️