CHAPTER TWO FIXED
This commit is contained in:
parent
9b88ef0d74
commit
2f9c7bf5cf
3
ch1.html
3
ch1.html
|
@ -3,7 +3,8 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>An Interactive Comic</title>
|
<title>An Interactive Comic</title>
|
||||||
|
<!--
|
||||||
|
TODO: Active recall vs passive re-read -->
|
||||||
<link rel="stylesheet" type="text/css" href="css/comic.css"/>
|
<link rel="stylesheet" type="text/css" href="css/comic.css"/>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
171
ch2.html
171
ch2.html
|
@ -52,33 +52,68 @@ if you haven't already.)
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=500 h=400>
|
<panel w=500 h=370>
|
||||||
<pic src="pics/leit0.png" sx=500 sy=0></pic> <!-- poker: me vs brain -->
|
<pic src="pics/leit0.png" sx=500 sy=0></pic> <!-- poker: me vs brain -->
|
||||||
<words x=10 y=10 w=430 h=60>
|
<words x=10 y=10 w=430 h=60>
|
||||||
This setup is called The Leitner Box.
|
This setup is called The Leitner Box.
|
||||||
It's like a card game you play against yourself!
|
It's like a card game you play against yourself!
|
||||||
</words>
|
</words>
|
||||||
<words x=30 y=300 w=430 h=60>
|
<words x=30 y=300 w=430 h=30>
|
||||||
First, divide your box up into seven "Levels".
|
First, divide your box up into seven "Levels".
|
||||||
Each Level will store some flashcards.
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=500 h=370>
|
||||||
|
<pic src="pics/leit0.png" sx=0 sy=480></pic>
|
||||||
|
<words x=10 y=10 w=430 h=30>
|
||||||
|
All new flashcards start at Level 1.
|
||||||
|
</words>
|
||||||
|
<words x=30 y=270 w=430 h=60>
|
||||||
|
(If you're new to Spaced Repetition, I recommend starting with 5 new cards a day.)
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=500 h=400>
|
<panel w=500 h=400>
|
||||||
<pic src="pics/leit0.png" sx=0 sy=1300></pic>
|
<pic src="pics/leit0.png" sx=500 sy=480></pic> <!-- valhalla -->
|
||||||
<words x=10 y=10 w=430 h=90>
|
<words x=10 y=10 w=430 h=60>
|
||||||
Remember: we need to space out our reviews with <i>increasing gaps of time</i>.
|
When you review a card, and get it right, it moves up <i>one</i> Level.
|
||||||
In the Leitner Box, we <i>double</i> the gap for each Level!
|
|
||||||
</words>
|
</words>
|
||||||
<words x=30 y=270 w=430 h=90>
|
<words x=30 y=300 w=430 h=60>
|
||||||
So we review Level 1 every day, Level 2 every two days, Level 3 every <i>FOUR</i> days,
|
(If you're at the final Level, congrats!
|
||||||
Level 4 every <i>EIGHT</i> days... and so on.
|
Your card gets to retire in your long-term memory)
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=500 h=430>
|
||||||
|
<pic src="pics/leit0.png" sx=0 sy=900></pic> <!-- HIGH STAKES -->
|
||||||
|
<words x=10 y=10 w=430 h=60>
|
||||||
|
But if you review a card, and get it wrong... it has to go
|
||||||
|
<i>all the way back down to Level 1.</i>
|
||||||
|
</words>
|
||||||
|
<words x=30 y=300 w=430 h=90>
|
||||||
|
(If it's already at Level 1, good news:
|
||||||
|
you can keep testing yourself on it until you get it right,
|
||||||
|
and move it up to Level 2)
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=500 h=400>
|
||||||
|
<pic src="pics/leit0.png" sx=0 sy=1370></pic>
|
||||||
|
<words x=10 y=10 w=430 h=120>
|
||||||
|
But <i>when</i> do we review cards?
|
||||||
|
That's the trick.
|
||||||
|
In the Leitner Box, we review Level 1 cards every day,
|
||||||
|
Level 2 every two days, Level 3 every <i>FOUR</i> days,
|
||||||
|
Level 4 every <i>EIGHT</i> days, etc...
|
||||||
|
</words>
|
||||||
|
<words x=30 y=300 w=430 h=60>
|
||||||
|
The pattern is: we <i>double the gap</i> (# of days between reviews) for each Level!
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=600 h=60>
|
<panel w=600 h=60>
|
||||||
<words w=600 x=-15 no-bg>
|
<words w=600 x=-15 no-bg>
|
||||||
Here's what that looks like over a 64-day, looping calendar:
|
Here's what the looping 64-day game calendar looks like:
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
@ -86,68 +121,35 @@ if you haven't already.)
|
||||||
<sim x=0 y=0 w=600 h=400 src="sims/calendar/"></sim>
|
<sim x=0 y=0 w=600 h=400 src="sims/calendar/"></sim>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
<panel w=500 h=490>
|
||||||
<!-- Part 1.2: Leitner Rules -->
|
<pic src="pics/leit0.png" sx=500 sy=870></pic>
|
||||||
|
|
||||||
<panel w=600 h=60>
|
|
||||||
<words w=600 x=-15 no-bg>
|
|
||||||
Now, how <i>do</i> 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>
|
<words x=10 y=10 w=430 h=90>
|
||||||
Every day, review your Levels from highest to lowest.
|
(Note: the reason we review Level 1 at the end
|
||||||
Shuffle each Level's cards first.
|
is so you see your new cards <i>and</i> the cards you forgot from higher Levels.)
|
||||||
Every card you get right goes up <i>one</i> Level.
|
|
||||||
</words>
|
</words>
|
||||||
<words x=30 y=330 w=430 h=60>
|
<words x=30 y=330 w=430 h=120>
|
||||||
(If you're at the final Level, congrats!
|
(At the end of a daily game of Spaced Repetition,
|
||||||
Your card gets to retire in your long-term memory)
|
leave no cards in Level 1.
|
||||||
|
Test yourself until you can get them all right,
|
||||||
|
and move them up to Level 2!)
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=500 h=400>
|
<panel w=400 h=400>
|
||||||
<pic src="pics/leit0.png" sx=0 sy=900></pic> <!-- HIGH STAKES -->
|
<pic src="pics/leit0.png" sx=600 sy=1400></pic>
|
||||||
<words x=10 y=10 w=430 h=60>
|
<words x=10 y=10 w=350 h=90>
|
||||||
However, every card you get wrong... has to go
|
(Note #2: Spaced Repetition <i>apps</i> like Anki use a more sophisticated algorithm...)
|
||||||
<i>all the way back down to Level 1.</i>
|
|
||||||
</words>
|
</words>
|
||||||
<words x=30 y=300 w=430 h=60>
|
<words x=10 y=300 w=350 h=60>
|
||||||
(You can change the rules – I mean, it's <i>your</i> shoebox –
|
(...but at its core, it works on the same principles as the Leitner Box)
|
||||||
but I recommend playing 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>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=600 h=80>
|
<panel w=600 h=80>
|
||||||
<words w=600 x=-15 no-bg>
|
<words w=600 x=-15 no-bg>
|
||||||
And that's all to it!
|
And that's all to it!
|
||||||
Here's how the game plays out, over a few days:
|
Here's how the game plays out, step by step:
|
||||||
(<b>There's no end. Once you "get it", just keep scrolling.</b>)
|
(<b>This sim has no end. Once you "get it", just keep scrolling.</b>)
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
@ -206,14 +208,12 @@ if you haven't already.)
|
||||||
|
|
||||||
<!-- Part 1.3: Leitner Outro -->
|
<!-- Part 1.3: Leitner Outro -->
|
||||||
|
|
||||||
<panel w=600 h=140>
|
<panel w=600 h=110>
|
||||||
<words w=600 x=-15 no-bg>
|
<words w=600 x=-15 no-bg>
|
||||||
That's it. That's how you can make long-term memory a <i>choice</i>.
|
That's it. That's how you can make long-term memory a <i>choice</i>.
|
||||||
</words>
|
</words>
|
||||||
<words w=600 x=-15 y=50 no-bg>
|
<words w=600 x=-15 y=50 no-bg>
|
||||||
Let's let that sink in. Take a break, and recall what we just learnt:
|
Let's let that sink in. Take a break, and recall what we just learnt:
|
||||||
<br>
|
|
||||||
<b>(CLICK CARD TO FLIP)</b>
|
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
@ -283,11 +283,9 @@ if you haven't already.)
|
||||||
</words-->
|
</words-->
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=450 h=80>
|
<panel w=450 h=50>
|
||||||
<words w=450 x=-15 no-bg>
|
<words w=450 x=-15 no-bg>
|
||||||
This card sucks:
|
This card sucks:
|
||||||
<br>
|
|
||||||
<b>(CLICK CARD TO FLIP)</b>
|
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
@ -444,22 +442,12 @@ if you haven't already.)
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=600 h=300 bg="#e0e0e0">
|
<panel w=600 h=300 bg="#e0e0e0">
|
||||||
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=learndo"></sim>
|
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=learndo&forever_card=yes"></sim>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=450 h=30>
|
<panel w=450 h=30>
|
||||||
<words w=450 x=-15 y=-15 no-bg>
|
<words w=450 x=-15 y=-15 no-bg>
|
||||||
And so on. <!-- FADE PANEL -->
|
And so on.
|
||||||
</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>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
@ -489,25 +477,14 @@ if you haven't already.)
|
||||||
|
|
||||||
<!-- Part 2.5: Outro -->
|
<!-- 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,
|
|
||||||
after a while,
|
|
||||||
<b>you should start making your own cards.</b>
|
|
||||||
</words>
|
|
||||||
</panel>
|
|
||||||
|
|
||||||
<panel w=400 h=400>
|
<panel w=400 h=400>
|
||||||
<pic src="pics/leit3.png" sx=0 sy=450></pic> <!-- me, talking -->
|
<pic src="pics/leit3.png" sx=0 sy=450></pic> <!-- me, talking -->
|
||||||
<words x=10 y=20 w=300 no-bg>
|
<words x=10 y=20 w=350 no-bg>
|
||||||
This way, you can connect facts to things <i>you</i> know,
|
The consensus in the Spaced Repetition community is,
|
||||||
to pictures and sounds <i>you</i> like,
|
after a while, <b>you should make your own cards.</b>
|
||||||
in service of doing something <i>you</i> love.
|
</words>
|
||||||
|
<words x=30 y=130 w=230 no-bg>
|
||||||
|
That way, you can connect facts to what <i>you</i> know, what <i>you</i> love.
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,938 @@
|
||||||
|
<!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 class="comic">
|
||||||
|
|
||||||
|
|
||||||
|
<panel w=600 h=180>
|
||||||
|
<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!)
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
(Also, this is <b>CHAPTER 2</b> of my prototype.
|
||||||
|
You might wanna play <a href="http://ncase.me/memory-wip/" target="_blank">CHAPTER 1</a> first,
|
||||||
|
if you haven't already.)
|
||||||
|
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- - - - - - - - - - - - -->
|
||||||
|
<!-- 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=370>
|
||||||
|
<pic src="pics/leit0.png" sx=500 sy=0></pic> <!-- poker: me vs brain -->
|
||||||
|
<words x=10 y=10 w=430 h=60>
|
||||||
|
This setup is called The Leitner Box.
|
||||||
|
It's like a card game you play against yourself!
|
||||||
|
</words>
|
||||||
|
<words x=30 y=300 w=430 h=30>
|
||||||
|
First, divide your box up into seven "Levels".
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=500 h=400>
|
||||||
|
<pic></pic>
|
||||||
|
<words x=10 y=10 w=430 h=60>
|
||||||
|
All new cards start at Level 1, then get promoted to higher Levels
|
||||||
|
as your memory of them improves. (I'll explain the details later)
|
||||||
|
</words>
|
||||||
|
<words x=30 y=300 w=430 h=60>
|
||||||
|
Thus: Level 1 cards have fast memory-decay, Level 2 cards have slower memory-decay, etc.
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
|
<panel w=500 h=400>
|
||||||
|
<pic src="pics/leit0.png" sx=0 sy=1300></pic>
|
||||||
|
<words x=10 y=10 w=430 h=90>
|
||||||
|
But remember, we have to try recalling a card <i>just as we're about to forget it</i>.
|
||||||
|
</words>
|
||||||
|
<words x=30 y=270 w=430 h=90>
|
||||||
|
And as we saw earlier,
|
||||||
|
you do this by scheduling recalls with <i>increasing gaps of time</i>.
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=500 h=400>
|
||||||
|
<pic src="pics/leit0.png" sx=0 sy=1300></pic>
|
||||||
|
<words x=10 y=10 w=430 h=90>
|
||||||
|
That's why, in the Leitner Box,
|
||||||
|
we review Level 1 cards every day,
|
||||||
|
Level 2 every two days,
|
||||||
|
Level 3 every <i>FOUR</i> days,
|
||||||
|
Level 4 every <i>EIGHT</i> days... and so on.
|
||||||
|
</words>
|
||||||
|
<words x=30 y=270 w=430 h=90>
|
||||||
|
The pattern is: we <i>double</i> the gap between Levels!
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=600 h=60>
|
||||||
|
<words w=600 x=-15 no-bg>
|
||||||
|
Here's what that looks like over a 64-day, looping calendar:
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=600 h=400 bg="#fff">
|
||||||
|
<sim x=0 y=0 w=600 h=400 src="sims/calendar/"></sim>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Part 1.2: Leitner Rules -->
|
||||||
|
|
||||||
|
<panel w=600 h=60>
|
||||||
|
<words w=600 x=-15 no-bg>
|
||||||
|
Now, how <i>do</i> 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>
|
||||||
|
Every day, review your Levels from highest to lowest.
|
||||||
|
Shuffle each Level's cards first.
|
||||||
|
Every card you get right goes up <i>one</i> Level.
|
||||||
|
</words>
|
||||||
|
<words x=30 y=330 w=430 h=60>
|
||||||
|
(If you're at the final Level, congrats!
|
||||||
|
Your card gets to retire in your long-term memory)
|
||||||
|
</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>
|
||||||
|
However, every card you get wrong... has to go
|
||||||
|
<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 – I mean, it's <i>your</i> shoebox –
|
||||||
|
but I recommend playing 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 all to it!
|
||||||
|
Here's how the game plays out, over a few days:
|
||||||
|
(<b>There's no end. Once you "get it", just keep scrolling.</b>)
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=600 h=470 bg="#fff">
|
||||||
|
<sim x=0 y=0 w=600 h=470 src="sims/leitner/?mode=1"></sim>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Part 1.3: Leitner Full Sim -->
|
||||||
|
|
||||||
|
<panel w=600 h=110>
|
||||||
|
<words w=600 x=-15 no-bg>
|
||||||
|
Each daily review 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 how the game plays out, in the long, <i>long</i> run:
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=600 h=470 bg="#fff">
|
||||||
|
<sim x=0 y=0 w=600 h=470 src="sims/leitner/?mode=2"></sim>
|
||||||
|
</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="#e0e0e0">
|
||||||
|
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=leit_a,leit_b,leit_c"></sim>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Part 2.1: Pitfalls -->
|
||||||
|
|
||||||
|
<panel w=600 h=140>
|
||||||
|
<words w=600 x=-15 no-bg>
|
||||||
|
<b>(TODO: Include practice flashcards from Chapter 1)</b>
|
||||||
|
<br><br>
|
||||||
|
Spaced Repetition almost seems too good to be true.
|
||||||
|
<br>
|
||||||
|
And it is... <i>IF</i> you fall for some 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=420 h=60>
|
||||||
|
Memory isn't a bookshelf
|
||||||
|
where you collect random giant tomes to impress others.
|
||||||
|
</words>
|
||||||
|
<words x=10 y=350 w=450 h=60>
|
||||||
|
That's to say: Spaced Repetition will fail if your cards feel
|
||||||
|
<i>bloated</i>, <i>disconnected</i> or <i>meaningless</i>.
|
||||||
|
</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>
|
||||||
|
Instead, memory is like a jigsaw puzzle: full of small, connected pieces.
|
||||||
|
(This is also how neurons work: lots of small, 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>
|
||||||
|
Thus, to get the most out of Spaced Repetition,
|
||||||
|
you must make your cards...
|
||||||
|
</words>
|
||||||
|
<!--SMALL, CONNECTED, and MEANINGFUL.-->
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
|
<panel w=450 h=60>
|
||||||
|
<words w=450 x=-15 no-bg>
|
||||||
|
Let's see how.
|
||||||
|
</words>
|
||||||
|
</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=600 h=300 bg="#e0e0e0">
|
||||||
|
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=mitochondria_all"></sim>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=450 h=380>
|
||||||
|
<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=90>
|
||||||
|
Let's cut it up into smaller, connected pieces!
|
||||||
|
As a rule of thumb, <i>each flashcard should have one & only one idea.</i>
|
||||||
|
Like so:
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=264 h=180 bg="#e0e0e0">
|
||||||
|
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=mitochondria_1" 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=mitochondria_2" 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=mitochondria_3" 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=mitochondria_4" 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=mitochondria_5" 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=mitochondria_6" 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=mitochondria_7" 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=mitochondria_8" class="small_card"></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 language-learning flashcards:
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=600 h=300 bg="#e0e0e0">
|
||||||
|
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=cat"></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>pictures, sounds, context, and/or personal details!</i>
|
||||||
|
Like so:
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=600 h=300 bg="#e0e0e0">
|
||||||
|
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=cat2"></sim>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=600 h=300>
|
||||||
|
<pic src="pics/leit2.png" sx=600 sy=0></pic>
|
||||||
|
<words x=10 y=10 w=210>
|
||||||
|
The front now has a drawing of a cat (picture)
|
||||||
|
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=210>
|
||||||
|
The back now has a symbol of the noun's gender (picture),
|
||||||
|
its pronunciation (sound*),
|
||||||
|
and a warning about the female version of the noun. (context: slang)
|
||||||
|
</words>
|
||||||
|
<words w=330 x=250 y=225 no-bg fontsize=20>
|
||||||
|
* Obviously, paper cards can't play sounds.
|
||||||
|
But apps like Anki/Tinycards can!
|
||||||
|
</words>
|
||||||
|
<audio controls style="position: absolute; top: 105px; left: 280px; transform: scale(0.4) rotate(4deg);">
|
||||||
|
<source src="audio/chat.mp3" type="audio/mpeg">
|
||||||
|
</audio>
|
||||||
|
</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 (emphasis on <i>try</i>) 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=600 h=300 bg="#e0e0e0">
|
||||||
|
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=learndo&forever_card=yes"></sim>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=450 h=30>
|
||||||
|
<words w=450 x=-15 y=-15 no-bg>
|
||||||
|
And so on.
|
||||||
|
</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>doing something you 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 will be the second-last time!)
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=600 h=400 bg="#e0e0e0">
|
||||||
|
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=leit_d,leit_b,leit_a,leit_c"></sim>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Part 2.5: Outro -->
|
||||||
|
|
||||||
|
<panel w=400 h=400>
|
||||||
|
<pic src="pics/leit3.png" sx=0 sy=450></pic> <!-- me, talking -->
|
||||||
|
<words x=10 y=20 w=350 no-bg>
|
||||||
|
The consensus in the Spaced Repetition community is,
|
||||||
|
after a while, <b>you should make your own cards.</b>
|
||||||
|
</words>
|
||||||
|
<words x=30 y=130 w=230 no-bg>
|
||||||
|
That way, you can connect facts to what <i>you</i> know, what <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=15 w=300 no-bg>
|
||||||
|
That's why, in the <i>final</i> part of this interactive comic,
|
||||||
|
you're going to make your <i>own</i> cards!
|
||||||
|
</words>
|
||||||
|
<words x=30 y=165 w=170 no-bg>
|
||||||
|
And those 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=0 y=10 w=230 fontsize=150 no-bg color="#ffffff">
|
||||||
|
YOU
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<panel w=600 h=930>
|
||||||
|
<words w=600 x=-15 no-bg>
|
||||||
|
|
||||||
|
<b>[END OF CHAPTER TWO]</b>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
Sorry for the cliffhanger, again!
|
||||||
|
The 3rd/final short chapter will have you make your <i>own</i> flashcards to these questions:
|
||||||
|
|
||||||
|
<ul style="text-align:left">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
WHAT do you want to learn?
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
WHY do you want to learn that? (to make your cards meaningful)
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
HOW will you learn? (choose: Leitner Box, or digital apps like Anki / TinyCards / etc)
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
If you picked Anki/Tinycards, it'll help you download them and get started.
|
||||||
|
If you picked a Leitner Box, it'll give you a 64-day calendar to download & print out.
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
And finally, to <i>really</i> help you get started and keep going, you'll also get to download a laptop/phone wallpaper
|
||||||
|
to remind you to do your Spaced Repetition.
|
||||||
|
You'll also get to download <i>all the practice flashcards</i>
|
||||||
|
in this interactive comic, including the ones you just made. These can be your first cards!
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
Hopefully... this all helps you start using Spaced Repetition <i>TODAY</i> –
|
||||||
|
letting you take better control of your learning, and fill the long-term memory library of your mind
|
||||||
|
with wonderful things.
|
||||||
|
|
||||||
|
<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">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
<!-- - - - - - - - THE LEITNER CALENDAR - - - - - - - - -->
|
||||||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
|
||||||
|
<span id="calendar_day">
|
||||||
|
On Day [N]...
|
||||||
|
</span>
|
||||||
|
<span id="calendar_review">
|
||||||
|
review Levels [N] (<i>in that order</i>)
|
||||||
|
</span>
|
||||||
|
<span id="calendar_loop">
|
||||||
|
(and then loop back to Day 1!)
|
||||||
|
</span>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
<!-- - - - - - - - - THE LEITNER BOX - - - - - - - - - -->
|
||||||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
|
||||||
|
<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] retired)
|
||||||
|
</span>
|
||||||
|
|
||||||
|
|
||||||
|
<span id="leitner_button_next_step">
|
||||||
|
next step
|
||||||
|
</span>
|
||||||
|
<span id="leitner_button_next_day">
|
||||||
|
next day
|
||||||
|
</span>
|
||||||
|
<span id="leitner_button_next_week">
|
||||||
|
next week
|
||||||
|
</span>
|
||||||
|
<span id="leitner_button_next_month">
|
||||||
|
next month
|
||||||
|
</span>
|
||||||
|
|
||||||
|
|
||||||
|
<span id="leitner_slider_new">
|
||||||
|
[N] new cards a day
|
||||||
|
</span>
|
||||||
|
<span id="leitner_slider_wrong">
|
||||||
|
recall [N]% of cards <i>wrong</i>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
|
||||||
|
<span id="leitner_reset">
|
||||||
|
RESET
|
||||||
|
</span>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
<!-- - - - - - - - - MULTI-FLASHCARD - - - - - - - - - -->
|
||||||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
<!-- - - - - - - FLASHCARDS FOR CHAPTER 2 - - - - - - - -->
|
||||||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
|
||||||
|
<span id="flashcard_cat_front">
|
||||||
|
<div class="fcard_center" style="height:100px">
|
||||||
|
<div style="font-size:120px; height:75px;">
|
||||||
|
cat
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
(english)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_cat_back">
|
||||||
|
<div class="fcard_center" style="height:100px">
|
||||||
|
<div style="font-size:120px; height:75px;">
|
||||||
|
chat
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
(french)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_cat2_front">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=0></div>
|
||||||
|
<div class="fcard_center"></div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_cat2_back">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=0></div>
|
||||||
|
<div class="fcard_center">
|
||||||
|
<audio controls id="HACK_audio" style="position: absolute; top: 115px; left: 30px; transform: scale(0.5);">
|
||||||
|
<source src="../../audio/chat.mp3" type="audio/mpeg">
|
||||||
|
</audio>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<!-- TODO: SOUND WHEN FLIP -->
|
||||||
|
|
||||||
|
<span id="flashcard_learndo_front">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=240></div>
|
||||||
|
<div class="fcard_center" style="height:195px; font-size:33px;">
|
||||||
|
...then back to doing... ↻
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_learndo_back">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=240></div>
|
||||||
|
<div class="fcard_center" style="height:195px; font-size:33px;">
|
||||||
|
...then back to learning... ↻
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- MITOCHONDRIA IS THE POWERHOUSE OF THE CELL -->
|
||||||
|
<span id="flashcard_mitochondria_all_front">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=960></div>
|
||||||
|
<div class="fcard_center" style="height:160px;">
|
||||||
|
What's this?
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_all_back">
|
||||||
|
<div class="fcard_center" style="height:220px; font-size:20px;">
|
||||||
|
This organelle is called "mitochondria".
|
||||||
|
Mitochondria is the powerhouse of the cell.
|
||||||
|
They're found in almost all eukaryotic (nucleus-having) organisms.
|
||||||
|
The most widely-accepted hypothesis for the origin of mitochondria is Endosymbiotic Theory:
|
||||||
|
around ~1.5 billion years ago, a prokaryotic (nucleus-lacking) cell that was "eaten" by another cell,
|
||||||
|
somehow survived, and has continued to live inside them ever since.
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_1_front">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=960></div>
|
||||||
|
<div class="fcard_center" style="height:160px;">
|
||||||
|
What's this?
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_1_back">
|
||||||
|
<div class="fcard_center" style="height:1.5em;">
|
||||||
|
Mitochondria
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_2_front">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=960></div>
|
||||||
|
<div class="fcard_center" style="height:180px">
|
||||||
|
Mitochondria is the <span class="underline">_______</span> of the cell
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_2_back">
|
||||||
|
<div class="fcard_center" style="height:150px">
|
||||||
|
powerhouse
|
||||||
|
<span class="bonus_note">
|
||||||
|
// bonus note: seriously though, we'd all be dead without 'em.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_3_front">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=960 style="top:45px"></div>
|
||||||
|
<div class="fcard_center" style="height:180px;">
|
||||||
|
Mitochondria is found in almost all <span class="underline">____</span> organisms.
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_3_back">
|
||||||
|
<div class="fcard_center" style="height:1.5em">
|
||||||
|
eukaryotic
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_4_front">
|
||||||
|
<div class="fcard_center" style="height:2.5em">
|
||||||
|
Eukaryotes are cells that...
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_4_back">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=1200></div>
|
||||||
|
<div class="fcard_center" style="width: 200px; left: 170px; top: 20px;">
|
||||||
|
have a nucleus
|
||||||
|
<span class="bonus_note">
|
||||||
|
// bonus note: "eu"=good, "karyon"=kernel
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_5_front">
|
||||||
|
<div class="fcard_center" style="height:2.5em">
|
||||||
|
Prokaryotes are cells that...
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_5_back">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=1200></div>
|
||||||
|
<div class="fcard_center" style="width: 200px; left: 170px; top: 20px;">
|
||||||
|
DON'T have a nucleus
|
||||||
|
<span class="bonus_note">
|
||||||
|
// bonus note: "pro"=before, "karyon"=kernel
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_6_front">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=960 style="top:10px"></div>
|
||||||
|
<div class="fcard_center" style="height:200px; font-size:35px">
|
||||||
|
The most widely-accepted hypothesis for the origin of mitochondria is...
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_6_back">
|
||||||
|
<div class="fcard_center" style="height:120px">
|
||||||
|
Endosymbiotic Theory
|
||||||
|
<span class="bonus_note">
|
||||||
|
// bonus note: "endo"=inner, "sym"=together, "bio"=living
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_7_front">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=960 style="top:40px"></div>
|
||||||
|
<div class="fcard_center" style="font-size: 35px; height: 220px;">
|
||||||
|
According to Endosymbiotic Theory, mitochondria arose around
|
||||||
|
<span class="underline">____</span> years ago
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_7_back">
|
||||||
|
<div class="fcard_center" style="height:1.5em">
|
||||||
|
~1.5 billion years ago
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_8_front">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=960 style="top:40px"></div>
|
||||||
|
<div class="fcard_center" style="font-size: 37px; height: 220px;">
|
||||||
|
According to Endosymbiotic Theory, mitochondria first arose when...
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_mitochondria_8_back">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=1440></div>
|
||||||
|
<div class="fcard_center" style="height:230px">
|
||||||
|
when a prokaryote was eaten by another cell
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Spaced Rep Flashcards -->
|
||||||
|
<span id="flashcard_leit_a_front">
|
||||||
|
<div class="fcard_center" style="height:4.5em">
|
||||||
|
In the Leitner Box, we <span class="underline">______</span>
|
||||||
|
the gap (# of days between reviews) for each Level
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_leit_a_back">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=720 style="left:-5px"></div>
|
||||||
|
<div class="fcard_center" style="height:110px">
|
||||||
|
double the gap
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_leit_b_front">
|
||||||
|
<div class="fcard_center" style="height:4.5em">
|
||||||
|
The Leitner Box game:
|
||||||
|
<br>
|
||||||
|
when you get a card <i>right</i>, you move it <span class="underline">______</span> .
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_leit_b_back">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=480></div>
|
||||||
|
<div class="fcard_center" style="height:170px">
|
||||||
|
up one Level
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_leit_c_front">
|
||||||
|
<div class="fcard_center" style="height:4.5em">
|
||||||
|
The Leitner Box game:
|
||||||
|
<br>
|
||||||
|
when you get a card <i>wrong</i>, you move it <span class="underline">______</span> .
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_leit_c_back">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=480></div>
|
||||||
|
<div class="fcard_center" style="height:180px">
|
||||||
|
back to Level 1!
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_leit_d_front">
|
||||||
|
<div class="fcard_center" style="font-size:30px; height:170px;">
|
||||||
|
According to some random comic-game on the internet,
|
||||||
|
my Spaced Repetition flashcards should be
|
||||||
|
<span class="underline">______</span> ,
|
||||||
|
<span class="underline">______</span> , and
|
||||||
|
<span class="underline">______</span> .
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_leit_d_back">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=720></div>
|
||||||
|
<div class="fcard_center" style="color:#fff; height:200px; height: 180px; font-size: 30px;">
|
||||||
|
small, connected & meaningful
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<script src="js/minpubsub.src.js"></script>
|
||||||
|
<script src="js/comic.js"></script>
|
BIN
pics/leit0.png
BIN
pics/leit0.png
Binary file not shown.
Before Width: | Height: | Size: 339 KiB After Width: | Height: | Size: 969 KiB |
BIN
pics/leit3.png
BIN
pics/leit3.png
Binary file not shown.
Before Width: | Height: | Size: 211 KiB After Width: | Height: | Size: 213 KiB |
|
@ -32,4 +32,33 @@ body{
|
||||||
|
|
||||||
#default_labels{
|
#default_labels{
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type=range]{
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #d3d3d3;
|
||||||
|
outline: none;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
input[type=range]::-webkit-slider-thumb{
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 15px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
input[type=range]::-moz-range-thumb{
|
||||||
|
width: 15px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -45,6 +45,9 @@ daySlider.oninput = function(){
|
||||||
var QUEUE = CALENDAR[DAY-1]; // -1 offset
|
var QUEUE = CALENDAR[DAY-1]; // -1 offset
|
||||||
$("#label_review").innerHTML = _getLabel("calendar_review").replace("[N]", QUEUE.toString() );
|
$("#label_review").innerHTML = _getLabel("calendar_review").replace("[N]", QUEUE.toString() );
|
||||||
|
|
||||||
|
// KILL SLIDEY
|
||||||
|
if(window.slidey) window.slidey.kill();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.REDRAW = 0;
|
window.REDRAW = 0;
|
||||||
|
@ -143,6 +146,16 @@ function update(){
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onload = function(){
|
window.onload = function(){
|
||||||
|
|
||||||
daySlider.oninput();
|
daySlider.oninput();
|
||||||
update();
|
update();
|
||||||
};
|
|
||||||
|
window.slidey = new createAnimatedUIHelper({
|
||||||
|
x: 8,
|
||||||
|
y: 95,
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
img: "../../pics/ui_slide.png"
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
|
@ -48,3 +48,48 @@ body{
|
||||||
#MODE2_time, #MODE2_sliders{
|
#MODE2_time, #MODE2_sliders{
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
font-size:18px;
|
||||||
|
font-family: "PatrickHand", Helvetica, Arial;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
button:focus {
|
||||||
|
outline:0;
|
||||||
|
}
|
||||||
|
button:hover{
|
||||||
|
top:-2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=range]{
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #d3d3d3;
|
||||||
|
outline: none;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
input[type=range]::-webkit-slider-thumb{
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 15px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
input[type=range]::-moz-range-thumb{
|
||||||
|
width: 15px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -37,6 +37,9 @@ window.onload = function(){
|
||||||
//$("#MODE2_sliders").style.display = "block";
|
//$("#MODE2_sliders").style.display = "block";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// POINTY
|
||||||
|
_addPointy(MODE==2);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
//////////////////////////////////////////
|
//////////////////////////////////////////
|
||||||
|
@ -86,6 +89,8 @@ $("#reset").onclick = function(){
|
||||||
_newStep();
|
_newStep();
|
||||||
//update();
|
//update();
|
||||||
|
|
||||||
|
_killPointy();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// UI Sliders
|
// UI Sliders
|
||||||
|
@ -142,6 +147,7 @@ function _updateLabels(){
|
||||||
|
|
||||||
$("#next_step").onclick = function(){
|
$("#next_step").onclick = function(){
|
||||||
_newStep();
|
_newStep();
|
||||||
|
_killPointy();
|
||||||
};
|
};
|
||||||
function _newStep(skipLabels){
|
function _newStep(skipLabels){
|
||||||
|
|
||||||
|
@ -207,6 +213,7 @@ function _newStep(skipLabels){
|
||||||
$("#next_day").onclick = function(){
|
$("#next_day").onclick = function(){
|
||||||
_newDay();
|
_newDay();
|
||||||
_updateLabels();
|
_updateLabels();
|
||||||
|
_killPointy();
|
||||||
};
|
};
|
||||||
function _newDay(skipLabels){
|
function _newDay(skipLabels){
|
||||||
|
|
||||||
|
@ -239,9 +246,11 @@ function _reviewMultipleDays(days){
|
||||||
|
|
||||||
$("#next_week").onclick = function(){
|
$("#next_week").onclick = function(){
|
||||||
_reviewMultipleDays(7);
|
_reviewMultipleDays(7);
|
||||||
|
_killPointy();
|
||||||
};
|
};
|
||||||
$("#next_month").onclick = function(){
|
$("#next_month").onclick = function(){
|
||||||
_reviewMultipleDays(30);
|
_reviewMultipleDays(30);
|
||||||
|
_killPointy();
|
||||||
};
|
};
|
||||||
|
|
||||||
//////////////////////////////////////////
|
//////////////////////////////////////////
|
||||||
|
@ -487,3 +496,21 @@ function _drawArrow(fail){
|
||||||
ctx.fillText(label, cp.x, cp.y+15);
|
ctx.fillText(label, cp.x, cp.y+15);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//////////////////////////////////////////
|
||||||
|
//////////////////////////////////////////
|
||||||
|
|
||||||
|
function _addPointy(mode2){
|
||||||
|
|
||||||
|
window.pointy = new createAnimatedUIHelper({
|
||||||
|
x: mode2 ? 380 : 120,
|
||||||
|
y: 50,
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
img: "../../pics/ui_point.png"
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
function _killPointy(){
|
||||||
|
if(window.pointy) window.pointy.kill();
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
window.front_only = _getQueryVariable("front_only");
|
window.front_only = _getQueryVariable("front_only");
|
||||||
|
window.forever_card = (_getQueryVariable("forever_card")=="yes");
|
||||||
window.FRONT_ONLY = (front_only && front_only=="yes");
|
window.FRONT_ONLY = (front_only && front_only=="yes");
|
||||||
|
|
||||||
var flashcard = $("#flashcard");
|
var flashcard = $("#flashcard");
|
||||||
|
@ -34,8 +35,9 @@ if(!FRONT_ONLY){
|
||||||
},1000);
|
},1000);
|
||||||
|
|
||||||
// AND REMOVE UI
|
// AND REMOVE UI
|
||||||
// TODO: unless it's the forever-card
|
if(!window.forever_card){
|
||||||
clicky.kill();
|
clicky.kill();
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue