<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" /> ' + 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>