Created
July 10, 2014 01:09
Revisions
-
Bren2010 created this gist
Jul 10, 2014 .There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,204 @@ <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>