Simple, animated, and imageless flash cards using HTML/CSS/jQuery.
Simple, animated, and imageless flash cards using HTML/CSS/jQuery.
This has been tested only in Chrome (21.0.1155.2 dev) and Firefox (12.0).
I plan to support all major browsers, but I haven't had the need yet.
Files | Location |
---|---|
If you're using SASS/Compass:_flash_cards.scss and _fonts.scss If you're not using SASS/Compass: style.css
|
Your SASS directory Your CSS directory |
The contents of the js folder |
Your javascript directory |
resources |
Your root |
If you're SASSin' and Compassin' it up, @import "flash_cards";
into your .scss
. If not, use style.css
.
Place the following in your <head>
:
<link href="http://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet" type="text/css">
<script src="path/to/modernizr-2.5.3.min.js"></script>
and the following before </body>
:
<script src="path/to/flash_cards.min.js"></script>
The deck is a list with an id of deck. Each card is a list item containing a div for each side, each div contains a paragraph.
<ul id="deck">
<li class="card">
<div class="side_one">
<p>How many licks does it take to get to the center of a Tootsie Pop?</p>
</div>
<div class="side_two">
<p>The world may never know.</p>
</div>
</li>
</ul>
The navigation uses an icon font put together using IcoMoon, so it contains only the necessary characters to keep file size down.
The markup follows Jon Hicks' data-icon method.
<div id="nav_deck">
<span class="icon" id="prev" data-icon="<"><span class="visuallyhidden">Previous</span></span>
<span class="icon" id="flipper" data-icon="/"><span class="visuallyhidden">Flip</span></span>
<span class="icon" id="next" data-icon=">"><span class="visuallyhidden">Next</span></span>
</div>
I created a table to display the available keyboard shortcuts, accessible via clicking an element with an id of icon or hitting the forward-slash/question mark key.
<div id="keyboard_shortcuts">
<h1>Keyboard Shortcuts</h1>
<table>
<tbody>
<tr>
<td>Previous Card</td>
<td>←</td>
</tr>
<tr>
<td>Next Card</td>
<td>→</td>
</tr>
<tr>
<td>Flip Card</td>
<td>↑ <span class="or">/</span> ↓ <span class="or">/</span> Return <span class="or">/</span> Space</td>
</tr>
<tr>
<td>Show/Hide Keyboard Shortcuts</td>
<td>?</td>
</tr>
</tbody>
</table>
</div>
<div class="icon" id="keyboard_shortcuts_toggle" data-icon="k"><span class="visuallyhidden">Keyboard Shortcuts</span></div>
Check the paths to the font files in _fonts.scss
or style.css
.
Flash Cards by Curtis Blackwell is licensed under a Creative Commons Attribution 4.0 International License.