513 lines
12 KiB
HTML
513 lines
12 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 ART of SRS - - - - -->
|
||
<!-- - - - - - - - - - - - -->
|
||
|
||
|
||
<!-- Part 1.1: Leitner Calendar -->
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/leit0.png" sx=0 sy=0></pic> <!-- hey susan, TRAINERS -->
|
||
<words x=10 y=10 w=430 h=60>
|
||
You don't <i>have</i> to use a shoebox for Spaced Repetition,
|
||
but it's funnier if you do.
|
||
</words>
|
||
<words x=30 y=350 w=430 h=60>
|
||
(Later, we'll look at some Spaced Repetition <i>apps</i>,
|
||
like Anki & Tinycards)
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=400>
|
||
<pic src="pics/leit0.png" sx=500 sy=0></pic> <!-- poker: me vs brain -->
|
||
<words x=10 y=10 w=430 h=60>
|
||
This method is called The Leitner System.
|
||
It's like a card game you play against yourself!
|
||
</words>
|
||
<words x=30 y=300 w=430 h=60>
|
||
First, divide your box up into seven "Levels".
|
||
Each Level will store some flashcards.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=200 bg="#bada55">
|
||
"wait, what's a flashcard?"
|
||
<!-- This is, ya goof -->
|
||
<!--<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=200 bg="#bada55">
|
||
"what kind of stuff can I learn with flashcards?"
|
||
<!-- This is, ya goof -->
|
||
<!--<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>-->
|
||
</panel>
|
||
|
||
<panel w=600 h=80>
|
||
<words w=600 x=-15 no-bg>
|
||
We need to space out our recalls with <i>increasing gaps of time</i>.
|
||
So, here's a calendar of when to review which Level's cards:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=300 bg="#bada55">
|
||
<!-- Note: Level 4 THEN 2 THEN 1... -->
|
||
</panel>
|
||
|
||
|
||
<!-- Part 1.2: Leitner Rules -->
|
||
|
||
<panel w=600 h=80>
|
||
<words w=600 x=-15 no-bg>
|
||
But how do cards move <i>between</i> Levels?
|
||
How do you play this game of Spaced Repetition Solitaire?
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=400>
|
||
<pic src="pics/leit0.png" sx=0 sy=450></pic> <!-- joyful baby card... and grisly card -->
|
||
<words x=10 y=10 w=430 h=60>
|
||
The rules are simple.
|
||
First, all new cards start at Level 1.
|
||
</words>
|
||
<words x=30 y=300 w=430 h=60>
|
||
(If you're new to Spaced Repetition, I recommend starting with 5 new cards a day.)
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=430>
|
||
<pic src="pics/leit0.png" sx=500 sy=450></pic> <!-- valhalla -->
|
||
<words x=10 y=10 w=430 h=90>
|
||
When you review the cards in a Level, first, shuffle them.
|
||
Then, try to recall them.
|
||
Each card you get right goes up one Level.
|
||
</words>
|
||
<words x=30 y=330 w=430 h=60>
|
||
(If you're already at the final Level, congrats!
|
||
Your card gets to retire in Valhalla)
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=400>
|
||
<pic src="pics/leit0.png" sx=0 sy=900></pic> <!-- HIGH STAKES -->
|
||
<words x=10 y=10 w=430 h=60>
|
||
But each card you get wrong... goes
|
||
<i>all the way back down to Level 1.</i>
|
||
</words>
|
||
<words x=30 y=300 w=430 h=60>
|
||
(You can change the rules – it's <i>your</i> shoebox –
|
||
but I recommend playing it this way)
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=400>
|
||
<pic src="pics/leit0.png" sx=500 sy=900></pic> <!-- baby + REMEMBER ME?! -->
|
||
<words x=10 y=10 w=430 h=60>
|
||
Each day, you review Level 1 at the end.
|
||
You'll see your new cards + the cards you forgot.
|
||
</words>
|
||
<words x=30 y=300 w=430 h=60>
|
||
Keep trying to recall them, until you can get <i>every one</i> right!
|
||
Move them all to Level 2.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=80>
|
||
<words w=600 x=-15 no-bg>
|
||
And that's it!
|
||
Here's how the game plays out over several days:
|
||
(Later, we'll see a sim for several <i>months</i>)
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=300 bg="#bada55">
|
||
</panel>
|
||
|
||
|
||
|
||
<!-- Part 1.3: Leitner Full Sim -->
|
||
|
||
<panel w=600 h=110>
|
||
<words w=600 x=-15 no-bg>
|
||
Each daily session takes 20-30 minutes.
|
||
Instead of watching a TV episode, you could play a card game –
|
||
and remember anything you want <i>for life</i>.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=400>
|
||
<pic src="pics/leit1.png" sx=0 sy=0></pic> <!-- snowball -->
|
||
<words x=10 y=10 w=430 h=60>
|
||
However, habits are hard. If you start big, you won't get the ball rolling...
|
||
</words>
|
||
<words x=30 y=300 w=430 h=60>
|
||
But if you start <i>small</i>, you can gain momentum,
|
||
and roll your snowball bigger and bigger.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=690>
|
||
<pic src="pics/leit1.png" sx=0 sy=400></pic> <!-- katamari damacy -->
|
||
<words x=10 y=10 w=430 h=60>
|
||
That's why I recommend <i>starting</i> with 5 new cards a day.
|
||
</words>
|
||
<words x=30 y=300 w=430 h=60>
|
||
Once you're comfortable with that, you can do 10 new cards/day.
|
||
Then 15. Then 20, 25, 30.
|
||
</words>
|
||
<words x=10 y=590 w=430 h=60>
|
||
And at 30 new cards a day, you can learn <i>10,000+</i> new facts/words/etc a <i>year.</i>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=50>
|
||
<words w=600 x=-15 no-bg>
|
||
Here's what that looks like, over several months:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=300 bg="#bada55">
|
||
</panel>
|
||
|
||
|
||
|
||
<!-- Part 1.3: Leitner Outro -->
|
||
|
||
<panel w=600 h=110>
|
||
<words w=600 x=-15 no-bg>
|
||
That's it. That's how you can make long-term memory a <i>choice</i>.
|
||
</words>
|
||
<words w=600 x=-15 y=50 no-bg>
|
||
Let's let that sink in. Take a break, and recall what we just learnt:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=400 bg="#bada55">
|
||
<!--<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>-->
|
||
</panel>
|
||
|
||
|
||
|
||
<!-- Part 2.1: Pitfalls -->
|
||
|
||
<panel w=600 h=80>
|
||
<words w=600 x=-15 no-bg>
|
||
Spaced Repetition almost seems too good to be true.
|
||
<br>
|
||
And it is... <i>IF</i> you fall for 3 very common pitfalls.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/leit1.png" sx=500 sy=0></pic> <!-- Library, humor -->
|
||
<words x=10 y=10 w=430 h=60>
|
||
Spaced Repetition will fail if your cards feel
|
||
bloated, disconnected, or meaningless.
|
||
</words>
|
||
<words x=30 y=350 w=430 h=60>
|
||
Memory isn't a private library,
|
||
where you hoard a bunch of random books to impress others.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/leit1.png" sx=500 sy=450></pic> <!-- Jigsaw ANGRY FACE -->
|
||
<words x=10 y=10 w=430 h=90>
|
||
Memory is more like a jigsaw puzzle, full of tiny pieces joined together.
|
||
(This is also how neurons work: lots of tiny, connected things)
|
||
</words>
|
||
<words x=30 y=380 w=430 h=30>
|
||
It's not about <i>collection</i>, it's about <i>connection</i>.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=400>
|
||
<pic src="pics/leit1.png" sx=500 sy=900></pic>
|
||
<words x=10 y=10 w=410 h=60>
|
||
So, to get the most out of Spaced Repetition,
|
||
you must make your cards...
|
||
</words>
|
||
<!--SMALL, CONNECTED, and MEANINGFUL.-->
|
||
</panel>
|
||
|
||
<!-- Part 2.2: Small -->
|
||
|
||
<panel w=600 h=150>
|
||
<pic src="pics/leit2.png" sx=0 sy=0></pic>
|
||
<words x=10 y=10 w=200>
|
||
<b>SMALL</b>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=450 h=50>
|
||
<words w=450 x=-15 no-bg>
|
||
This card sucks:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=200 bg="#bada55">
|
||
<!-- Mitochrondria? -->
|
||
<!--<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>-->
|
||
</panel>
|
||
|
||
<panel w=450 h=350>
|
||
<pic src="pics/leit2.png" sx=0 sy=450></pic>
|
||
<words x=10 y=10 w=400 h=30>
|
||
It's too big. Too much information.
|
||
</words>
|
||
<words x=10 y=250 w=400 h=60>
|
||
Instead, let's cut in up into a bunch of smaller, connected pieces,
|
||
like so:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=600 bg="#bada55">
|
||
<!--<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>-->
|
||
</panel>
|
||
|
||
<panel w=450 h=90>
|
||
<words w=450 x=-15 no-bg>
|
||
Facts connect to facts.
|
||
But there's other, more playful ways for cards to be...
|
||
</words>
|
||
</panel>
|
||
|
||
|
||
<!-- Part 2.3: Connected -->
|
||
|
||
<panel w=600 h=150>
|
||
<pic src="pics/leit2.png" sx=0 sy=150></pic>
|
||
<words x=10 y=10 w=200>
|
||
<b>CONNECTED</b>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=450 h=110>
|
||
<words w=450 x=-15 no-bg>
|
||
This card is... alright.
|
||
It's an English word on the front, French word on the back.
|
||
It's the standard for most flashcards:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=200 bg="#bada55">
|
||
<!--<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>-->
|
||
</panel>
|
||
|
||
|
||
<panel w=450 h=400>
|
||
<pic src="pics/leit2.png" sx=0 sy=800></pic>
|
||
<words x=10 y=10 w=400 h=60>
|
||
But you know what would make it stick in memory better?
|
||
</words>
|
||
<words x=10 y=300 w=400 h=60>
|
||
If you connected it to
|
||
<i>images, sounds, context, and/or personal details!</i>
|
||
Like so:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=200 bg="#bada55">
|
||
<!-- comically FAT cat -->
|
||
<!--<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>-->
|
||
</panel>
|
||
|
||
<panel w=600 h=300>
|
||
<pic src="pics/leit2.png" sx=600 sy=0></pic>
|
||
<words x=10 y=10 w=200>
|
||
The front now has a drawing of a cat (image)
|
||
with a fill-in-the-blank French sentence (context: grammar)
|
||
about my childhood cat, Stripes. (personal)
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=300>
|
||
<pic src="pics/leit2.png" sx=600 sy=300></pic>
|
||
<words x=10 y=10 w=200>
|
||
The back now has a symbol of the noun's gender (image),
|
||
its pronunciation (sound*),
|
||
and a warning not to use the female version. (context: slang)
|
||
</words>
|
||
<words w=330 x=240 y=230 no-bg fontsize=20>
|
||
* Obviously, paper cards can't play sounds.
|
||
But apps like Anki/Tinycards can!
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=450 h=90>
|
||
<words w=450 x=-15 no-bg>
|
||
But the <i>most</i> important connection of all,
|
||
is to connect your learning to something that is...
|
||
</words>
|
||
</panel>
|
||
|
||
|
||
<!-- Part 2.4: Meaningful -->
|
||
|
||
<panel w=600 h=150>
|
||
<pic src="pics/leit2.png" sx=0 sy=300></pic>
|
||
<words x=10 y=10 w=200>
|
||
<b>MEANINGFUL</b>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=350>
|
||
<pic src="pics/leit2.png" sx=450 sy=600></pic> <!-- examples: programming, ukulele, french -->
|
||
<words x=10 y=10 w=450 h=60>
|
||
Personally, here's how I've learnt best:
|
||
First, I try to <b>do</b> something.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=350>
|
||
<pic src="pics/leit2.png" sx=950 sy=600></pic> <!-- examples: programming, ukulele, french -->
|
||
<words x=10 y=10 w=450 h=60>
|
||
Inevitably, I'll get stuck.
|
||
In that moment, I'll look up what I need,
|
||
and <b>learn</b> something.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=200 bg="#bada55">
|
||
<!--
|
||
..and then back to doing.
|
||
-->
|
||
<!--
|
||
...and then back to learning.
|
||
-->
|
||
</panel>
|
||
|
||
<panel w=450 h=30>
|
||
<words w=450 x=-15 y=-15 no-bg>
|
||
And so on. <!-- FADE PANEL -->
|
||
</words>
|
||
</panel>
|
||
<panel w=450 h=30>
|
||
<words w=450 x=-15 y=-15 no-bg>
|
||
And so on. <!-- FADE PANEL -->
|
||
</words>
|
||
</panel>
|
||
<panel w=450 h=30>
|
||
<words w=450 x=-15 y=-15 no-bg>
|
||
And so on. <!-- FADE PANEL -->
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=450 h=400>
|
||
<pic src="pics/leit2.png" sx=450 sy=950></pic> <!-- connected to HEART -->
|
||
<words x=10 y=10 w=400 h=60>
|
||
That, I believe, is the best way to keep yourself motivated while learning:
|
||
</words>
|
||
<words x=10 y=300 w=400 h=60>
|
||
By making sure your learning is in service of <i>something you actually care about.</i>
|
||
</words>
|
||
</panel>
|
||
|
||
|
||
|
||
<panel w=600 h=90>
|
||
<words w=600 x=-15 no-bg>
|
||
Speaking of learning, let's practice recalling what we've learnt:
|
||
(this is the second-last time!)
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=400 bg="#bada55">
|
||
<!--<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>-->
|
||
</panel>
|
||
|
||
|
||
|
||
<!-- Part 2.5: Outro -->
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/leit3.png" sx=0 sy=0></pic> <!-- show three rules -->
|
||
<words x=10 y=10 w=370 h=30>
|
||
These three rules for making cards...
|
||
</words>
|
||
<!-- SMALL, CONNECTED, MEANINGFUL -->
|
||
<words x=30 y=320 w=430 h=90>
|
||
...are why it's consensus among the Spaced Repetition community that,
|
||
for the most part,
|
||
<b>you should make your own cards.</b>
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=400>
|
||
<pic src="pics/leit3.png" sx=0 sy=450></pic> <!-- me, talking -->
|
||
<words x=10 y=10 w=300 no-bg>
|
||
This way, you can connect facts to things <i>you</i> know,
|
||
to images and sounds <i>you</i> like,
|
||
in service of something <i>you</i> love.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=400>
|
||
<pic src="pics/leit3.png" sx=400 sy=450></pic>
|
||
<words x=10 y=10 w=300 no-bg>
|
||
That's why, in the <i>final</i> part of this interactive comic,
|
||
you're going to make your own cards!
|
||
</words>
|
||
<words x=30 y=160 w=170 no-bg>
|
||
And these cards will be about...
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=400>
|
||
<pic src="pics/leit3.png" sx=800 sy=450></pic> <!-- goofy pic -->
|
||
<words x=130 y=10 w=230 fontsize=150 no-bg>
|
||
YOU
|
||
</words>
|
||
</panel>
|
||
|
||
|
||
</div>
|
||
|
||
<!-- - - - - - - - - - -->
|
||
<!-- SIMULATION LABELS -->
|
||
<!-- - - - - - - - - - -->
|
||
|
||
<div id="labels">
|
||
|
||
<div id="default_labels">
|
||
<span id="leitner_day">
|
||
Day [N]
|
||
</span>
|
||
<span id="leitner_step_to_review">
|
||
to review: Level
|
||
</span>
|
||
<span id="leitner_step_reviewing">
|
||
review Level [N]
|
||
</span>
|
||
<span id="leitner_step_new">
|
||
add [N] new cards
|
||
</span>
|
||
<span id="leitner_step_stats">
|
||
total: [N] cards!
|
||
</span>
|
||
<span id="leitner_step_stats_2">
|
||
([N] in very-long-term memory)
|
||
</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
|
||
</html>
|
||
|
||
<script src="js/minpubsub.src.js"></script>
|
||
<script src="js/comic.js"></script>
|