Skip to content

Instantly share code, notes, and snippets.

@Bren2010
Created July 10, 2014 01:09

Revisions

  1. Bren2010 created this gist Jul 10, 2014.
    204 changes: 204 additions & 0 deletions flashcard.html
    Original 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" />&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>