/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Flashcards">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flashcards</title>
<style id="jsbin-css">
.card-back {
     z-index: 2;
	/* for firefox 31 */
	transform: rotateY(180deg);
    background-image: url("http://data.whicdn.com/images/127698038/original.gif");
        background-repeat: repeat;
    /*border: #000000 1px solid;*/
}

.card-front, .card-back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
    padding: 20px;
}

.card-front {
    transform: rotateY(0deg);
    background-color: #f3f3f3;
}

.card {
    position: absolute;
	top: 0;
	left: 0;
    width: 500px;
    height: 300px;
    box-shadow: 00px 10px 10px #cccccc;
}

.front-back {
    transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

.card-box {
    width: 500px;
    height: 300px;
    perspective: 1000px;
    margin: 0px auto;
    text-align: center;
    margin-bottom: 20px;
}

.flipped {
    transform: rotateY(180deg);
}

.card-box.flipped .front-back {
    transform: rotateY(180deg);
}

.button-row {
    margin: 20px auto;
}

.card-item {
    margin-bottom: 20px;
}

.center-it {
    text-align: center;
}

.centerify {
    margin: 20px auto;
    text-align: center;
    width: 1005;
    display: inline-block;
}
</style>
</head>
<body>
    <!--https://davidwalsh.name/css-flip-->
    <div class="container">
        <div class="row">
            <div id="message" class="col-lg-12 text-center hide">test</div>
        </div>
        <div class="row">
            <div class="center-it">
                <div class="btn-group col-lg-12 centerify" role="group">
                <button id="quizBtn" class="btn btn-default active">Quiz</button>
                <button id="adminBtn" class="btn btn-default">Admin</button>
            </div>
            </div>
        </div>
        <div id="quizRow" class="row">
            <div id="cardbox" class="card-box flipped">
                <div class="front-back">
                    <div id="cardback" class="card-back card">&nbsp;</div>
            <div id="cardfront" class="card-front card">
                <div class="row">
                    <div id="question" class="card-item col-sm-12 col-xl-4">42</div>
                </div>
                <div class="row">
                    <input id="answer" type="text" class="form-control card-item" placeholder="Write your answer here">
                </div>
                <div class="row">
                    <button id="answerBtn" type="button" class="btn btn-Answer card-item">Answer</button>
                </div>
            </div>
                </div>
            </div>
        </div>
        <div id="adminRow" class="row hide">
            <div class="col-lg-12 text-center">
                <p><strong>Create flash cards by entering questions and answers below.</strong></p>
            </div>
             <div class="col-lg-12">
                 <input id="questionInput" type="text" class="form-control card-item" placeholder="Enter a question here">

            </div>
            <div class="col-lg-12">
                 <input id="answerInput" type="text" class="form-control card-item" placeholder="Enter the answe to the question here">
            </div>
            <div class="col-lg-12">
                <button id="saveBtn" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script id="jsbin-javascript">
var sampleData = [
        {
            "q": "What color is the sky?",
            "a": "Blue",
            "image": "https://d2ujflorbtfzji.cloudfront.net/key-image/cce03b4e-e98f-42a3-bd94-1c28e76d4dd0.png"
        },
        {
            "q": "How much wood could a wood chuck chuck?",
            "a": "A lot",
            "image": "https://65.media.tumblr.com/avatar_31019e6091f8_128.png"
        },
        {
            "q": "Who is the king of rock?",
            "a": "Run of Run DMC",
            "image": "https://d1itmove024qgx.cloudfront.net/15cab5d6e16eb3ebec58aba9c4547731ba7f5f97.jpg"
        },
        {
            "q": "What is the answer to everything?",
            "a": "42",
            "image": "https://pbs.twimg.com/profile_images/2561624559/Zaphod2_reasonably_small.jpg"
        },
        {
            "q": "Who defeat Shonuff the Shogun of Harlem?",
            "a": "Bruce Leroy",
            "image": "https://pbs.twimg.com/profile_images/535185211982487552/hZLtbgkj_400x400.jpeg"
        }
    ];

window.localStorage.setItem('flashcards', JSON.stringify(sampleData));

var data = null;
var dataOrder = null;
var counter = 0;
var currentQuestion;
var correctAnswers = [];

function getData() {
    var data = JSON.parse(window.localStorage.getItem('flashcards'));

    return data;
}

function setData(data) {
    var savedData = getData();
    savedData.push(data);
    savedData = JSON.stringify(savedData);
    console.log('saved data:', savedData);
    window.localStorage.setItem('flashcards', savedData);
}

data = getData();
if (data) {
    if (data.length > 1) {
        dataOrder = shuffle(data);
    }
    else {
        showMessage('You need to add a few questions to get started!', 'error');
    }

}
else {
    window.localStorage.setItem('flashcards', '[]');
}

function saveData() {
    var q = document.querySelector("#questionInput").value;
    var a = document.querySelector("#answerInput").value;

    var data = {
        q: q,
        a: a
    };

    setData(data);
}

function shuffle(items) {
    var newOrder = [];
    var usedNumbers = {};
    var i = 0;
    while (newOrder.length < items.length) {
        i++;
        var rando = Math.floor(Math.random() * items.length);
        if (!usedNumbers[rando.toString()]) {
            usedNumbers[rando.toString()] = true;
            newOrder.push(rando);
        }
    }
    return newOrder;
}

function showMessage(text, type) {
    var msg = document.querySelector("#message");
    msg.innerHTML = text;
    //$(msg).fadeIn('fast').delay(2500).fadeOut('fast');
    $(msg).fadeIn('fast');
    var classNames = 'alert alert-success';

    if (type === 'error') {
        classNames = 'alert alert-danger';
    }
    msg.className = classNames;

}

function checkAnswer() {
    var answer = document.querySelector('#answer').value;

    if (answer.toLowerCase().trim() === currentQuestion.a.toLowerCase().trim()) {
        showMessage('Correct!', 'success');
        correctAnswers.push(currentQuestion);
    }
    else {
        showMessage('Try again.', 'error');
    }
    document.querySelector("#cardbox").classList.toggle("flipped");

    if (counter >= data.length) {
        var review = "You answered {{correct}} of {{total}} correctly."
        review = review.replace('{{correct}}', correctAnswers.length).replace('{{total}}', data.length);
        showMessage(review, 'success');

        reset();
    }
}

function getQuestion() {
    var item = data[dataOrder[counter]];
    console.log('Question selected:', item);

    document.querySelector('#question').innerHTML = item.q;
    document.querySelector('#answer').value = '';
    currentQuestion = item;
    counter++;
}

function reset() {//only for use afer a game is over
    counter = 0;
    dataOrder = shuffle(data);
    //document.querySelector("#cardbox").classList.toggle("flipped");
}


document.querySelector("#cardback").addEventListener('click', function(e) {
    e.preventDefault();

    document.querySelector('#message').classList.toggle('hide');

    if (data.length > 1) {
        if (!dataOrder) {
            dataOrder = shuffle(data);
        }
        document.querySelector("#cardbox").classList.toggle("flipped");
        getQuestion();
    }
    else {
        showMessage('You need to add a few questions to get started!', 'error');
    }
}, false);

document.querySelector("#answerBtn").addEventListener('click', function(e) {
    e.preventDefault();
    checkAnswer();
}, false);

document.querySelector("#saveBtn").addEventListener('click', function(e) {
    e.preventDefault();
    saveData();
    showMessage('You Q&A has been saved!', 'success');
}, false);

document.querySelector("#quizBtn").addEventListener('click', function(e) {
    e.preventDefault();
    this.classList.toggle('active');
    document.querySelector("#adminBtn").classList.toggle('active');
    document.querySelector('#adminRow').classList.toggle('hide');
    document.querySelector('#quizRow').classList.toggle('hide');
    document.active = null;
}, false);

document.querySelector("#adminBtn").addEventListener('click', function(e) {
    e.preventDefault();
    this.classList.toggle('active');
    document.querySelector("#quizBtn").classList.toggle('active');
    document.querySelector('#quizRow').classList.toggle('hide');
    document.querySelector('#adminRow').classList.toggle('hide');
    document.active = null;
}, false);
</script>


<script id="jsbin-source-css" type="text/css">.card-back {
     z-index: 2;
	/* for firefox 31 */
	transform: rotateY(180deg);
    background-image: url("http://data.whicdn.com/images/127698038/original.gif");
        background-repeat: repeat;
    /*border: #000000 1px solid;*/
}

.card-front, .card-back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
    padding: 20px;
}

