Flash Cards

Developer
Rob
Size
3,086 Kb
Views
50,600
  1. Flash Cards Previews
  2. Flash Cards HTML Codes
  3. Flash Cards CSS Codes
  4. Flash Cards JS Codes

How do I make an flash cards?

The idea here is a simple pen where some quiz questions are asked to the user and the user tries to guess the answer.. What is a flash cards? How do you make a flash cards? This script and codes were developed by Rob on 30 August 2022, Tuesday.

Flash Cards Previews
IQ Test

Flash Cards - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flash Cards</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="title">Quiz Time</h1>
<p class="subtitle">Look at the question and try to guess the answer</p>
<div class="card-zone-wrapper"> <div class="card-zone"> <button class="page-button disabled" id="left" disabled="disabled"><</button> <button class="page-button disabled" id="right" disabled="disabled">></button> <div class="question-zone"> <p class="question-text">Select a quiz to start</p> </div> <div class="answer-zone"> <p class="answer-text"></p> <button class="answer-button">Answer</button> </div> </div>
</div>
<label> New Zealand Quiz <button class="quiz-button" id="nz-quiz">Start</button>
</label> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flash Cards - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
body { background-color: #222222;
}
p, h1, label, button { font-family: 'Pathway Gothic One', sans-serif; color: white; margin: 0; font-size: 16px;
}
.title { line-height: 42px; font-size: 38px;
}
.subtitle { line-height: 26px;
}
.quiz-button { background-color: #444444; border: 1px solid #c6c6c6; padding: 4px 6px; color: white; margin-left: 4px;
}
.card-zone-wrapper { display: block; margin: 24px auto; width: 60%; max-width: 700px; min-width: 300px; height: 300px; border: 6px solid #2a2a2a; box-shadow: -4px 4px 6px rgba(0,0,0,0.4);
}
.card-zone { position: relative; width: 100%; height: 100%; padding: 0; background-color: white; overflow: hidden;
}
.question-zone { position: relative; top: 0; height: 100%; width: 100%;
}
.question-text { position: relative; top: 44%; color: #222222; width: 100%; text-align: center; font-size: 150%;
}
.answer-zone { position: relative; bottom: 22%; width: 100%; display: none;
}
.answer-text { font-size: 150%; color: red; text-align: center; height: 32px;
}
.answer-button { width: auto; display: block; margin: 0 auto; outline: 1px solid #222222; border: 1px solid white; background-color: red;
}
.page-button { color: white; position: absolute; background-color: rgba(0,0,0,0.6); padding: 0; margin: 0; padding: 146px 12px; top: 0; opacity: .5; z-index: 100; cursor: pointer; border: 1px solid transparent;
}
.page-button:hover { opacity: .8;
}
.page-button:active { background-color: rgba(0,0,0,0.5);
}
.page-button.disabled { opacity: .4; cursor: default;
}
.page-button.disabled:hover { opacity: .4;
}
.page-button.disabled:active { opacity: .2; background-color: red;
}
.page-button:active { border: 1px solid rgba(0,0,0,0.8);
}
.page-button#right { right: 0px;
}

Flash Cards - Script Codes JS Codes

var nzQuizData = { description: "Studying for my trip to New Zealand", quizQuestions: [ { "q": "What native tribe calls New Zealand home?", "a": "The Maori" }, { "q": "What is the national bird of New Zealand?", "a": "Kiwi" }, { "q": "What is the Capital of New Zealand?", "a": "Wellington" }, { "q":"What is the Maori name for New Zealand?", "a":"Aotearoa" } ]
};
var flashQuiz = { qaData: [], index: 0, init: function(data) { this.index = -1; $('.question-text').text("New Zealand Quiz, Go!"); //$('.answer-text').text(''); this.loadQuestions(data); $('.page-button#right').removeAttr('disabled').removeClass('disabled'); $('.page-button#left').attr('disabled','disabled').addClass('disabled'); }, loadQuestions: function(data) { if(Array.isArray(data.quizQuestions)) { this.qaData = data.quizQuestions; } }, prevQuestion: function() { if(this.index > 0) { this.index = this.index - 1; this.update(); } return false; }, nextQuestion: function() { if(this.index < this.qaData.length - 1) { this.index = this.index + 1; this.update(); } return false; }, showAnswer: function() { $('.answer-text').text(this.qaData[this.index].a); }, update: function() { $('.question-text').text(this.qaData[this.index].q); $('.answer-text').text(''); $('.answer-zone').css('display','block'); if(this.index <= 0) { $('.page-button#left').attr('disabled','disabled').addClass('disabled'); } else { $('.page-button#left').removeAttr('disabled').removeClass('disabled'); } if(this.index >= this.qaData.length - 1) { $('.page-button#right').attr('disabled','disabled').addClass('disabled'); } else { $('.page-button#right').removeAttr('disabled').removeClass('disabled'); } }
};
$('.page-button#left').click(function() { flashQuiz.prevQuestion();
});
$('.page-button#right').click(function() { flashQuiz.nextQuestion();
});
$('#nz-quiz').click(function() { flashQuiz.init(nzQuizData);
});
$('.answer-button').click(function() { flashQuiz.showAnswer();
});
Flash Cards - Script Codes
Flash Cards - Script Codes
Home Page Home
Developer Rob
Username rowinf
Uploaded August 30, 2022
Rating 3
Size 3,086 Kb
Views 50,600
Do you need developer help for Flash Cards?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rob (rowinf) Script Codes
Name
D3 test
JQuery Animations
Table filters
Site Layout
Html5 form validation
Bootstrap test
Jquery form
Responsive Calendar
Nav Menu with Chevron
Filter inputs
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!