Skip to content

Instantly share code, notes, and snippets.

@ronsims2

ronsims2/index.html

Forked from anonymous/index.html
Created December 25, 2016 02:42
Show Gist options
  • Save ronsims2/cba9e946c06854159f145f077a6e24e1 to your computer and use it in GitHub Desktop.
Save ronsims2/cba9e946c06854159f145f077a6e24e1 to your computer and use it in GitHub Desktop.
Download ZIP
Flashcards Flashcards // source https://jsbin.com/zutape
Raw
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>
Raw
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;
}
Raw
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment