remember/ch1.html

465 lines
11 KiB
HTML
Raw Normal View History

2018-09-18 17:17:42 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>An Interactive Comic</title>
2018-10-17 15:37:43 +00:00
<!--
TODO: Active recall vs passive re-read -->
2018-09-18 17:17:42 +00:00
<link rel="stylesheet" type="text/css" href="css/comic.css"/>
</head>
<body>
2018-10-10 19:46:46 +00:00
<div class="comic">
2018-09-18 17:17:42 +00:00
<!-- - - - - - - - - - - - -->
<!-- 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 dont 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, Ebbinghauss 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>
Heres a playable simulation of the Forgetting Curve.
2018-10-16 16:10:00 +00:00
<b>Change the rate of memory decay. What happens to the curve?</b>
2018-09-18 17:17:42 +00:00
</words>
</panel>
<panel w=600 h=370>
2018-09-26 19:59:45 +00:00
<sim x=0 y=0 w=600 h=370 src="sims/ebbinghaus/?mode=0"></sim>
2018-09-18 17:17:42 +00:00
</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 persons 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 memorys “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>
Heres the simulation again, with a single active recall session.
<br>
(grey line: what memory would've been <i>without</i> the recall)
<br>
2018-10-16 16:10:00 +00:00
<b>Change the recall timing to see how it affects the curve:</b>
2018-09-18 17:17:42 +00:00
</words>
</panel>
<panel w=600 h=400>
2018-09-26 19:59:45 +00:00
<sim x=0 y=0 w=600 h=400 src="sims/ebbinghaus/?mode=1"></sim>
2018-09-18 17:17:42 +00:00
</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>
2018-10-16 16:10:00 +00:00
...<i>is to almost forget.</i>
2018-09-18 17:17:42 +00:00
</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.
Youll gain nothing with a weight thats 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 thats 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 sames 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 youre 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 youve forgotten <i>just a little bit.</i>
2018-10-17 20:09:50 +00:00
<b>Put the recall in the <i>middle</i> of the sweet spot. What happens?</b>
2018-09-18 17:17:42 +00:00
</words>
</panel>
<panel w=600 h=400>
2018-09-26 19:59:45 +00:00
<sim x=0 y=0 w=600 h=400 src="sims/ebbinghaus/?mode=2"></sim>
2018-09-18 17:17:42 +00:00
</panel>
<!-- Part IV: Bigger and Bigger spaces -->
<panel w=600 h=90>
<words w=600 x=-15 no-bg>
2018-10-17 20:09:50 +00:00
See? If you time a recall so that it's right in the sweet spot,
you can slow the decay by a lot!
2018-09-18 17:17:42 +00:00
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>
Lets say youre
<span style="text-decoration:line-through;">lazy</span>
time-efficient, so youre only doing 4 recall sessions.
</words>
<words x=30 y=350 w=430>
Question:
<i>whats 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 youre ready, <b>flip the card over &darr;</b>
</words>
</panel>
2018-10-16 16:10:00 +00:00
<!-- TODO: SAY again, guess THEN flip -->
2018-09-18 17:17:42 +00:00
<panel w=600 h=300 bg="#e0e0e0">
2018-09-26 19:59:45 +00:00
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=guessgap"></sim>
2018-09-18 17:17:42 +00:00
</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>
2018-10-17 20:09:50 +00:00
Get all recalls into the <i>middle</i> of the <span style="background:#ffe866">sweet spot</span>.
2018-09-18 17:17:42 +00:00
What spacing do you get?
</b>
</words>
</panel>
2018-10-17 20:09:50 +00:00
<panel w=600 h=520>
<sim x=0 y=0 w=600 h=520 src="sims/ebbinghaus/?mode=3"></sim>
2018-09-18 17:17:42 +00:00
</panel>
<!-- Part V: Sandbox -->
<panel w=600 h=120>
<words w=600 x=-15 no-bg>
(To prove this isn't a fluke,
heres a sim where you can change
the initial memory decay &amp; sweet spot.
Note how, in all but the extreme cases,
the best schedule is still “increasing gaps”!)
</words>
</panel>
2018-10-17 20:09:50 +00:00
<panel w=600 h=570>
<sim x=0 y=0 w=600 h=570 src="sims/ebbinghaus/?mode=4"></sim>
2018-09-18 17:17:42 +00:00
</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 memorys decay slows down...
</words>
<words x=10 y=400 w=300>
2018-10-15 18:47:58 +00:00
...meaning itll take <i>longer</i>
2018-09-18 17:17:42 +00:00
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 whats 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>
Its 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>
&lt;3,
<br>~ Nicky
</words>
</panel>
</div>
<!-- SIMULATION LABELS -->
<div id="labels">
<!-- Ebbinghaus -->
<span id="ebbinghaus_y_axis">
2018-10-16 14:41:44 +00:00
strength of memory &rarr;
2018-09-18 17:17:42 +00:00
</span>
<span id="ebbinghaus_x_axis">
time &rarr;
</span>
<span id="ebbinghaus_decay">
decay:
</span>
<span id="ebbinghaus_forgetting">
sweet spot:
</span>
2018-10-16 14:41:44 +00:00
<span id="ebbinghaus_recall">
timing of recall:
</span>
2018-09-18 17:17:42 +00:00
<span id="ebbinghaus_recalls">
2018-10-16 14:41:44 +00:00
timing of recalls:
2018-09-18 17:17:42 +00:00
</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>
2018-10-16 14:41:44 +00:00
<div style="position: absolute; width: 250px; top: 60px; left:150px; line-height: 1.1em;">
2018-09-18 17:17:42 +00:00
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 &uarr;
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>
&darr;
</span>
</div>
</body>
</html>
2018-10-17 20:09:50 +00:00
<script src="js/howler.core.min.js"></script>
2018-09-18 17:17:42 +00:00
<script src="js/minpubsub.src.js"></script>
<script src="js/comic.js"></script>