.card-front {
    transform: rotateY(0deg);
    background-color: #f3f3f3;
}

.card {
    position: absolute;
	top: 0;
	left: 0;
    width: 500px;
    height: 300px;
    box-shadow: 00px 10px 10px #cccccc;
}

.front-back {
    transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

.card-box {
    width: 500px;
    height: 300px;
    perspective: 1000px;
    margin: 0px auto;
    text-align: center;
    margin-bottom: 20px;
}

.flipped {
    transform: rotateY(180deg);
}

.card-box.flipped .front-back {
    transform: rotateY(180deg);
}

.button-row {
    margin: 20px auto;
}

.card-item {
    margin-bottom: 20px;
}

.center-it {
    text-align: center;
}

.centerify {
    margin: 20px auto;
    text-align: center;
    width: 1005;
    display: inline-block;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var sampleData = [
        {
            "q": "What color is the sky?",
            "a": "Blue",
            "image": "https://d2ujflorbtfzji.cloudfront.net/key-image/cce03b4e-e98f-42a3-bd94-1c28e76d4dd0.png"
        },
        {
            "q": "How much wood could a wood chuck chuck?",
            "a": "A lot",
            "image": "https://65.media.tumblr.com/avatar_31019e6091f8_128.png"
        },
        {
            "q": "Who is the king of rock?",
            "a": "Run of Run DMC",
            "image": "https://d1itmove024qgx.cloudfront.net/15cab5d6e16eb3ebec58aba9c4547731ba7f5f97.jpg"
        },
        {
            "q": "What is the answer to everything?",
            "a": "42",
            "image": "https://pbs.twimg.com/profile_images/2561624559/Zaphod2_reasonably_small.jpg"
        },
        {
            "q": "Who defeat Shonuff the Shogun of Harlem?",
            "a": "Bruce Leroy",
            "image": "https://pbs.twimg.com/profile_images/535185211982487552/hZLtbgkj_400x400.jpeg"
        }
    ];

window.localStorage.setItem('flashcards', JSON.stringify(sampleData));

var data = null;
var dataOrder = null;
var counter = 0;
var currentQuestion;
var correctAnswers = [];

function getData() {
    var data = JSON.parse(window.localStorage.getItem('flashcards'));

    return data;
}

function setData(data) {
    var savedData = getData();
    savedData.push(data);
    savedData = JSON.stringify(savedData);
    console.log('saved data:', savedData);
    window.localStorage.setItem('flashcards', savedData);
}

data = getData();
if (data) {
    if (data.length > 1) {
        dataOrder = shuffle(data);
    }
    else {
        showMessage('You need to add a few questions to get started!', 'error');
    }

}
else {
    window.localStorage.setItem('flashcards', '[]');
}

function saveData() {
    var q = document.querySelector("#questionInput").value;
    var a = document.querySelector("#answerInput").value;

    var data = {
        q: q,
        a: a
    };

    setData(data);
}

function shuffle(items) {
    var newOrder = [];
    var usedNumbers = {};
    var i = 0;
    while (newOrder.length < items.length) {
        i++;
        var rando = Math.floor(Math.random() * items.length);
        if (!usedNumbers[rando.toString()]) {
            usedNumbers[rando.toString()] = true;
            newOrder.push(rando);
        }
    }
    return newOrder;
}

function showMessage(text, type) {
    var msg = document.querySelector("#message");
    msg.innerHTML = text;
    //$(msg).fadeIn('fast').delay(2500).fadeOut('fast');
    $(msg).fadeIn('fast');
    var classNames = 'alert alert-success';

    if (type === 'error') {
        classNames = 'alert alert-danger';
    }
    msg.className = classNames;

}

function checkAnswer() {
    var answer = document.querySelector('#answer').value;

    if (answer.toLowerCase().trim() === currentQuestion.a.toLowerCase().trim()) {
        showMessage('Correct!', 'success');
        correctAnswers.push(currentQuestion);
    }
    else {
        showMessage('Try again.', 'error');
    }
    document.querySelector("#cardbox").classList.toggle("flipped");

    if (counter >= data.length) {
        var review = "You answered {{correct}} of {{total}} correctly."
        review = review.replace('{{correct}}', correctAnswers.length).replace('{{total}}', data.length);
        showMessage(review, 'success');

        reset();
    }
}

function getQuestion() {
    var item = data[dataOrder[counter]];
    console.log('Question selected:', item);

    document.querySelector('#question').innerHTML = item.q;
    document.querySelector('#answer').value = '';
    currentQuestion = item;
    counter++;
}

function reset() {//only for use afer a game is over
    counter = 0;
    dataOrder = shuffle(data);
    //document.querySelector("#cardbox").classList.toggle("flipped");
}


document.querySelector("#cardback").addEventListener('click', function(e) {
    e.preventDefault();

    document.querySelector('#message').classList.toggle('hide');

    if (data.length > 1) {
        if (!dataOrder) {
            dataOrder = shuffle(data);
        }
        document.querySelector("#cardbox").classList.toggle("flipped");
        getQuestion();
    }
    else {
        showMessage('You need to add a few questions to get started!', 'error');
    }
}, false);

document.querySelector("#answerBtn").addEventListener('click', function(e) {
    e.preventDefault();
    checkAnswer();
}, false);

document.querySelector("#saveBtn").addEventListener('click', function(e) {
    e.preventDefault();
    saveData();
    showMessage('You Q&A has been saved!', 'success');
}, false);

document.querySelector("#quizBtn").addEventListener('click', function(e) {
    e.preventDefault();
    this.classList.toggle('active');
    document.querySelector("#adminBtn").classList.toggle('active');
    document.querySelector('#adminRow').classList.toggle('hide');
    document.querySelector('#quizRow').classList.toggle('hide');
    document.active = null;
}, false);

document.querySelector("#adminBtn").addEventListener('click', function(e) {
    e.preventDefault();
    this.classList.toggle('active');
    document.querySelector("#quizBtn").classList.toggle('active');
    document.querySelector('#quizRow').classList.toggle('hide');
    document.querySelector('#adminRow').classList.toggle('hide');
    document.active = null;
}, false);
</script></body>
</html>

## jsbin.zutape.css
.card-back {
     z-index: 2;
	/* for firefox 31 */
	transform: rotateY(180deg);
    background-image: url("http://data.whicdn.com/images/127698038/original.gif");
        background-repeat: repeat;
    /*border: #000000 1px solid;*/
}

.card-front, .card-back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
    padding: 20px;
}

.card-front {
    transform: rotateY(0deg);
    background-color: #f3f3f3;
}

.card {
    position: absolute;
	top: 0;
	left: 0;
    width: 500px;
    height: 300px;
    box-shadow: 00px 10px 10px #cccccc;
}

.front-back {
    transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

.card-box {
    width: 500px;
    height: 300px;
    perspective: 1000px;
    margin: 0px auto;
    text-align: center;
    margin-bottom: 20px;
}

.flipped {
    transform: rotateY(180deg);
}

.card-box.flipped .front-back {
    transform: rotateY(180deg);
}

.button-row {
    margin: 20px auto;
}

.card-item {
    margin-bottom: 20px;
}

.center-it {
    text-align: center;
}

.centerify {
    margin: 20px auto;
    text-align: center;
    width: 1005;
    display: inline-block;
}

## jsbin.zutape.js
var sampleData = [
        {
            "q": "What color is the sky?",
            "a": "Blue",
            "image": "https://d2ujflorbtfzji.cloudfront.net/key-image/cce03b4e-e98f-42a3-bd94-1c28e76d4dd0.png"
        },
        {
            "q": "How much wood could a wood chuck chuck?",
            "a": "A lot",
            "image": "https://65.media.tumblr.com/avatar_31019e6091f8_128.png"
        },
        {
            "q": "Who is the king of rock?",
            "a": "Run of Run DMC",
            "image": "https://d1itmove024qgx.cloudfront.net/15cab5d6e16eb3ebec58aba9c4547731ba7f5f97.jpg"
        },
        {
            "q": "What is the answer to everything?",
            "a": "42",
            "image": "https://pbs.twimg.com/profile_images/2561624559/Zaphod2_reasonably_small.jpg"
        },
        {
            "q": "Who defeat Shonuff the Shogun of Harlem?",
            "a": "Bruce Leroy",
            "image": "https://pbs.twimg.com/profile_images/535185211982487552/hZLtbgkj_400x400.jpeg"
        }
    ];

window.localStorage.setItem('flashcards', JSON.stringify(sampleData));

var data = null;
var dataOrder = null;
var counter = 0;
var currentQuestion;
var correctAnswers = [];

function getData() {
    var data = JSON.parse(window.localStorage.getItem('flashcards'));

    return data;
}

function setData(data) {
    var savedData = getData();
    savedData.push(data);
    savedData = JSON.stringify(savedData);
    console.log('saved data:', savedData);
    window.localStorage.setItem('flashcards', savedData);
}

data = getData();
if (data) {
    if (data.length > 1) {
        dataOrder = shuffle(data);
    }
    else {
        showMessage('You need to add a few questions to get started!', 'error');
    }

}
else {
    window.localStorage.setItem('flashcards', '[]');
}

function saveData() {
    var q = document.querySelector("#questionInput").value;
    var a = document.querySelector("#answerInput").value;

    var data = {
        q: q,
        a: a
    };

    setData(data);
}

function shuffle(items) {
    var newOrder = [];
    var usedNumbers = {};
    var i = 0;
    while (newOrder.length < items.length) {
        i++;
        var rando = Math.floor(Math.random() * items.length);
        if (!usedNumbers[rando.toString()]) {
            usedNumbers[rando.toString()] = true;
            newOrder.push(rando);
        }
    }
    return newOrder;
}

function showMessage(text, type) {
    var msg = document.querySelector("#message");
    msg.innerHTML = text;
    //$(msg).fadeIn('fast').delay(2500).fadeOut('fast');
    $(msg).fadeIn('fast');
    var classNames = 'alert alert-success';

    if (type === 'error') {
        classNames = 'alert alert-danger';
    }
    msg.className = classNames;

}

function checkAnswer() {
    var answer = document.querySelector('#answer').value;

    if (answer.toLowerCase().trim() === currentQuestion.a.toLowerCase().trim()) {
        showMessage('Correct!', 'success');
        correctAnswers.push(currentQuestion);
    }
    else {
        showMessage('Try again.', 'error');
    }
    document.querySelector("#cardbox").classList.toggle("flipped");

    if (counter >= data.length) {
        var review = "You answered {{correct}} of {{total}} correctly."
        review = review.replace('{{correct}}', correctAnswers.length).replace('{{total}}', data.length);
        showMessage(review, 'success');

        reset();
    }
}

function getQuestion() {
    var item = data[dataOrder[counter]];
    console.log('Question selected:', item);

    document.querySelector('#question').innerHTML = item.q;
    document.querySelector('#answer').value = '';
    currentQuestion = item;
    counter++;
}

function reset() {//only for use afer a game is over
    counter = 0;
    dataOrder = shuffle(data);
    //document.querySelector("#cardbox").classList.toggle("flipped");
}


document.querySelector("#cardback").addEventListener('click', function(e) {
    e.preventDefault();

    document.querySelector('#message').classList.toggle('hide');

    if (data.length > 1) {
        if (!dataOrder) {
            dataOrder = shuffle(data);
        }
        document.querySelector("#cardbox").classList.toggle("flipped");
        getQuestion();
    }
    else {
        showMessage('You need to add a few questions to get started!', 'error');
    }
}, false);

document.querySelector("#answerBtn").addEventListener('click', function(e) {
    e.preventDefault();
    checkAnswer();
}, false);

document.querySelector("#saveBtn").addEventListener('click', function(e) {
    e.preventDefault();
    saveData();
    showMessage('You Q&A has been saved!', 'success');
}, false);

document.querySelector("#quizBtn").addEventListener('click', function(e) {
    e.preventDefault();
    this.classList.toggle('active');
    document.querySelector("#adminBtn").classList.toggle('active');
    document.querySelector('#adminRow').classList.toggle('hide');
    document.querySelector('#quizRow').classList.toggle('hide');
    document.active = null;
}, false);

document.querySelector("#adminBtn").addEventListener('click', function(e) {
    e.preventDefault();
    this.classList.toggle('active');
    document.querySelector("#quizBtn").classList.toggle('active');
    document.querySelector('#quizRow').classList.toggle('hide');
    document.querySelector('#adminRow').classList.toggle('hide');
    document.active = null;
}, false);
	<!DOCTYPE html>
	<html>
	<head>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<meta name="description" content="Flashcards">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Flashcards</title>
	<style id="jsbin-css">
	.card-back {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(180deg);
	background-image: url("http://data.whicdn.com/images/127698038/original.gif");
	background-repeat: repeat;
	/border: #000000 1px solid;/
	}

	.card-front, .card-back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	}

	.card-front {
	transform: rotateY(0deg);
	background-color: #f3f3f3;
	}

	.card {
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	height: 300px;
	box-shadow: 00px 10px 10px #cccccc;
	}

	.front-back {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
	}

	.card-box {
	width: 500px;
	height: 300px;
	perspective: 1000px;
	margin: 0px auto;
	text-align: center;
	margin-bottom: 20px;
	}

	.flipped {
	transform: rotateY(180deg);
	}

	.card-box.flipped .front-back {
	transform: rotateY(180deg);
	}

	.button-row {
	margin: 20px auto;
	}

	.card-item {
	margin-bottom: 20px;
	}

	.center-it {
	text-align: center;
	}

	.centerify {
	margin: 20px auto;
	text-align: center;
	width: 1005;
	display: inline-block;
	}
	</style>
	</head>
	<body>
	<!--https://davidwalsh.name/css-flip-->
	<div class="container">
	<div class="row">
	<div id="message" class="col-lg-12 text-center hide">test</div>
	</div>
	<div class="row">
	<div class="center-it">
	<div class="btn-group col-lg-12 centerify" role="group">
	<button id="quizBtn" class="btn btn-default active">Quiz</button>
	<button id="adminBtn" class="btn btn-default">Admin</button>
	</div>
	</div>
	</div>
	<div id="quizRow" class="row">
	<div id="cardbox" class="card-box flipped">
	<div class="front-back">
	<div id="cardback" class="card-back card"> </div>
	<div id="cardfront" class="card-front card">
	<div class="row">
	<div id="question" class="card-item col-sm-12 col-xl-4">42</div>
	</div>
	<div class="row">
	<input id="answer" type="text" class="form-control card-item" placeholder="Write your answer here">
	</div>
	<div class="row">
	<button id="answerBtn" type="button" class="btn btn-Answer card-item">Answer</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div id="adminRow" class="row hide">
	<div class="col-lg-12 text-center">
	<p><strong>Create flash cards by entering questions and answers below.</strong></p>
	</div>
	<div class="col-lg-12">
	<input id="questionInput" type="text" class="form-control card-item" placeholder="Enter a question here">

	</div>
	<div class="col-lg-12">
	<input id="answerInput" type="text" class="form-control card-item" placeholder="Enter the answe to the question here">
	</div>
	<div class="col-lg-12">
	<button id="saveBtn" class="btn btn-primary">Save</button>
	</div>
	</div>
	</div>
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

	<script id="jsbin-javascript">
	var sampleData = [
	{
	"q": "What color is the sky?",
	"a": "Blue",
	"image": "https://d2ujflorbtfzji.cloudfront.net/key-image/cce03b4e-e98f-42a3-bd94-1c28e76d4dd0.png"
	},
	{
	"q": "How much wood could a wood chuck chuck?",
	"a": "A lot",
	"image": "https://65.media.tumblr.com/avatar_31019e6091f8_128.png"
	},
	{
	"q": "Who is the king of rock?",
	"a": "Run of Run DMC",
	"image": "https://d1itmove024qgx.cloudfront.net/15cab5d6e16eb3ebec58aba9c4547731ba7f5f97.jpg"
	},
	{
	"q": "What is the answer to everything?",
	"a": "42",
	"image": "https://pbs.twimg.com/profile_images/2561624559/Zaphod2_reasonably_small.jpg"
	},
	{
	"q": "Who defeat Shonuff the Shogun of Harlem?",
	"a": "Bruce Leroy",
	"image": "https://pbs.twimg.com/profile_images/535185211982487552/hZLtbgkj_400x400.jpeg"
	}
	];

	window.localStorage.setItem('flashcards', JSON.stringify(sampleData));

	var data = null;
	var dataOrder = null;
	var counter = 0;
	var currentQuestion;
	var correctAnswers = [];

	function getData() {
	var data = JSON.parse(window.localStorage.getItem('flashcards'));

	return data;
	}

	function setData(data) {
	var savedData = getData();
	savedData.push(data);
	savedData = JSON.stringify(savedData);
	console.log('saved data:', savedData);
	window.localStorage.setItem('flashcards', savedData);
	}

	data = getData();
	if (data) {
	if (data.length > 1) {
	dataOrder = shuffle(data);
	}
	else {
	showMessage('You need to add a few questions to get started!', 'error');
	}

	}
	else {
	window.localStorage.setItem('flashcards', '[]');
	}

	function saveData() {
	var q = document.querySelector("#questionInput").value;
	var a = document.querySelector("#answerInput").value;

	var data = {
	q: q,
	a: a
	};

	setData(data);
	}

	function shuffle(items) {
	var newOrder = [];
	var usedNumbers = {};
	var i = 0;
	while (newOrder.length < items.length) {
	i++;
	var rando = Math.floor(Math.random() * items.length);
	if (!usedNumbers[rando.toString()]) {
	usedNumbers[rando.toString()] = true;
	newOrder.push(rando);
	}
	}
	return newOrder;
	}

	function showMessage(text, type) {
	var msg = document.querySelector("#message");
	msg.innerHTML = text;
	//$(msg).fadeIn('fast').delay(2500).fadeOut('fast');
	$(msg).fadeIn('fast');
	var classNames = 'alert alert-success';

	if (type === 'error') {
	classNames = 'alert alert-danger';
	}
	msg.className = classNames;

	}

	function checkAnswer() {
	var answer = document.querySelector('#answer').value;

	if (answer.toLowerCase().trim() === currentQuestion.a.toLowerCase().trim()) {
	showMessage('Correct!', 'success');
	correctAnswers.push(currentQuestion);
	}
	else {
	showMessage('Try again.', 'error');
	}
	document.querySelector("#cardbox").classList.toggle("flipped");

	if (counter >= data.length) {
	var review = "You answered {{correct}} of {{total}} correctly."
	review = review.replace('{{correct}}', correctAnswers.length).replace('{{total}}', data.length);
	showMessage(review, 'success');

	reset();
	}
	}

	function getQuestion() {
	var item = data[dataOrder[counter]];
	console.log('Question selected:', item);

	document.querySelector('#question').innerHTML = item.q;
	document.querySelector('#answer').value = '';
	currentQuestion = item;
	counter++;
	}

	function reset() {//only for use afer a game is over
	counter = 0;
	dataOrder = shuffle(data);
	//document.querySelector("#cardbox").classList.toggle("flipped");
	}


	document.querySelector("#cardback").addEventListener('click', function(e) {
	e.preventDefault();

	document.querySelector('#message').classList.toggle('hide');

	if (data.length > 1) {
	if (!dataOrder) {
	dataOrder = shuffle(data);
	}
	document.querySelector("#cardbox").classList.toggle("flipped");
	getQuestion();
	}
	else {
	showMessage('You need to add a few questions to get started!', 'error');
	}
	}, false);

	document.querySelector("#answerBtn").addEventListener('click', function(e) {
	e.preventDefault();
	checkAnswer();
	}, false);

	document.querySelector("#saveBtn").addEventListener('click', function(e) {
	e.preventDefault();
	saveData();
	showMessage('You Q&A has been saved!', 'success');
	}, false);

	document.querySelector("#quizBtn").addEventListener('click', function(e) {
	e.preventDefault();
	this.classList.toggle('active');
	document.querySelector("#adminBtn").classList.toggle('active');
	document.querySelector('#adminRow').classList.toggle('hide');
	document.querySelector('#quizRow').classList.toggle('hide');
	document.active = null;
	}, false);

	document.querySelector("#adminBtn").addEventListener('click', function(e) {
	e.preventDefault();
	this.classList.toggle('active');
	document.querySelector("#quizBtn").classList.toggle('active');
	document.querySelector('#quizRow').classList.toggle('hide');
	document.querySelector('#adminRow').classList.toggle('hide');
	document.active = null;
	}, false);
	</script>


	<script id="jsbin-source-css" type="text/css">.card-back {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(180deg);
	background-image: url("http://data.whicdn.com/images/127698038/original.gif");
	background-repeat: repeat;
	/border: #000000 1px solid;/
	}

	.card-front, .card-back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	}

	.card-front {
	transform: rotateY(0deg);
	background-color: #f3f3f3;
	}

	.card {
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	height: 300px;
	box-shadow: 00px 10px 10px #cccccc;
	}

	.front-back {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
	}

	.card-box {
	width: 500px;
	height: 300px;
	perspective: 1000px;
	margin: 0px auto;
	text-align: center;
	margin-bottom: 20px;
	}

	.flipped {
	transform: rotateY(180deg);
	}

	.card-box.flipped .front-back {
	transform: rotateY(180deg);
	}

	.button-row {
	margin: 20px auto;
	}

	.card-item {
	margin-bottom: 20px;
	}

	.center-it {
	text-align: center;
	}

	.centerify {
	margin: 20px auto;
	text-align: center;
	width: 1005;
	display: inline-block;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var sampleData = [
	{
	"q": "What color is the sky?",
	"a": "Blue",
	"image": "https://d2ujflorbtfzji.cloudfront.net/key-image/cce03b4e-e98f-42a3-bd94-1c28e76d4dd0.png"
	},
	{
	"q": "How much wood could a wood chuck chuck?",
	"a": "A lot",
	"image": "https://65.media.tumblr.com/avatar_31019e6091f8_128.png"
	},
	{
	"q": "Who is the king of rock?",
	"a": "Run of Run DMC",
	"image": "https://d1itmove024qgx.cloudfront.net/15cab5d6e16eb3ebec58aba9c4547731ba7f5f97.jpg"
	},
	{
	"q": "What is the answer to everything?",
	"a": "42",
	"image": "https://pbs.twimg.com/profile_images/2561624559/Zaphod2_reasonably_small.jpg"
	},
	{
	"q": "Who defeat Shonuff the Shogun of Harlem?",
	"a": "Bruce Leroy",
	"image": "https://pbs.twimg.com/profile_images/535185211982487552/hZLtbgkj_400x400.jpeg"
	}
	];

	window.localStorage.setItem('flashcards', JSON.stringify(sampleData));

	var data = null;
	var dataOrder = null;
	var counter = 0;
	var currentQuestion;
	var correctAnswers = [];

	function getData() {
	var data = JSON.parse(window.localStorage.getItem('flashcards'));

	return data;
	}

	function setData(data) {
	var savedData = getData();
	savedData.push(data);
	savedData = JSON.stringify(savedData);
	console.log('saved data:', savedData);
	window.localStorage.setItem('flashcards', savedData);
	}

	data = getData();
	if (data) {
	if (data.length > 1) {
	dataOrder = shuffle(data);
	}
	else {
	showMessage('You need to add a few questions to get started!', 'error');
	}

	}
	else {
	window.localStorage.setItem('flashcards', '[]');
	}

	function saveData() {
	var q = document.querySelector("#questionInput").value;
	var a = document.querySelector("#answerInput").value;

	var data = {
	q: q,
	a: a
	};

	setData(data);
	}

	function shuffle(items) {
	var newOrder = [];
	var usedNumbers = {};
	var i = 0;
	while (newOrder.length < items.length) {
	i++;
	var rando = Math.floor(Math.random() * items.length);
	if (!usedNumbers[rando.toString()]) {
	usedNumbers[rando.toString()] = true;
	newOrder.push(rando);
	}
	}
	return newOrder;
	}

	function showMessage(text, type) {
	var msg = document.querySelector("#message");
	msg.innerHTML = text;
	//$(msg).fadeIn('fast').delay(2500).fadeOut('fast');
	$(msg).fadeIn('fast');
	var classNames = 'alert alert-success';

	if (type === 'error') {
	classNames = 'alert alert-danger';
	}
	msg.className = classNames;

	}

	function checkAnswer() {
	var answer = document.querySelector('#answer').value;

	if (answer.toLowerCase().trim() === currentQuestion.a.toLowerCase().trim()) {
	showMessage('Correct!', 'success');
	correctAnswers.push(currentQuestion);
	}
	else {
	showMessage('Try again.', 'error');
	}
	document.querySelector("#cardbox").classList.toggle("flipped");

	if (counter >= data.length) {
	var review = "You answered {{correct}} of {{total}} correctly."
	review = review.replace('{{correct}}', correctAnswers.length).replace('{{total}}', data.length);
	showMessage(review, 'success');

	reset();
	}
	}

	function getQuestion() {
	var item = data[dataOrder[counter]];
	console.log('Question selected:', item);

	document.querySelector('#question').innerHTML = item.q;
	document.querySelector('#answer').value = '';
	currentQuestion = item;
	counter++;
	}

	function reset() {//only for use afer a game is over
	counter = 0;
	dataOrder = shuffle(data);
	//document.querySelector("#cardbox").classList.toggle("flipped");
	}


	document.querySelector("#cardback").addEventListener('click', function(e) {
	e.preventDefault();

	document.querySelector('#message').classList.toggle('hide');

	if (data.length > 1) {
	if (!dataOrder) {
	dataOrder = shuffle(data);
	}
	document.querySelector("#cardbox").classList.toggle("flipped");
	getQuestion();
	}
	else {
	showMessage('You need to add a few questions to get started!', 'error');
	}
	}, false);

	document.querySelector("#answerBtn").addEventListener('click', function(e) {
	e.preventDefault();
	checkAnswer();
	}, false);

	document.querySelector("#saveBtn").addEventListener('click', function(e) {
	e.preventDefault();
	saveData();
	showMessage('You Q&A has been saved!', 'success');
	}, false);

	document.querySelector("#quizBtn").addEventListener('click', function(e) {
	e.preventDefault();
	this.classList.toggle('active');
	document.querySelector("#adminBtn").classList.toggle('active');
	document.querySelector('#adminRow').classList.toggle('hide');
	document.querySelector('#quizRow').classList.toggle('hide');
	document.active = null;
	}, false);

	document.querySelector("#adminBtn").addEventListener('click', function(e) {
	e.preventDefault();
	this.classList.toggle('active');
	document.querySelector("#quizBtn").classList.toggle('active');
	document.querySelector('#quizRow').classList.toggle('hide');
	document.querySelector('#adminRow').classList.toggle('hide');
	document.active = null;
	}, false);
	</script></body>
	</html>