309 lines
6.3 KiB
HTML
309 lines
6.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Simple Flashcards</title>
|
|
<meta charset=utf-8>
|
|
<style type="text/css">
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.title {
|
|
font-size: 1.5em;
|
|
margin: 1rem auto;
|
|
}
|
|
|
|
#settings {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
opacity: 0;
|
|
}
|
|
|
|
#settings label {
|
|
display: block;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
#settings textarea {
|
|
flex-grow: 2;
|
|
font-size: 100%;
|
|
}
|
|
|
|
#settings input, #settings select {
|
|
font-size: 100%;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
#adv-settings label {
|
|
display: flex;
|
|
}
|
|
|
|
#adv-settings label span {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
button {
|
|
background-color: #FFF;
|
|
border: solid thin #000;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: inherit;
|
|
padding: .2em .5em;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #1CB841;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
color: #FFF;
|
|
}
|
|
|
|
#settings .visibility-indicator {
|
|
display: inline-block;
|
|
transition: all linear 0.2s;
|
|
}
|
|
|
|
#settings #adv-settings {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height linear 0.3s;
|
|
}
|
|
|
|
#settings.adv-settings-visible .visibility-indicator {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.toggle-adv-settings {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
/* Settings Visible */
|
|
#settings {
|
|
transition: opacity 0.2s linear;
|
|
z-index: -1;
|
|
}
|
|
|
|
.settings-visible #settings {
|
|
opacity: 1;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Card View Visible */
|
|
#cards {
|
|
opacity: 1;
|
|
transition: opacity 0.2s linear;
|
|
transition-delay: 0.2s;
|
|
z-index: 1;
|
|
}
|
|
|
|
.settings-visible #cards {
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Mobile View */
|
|
@media ( max-width: 600px ) {
|
|
body {
|
|
font-size: 125%;
|
|
height: calc(100vh - 1em);
|
|
margin: 0.5em;
|
|
width: calc(100vw - 1em);
|
|
}
|
|
|
|
#settings {
|
|
align-items: stretch;
|
|
}
|
|
|
|
#settings > button {
|
|
font-size: 125%;
|
|
margin: 1em auto;
|
|
padding: 0.5em 3em;
|
|
}
|
|
|
|
#settings.adv-settings-visible #adv-settings {
|
|
max-height: 12em;
|
|
}
|
|
}
|
|
|
|
/* Tablet View */
|
|
@media (max-width: 1279px) and (min-width: 601px) {
|
|
body {
|
|
font-size: 125%;
|
|
margin: 1em;
|
|
height: calc(100vh - 2em);
|
|
width: calc(100vw - 2em);
|
|
}
|
|
|
|
#settings > button {
|
|
font-size: 125%;
|
|
margin: 1em auto;
|
|
padding: 0.5em 3em;
|
|
}
|
|
|
|
#settings.adv-settings-visible #adv-settings {
|
|
max-height: 10em;
|
|
}
|
|
}
|
|
|
|
/* Desktop View */
|
|
@media (min-width: 1280px) {
|
|
body {
|
|
font-size: 150%;
|
|
margin: 2em auto;
|
|
min-height: calc(100vh - 4em);
|
|
width: 32em;
|
|
}
|
|
|
|
#settings button {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
#settings.adv-settings-visible #adv-settings {
|
|
max-height: 8em;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
const FC = {
|
|
items: [],
|
|
slidePeriod: 3,
|
|
nextCardIdx: 0,
|
|
cardOrder: []
|
|
};
|
|
|
|
// http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
|
|
// modified to be a pure function, not mutating it's input
|
|
FC.shuffle = function(inArray) {
|
|
var currentIndex = inArray.length
|
|
, temporaryValue
|
|
, randomIndex
|
|
;
|
|
|
|
var outArray = inArray.slice(0);
|
|
|
|
// While there remain elements to shuffle...
|
|
while (0 !== currentIndex) {
|
|
|
|
// Pick a remaining element...
|
|
randomIndex = Math.floor(Math.random() * currentIndex);
|
|
currentIndex -= 1;
|
|
|
|
// And swap it with the current element.
|
|
temporaryValue = outArray[currentIndex];
|
|
outArray[currentIndex] = outArray[randomIndex];
|
|
outArray[randomIndex] = temporaryValue;
|
|
}
|
|
|
|
return outArray;
|
|
}
|
|
|
|
FC.isRunning = function() {
|
|
return !FC.bodyEl.classList.contains('settings-visible');
|
|
}
|
|
|
|
FC.toggleAdvSettings = function() {
|
|
FC.settingsEl.classList.toggle('adv-settings-visible');
|
|
}
|
|
|
|
FC.startCards = function() {
|
|
FC.items = FC.itemsEl.value.split('\n');
|
|
FC.slidePeriod =
|
|
parseInt(FC.settingsEl.querySelector('input[name=slidePeriod]').value);
|
|
|
|
FC.nextCardIdx = 0;
|
|
|
|
const orderedIndices = [...Array(FC.items.length).keys()];
|
|
switch (document.querySelector('select[name=cardOrder]').value) {
|
|
default:
|
|
case 'in-order':
|
|
FC.cardOrder = orderedIndices;
|
|
break;
|
|
case 'reverse':
|
|
FC.cardOrder = orderedIndices.reverse();
|
|
break;
|
|
case 'random':
|
|
FC.cardOrder = FC.shuffle(orderedIndices);
|
|
}
|
|
|
|
FC.showNextCard();
|
|
FC.runningInterval = setInterval(FC.showNextCard, FC.slidePeriod * 1000);
|
|
FC.bodyEl.classList.remove('settings-visible');
|
|
}
|
|
|
|
FC.stopCards = function() {
|
|
clearInterval(FC.runningInterval);
|
|
FC.bodyEl.classList.add('settings-visible');
|
|
}
|
|
|
|
FC.showNextCard = function() {
|
|
const curItem = FC.items[FC.cardOrder[FC.nextCardIdx]];
|
|
FC.cardContentEl.innerHTML = curItem;
|
|
FC.nextCardIdx = (FC.nextCardIdx + 1) % FC.items.length;
|
|
}
|
|
|
|
window.onload = function() {
|
|
FC.settingsEl = document.querySelector('#settings');
|
|
FC.itemsEl = document.querySelector('#items-input');
|
|
FC.bodyEl = document.querySelector('body');
|
|
FC.cardsEl = document.querySelector('#cards');
|
|
FC.cardContentEl = document.querySelector('#card-content');
|
|
}
|
|
</script>
|
|
|
|
</head>
|
|
<body class=settings-visible>
|
|
<h1 class=title>Simple Flashcards</h1>
|
|
<form id=settings action=#>
|
|
<label>Items</label>
|
|
<textarea id=items-input></textarea>
|
|
<label class=toggle-adv-settings onclick=FC.toggleAdvSettings()>Advanced Settings <span class=visibility-indicator>➤</span></label>
|
|
<div id=adv-settings>
|
|
<label>
|
|
<span>Seconds per slide:</span>
|
|
<input type=number name=slidePeriod value=3>
|
|
</label>
|
|
<label>
|
|
<span>Show cards </span>
|
|
<select name=cardOrder>
|
|
<option value=in-order>in order.</option>
|
|
<option value=reverse>in reverse order.</option>
|
|
<option value=random>in random order.</option>
|
|
</select>
|
|
<label>
|
|
<span>Saved sets:</span>
|
|
<select name=loadSetName disabled>
|
|
<option>choose a set to load</option>
|
|
</select>
|
|
<button disabled>Load</button>
|
|
</label>
|
|
<label>
|
|
<span>Save this set as:</span>
|
|
<input type=text name=saveSetname disabled>
|
|
<button disabled>Save</button>
|
|
</label>
|
|
</div>
|
|
<button class=btn-primary onclick=FC.startCards()>Go!</button>
|
|
</form>
|
|
<div id=cards>
|
|
<div id=card-content>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|