461 lines
11 KiB
HTML
461 lines
11 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>
|
||
|
||
<div id="comic">
|
||
|
||
<!-- - - - - - - - - - - - -->
|
||
<!-- THE SCIENCE of SRS - - -->
|
||
<!-- - - - - - - - - - - - -->
|
||
|
||
<panel w=600 h=90>
|
||
<words w=600 x=-15 no-bg>
|
||
|
||
(<b>This is a work-in-progress!</b>
|
||
Please don't share yet.
|
||
<br>
|
||
Let me know your honest feedback, thanks!)
|
||
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- Part I: Decay -->
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/sci0.png" sx=0 sy=0></pic>
|
||
<words x=10 y=10 w=400 h=60>
|
||
In 1885, Hermann Ebbinghaus performed an act of scientific masochism.
|
||
</words>
|
||
<words x=30 y=320 w=430 h=90>
|
||
The German psychologist memorized <i>thousands</i> of nonsense words,
|
||
recorded how much he forgot over time, and discovered...
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=500>
|
||
<pic src="pics/sci0.png" sx=500 sy=0></pic>
|
||
<words x=60 y=10 w=250>
|
||
<b>THE FORGETTING CURVE</b>
|
||
</words>
|
||
<words x=10 y=310 w=350>
|
||
He found that you forget most of what you learn in the first 24 hours,
|
||
then – if you don’t practice recall – your remaining memories decay exponentially.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/sci0.png" sx=900 sy=0></pic>
|
||
<words x=10 y=10 w=400 h=60>
|
||
Since then, Ebbinghaus’s findings have been replicated again and again–
|
||
</words>
|
||
<words x=60 y=350 w=400 h=60>
|
||
–and grew into a whole new scientific field of memory!
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=80>
|
||
<words w=600 x=-15 no-bg>
|
||
Here’s a playable simulation of the Forgetting Curve.
|
||
<br>
|
||
<b>Change the rate of “memory decay”. What happens?</b>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=370>
|
||
<sim x=0 y=0 w=600 h=370 src="sims/ebbinghaus/?mode=0"></sim>
|
||
</panel>
|
||
|
||
<!-- Part II: Reminder -->
|
||
|
||
<panel w=600 h=90>
|
||
<words w=600 x=-15 no-bg>
|
||
As you can see, the less the decay, the flatter the curve –
|
||
that is, the longer the memory lasts.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=400>
|
||
<pic src="pics/sci0.png" sx=0 sy=500></pic>
|
||
<words x=10 y=10 w=300>
|
||
How fast a person’s memory decays depends on the person and the memory...
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=400>
|
||
<pic src="pics/sci0.png" sx=400 sy=500></pic>
|
||
<words x=10 y=10 w=300>
|
||
But, in general, a memory’s “rate of decay” slows down each time you <b>actively recall</b> it.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=400>
|
||
<pic src="pics/sci0.png" sx=800 sy=500></pic>
|
||
<words x=10 y=10 w=300>
|
||
(although, when you stop practicing, it still decays.)
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=120>
|
||
<words w=600 x=-15 no-bg>
|
||
Here’s the simulation again, with a single active recall session.
|
||
<br>
|
||
(grey line: what memory would've been <i>without</i> the recall)
|
||
<br>
|
||
<b>Change the timing of the recall. What happens?</b>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=400>
|
||
<sim x=0 y=0 w=600 h=400 src="sims/ebbinghaus/?mode=1"></sim>
|
||
</panel>
|
||
|
||
<!-- Part III: Desirable Difficulty -->
|
||
|
||
<panel w=600 h=90>
|
||
<words w=600 x=-15 no-bg>
|
||
A single recall boosts memory for a bit... but in the long run,
|
||
due to exponential decay of memory, a single recall changes nothing.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=450 h=400>
|
||
<pic src="pics/sci1.png" sx=0 sy=0></pic>
|
||
<words x=10 y=10 w=390>
|
||
Is there a better way to learn?
|
||
There is! The trick to remembering...
|
||
</words>
|
||
<words x=210 y=330 w=200>
|
||
...<i>is to forget.</i>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=300>
|
||
<pic src="pics/sci1.png" sx=450 sy=0></pic>
|
||
<words x=250 y=20 w=200>
|
||
To understand this, think about training your muscles.
|
||
You’ll gain nothing with a weight that’s too easy...
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=300>
|
||
<pic src="pics/sci1.png" sx=450 sy=300></pic>
|
||
<words x=250 y=20 w=200>
|
||
...nor one that’s too hard.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=350 h=350>
|
||
<pic src="pics/sci1.png" sx=950 sy=0></pic>
|
||
<words x=10 y=10 w=300>
|
||
The same’s true of training your brain.
|
||
You need <b>desirable difficulty</b>: the sweet spot of just-hard-enough.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=450 h=400>
|
||
<pic src="pics/sci1.png" sx=0 sy=400></pic>
|
||
<words x=10 y=10 w=360>
|
||
Therefore: to best learn something, you need to recall it...
|
||
</words>
|
||
<words x=60 y=330 w=350>
|
||
...<i>just as you’re about to forget it.</i>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=120>
|
||
<words w=600 x=-15 no-bg>
|
||
Same simulation as before, but now it shows the <span style="background:#ffe866">sweet spot</span> –
|
||
where you’ve forgotten <i>just a little bit.</i>
|
||
<br>
|
||
<b>Change the timing of the recall. What happens now?</b>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=400>
|
||
<sim x=0 y=0 w=600 h=400 src="sims/ebbinghaus/?mode=2"></sim>
|
||
</panel>
|
||
|
||
<!-- Part IV: Bigger and Bigger spaces -->
|
||
|
||
<panel w=600 h=90>
|
||
<words w=600 x=-15 no-bg>
|
||
See? If you time a <i>single</i> recall so that it's in the sweet spot,
|
||
you can slow down the decay!
|
||
Now, what about <i>multiple</i> recalls?
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/sci2.png" sx=0 sy=0></pic>
|
||
<words x=10 y=10 w=430>
|
||
Let’s say you’re
|
||
<span style="text-decoration:line-through;">lazy</span>
|
||
time-efficient, so you’re only doing 4 recall sessions.
|
||
</words>
|
||
<words x=30 y=350 w=430>
|
||
Question:
|
||
<i>what’s the best way to spread out your recalls?</i>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=350>
|
||
<pic src="pics/sci2.png" sx=500 sy=0></pic>
|
||
<words x=10 y=10 w=190>
|
||
Should you have evenly spaced gaps?
|
||
Gaps of increasing length?
|
||
Gaps of decreasing length?
|
||
Or make it unpredictable, to keep you on your toes?
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=90>
|
||
<words h=90>
|
||
<b>Give it your best guess</b>,
|
||
then when you’re ready, <b>flip the card over ↓</b>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=300 bg="#e0e0e0">
|
||
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=guessgap"></sim>
|
||
</panel>
|
||
|
||
<panel fadeInOn="flip_guessgap" w=600 h=120>
|
||
<words w=600 x=-15 y=0 no-bg>
|
||
Which is very counter-intuitive!
|
||
You can prove to yourself this is true, by playing with the sim below.
|
||
<b>
|
||
Get all recalls into the <span style="background:#ffe866">sweet spot</span>.
|
||
What spacing do you get?
|
||
</b>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=470>
|
||
<sim x=0 y=0 w=600 h=470 src="sims/ebbinghaus/?mode=3"></sim>
|
||
</panel>
|
||
|
||
<!-- Part V: Sandbox -->
|
||
|
||
<panel w=600 h=120>
|
||
<words w=600 x=-15 no-bg>
|
||
(To prove this isn't a fluke,
|
||
here’s a sim where you can change
|
||
the initial memory decay & sweet spot.
|
||
Note how, in all but the extreme cases,
|
||
the best schedule is still “increasing gaps”!)
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=520>
|
||
<sim x=0 y=0 w=600 h=520 src="sims/ebbinghaus/?mode=4"></sim>
|
||
</panel>
|
||
|
||
<!-- Part VI: And now, in practice... -->
|
||
|
||
<panel w=350 h=500>
|
||
<pic src="pics/sci2.png" sx=0 sy=450></pic>
|
||
<words x=10 y=10 w=300>
|
||
Why <i>must</i> the gaps increase?
|
||
Because: each time you do a recall at the sweet spot of forgetting,
|
||
the memory’s decay slows down...
|
||
</words>
|
||
<words x=10 y=400 w=300>
|
||
...meaning it’ll take <i>longer</i>
|
||
to hit the sweet spot next time!
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=500>
|
||
<pic src="pics/sci2.png" sx=350 sy=450></pic>
|
||
<words x=10 y=10 w=400>
|
||
But you know what’s sweeter?
|
||
This also means if you time your recalls just right...
|
||
</words>
|
||
<words x=60 y=400 w=400>
|
||
...you can easily keep <i>any number</i> of things in your long-term memory,
|
||
<i>FOREVER.</i>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=250 h=250>
|
||
<pic src="pics/sci2.png" sx=850 sy=450></pic>
|
||
</panel>
|
||
|
||
<panel w=600 h=90>
|
||
<words w=600 x=-15 no-bg>
|
||
And speaking of doing active recall in order to learn,
|
||
let's do some active recall on what we just learnt:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=400 bg="#e0e0e0">
|
||
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>
|
||
</panel>
|
||
|
||
<panel w=400 h=400>
|
||
<pic src="pics/sci2.png" sx=0 sy=950></pic>
|
||
<words x=50 y=20 w=300 bg=none>
|
||
Anyway, this all sounds great,
|
||
but finding the optimal schedule must be impossible, right?
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=400>
|
||
<pic src="pics/sci2.png" sx=400 sy=950></pic>
|
||
<words x=50 y=30 w=300 bg=none>
|
||
<i>Au contraire!</i>
|
||
It’s so simple, you can even create your own automatic scheduler...
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=400>
|
||
<pic src="pics/sci2.png" sx=800 sy=950></pic>
|
||
<words x=30 y=30 w=200 bg=none>
|
||
...using a <i>shoebox.</i>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=500>
|
||
<words w=600 x=-15 no-bg>
|
||
|
||
<b>[END OF PROTOTYPE]</b>
|
||
|
||
<br><br>
|
||
|
||
Sorry for the cliffhanger!
|
||
The rest of this comic would show you how to make a <b>Leitner Box</b>,
|
||
tell you about other digital <b>spaced repetition systems</b> like <b>Anki</b>,
|
||
and finally, help you get started using spaced repetition <i>today!</i>
|
||
|
||
<br><br>
|
||
|
||
(And every once in a while, it'll use flashcards to get you
|
||
to actively recall what you just learnt. I'll use spaced repetition
|
||
to teach you <i>about</i> spaced repetition!)
|
||
|
||
<br><br>
|
||
|
||
Anyway, please let me know your <i>honest</i> feedback so far!
|
||
Early feedback helps me a lot. Many thanks in advance!
|
||
|
||
<br><br>
|
||
|
||
<3,
|
||
<br>~ Nicky
|
||
|
||
</words>
|
||
</panel>
|
||
|
||
</div>
|
||
|
||
<!-- SIMULATION LABELS -->
|
||
<div id="labels">
|
||
|
||
<!-- Ebbinghaus -->
|
||
<span id="ebbinghaus_y_axis">
|
||
memory →
|
||
</span>
|
||
<span id="ebbinghaus_x_axis">
|
||
time →
|
||
</span>
|
||
<span id="ebbinghaus_decay">
|
||
decay:
|
||
</span>
|
||
<span id="ebbinghaus_forgetting">
|
||
sweet spot:
|
||
</span>
|
||
<span id="ebbinghaus_recalls">
|
||
timing of recall(s):
|
||
</span>
|
||
<span id="ebbinghaus_auto">
|
||
auto-optimize!
|
||
</span>
|
||
|
||
<!-- Flashcards -->
|
||
<span id="flashcard_guessgap_front">
|
||
<div class="fcard_center" style="height:2.5em">
|
||
the best way to space out your recalls is...
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_guessgap_back">
|
||
<div class="fcard_bg" src="pics/fcards0.png" sx=0 sy=0></div>
|
||
<div class="fcard_center" style="height:2.5em">
|
||
...with <i>increasing</i> gaps!
|
||
</div>
|
||
</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>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
|
||
</html>
|
||
|
||
<script src="js/minpubsub.src.js"></script>
|
||
<script src="js/comic.js"></script>
|