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

7
flashcards.html
View File

@ -3,6 +3,8 @@
<head>
<title>Simple Flashcards</title>
<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">
<script src='flashcards.js'></script>
@ -18,8 +20,8 @@
</label>
<div id=adv-settings>
<label>
<span>Seconds per slide:</span>
<input type=number name=slidePeriod value=3>
<span>Seconds per card:</span>
<input type=number name=cardPeriod value=3>
</label>
<label>
<span>Show cards </span>
@ -63,6 +65,7 @@
<button id=stop-button>Stop</button>
</div>
<div id=debug>
Version %VERSION%
<span class=small-only>small</span>
<span class=medium-only>medium</span>
<span class=large-only>large</span>

11
flashcards.js
View File

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