Bren2010/flashcard.html

## flashcard.html
<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>
	<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>