631 lines
15 KiB
HTML
631 lines
15 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">
|
||
|
||
<!-- - - - - - - - - - - - -->
|
||
<!-- WHAT, WHY, HOW, WHEN - -->
|
||
<!-- - - - - - - - - - - - -->
|
||
|
||
<!-- - - -->
|
||
<!-- WHAT -->
|
||
<!-- - - -->
|
||
|
||
<panel w=500 h=350>
|
||
<pic src="pics/end0.png" sx=0 sy=0></pic>
|
||
<words x=10 y=10 w=450 h=60>
|
||
To help you get started with Spaced Repetition <i>today</i>,
|
||
you need to answer four questions:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w="600" h="80">
|
||
<words w="600" x="-15" no-bg="">
|
||
You'll answer these questions by making flashcards!
|
||
So, here's the <i>front</i> of our first flashcard, our question:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=240 bg="#bada55" style="margin-bottom:20px">
|
||
<!-- WHAT do you want to learn? -->
|
||
</panel>
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/end0.png" sx=500 sy=0></pic>
|
||
<words x=10 y=10 w=430 h=60>
|
||
For example, you could use Spaced Repetition to help you learn...
|
||
</words>
|
||
<words x=80 y=380 w=380 h=30>
|
||
Now, you write <i>your</i> answer on the back:
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- WHAT do you want to learn? -->
|
||
<panel w=600 h=350 bg="#e0e0e0">
|
||
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_what"></sim>
|
||
</panel>
|
||
|
||
<!--
|
||
<panel w="400" h="70">
|
||
<words w="400" x="-15" y="-20" no-bg="">
|
||
(if you change your mind, you can always scroll back here & edit your answer)
|
||
</words>
|
||
</panel>-->
|
||
|
||
|
||
|
||
|
||
|
||
<!-- - - -->
|
||
<!-- WHY -->
|
||
<!-- - - -->
|
||
|
||
<panel w="600" h="80">
|
||
<words w="600" x="-15" no-bg="">
|
||
However, recall that for Spaced Repetition to work,
|
||
you need to connect it to something you <i>care</i> about.
|
||
So our next question is:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=240 bg="#bada55" style="margin-bottom:20px">
|
||
<!-- WHY do you want to learn X? -->
|
||
</panel>
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/end0.png" sx=1000 sy=0></pic>
|
||
<words x=10 y=10 w=430 h=60>
|
||
That may be too philosophical, so here's some
|
||
concrete examples of a <i>why</i> behind a <i>what:</i>
|
||
</words>
|
||
<words x=210 y=380 w=250 h=30>
|
||
So... what's <i>your</i> why?
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- WHY do you want to learn that? -->
|
||
<panel w=600 h=350 bg="#e0e0e0">
|
||
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_why"></sim>
|
||
</panel>
|
||
|
||
|
||
|
||
|
||
<!-- - - -->
|
||
<!-- HOW -->
|
||
<!-- - - -->
|
||
|
||
<panel w="600" h="80">
|
||
<words w="600" x="-15" no-bg="">
|
||
You now have your what and why... but we still need to pick a <i>how!</i>
|
||
That is, what tool/app do you want to use?
|
||
Our next card asks:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=240 bg="#bada55" style="margin-bottom:20px">
|
||
<!-- HOW do you want to do Spaced Repetition? (with what tool?) -->
|
||
</panel>
|
||
|
||
<panel w=500 h=700>
|
||
<pic src="pics/end0.png" sx=0 sy=450></pic>
|
||
<words x=10 y=10 w=450 h=90>
|
||
So far, we've seen three tools you could use:
|
||
The Leitner Box, Anki, and TinyCards.
|
||
Here's the more detailed pros-and-cons of each:
|
||
</words>
|
||
<words x=10 y=530 w=450 h=60>
|
||
(Want something else?
|
||
Here's a few other tools:
|
||
SuperMemo, NimbleNotes, Mnemosyne)
|
||
</words>
|
||
<words x=110 y=620 w=360 h=40 no-bg fontsize=20>
|
||
* <i>anti</i>-disclaimer: i am <i>not</i> affiliated with any of these.
|
||
i just think they're cool & helpful!
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=50>
|
||
<words w=600 x=-15 no-bg>
|
||
So, what's it gonna be?
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- HOW do you want to do Spaced Repetition? -->
|
||
<panel w=600 h=350 bg="#e0e0e0">
|
||
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_how"></sim>
|
||
</panel>
|
||
|
||
|
||
|
||
<!-- - - -->
|
||
<!-- WHEN -->
|
||
<!-- - - -->
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/end0.png" sx=500 sy=450></pic>
|
||
<words x=10 y=10 w=430 h=90>
|
||
Just one card left!
|
||
Now: doing Spaced Repetition is actually quite easy...
|
||
however, doing it <i>as a daily habit</i> is hard.
|
||
</words>
|
||
<words x=60 y=355 w=400 h=30 no-bg>
|
||
Why? Because getting the ball rolling on <i>any</i> new habit is hard.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=550>
|
||
<pic src="pics/end0.png" sx=1000 sy=450></pic>
|
||
<words x=10 y=10 w=430 h=90>
|
||
Hard, but straightforward.
|
||
The science of habits shows that if you do the same thing, given the same cue,
|
||
over and over...
|
||
</words>
|
||
<words x=20 y=450 w=440 h=60>
|
||
...it'll become a habit, for better or worse.
|
||
So for a Spaced Repetition habit, our question is:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=240 bg="#bada55" style="margin:20px 0">
|
||
<!-- WHEN do you want to do Spaced Repetition? -->
|
||
</panel>
|
||
|
||
<panel w=500 h=450>
|
||
<pic src="pics/end0.png" sx=0 sy=1150></pic>
|
||
<words x=10 y=10 w=400 h=60>
|
||
For example, you could play the Spaced Repetition game...
|
||
</words>
|
||
<!--
|
||
After waking up, to jog your mind
|
||
On a commute, to fill up spare time
|
||
Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||
-->
|
||
<words x=30 y=320 w=430 h=90>
|
||
It doesn't really matter <i>when</i> you do it, as long as you do it
|
||
daily and consistently (more or less - you can skip a day once in a while).
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=500>
|
||
<pic src="pics/end0.png" sx=500 sy=1150></pic>
|
||
<words x=10 y=10 w=350 h=90>
|
||
(Tip: whenever I try to create a new habit,
|
||
I draw a circle on a calendar for each day I successfully do it)
|
||
</words>
|
||
<words x=10 y=370 w=350 h=90>
|
||
(It's a game I play with myself! The goal is to try not break
|
||
my streak, and build the longest chain I can.)
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=50>
|
||
<words w=600 x=-15 no-bg>
|
||
Now, let's fill out that final flashcard:
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- WHEN do you want to do Spaced Repetition? -->
|
||
<panel w=600 h=350 bg="#e0e0e0">
|
||
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_when"></sim>
|
||
</panel>
|
||
|
||
|
||
|
||
|
||
<!-- - - - - - - - -->
|
||
<!-- ALL THE CARDS -->
|
||
<!-- - - - - - - - -->
|
||
|
||
<panel w=400 h=80>
|
||
<words w=400 x=-15 no-bg>
|
||
Et voilà, here's all four of your flashcards, all about you!
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=264 h=180 bg="#e0e0e0">
|
||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_what&refresh=yes" class="small_card"></sim>
|
||
</panel>
|
||
|
||
<panel w=264 h=180 bg="#e0e0e0">
|
||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_why&refresh=yes" class="small_card"></sim>
|
||
</panel>
|
||
|
||
<panel w=264 h=180 bg="#e0e0e0">
|
||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_how&refresh=yes" class="small_card"></sim>
|
||
</panel>
|
||
|
||
<panel w=264 h=180 bg="#e0e0e0">
|
||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_when&refresh=yes" class="small_card"></sim>
|
||
</panel>
|
||
|
||
|
||
|
||
|
||
<!-- - - - - - - - - - - - - - - -->
|
||
<!-- DOWNLOADABLES TO START NOW - -->
|
||
<!-- - - - - - - - - - - - - - - -->
|
||
|
||
<br><br>
|
||
|
||
<panel w=500 h=250>
|
||
<pic src="pics/end1.png" sx=0 sy=0></pic>
|
||
<words x=180 y=10 w=250 no-bg>
|
||
But like I said, I want to help you take control of your memory <i>today</i>.
|
||
</words>
|
||
<words x=230 y=130 w=250 no-bg>
|
||
Not "eventually", not "tomorrow", <i>TODAY</i>.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=250>
|
||
<pic src="pics/end1.png" sx=0 sy=250></pic>
|
||
<words x=150 y=30 w=120 no-bg>
|
||
so to help...
|
||
</words>
|
||
<words x=270 y=95 w=170 no-bg>
|
||
let's download some
|
||
<b style="font-size:30px">
|
||
COOL GOODIES
|
||
</b>
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- Reminder Wallpaper -->
|
||
|
||
<panel w=600 h=80>
|
||
<words x=-15 y=0 w=600 no-bg style="text-align:left" fontsize=30>
|
||
<b>FIRST:</b>
|
||
<span id="gift_wallpaper"></span>
|
||
to remind you to play the Spaced Repetition game daily!
|
||
</words>
|
||
</panel>
|
||
|
||
<div>
|
||
<a id="wallpaper_link">
|
||
<img id="wallpaper_image"/><br>
|
||
(click to download ↓)
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Leitner Calendar / Anki -->
|
||
|
||
<panel w=600 h=80>
|
||
<words x=-15 y=0 w=600 no-bg style="text-align:left" fontsize=30>
|
||
<b>SECOND:</b>
|
||
<span id="gift_app"></span>
|
||
</words>
|
||
</panel>
|
||
|
||
|
||
<!-- All flashcards -->
|
||
|
||
<panel w=600 h=80>
|
||
<words x=-15 y=0 w=600 no-bg style="text-align:left" fontsize=30>
|
||
And finally,
|
||
<b>THIRD:</b>
|
||
a .zip of all the flashcards you've been practicing in this interactive comic!
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=200 bg="#fff">
|
||
<sim x=0 y=0 w=600 h=400 src="sims/downloads/all.html"></sim>
|
||
</panel>
|
||
|
||
<panel w=600 h=120>
|
||
<words x=-15 y=0 w=600 no-bg style="text-align:left">
|
||
(These can be your first few days' worth of Spaced Repetition cards,
|
||
to help you get started! And as a plus, you'll get to remember everything
|
||
you learnt here today, forever)
|
||
</words>
|
||
</panel>
|
||
|
||
|
||
|
||
|
||
<!-- - - - - - - - - - - - - -->
|
||
<!-- THE END - - - - - - - - -->
|
||
<!-- - - - - - - - - - - - - -->
|
||
|
||
<!-- Review -->
|
||
|
||
<panel w=500 h=350>
|
||
<pic src="pics/end1.png" sx=500 sy=0></pic>
|
||
<words x=110 y=30 w=250 no-bg>
|
||
Which reminds me...
|
||
</words>
|
||
<words x=200 y=105 w=220 no-bg>
|
||
one last goodbye,
|
||
for old time's sake,
|
||
the final swan song!
|
||
</words>
|
||
<words x=210 y=230 w=250 no-bg>
|
||
...let's review our flashcards, <i>all</i> of them:
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=400 bg="#e0e0e0">
|
||
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>
|
||
</panel>
|
||
|
||
<panel w=240 h=300>
|
||
<pic src="pics/end1.png" sx=0 sy=500></pic>
|
||
<words x=0 y=12 w=210 no-bg>
|
||
Sniff...
|
||
It's always so hard to say goodbye...
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=240 h=300>
|
||
<pic src="pics/end1.png" sx=240 sy=500></pic>
|
||
<words x=-20 y=-10 no-bg fontsize=120 color="rgba(0,0,0,0.5)" style="transform:rotate(10deg)">
|
||
HONK
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=250>
|
||
<pic src="pics/end1.png" sx=480 sy=500></pic>
|
||
<words x=160 y=30 w=200 no-bg>
|
||
I'll miss the time we had together...
|
||
</words>
|
||
<words x=200 y=120 w=250 no-bg>
|
||
...but I hope we live on in each others' memories!
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- Classroom -->
|
||
|
||
<panel w=500 h=400>
|
||
<pic src="pics/end1.png" sx=0 sy=800></pic>
|
||
<words x=10 y=10 w=430 h=90>
|
||
If you're a student, I hope Spaced Repetition
|
||
helps you be more confident, and take learning into your own hands.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=400>
|
||
<pic src="pics/end1.png" sx=500 sy=800></pic>
|
||
<words x=10 y=10 w=430 h=90>
|
||
If you're a teacher,
|
||
please oh <i>please</i> tell your students about Spaced Repetition
|
||
(& other evidence-based study habits) early on.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=400>
|
||
<pic src="pics/end1.png" sx=1000 sy=800></pic>
|
||
<words x=10 y=10 w=430 h=90>
|
||
But whether you're in or out of school,
|
||
I hope Spaced Repetition helps you develop your memory, your mind,
|
||
your muse...
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=550>
|
||
<pic src="pics/end1.png" sx=1000 sy=0></pic>
|
||
<words x=30 y=30 w=250 no-bg>
|
||
...and learn one of life's greatest loves:
|
||
</words>
|
||
<words x=120 y=455 w=300 style="text-align:right" no-bg>
|
||
a lifelong love of learning.
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- Bow Goodbye -->
|
||
|
||
<panel w=600 h=300 bg="#e0e0e0">
|
||
<!-- THE END, with full cast of characters -->
|
||
<!--
|
||
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=mitochondria_all"></sim>
|
||
-->
|
||
</panel>
|
||
|
||
<!-- want more? further reading & credits below! -->
|
||
|
||
|
||
|
||
|
||
<!-- - - - - - - - - - -->
|
||
<!-- SIMULATION LABELS -->
|
||
<!-- - - - - - - - - - -->
|
||
|
||
<div id="labels">
|
||
|
||
|
||
<!-- GIFTS -->
|
||
<span id="gift_wallpaper_what">
|
||
WHAT:
|
||
</span>
|
||
<span id="gift_wallpaper_why">
|
||
WHY:
|
||
</span>
|
||
<span id="gift_wallpaper_do">
|
||
DO YOUR CARDS FOR TODAY!
|
||
</span>
|
||
<span id="gift_wallpaper_filename">
|
||
wallpaper
|
||
</span>
|
||
<span id="gift_wallpaper_desktop">
|
||
a wallpaper for your desktop,
|
||
</span>
|
||
<span id="gift_wallpaper_phone">
|
||
a lock-screen wallpaper for your phone,
|
||
</span>
|
||
<span id="gift_app_leitner">
|
||
a looping 64-day calendar for your Leitner Box!
|
||
(pdf, so you can print it out)
|
||
</span>
|
||
<span id="gift_app_anki">
|
||
a link to download Anki!
|
||
(and here's a video tutorial on how to get started)
|
||
</span>
|
||
<span id="gift_app_tiny">
|
||
a link to TinyCards!
|
||
(you can try cards without download or signup.
|
||
might i recommend geography or blabla?)
|
||
</span>
|
||
<span id="gift_app_other">
|
||
links to
|
||
the Leitner Box 64-day calendar,
|
||
the Anki app,
|
||
and TinyCards!
|
||
</span>
|
||
|
||
|
||
<!-- QUESTIONS -->
|
||
<span id="flashcard_you_what_front">
|
||
<div id="fc_words" class="fcard_center" style="height:160px;">
|
||
WHAT do you want to learn?
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_you_what_back">
|
||
<div id="fc_words" class="fcard_center" editable="you_what">
|
||
Everything
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_you_why_front">
|
||
<div id="fc_words" class="fcard_center" style="height:160px;">
|
||
WHY do you want to learn that?
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_you_why_back">
|
||
<div id="fc_words" class="fcard_center" editable="you_why">
|
||
For curiosity's sake!
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_you_how_front">
|
||
<div id="fc_words" class="fcard_center" style="height:160px;">
|
||
HOW do you want to do Spaced Repetition?
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_you_how_back">
|
||
<div id="fc_words" class="fcard_center" editable="you_how">
|
||
Leitner Box
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_you_when_front">
|
||
<div id="fc_words" class="fcard_center" style="height:160px;">
|
||
WHEN do you want to do Spaced Repetition?
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_you_when_back">
|
||
<div id="fc_words" class="fcard_center" editable="you_when">
|
||
In the evening
|
||
</div>
|
||
</span>
|
||
|
||
<!-- SUGGESTIONS -->
|
||
<span id="you_what_suggestions">
|
||
<li>Everything</li>
|
||
<li>herp</li>
|
||
<li>derp</li>
|
||
<li>(other)</li>
|
||
</span>
|
||
<span id="you_why_suggestions">
|
||
<li>Curiosity</li>
|
||
<li>herp</li>
|
||
<li>derp</li>
|
||
<li>(other)</li>
|
||
</span>
|
||
<span id="you_how_suggestions">
|
||
<li>Leitner Box</li>
|
||
<li>Anki</li>
|
||
<li>TinyCards</li>
|
||
<li>(other)</li>
|
||
</span>
|
||
<span id="you_when_suggestions">
|
||
<li>In the morning</li>
|
||
<li>On my commute</li>
|
||
<li>In the evening</li>
|
||
<li>(other)</li>
|
||
</span>
|
||
|
||
<!-- TYPING CARDS -->
|
||
<span id="type_question">
|
||
Q:
|
||
</span>
|
||
<span id="type_placeholder">
|
||
type your answer here
|
||
</span>
|
||
<span id="type_suggestions">
|
||
or pick one of these suggestions:
|
||
</span>
|
||
|
||
<!-- Flashcards -->
|
||
<span id="flashcard_sci_a_front">
|
||
<div class="fcard_center" style="height:2.5em">
|
||
The discoverer of the Forgetting Curve was...
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_sci_a_back">
|
||
<div class="fcard_bg" src="pics/fcards0.png" sx=400 sy=0></div>
|
||
<div style="position: absolute; width: 250px; top: 60px; right: 0; line-height: 1.1em;">
|
||
Hermann Ebbinghaus
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_sci_b_front">
|
||
<div class="fcard_center" style="height:3.4em">
|
||
The Forgetting Curve (<i>without</i> any recalls) looks like...
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_sci_b_back">
|
||
<div class="fcard_bg" src="pics/fcards0.png" sx=0 sy=240></div>
|
||
<div style="position: absolute; width: 280px; top: 70px; right: 20px; font-size:20px; line-height: 1.1em;">
|
||
(note: it decays quickly, then slowly – "exponential decay")
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_sci_c_front">
|
||
<div class="fcard_center" style="height:3.4em">
|
||
The Forgetting Curve (<i>with</i> optimally-spaced recalls) looks like...
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_sci_c_back">
|
||
<div class="fcard_bg" src="pics/fcards0.png" sx=400 sy=240></div>
|
||
<div style="position: absolute; width: 360px; top: 120px; left: 20px; font-size:20px; line-height: 1.1em;">
|
||
(note: the gaps between recalls <i>increase</i> in length)
|
||
</div>
|
||
</span>
|
||
|
||
<!-- Multi Card Labels -->
|
||
<span id="multicard_q">
|
||
try to recall ↑
|
||
then flip ↻
|
||
</span>
|
||
<span id="multicard_cards_left">
|
||
(cards left: [N])
|
||
</span>
|
||
<span id="multicard_a">
|
||
did you remember this?
|
||
</span>
|
||
<span id="multicard_no">
|
||
nah, try again
|
||
</span>
|
||
<span id="multicard_yes">
|
||
yup, onwards!
|
||
</span>
|
||
<span id="multicard_done">
|
||
done for now! keep scrolling
|
||
<br>
|
||
↓
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</body>
|
||
|
||
</html>
|
||
|
||
<script src="js/minpubsub.src.js"></script>
|
||
<script src="js/comic.js"></script>
|