809 lines
20 KiB
HTML
809 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>An Interactive Comic</title>
|
||
|
||
<link rel="stylesheet" type="text/css" href="css/comic.css"/>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!--
|
||
<a name="0"></a>
|
||
<div class="divider" style="padding: 80px 0">
|
||
<div id="chapter_name" style="margin-bottom:30px;">
|
||
[UNTITLED SPACED REPETITION THING]
|
||
</div>
|
||
<div id="chapter_subtitle">
|
||
by nicky case, oct 2018
|
||
</div>
|
||
</div>
|
||
|
||
<br><br>
|
||
|
||
<a name="1"></a>
|
||
<div class="divider">
|
||
<div id="chapter_name">
|
||
THE SCIENCE
|
||
<span class="small_of">
|
||
of
|
||
</span>
|
||
<br>
|
||
SPACED REPETITION
|
||
</div>
|
||
<div id="chapter_links"></div>
|
||
</div>
|
||
|
||
<br><br>
|
||
|
||
<a name="2"></a>
|
||
<div class="divider">
|
||
<div id="chapter_name">
|
||
THE ART
|
||
<span class="small_of">
|
||
of
|
||
</span>
|
||
<br>
|
||
SPACED REPETITION
|
||
</div>
|
||
<div id="chapter_links"></div>
|
||
</div>
|
||
|
||
<br><br>
|
||
|
||
<a name="3"></a>
|
||
<div class="divider">
|
||
<div id="chapter_name">
|
||
GET STARTED TODAY!
|
||
</div>
|
||
<div id="chapter_links"></div>
|
||
</div>
|
||
-->
|
||
|
||
<div class="comic">
|
||
|
||
<!-- - - - - - - - - - - - -->
|
||
<!-- WHAT, WHY, HOW, WHEN - -->
|
||
<!-- - - - - - - - - - - - -->
|
||
|
||
<!-- - - -->
|
||
<!-- WHAT -->
|
||
<!-- - - -->
|
||
|
||
<panel w=500 h=350>
|
||
<pic src="pics/end0.png" sx=0 sy=0></pic>
|
||
<words x=10 y=10 w=450 h=60>
|
||
To help you get started with Spaced Repetition <i>today</i>,
|
||
you need to answer four questions:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w="600" h="80">
|
||
<words w="600" x="-15" no-bg="">
|
||
You'll answer these questions by making flashcards!
|
||
So, here's the <i>front</i> of our first flashcard, our question:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=250 bg="#e0e0e0">
|
||
<!-- WHAT do you want to learn? -->
|
||
<sim x=29 y=-20 w=440 h=300 src="sims/singlecard/?card=you_what&front_only=yes"
|
||
style="width: 440px; height: 300px; transform: scale(0.83,0.83) rotate(3deg);"></sim>
|
||
<img src="pics/fcard_frontonly.png" style="width:100%; height:100%; position:absolute; top:0; left:0;"/>
|
||
</panel>
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/end0.png" sx=500 sy=0></pic>
|
||
<words x=10 y=10 w=430 h=60>
|
||
For example, you could use Spaced Repetition to help you learn...
|
||
</words>
|
||
<words x=120 y=104 w=100 style="text-align:left" no-bg class="comic_text">
|
||
a new language
|
||
</words>
|
||
<words x=320 y=107 w=100 style="text-align:left" no-bg class="comic_text">
|
||
a new instrument
|
||
</words>
|
||
<words x=115 y=195 w=100 style="text-align:left" no-bg class="comic_text">
|
||
computer programming
|
||
</words>
|
||
<words x=340 y=195 w=150 style="text-align:left" no-bg class="comic_text">
|
||
details of friends' lives
|
||
</words>
|
||
<words x=129 y=283 w=200 style="text-align:left" no-bg class="comic_text">
|
||
anything interesting you find, anywhere!
|
||
</words>
|
||
<words x=389 y=290 w=100 style="text-align:left" no-bg class="comic_text">
|
||
all the pokémon
|
||
</words>
|
||
<words x=80 y=380 w=380 h=30>
|
||
Now, you write <i>your</i> answer on the back:
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- WHAT do you want to learn? -->
|
||
<panel w=600 h=350 bg="#e0e0e0">
|
||
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_what"></sim>
|
||
</panel>
|
||
|
||
<panel fadeInOn="answer_edit_you_what" w="600" h="40" style="margin-bottom: -10px;">
|
||
<words w="600" x="-15" y="-10" no-bg="">
|
||
(note: you can scroll back here & change your answer later)
|
||
</words>
|
||
</panel>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- - - -->
|
||
<!-- WHY -->
|
||
<!-- - - -->
|
||
|
||
<panel w="600" h="80">
|
||
<words w="600" x="-15" no-bg="">
|
||
However, recall that for Spaced Repetition to work,
|
||
you need to connect it to something you <i>care</i> about.
|
||
So our next question is:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=250 bg="#e0e0e0">
|
||
<!-- WHY do you want to learn X? -->
|
||
<sim x=29 y=-20 w=440 h=300 src="sims/singlecard/?card=you_why&front_only=yes"
|
||
style="width: 440px; height: 300px; transform: scale(0.83,0.83) rotate(3deg);"></sim>
|
||
<img src="pics/fcard_frontonly.png" style="width:100%; height:100%; position:absolute; top:0; left:0;"/>
|
||
</panel>
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/end0.png" sx=1000 sy=0></pic>
|
||
<words x=10 y=10 w=430 h=60>
|
||
That may be too philosophical, so here's some
|
||
concrete examples of a <i>why</i> behind a <i>what:</i>
|
||
</words>
|
||
<words x=130 y=105 w=350 style="text-align:left" no-bg class="comic_text">
|
||
<b>WHAT:</b> a new language
|
||
<br>
|
||
<b>WHY:</b> to speak to friends, family, lovers in their native tongue
|
||
</words>
|
||
<words x=130 y=210 w=350 style="text-align:left" no-bg class="comic_text">
|
||
<b>WHAT:</b> computer programming
|
||
<br>
|
||
<b>WHY:</b> to make money so you can eat
|
||
</words>
|
||
<words x=130 y=290 w=350 style="text-align:left" no-bg class="comic_text">
|
||
<b>WHAT:</b> anything interesting
|
||
<br>
|
||
<b>WHY:</b> curiosity, for its own sake!
|
||
</words>
|
||
<words x=210 y=380 w=250 h=30>
|
||
So... what's <i>your</i> why?
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- WHY do you want to learn that? -->
|
||
<panel w=600 h=350 bg="#e0e0e0">
|
||
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_why"></sim>
|
||
</panel>
|
||
|
||
|
||
|
||
|
||
<!-- - - -->
|
||
<!-- HOW -->
|
||
<!-- - - -->
|
||
|
||
<panel w="600" h="80">
|
||
<words w="600" x="-15" no-bg="">
|
||
You now have your what and why... but we still need to pick a <i>how!</i>
|
||
That is, what tool/app do you want to use?
|
||
Our next card asks:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=250 bg="#e0e0e0">
|
||
<!-- HOW do you want to do Spaced Repetition? (with what tool?) -->
|
||
<sim x=29 y=-20 w=440 h=300 src="sims/singlecard/?card=you_how&front_only=yes"
|
||
style="width: 440px; height: 300px; transform: scale(0.83,0.83) rotate(3deg);"></sim>
|
||
<img src="pics/fcard_frontonly.png" style="width:100%; height:100%; position:absolute; top:0; left:0;"/>
|
||
</panel>
|
||
|
||
<panel w=500 h=700>
|
||
<pic src="pics/end0.png" sx=0 sy=450></pic>
|
||
<words x=10 y=10 w=450 h=90>
|
||
I currently use
|
||
<a target="_blank" href="https://en.wikipedia.org/wiki/Leitner_system">The Leitner Box</a>,
|
||
but many of my friends use
|
||
<a target="_blank" href="https://apps.ankiweb.net/">Anki</a>,
|
||
and for a while I used
|
||
<a target="_blank" href="https://tinycards.duolingo.com/">TinyCards</a>.
|
||
Here's how they compare:
|
||
</words>
|
||
<words x=160 y=140 w=300 fontsize=21 style="text-align:left" no-bg>
|
||
<b>Leitner Box</b>
|
||
<br>
|
||
Pros: arts-and-craftsy, easy to use
|
||
<br>
|
||
Cons: not as portable as an app
|
||
</words>
|
||
<words x=160 y=275 w=300 fontsize=21 style="text-align:left" no-bg>
|
||
<b>Anki (app)</b>
|
||
<br>
|
||
Pros: huge community, open-source, lots of powerful features
|
||
<br>
|
||
Cons: kinda ugly
|
||
</words>
|
||
<words x=160 y=405 w=300 fontsize=21 style="text-align:left" no-bg>
|
||
<b>TinyCards (app)</b>
|
||
<br>
|
||
Pros: beautiful design, easy to use
|
||
<br>
|
||
Cons: max 150 cards per deck, doesn't let <i>you</i> decide if you got a card right
|
||
</words>
|
||
<words x=10 y=530 w=450 h=60>
|
||
(Want something else?
|
||
Here's a few other tools:
|
||
<a target="_blank" href="https://www.supermemo.com/">SuperMemo</a>,
|
||
<a target="_blank" href="https://www.nimblenotes.com/">NimbleNotes</a>,
|
||
<a target="_blank" href="https://mnemosyne-proj.org/">Mnemosyne</a>)
|
||
</words>
|
||
<words x=110 y=620 w=360 h=40 no-bg fontsize=20>
|
||
* <i>anti</i>-disclaimer: i am <i>not</i> affiliated with any of these.
|
||
i just think they're cool & helpful!
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=50>
|
||
<words w=600 x=-15 no-bg>
|
||
So, what's it gonna be?
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- HOW do you want to do Spaced Repetition? -->
|
||
<panel w=600 h=350 bg="#e0e0e0">
|
||
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_how"></sim>
|
||
</panel>
|
||
|
||
<!-- - - -->
|
||
<!-- WHEN -->
|
||
<!-- - - -->
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/end0.png" sx=500 sy=450></pic>
|
||
<words x=10 y=10 w=430 h=90>
|
||
Just one card left!
|
||
Now: doing Spaced Repetition is actually quite easy...
|
||
however, doing it <i>as a daily habit</i> is hard.
|
||
</words>
|
||
<words x=60 y=355 w=400 h=30 no-bg>
|
||
Why? Because getting the ball rolling on <i>any</i> new habit is hard.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=550>
|
||
<pic src="pics/end0.png" sx=1000 sy=450></pic>
|
||
<words x=10 y=10 w=430 h=90>
|
||
Hard, but straightforward.
|
||
The science of habits shows that if you do the same thing, given the same cue,
|
||
over and over...
|
||
</words>
|
||
<words x=20 y=450 w=440 h=60>
|
||
...it'll become a habit, for better or worse.
|
||
So for a Spaced Repetition habit, our question is:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=250 bg="#e0e0e0">
|
||
<!-- WHEN do you want to do Spaced Repetition? -->
|
||
<sim x=29 y=-20 w=440 h=300 src="sims/singlecard/?card=you_when&front_only=yes"
|
||
style="width: 440px; height: 300px; transform: scale(0.83,0.83) rotate(3deg);"></sim>
|
||
<img src="pics/fcard_frontonly.png" style="width:100%; height:100%; position:absolute; top:0; left:0;"/>
|
||
</panel>
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/end0.png" sx=0 sy=1150></pic>
|
||
<words x=10 y=10 w=400 h=60>
|
||
For example, you could play the Spaced Repetition game...
|
||
</words>
|
||
<!--
|
||
After waking up, to jog your mind
|
||
On a commute, to fill up spare time
|
||
Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||
-->
|
||
<words x=30 y=320 w=430 h=90>
|
||
It doesn't really matter <i>when</i> you do it, as long as you do it
|
||
daily and consistently (more or less - you can skip a day once in a while).
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=500>
|
||
<pic src="pics/end0.png" sx=500 sy=1150></pic>
|
||
<words x=10 y=10 w=350 h=90>
|
||
(Tip: whenever I try to create a new habit,
|
||
I draw a circle on a calendar for each day I successfully do it)
|
||
</words>
|
||
<words x=10 y=370 w=350 h=90>
|
||
(It's a game I play with myself! The goal is to try not break
|
||
my streak, and build the longest chain I can.)
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=50>
|
||
<words w=600 x=-15 no-bg>
|
||
Now, let's fill out that final flashcard:
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- WHEN do you want to do Spaced Repetition? -->
|
||
<panel w=600 h=350 bg="#e0e0e0">
|
||
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_when"></sim>
|
||
</panel>
|
||
|
||
|
||
|
||
|
||
<!-- - - - - - - - -->
|
||
<!-- ALL THE CARDS -->
|
||
<!-- - - - - - - - -->
|
||
|
||
<panel w=400 h=80>
|
||
<words w=400 x=-15 no-bg>
|
||
Et voilà, here's all four of your flashcards, all about you!
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=264 h=180 bg="#e0e0e0">
|
||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_what&refresh=yes" class="small_card"></sim>
|
||
</panel>
|
||
|
||
<panel w=264 h=180 bg="#e0e0e0">
|
||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_why&refresh=yes" class="small_card"></sim>
|
||
</panel>
|
||
|
||
<panel w=264 h=180 bg="#e0e0e0">
|
||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_how&refresh=yes" class="small_card"></sim>
|
||
</panel>
|
||
|
||
<panel w=264 h=180 bg="#e0e0e0">
|
||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_when&refresh=yes" class="small_card"></sim>
|
||
</panel>
|
||
|
||
|
||
|
||
|
||
<!-- - - - - - - - - - - - - - - -->
|
||
<!-- DOWNLOADABLES TO START NOW - -->
|
||
<!-- - - - - - - - - - - - - - - -->
|
||
|
||
<br><br>
|
||
|
||
<panel w=500 h=250>
|
||
<pic src="pics/end1.png" sx=0 sy=0></pic>
|
||
<words x=180 y=10 w=250 no-bg>
|
||
But like I said, I want to help you take control of your memory <i>today</i>.
|
||
</words>
|
||
<words x=230 y=130 w=250 no-bg>
|
||
Not "eventually", not "tomorrow", <i>TODAY</i>.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=250>
|
||
<pic src="pics/end1.png" sx=0 sy=250></pic>
|
||
<words x=150 y=30 w=120 no-bg>
|
||
so to help...
|
||
</words>
|
||
<words x=270 y=95 w=170 no-bg>
|
||
let's download some
|
||
<b style="font-size:30px">
|
||
COOL GOODIES
|
||
</b>
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- Reminder Wallpaper -->
|
||
|
||
<panel w=600 h=90>
|
||
<words x=-15 y=0 w=600 no-bg style="text-align:left" fontsize=30>
|
||
<img src="pics/gift.png" style="height:1em"/>
|
||
<b>FIRST:</b>
|
||
<span id="gift_wallpaper"></span>
|
||
to remind you to play the Spaced Repetition game daily!
|
||
</words>
|
||
</panel>
|
||
|
||
<div>
|
||
<a id="wallpaper_link">
|
||
<img id="wallpaper_image"/><br>
|
||
(click to download ↓)
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Leitner Calendar / Anki -->
|
||
|
||
<panel w=600 h=90>
|
||
<words x=-15 y=0 w=600 no-bg style="text-align:left" fontsize=30>
|
||
<img src="pics/gift.png" style="height:1em"/>
|
||
<b>SECOND:</b>
|
||
<span id="gift_app"></span>
|
||
</words>
|
||
</panel>
|
||
|
||
|
||
<!-- All flashcards -->
|
||
|
||
<panel w=600 h=90>
|
||
<words x=-15 y=0 w=600 no-bg style="text-align:left" fontsize=30>
|
||
<img src="pics/gift.png" style="height:1em"/>
|
||
And finally,
|
||
<b>THIRD:</b>
|
||
a .zip of all the flashcards you've been practicing in this interactive comic!
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=200 bg="#fff">
|
||
<sim x=0 y=0 w=600 h=400 src="sims/downloads/all.html"></sim>
|
||
</panel>
|
||
|
||
<panel w=600 h=120>
|
||
<words x=-15 y=0 w=600 no-bg style="text-align:left">
|
||
(These can be your first few days' worth of Spaced Repetition cards,
|
||
to help you get started! And as a plus, you'll get to remember everything
|
||
you learnt here today, forever)
|
||
</words>
|
||
</panel>
|
||
|
||
|
||
|
||
|
||
<!-- - - - - - - - - - - - - -->
|
||
<!-- THE END - - - - - - - - -->
|
||
<!-- - - - - - - - - - - - - -->
|
||
|
||
<!-- Review -->
|
||
|
||
<panel w=500 h=350>
|
||
<pic src="pics/end1.png" sx=500 sy=0></pic>
|
||
<words x=110 y=30 w=250 no-bg>
|
||
Which reminds me...
|
||
</words>
|
||
<words x=200 y=105 w=220 no-bg>
|
||
one last goodbye,
|
||
for old time's sake,
|
||
the final swan song!
|
||
</words>
|
||
<words x=210 y=230 w=250 no-bg>
|
||
...let's review our flashcards, <i>all</i> of them:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=400 bg="#e0e0e0">
|
||
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?final=yes&cards=you_why,sci_a,you_when,sci_b,you_how,sci_c"></sim>
|
||
</panel>
|
||
|
||
<panel w=240 h=300>
|
||
<pic src="pics/end1.png" sx=0 sy=500></pic>
|
||
<words x=0 y=12 w=210 no-bg>
|
||
Sniff...
|
||
It's always so hard to say goodbye...
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=240 h=300>
|
||
<pic src="pics/end1.png" sx=240 sy=500></pic>
|
||
<words x=-20 y=-10 no-bg fontsize=120 color="rgba(0,0,0,0.5)" style="transform:rotate(10deg)">
|
||
HONK
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=250>
|
||
<pic src="pics/end1.png" sx=480 sy=500></pic>
|
||
<words x=160 y=30 w=200 no-bg>
|
||
I'll miss the time we had together...
|
||
</words>
|
||
<words x=200 y=120 w=250 no-bg>
|
||
...but I hope we live on in each others' memories!
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- Classroom -->
|
||
|
||
<panel w=500 h=350>
|
||
<pic src="pics/end1.png" sx=0 sy=800></pic>
|
||
<words x=10 y=10 w=430 h=90>
|
||
If you're a student, I hope Spaced Repetition
|
||
helps you be more confident, and take learning into your own hands.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=350>
|
||
<pic src="pics/end1.png" sx=500 sy=800></pic>
|
||
<words x=10 y=10 w=430 h=90>
|
||
If you're a teacher,
|
||
please oh <i>please</i> tell your students about Spaced Repetition
|
||
(& other evidence-based study habits) early on.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=350>
|
||
<pic src="pics/end1.png" sx=1000 sy=800></pic>
|
||
<words x=10 y=10 w=430 h=90>
|
||
But whether you're in or out of school,
|
||
I hope Spaced Repetition helps you develop your memory, your mind,
|
||
your Muse...
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=550>
|
||
<pic src="pics/end1.png" sx=1000 sy=0></pic>
|
||
<words x=30 y=30 w=250 no-bg>
|
||
...and learn one of life's greatest loves:
|
||
</words>
|
||
<words x=120 y=455 w=300 style="text-align:right" no-bg>
|
||
a lifelong love of learning.
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- Bow Goodbye -->
|
||
|
||
<panel w=600 h=300 bg="#e0e0e0">
|
||
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=the_end"></sim>
|
||
</panel>
|
||
|
||
<!-- want more? further reading & credits below! -->
|
||
<panel fadeInOn="flip_the_end" w=600 h=90>
|
||
<words w=600 x=-15 y=0 no-bg>
|
||
(want more? scroll down for further reading & credits!)
|
||
<br>
|
||
↓ ↓ ↓ ↓ ↓
|
||
</b>
|
||
</words>
|
||
</panel>
|
||
|
||
|
||
|
||
|
||
<!-- - - - - - - - - - -->
|
||
<!-- SIMULATION LABELS -->
|
||
<!-- - - - - - - - - - -->
|
||
|
||
<div id="labels">
|
||
|
||
|
||
<!-- GIFTS -->
|
||
<span id="gift_wallpaper_what">
|
||
WHAT:
|
||
</span>
|
||
<span id="gift_wallpaper_why">
|
||
WHY:
|
||
</span>
|
||
<span id="gift_wallpaper_do_1">
|
||
DO
|
||
</span>
|
||
<span id="gift_wallpaper_do_2">
|
||
ME!
|
||
</span>
|
||
<span id="gift_wallpaper_filename">
|
||
wallpaper
|
||
</span>
|
||
<span id="gift_wallpaper_desktop">
|
||
a wallpaper for your desktop,
|
||
</span>
|
||
<span id="gift_wallpaper_phone">
|
||
a lock-screen wallpaper for your phone,
|
||
</span>
|
||
<span id="gift_app_leitner">
|
||
a looping 64-day calendar for your Leitner Box!
|
||
(pdf, so you can print it out)
|
||
</span>
|
||
<span id="gift_app_anki">
|
||
a link to
|
||
<a target="_blank" href="https://apps.ankiweb.net/">download Anki!</a>
|
||
(and here's
|
||
<a target="_blank" href="https://www.youtube.com/watch?v=sQkdB3cJwn0">a video tutorial</a>
|
||
on how to get started)
|
||
</span>
|
||
<span id="gift_app_tiny">
|
||
a link to
|
||
<a target="_blank" href="https://tinycards.duolingo.com/">TinyCards!</a>
|
||
(i recommend checking out their
|
||
<a target="_blank" href="https://tinycards.duolingo.com/users/TinyGeo">geography decks</a>)
|
||
</span>
|
||
<span id="gift_app_other">
|
||
links to
|
||
the Leitner Box 64-day calendar,
|
||
the Anki app,
|
||
and TinyCards!
|
||
</span>
|
||
|
||
|
||
<!-- QUESTIONS -->
|
||
<span id="flashcard_you_what_front">
|
||
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=0 sy=0></div>
|
||
<div id="fc_words" class="fcard_center" style="position: absolute; width: 190px; margin: 0; top: 50px; left: 180px;">
|
||
WHAT do you want to learn?
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_you_what_back">
|
||
<div id="fc_words" class="fcard_center" editable="you_what" style="height:1.2em">
|
||
Anything interesting!
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_you_why_front">
|
||
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=400 sy=0></div>
|
||
<div id="fc_words" class="fcard_center" style="position: absolute; width: 190px; margin: 0; top: 50px; left: 180px;">
|
||
WHY do you want to learn that?
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_you_why_back">
|
||
<div id="fc_words" class="fcard_center" editable="you_why" style="height:1.2em">
|
||
For curiosity's sake
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_you_how_front">
|
||
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=0 sy=240></div>
|
||
<div id="fc_words" class="fcard_center" style="position: absolute; width: 190px; margin: 0; top:31px; left: 180px;">
|
||
HOW do you want to do Spaced Repetition?
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_you_how_back">
|
||
<div id="fc_words" class="fcard_center" editable="you_how" style="height:1.2em">
|
||
Leitner Box
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_you_when_front">
|
||
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=400 sy=240></div>
|
||
<div id="fc_words" class="fcard_center" style="position: absolute; width: 190px; margin: 0; top:31px; left: 180px;">
|
||
WHEN do you want to do Spaced Repetition?
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_you_when_back">
|
||
<div id="fc_words" class="fcard_center" editable="you_when" style="height:1.2em">
|
||
In the evening
|
||
</div>
|
||
</span>
|
||
|
||
<!-- THE END -->
|
||
<span id="flashcard_the_end_front">
|
||
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=0 sy=480></div>
|
||
</span>
|
||
<span id="flashcard_the_end_back">
|
||
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=400 sy=480></div>
|
||
<div id="fc_words" class="fcard_center" style="top:30px; font-size:50px;">
|
||
THE END
|
||
</div>
|
||
</span>
|
||
|
||
<!-- SUGGESTIONS -->
|
||
<span id="you_what_suggestions">
|
||
<li>Anything interesting!</li>
|
||
<li>A language</li>
|
||
<li>Music</li>
|
||
<li>Coding</li>
|
||
<li>Personal</li>
|
||
<li>(other)</li>
|
||
</span>
|
||
<span id="you_why_suggestions">
|
||
<li>For people I love</li>
|
||
<li>For my own sake</li>
|
||
<li>For curiosity's sake</li>
|
||
<li>(other)</li>
|
||
</span>
|
||
<span id="you_how_suggestions">
|
||
<li>Leitner Box</li>
|
||
<li>Anki</li>
|
||
<li>TinyCards</li>
|
||
<li>(other)</li>
|
||
</span>
|
||
<span id="you_when_suggestions">
|
||
<li>In the morning</li>
|
||
<li>On my commute</li>
|
||
<li>In the evening</li>
|
||
<li>(other)</li>
|
||
</span>
|
||
|
||
<!-- TYPING CARDS -->
|
||
<span id="type_question">
|
||
Q:
|
||
</span>
|
||
<span id="type_placeholder">
|
||
type your answer here
|
||
</span>
|
||
<span id="type_suggestions">
|
||
or pick one of these suggestions:
|
||
</span>
|
||
|
||
<!-- Flashcards -->
|
||
<span id="flashcard_sci_a_front">
|
||
<div class="fcard_center" style="height:2.5em">
|
||
The discoverer of the Forgetting Curve was...
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_sci_a_back">
|
||
<div class="fcard_bg" src="pics/fcards0.png" sx=400 sy=0></div>
|
||
<div style="position: absolute; width: 250px; top: 60px; right: 0; line-height: 1.1em;">
|
||
Hermann Ebbinghaus
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_sci_b_front">
|
||
<div class="fcard_center" style="height:3.4em">
|
||
The Forgetting Curve (<i>without</i> any recalls) looks like...
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_sci_b_back">
|
||
<div class="fcard_bg" src="pics/fcards0.png" sx=0 sy=240></div>
|
||
<div style="position: absolute; width: 280px; top: 70px; right: 20px; font-size:20px; line-height: 1.1em;">
|
||
(note: it decays quickly, then slowly – "exponential decay")
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_sci_c_front">
|
||
<div class="fcard_center" style="height:3.4em">
|
||
The Forgetting Curve (<i>with</i> optimally-spaced recalls) looks like...
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_sci_c_back">
|
||
<div class="fcard_bg" src="pics/fcards0.png" sx=400 sy=240></div>
|
||
<div style="position: absolute; width: 360px; top: 120px; left: 20px; font-size:20px; line-height: 1.1em;">
|
||
(note: the gaps between recalls <i>increase</i> in length)
|
||
</div>
|
||
</span>
|
||
|
||
<!-- Multi Card Labels -->
|
||
<span id="multicard_q">
|
||
try to recall ↑
|
||
then flip ↻
|
||
</span>
|
||
<span id="multicard_cards_left">
|
||
(cards left: [N])
|
||
</span>
|
||
<span id="multicard_a">
|
||
did you remember this?
|
||
</span>
|
||
<span id="multicard_no">
|
||
nah, try again
|
||
</span>
|
||
<span id="multicard_yes">
|
||
yup, onwards!
|
||
</span>
|
||
<span id="multicard_done">
|
||
done for now! keep scrolling
|
||
<br>
|
||
↓
|
||
</span>
|
||
<span id="multicard_done_2">
|
||
that's all, folks! keep scrolling
|
||
<br>
|
||
↓
|
||
</span>
|
||
|
||
<!-- Chapter Links -->
|
||
<span id="label_chapter_links">
|
||
<a href="#0">
|
||
Intro
|
||
</a>
|
||
·
|
||
<a href="#1">
|
||
The Science
|
||
</a>
|
||
·
|
||
<a href="#2">
|
||
The Art
|
||
</a>
|
||
·
|
||
<a href="#3">
|
||
Get Started!
|
||
</a>
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</body>
|
||
|
||
</html>
|
||
|
||
<script src="js/howler.core.min.js"></script>
|
||
<script src="js/minpubsub.src.js"></script>
|
||
<script src="js/comic.js"></script>
|