458 lines
10 KiB
HTML
458 lines
10 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 style="background:#bada55"></pic> <!-- WHAT, WHY, HOW, and WHEN? -->
|
|
<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="">
|
|
Now, let's make a flashcard! I'll give you the question on the front,
|
|
you write your <i>own</i> answer on the back. Here's the front:
|
|
</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 style="background:#bada55"></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>
|
|
|
|
<panel w=400 h=240 bg="#ff4040" style="margin-top:20px">
|
|
<!-- Suggestions:
|
|
What do you want to learn?
|
|
EVERYTHING (just curiosity)
|
|
a new language | an instrument | details of friends' lives |
|
|
the history of your country | countries of the world |
|
|
the entire list of pokémon
|
|
-->
|
|
</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 card 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 style="background:#bada55"></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>
|
|
|
|
<panel w=400 h=240 bg="#ff4040" style="margin:20px 0 10px 0">
|
|
<!-- Suggestions:
|
|
-->
|
|
</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 style="background:#bada55"></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>
|
|
|
|
<panel w=400 h=240 bg="#ff4040" style="margin-bottom:20px">
|
|
<!-- Suggestions:
|
|
-->
|
|
</panel>
|
|
|
|
|
|
|
|
<!-- - - -->
|
|
<!-- WHEN -->
|
|
<!-- - - -->
|
|
|
|
<panel w=500 h=450>
|
|
<pic style="background:#bada55"></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=30 y=380 w=430 h=30>
|
|
Why? Because making <i>any</i> new habit is hard.
|
|
</words>
|
|
</panel>
|
|
|
|
<panel w=500 h=500>
|
|
<pic style="background:#bada55"></pic> <!-- thanks, you too! -->
|
|
<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=400 w=440 h=60>
|
|
...it'll become a habit, for better or worse.
|
|
So for a Spaced Repetition habit, the 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=500>
|
|
<pic style="background:#bada55"></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=370 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 style="background:#bada55"></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>
|
|
|
|
<panel w=400 h=240 bg="#ff4040" style="margin-bottom:20px">
|
|
<!-- Suggestions:
|
|
-->
|
|
</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=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>
|
|
|
|
|
|
|
|
|
|
<!-- - - - - - - - - - - - - - - -->
|
|
<!-- DOWNLOADABLES TO START NOW - -->
|
|
<!-- - - - - - - - - - - - - - - -->
|
|
|
|
<br><br>
|
|
|
|
<panel w=500 h=250>
|
|
<pic style="background:#bada55"></pic> <!-- brain squirm -->
|
|
<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 style="background:#bada55"></pic> <!-- brain given gift -->
|
|
<words x=160 y=30 w=100 no-bg>
|
|
SO...
|
|
</words>
|
|
<words x=230 y=90 w=250 no-bg>
|
|
here's some
|
|
<br>
|
|
<b style="font-size:30px">
|
|
COOL STUFF
|
|
</b>
|
|
<br>
|
|
you can download!
|
|
</words>
|
|
</panel>
|
|
|
|
<!-- Reminder Wallpaper -->
|
|
|
|
<panel w=600 h=100>
|
|
<words x=-15 y=0 w=600 no-bg style="text-align:left" fontsize=30>
|
|
<b>FIRST:</b>
|
|
a wallpaper for your desktop,
|
|
<!--a lock screen wallpaper for your phone,-->
|
|
to remind you to play your Spaced Repetition game each day!
|
|
</words>
|
|
</panel>
|
|
|
|
<!-- Leitner Calendar / Anki -->
|
|
|
|
<panel w=600 h=100>
|
|
<words x=-15 y=0 w=600 no-bg style="text-align:left" fontsize=30>
|
|
<b>SECOND:</b>
|
|
<!--a looping 64-day calendar for your Leitner Box!-->
|
|
a link to the Anki app!
|
|
(and here's a video tutorial on how to get started)
|
|
</words>
|
|
</panel>
|
|
|
|
|
|
<!-- All flashcards -->
|
|
|
|
<panel w=600 h=100>
|
|
<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=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 style="background:#bada55"></pic> <!-- holding card -->
|
|
<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="#ff4040">
|
|
<!--
|
|
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=leit_d,leit_b,leit_a,leit_c"></sim>
|
|
-->
|
|
</panel>
|
|
|
|
<panel w=240 h=300>
|
|
<pic style="background:#bada55"></pic>
|
|
<words x=0 y=10 w=210 no-bg>
|
|
Sniff...
|
|
It's always so hard to say goodbye...
|
|
</words>
|
|
</panel>
|
|
|
|
<panel w=240 h=300>
|
|
<pic style="background:#bada55"></pic> <!-- blow nose into a card -->
|
|
</panel>
|
|
|
|
<panel w=500 h=250>
|
|
<pic style="background:#bada55"></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 style="background:#bada55"></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 style="background:#bada55"></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 science-based study habits) early on.
|
|
</words>
|
|
</panel>
|
|
|
|
<panel w=500 h=400>
|
|
<pic style="background:#bada55"></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 style="background:#fff"></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">
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
<script src="js/minpubsub.src.js"></script>
|
|
<script src="js/comic.js"></script>
|