Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A little one-file flash card app. Works on desktop and mobile. You can put it on your phone with BitTorrent Sync or something.
<html>
<head>
<title>Flash Cards</title>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
div.card {
background-color: GhostWhite;
position: absolute;
left: 10%;
top: 10%;
height: 80%;
width: 80%;
padding: 0;
box-shadow: 0px 0px 50px #888888;
overflow: auto;
}
div.card h2 {
font-family: Montserrat;
font-size: 5em;
text-align: center;
margin-top: 10%;
}
div.card h3, div.card h4 {
font-family: Montserrat;
text-align: center;
}
div.card h3 {
font-size: 3em;
}
div.card h4 {
font-size: 2em;
}
div.card p {
font-family: Open Sans Condensed;
font-size: 3em;
text-align: center;
}
div.card span {
display: block;
font-family: Open Sans Condensed;
font-size: 1.5em;
}
div.card div.form ul {
list-style-type: none;
margin: 5% 10% 0 10%;
padding: 0;
margin-left: auto;
margin-right: auto;
width: 80%;
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
div.card div.form button {
font-size: 1.5em;
display: block;
margin-top: 2%;
margin-left: auto;
margin-right: auto;
}
div.card div.quiz {
display: none;
}
</style>
<script type="text/javascript">
var cards = {
esperantoGrammar: {
name: "Esperanto Grammar",
cards: {
"eta" : "tiny",
"ejo" : "room / place",
}
},
esperantoWords: {
name: "Esperanto Words",
cards: {
"ekzemplo" : "example",
"frazo" : "phrase",
"amaso" : "heap / crowd",
}
},
elements: {
name: "Elements",
cards: {
"Hydrogen" : "H, 1",
"Helium" : "He, 2",
"Lithium" : "Li, 3",
}
},
english: {
name: "English Vocab",
cards: {
"expectoration" : "n. bodily fluid ejected from the mouth",
"mordant" : "adj. having sharp/critical qualities",
"sordid" : "adj. arousing mental distaste/contempt",
}
},
trivia: {
name: "Trivia & Misc.",
cards: {
"Sapir-Whorf Hypothesis" : "Linguistic relativity--speakers of different languages conceptualize the world differently.",
"Kelen" : "Artificial non-human language. Lacks a noun-verb distinction.",
"Skerre" : "Fictional language of pre-Iron Age hunter/gatherers.",
}
}
}
var form = "",
categories = [],
len = 0
for (id in cards) { // Build form HTML.
form += '<li><span><input type="checkbox" id="' + id + '" checked="checked" />&nbsp;' + cards[id].name +'</span></li>'
}
newQuestion = function () { // Loads a random question in.
var n = Math.floor(Math.random () * len),
i = 0
done = function (category, question, answer) {
document.getElementById('category').innerHTML = category
document.getElementById('front').innerHTML = question
document.getElementById('back').innerHTML = ''
document.getElementById('card').onclick = showAnswer(answer)
}
for (id in cards) {
if (categories.indexOf(id) == -1) continue
for (q in cards[id].cards) {
if (i == n) {
return done(cards[id].name, q, cards[id].cards[q])
} else {
++i
}
}
}
}
showAnswer = function(answer) { // Shows answer and gets new question.
return function () {
document.getElementById('back').innerHTML = answer
document.getElementById('card').onclick = newQuestion
}
}
start = function () { // What to do when the button is clicked.
document.getElementById('form').style.display = 'none'
document.getElementById('quiz').style.display = 'block'
for (id in cards) {
if (document.getElementById(id).checked) {
categories.push(id)
for (q in cards[id].cards) { // Count cards.
++len
}
}
}
document.getElementById('card').onclick = newQuestion
}
window.onload = function () {
document.getElementById('list').innerHTML = form
document.getElementById('learn').onclick = start
}
</script>
</head>
<body>
<div id="card" class="card">
<div id="form" class="form">
<h3>What do you want to study?</h3>
<ul id="list"></ul><br />
<button id="learn">Learn!</button>
</div>
<div id="quiz" class="quiz">
<h4 id="category"></h4>
<h2 id="front"></h2>
<p id="back"></p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment