Jonathan Bernard
3b62968dd7
- Answers: flashcards now have the concept of prompts and answers. If answers are enabled, the prompt is shown and then the answer is shown below. Timeouts for both are configurable. - Images: flashcard prompts and answers can be URLs to images that will be loaded and shown. - Imports: adds support for loading JSON card set definitions from URLs. - There is also an architectural change to the slide rendering. Previously we re-used the same div for all cards, rendering the new card content into that div when we wanted to show the card. Now all cards have their own div, all rendered when the user starts. CSS is used to hide all except the current card. This is an optimization to prevent lag during card transition due to DOM updates or image loading. For images specifically, this method causes all images to be fetched immediately and kept in memory.
94 lines
3.0 KiB
HTML
94 lines
3.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<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>
|
|
|
|
</head>
|
|
<body class=settings-visible>
|
|
<h1 class=title>Simple Flashcards</h1>
|
|
<form id=settings action=#>
|
|
<div id=card-input>
|
|
<label>Cards
|
|
<textarea id=prompts-input></textarea>
|
|
</label>
|
|
<label class="only-with-answers">Answers
|
|
<textarea id=answers-input></textarea>
|
|
</label>
|
|
</div>
|
|
<label class=toggle-adv-settings>Advanced Settings
|
|
<span class=visibility-indicator>➤</span>
|
|
</label>
|
|
<div id=adv-settings>
|
|
<label>
|
|
<span>Cards have answers:</span>
|
|
<label><input type=radio name=hasAnswers value="yes">yes</label>
|
|
<label><input type=radio name=hasAnswers value="no" checked>no</label>
|
|
</label>
|
|
<label>
|
|
<span>Seconds per prompt:</span>
|
|
<input type=number name=promptPeriod value=3>
|
|
</label>
|
|
<label class="only-with-answers">
|
|
<span>Seconds per answer:</span>
|
|
<input type=number name=answerPeriod 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>
|
|
<label>
|
|
<span>Text size: </span>
|
|
<select name=textSize>
|
|
<option>small</option>
|
|
<option>medium</option>
|
|
<option>large</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>Saved card sets:</span>
|
|
<select name=loadSetName>
|
|
<option value=_NULL_>choose a set to load</option>
|
|
</select>
|
|
<button id=load-set>Load</button>
|
|
<button id=delete-set>Delete</button>
|
|
</label>
|
|
<label>
|
|
<span>Save this card set as:</span>
|
|
<input type=text name=saveSetName>
|
|
<button id=save-set>Save</button>
|
|
</label>
|
|
<label>
|
|
<button id=export>Export Cards</button>
|
|
<button id=import>Import Cards</button>
|
|
<input name=importFileName type=file accept='.json'>
|
|
</label>
|
|
<label>
|
|
<span>Import from URL: </span>
|
|
<input name=importURL type=text>
|
|
<button id=importURL>Import</button>
|
|
</label>
|
|
</div>
|
|
<button class=btn-primary id=start-button>Go!</button>
|
|
</form>
|
|
<div id=cards>
|
|
<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>
|
|
</div>
|
|
</body>
|
|
</html>
|