jdb/simple-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: jdb:1.0
Branches Tags
jdb:master
jdb:2.2 jdb:2.1 jdb:2.0 jdb:1.2 jdb:1.1 jdb:1.0
..
compare: jdb:1.2
Branches Tags
jdb:master
jdb:2.2 jdb:2.1 jdb:2.0 jdb:1.2 jdb:1.1 jdb:1.0

3 Commits
1.0 ... 1.2

Author SHA1 Message Date
Jonathan Bernard
9660dfda3f Stop calling the cards 'slides' in some places. 2019-08-04 22:46:46 -05:00
Jonathan Bernard
7d7a6ea24d Added README. 2019-08-04 22:43:51 -05:00
Jonathan Bernard
776ed212f2 Add fullscreen, deploy automation, versioning. 2019-08-04 22:38:22 -05:00
5 changed files with 33 additions and 8 deletions
Expand all files Collapse all files

7
Makefile Normal file
View File

@ -0,0 +1,7 @@
deploy:
-rm -r dist
mkdir dist
cp flashcards.* dist
git describe --always --tags | xargs --replace=INSERTED -- sed -i -e 's/%VERSION%/INSERTED/' dist/*
aws s3 sync dist s3://flashcards.jdbernard.com
rm -r dist

10
README.md Normal file
View File

@ -0,0 +1,10 @@
Simple Flashcards takes a set of text values, one value per line, and shows
them to the user one at a time. It has the following features:
* Configurable timing between cards.
* Configurable size of the text (small, medium, and large).
* In-order, reverse-order, and random-order traversal of the cards.
* Support for saving/loading settings and inputs (locally to the browser).
* Support for importing/exporting saved card sets as a file.
Simple Flashcards is available at http://flashcards.jdbernard.com

6
flashcards.css
View File

@ -57,10 +57,12 @@ button {
#settings .visibility-indicator { #settings .visibility-indicator {
display: inline-block; display: inline-block;
font-size: 80%;
transition: all linear 0.2s; transition: all linear 0.2s;
} }
#settings #adv-settings { #settings #adv-settings {
font-size: 80%;
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
transition: max-height linear 0.3s; transition: max-height linear 0.3s;
@ -68,7 +70,7 @@ button {
#settings.adv-settings-visible #adv-settings { #settings.adv-settings-visible #adv-settings {
max-height: 40%; max-height: 40%;
overflow-y: scroll; overflow: scroll;
} }
#settings.adv-settings-visible .visibility-indicator { #settings.adv-settings-visible .visibility-indicator {
@ -187,7 +189,7 @@ input[name=importFileName] {
} }
#debug { #debug {
/* display: none; */ display: none;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;

7
flashcards.html
View File

@ -3,6 +3,8 @@
<head> <head>
<title>Simple Flashcards</title> <title>Simple Flashcards</title>
<meta charset=utf-8> <meta charset=utf-8>
<meta name=viewport content='width=device-width,initial-scale=1'>
<meta name=application-name content='Simple Flashcards'>
<link rel=stylesheet href=flashcards.css type="text/css"> <link rel=stylesheet href=flashcards.css type="text/css">
<script src='flashcards.js'></script> <script src='flashcards.js'></script>
@ -18,8 +20,8 @@
</label> </label>
<div id=adv-settings> <div id=adv-settings>
<label> <label>
<span>Seconds per slide:</span> <span>Seconds per card:</span>
<input type=number name=slidePeriod value=3> <input type=number name=cardPeriod value=3>
</label> </label>
<label> <label>
<span>Show cards </span> <span>Show cards </span>
@ -63,6 +65,7 @@
<button id=stop-button>Stop</button> <button id=stop-button>Stop</button>
</div> </div>
<div id=debug> <div id=debug>
Version %VERSION%
<span class=small-only>small</span> <span class=small-only>small</span>
<span class=medium-only>medium</span> <span class=medium-only>medium</span>
<span class=large-only>large</span> <span class=large-only>large</span>

11
flashcards.js
View File

@ -5,7 +5,8 @@
nextCardIdx: 0, nextCardIdx: 0,
cardOrder: [], // elements are objects: { name: 'abc', cards: 'xyz' } cardOrder: [], // elements are objects: { name: 'abc', cards: 'xyz' }
savedSets: [], savedSets: [],
$: document.querySelector.bind(document) $: document.querySelector.bind(document),
version: "%VERSION%"
}; };
FC.shuffle = function(inArray) { FC.shuffle = function(inArray) {
@ -50,7 +51,7 @@
FC.$('input[name=saveSetName]').value || FC.$('input[name=saveSetName]').value ||
'new set', 'new set',
cards: FC.itemsEl.value, cards: FC.itemsEl.value,
slidePeriod: parseInt(FC.$('input[name=slidePeriod]').value) || 3, cardPeriod: parseInt(FC.$('input[name=cardPeriod]').value) || 3,
textSize: FC.$('select[name=textSize]').value || 'small', textSize: FC.$('select[name=textSize]').value || 'small',
sortOrder: FC.$('select[name=cardOrder]').value || 'in-order' sortOrder: FC.$('select[name=cardOrder]').value || 'in-order'
}; };
@ -61,7 +62,7 @@
FC.populateSettingsFromSet = function(set) { FC.populateSettingsFromSet = function(set) {
FC.$('input[name=saveSetName]').value = set.name; FC.$('input[name=saveSetName]').value = set.name;
FC.itemsEl.value = set.cards; FC.itemsEl.value = set.cards;
FC.$('input[name=slidePeriod]').value = set.slidePeriod; FC.$('input[name=cardPeriod]').value = set.cardPeriod;
FC.$('select[name=cardOrder]').value = set.sortOrder; FC.$('select[name=cardOrder]').value = set.sortOrder;
FC.$('select[name=textSize]').value = set.textSize; FC.$('select[name=textSize]').value = set.textSize;
}; };
@ -93,13 +94,15 @@
FC.cardOrder = FC.shuffle(orderedIndices); FC.cardOrder = FC.shuffle(orderedIndices);
} }
FC.$('html').requestFullscreen();
FC.showNextCard(); FC.showNextCard();
FC.runningInterval = setInterval(FC.showNextCard, FC.currentSet.slidePeriod * 1000); FC.runningInterval = setInterval(FC.showNextCard, FC.currentSet.cardPeriod * 1000);
FC.bodyEl.classList.remove('settings-visible'); FC.bodyEl.classList.remove('settings-visible');
}; };
FC.stopCards = function(ev) { FC.stopCards = function(ev) {
clearInterval(FC.runningInterval); clearInterval(FC.runningInterval);
document.exitFullscreen();
FC.bodyEl.classList.add('settings-visible'); FC.bodyEl.classList.add('settings-visible');
}; };