302 lines
7.5 KiB
HTML
302 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>An Interactive Comic</title>
|
||
<!--
|
||
|
||
Possible titles:
|
||
- What If Long-Term Memory Could Be A Choice?
|
||
- Remember By Choice
|
||
- How To Remember Pretty Much Anything
|
||
- Remember Forever
|
||
|
||
-->
|
||
|
||
<link rel="stylesheet" type="text/css" href="css/comic.css"/>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="comic">
|
||
|
||
<!-- Muse -->
|
||
<panel w=400 h=650>
|
||
<pic src="pics/intro0.png" sx=0 sy=0></pic>
|
||
<words x=10 y=10 w=350 h=60>
|
||
In Greek mythology, Mnemosyne, the goddess of Memory...
|
||
</words>
|
||
<words x=30 y=330 w=310 h=60>
|
||
...was the mother of the Muses, the goddesses of inspiration.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=600 h=60>
|
||
<words w=600 x=-15 no-bg>
|
||
|
||
So, how's Memory and Inspiration doing in schools?
|
||
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=550 h=250>
|
||
<pic src="pics/intro0.png" sx=400 sy=0></pic>
|
||
</panel>
|
||
|
||
<panel w=500 h=250>
|
||
<pic src="pics/intro0.png" sx=400 sy=250></pic>
|
||
<words x=155 y=20 w=90 no-bg>
|
||
Yeah.
|
||
</words>
|
||
<words x=196 y=65 w=270 no-bg>
|
||
Not only are common practices like lectures, re-reading, and highlighting <i>boring</i>,
|
||
science has shown they <i>don't even work well</i>.*
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=30 style="margin-top:-5px">
|
||
<words w=500 x=-15 y=-15 no-bg style="width: 500px; font-size:0.8em; text-align: right; color:#999;">
|
||
* all sources and links will be at the end of this comic!
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=350>
|
||
<pic src="pics/intro0.png" sx=400 sy=500></pic>
|
||
<words x=95 y=30 w=340 no-bg>
|
||
But what if I said there's a way to learn
|
||
that's evidence-based <i>and</i> fun?
|
||
</words>
|
||
<words x=164 y=141 w=300 no-bg>
|
||
What if I said there's a memory card game you can play, for 20 minutes a day,
|
||
to store <i>anything you choose</i> into long-term memory, <i>forever?</i>
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- Therefore: SPACED REPETITION (interaction) -->
|
||
<!-- And it's called... -->
|
||
<panel w=600 h=300 bg="#e0e0e0">
|
||
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=spaced_rep"></sim>
|
||
</panel>
|
||
|
||
<!-- Model: Us & Others -->
|
||
<panel w=500 h=450 fadeInOn="flip_spaced_rep">
|
||
<pic src="pics/intro0.png" sx=950 sy=0></pic>
|
||
<words x=10 y=10 w=430 h=60>
|
||
And it's <i>awesome</i>.
|
||
I started using Spaced Repetition earlier this year to learn French.
|
||
</words>
|
||
<words x=30 y=350 w=430 h=60>
|
||
In two <i>months</i>, I learnt more words than I did in two <i>years</i>
|
||
of high school classes.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=500 h=400>
|
||
<pic src="pics/intro0.png" sx=950 sy=450></pic>
|
||
<words x=10 y=10 w=400 h=60>
|
||
Since then, I've used Spaced Repetition to remember all sorts of things...
|
||
</words>
|
||
<words x=60 y=300 w=400 h=60>
|
||
...and this lil' memory card game became a core part of my <i>life</i>.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=550 h=350>
|
||
<pic src="pics/intro0.png" sx=0 sy=850></pic>
|
||
<words x=10 y=10 w=500 h=30>
|
||
In short, Spaced Repetition = testing + time.
|
||
</words>
|
||
<words x=10 y=220 w=500 h=90>
|
||
You test yourself on a fact again and again, spacing out your repetitions over time.
|
||
(Wouldn't this take forever? Ah, but as we'll see later, there's a trick...)
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=400>
|
||
<pic src="pics/intro0.png" sx=0 sy=1200></pic>
|
||
<words x=10 y=20 w=290 no-bg>
|
||
Spaced Repetition is free, evidence-based, and so simple you can do it with a <i>shoebox</i>.
|
||
</words>
|
||
<words x=90 y=130 w=270 no-bg>
|
||
So, what's the catch? Why isn't <i>everyone</i> already doing Spaced Repetition?
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=400>
|
||
<pic src="pics/intro0.png" sx=400 sy=1200></pic>
|
||
<words x=10 y=20 w=330 no-bg>
|
||
Well, the catch is that making <i>any</i> new habit is hard
|
||
– especially a weird habit like Spaced Repetition.
|
||
</words>
|
||
<words x=100 y=134 w=270 no-bg>
|
||
That's why I made this badly-drawn interactive comic.
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=400>
|
||
<pic src="pics/intro0.png" sx=800 sy=1200></pic>
|
||
<words x=10 y=20 w=300 no-bg>
|
||
In this comic on Spaced Repetition,
|
||
I'll show you WHY it works, HOW it works...
|
||
</words>
|
||
<words x=110 y=140 w=250 no-bg>
|
||
...and help you get started with it <i>TODAY.</i>
|
||
</words>
|
||
</panel>
|
||
|
||
<!-- Ergo: SR WITH SR -->
|
||
|
||
<panel w=600 h=180>
|
||
<words w=600 x=-15 no-bg>
|
||
|
||
Also, throughout this comic,
|
||
you can test yourself on what you've learnt,
|
||
at spaced-out intervals.
|
||
<b>That is: you'll use Spaced Repetition to learn about Spaced Repetition.</b>
|
||
|
||
<br><br>
|
||
Like so:
|
||
|
||
</words>
|
||
</panel>
|
||
|
||
|
||
|
||
<panel w=600 h=400 bg="#e0e0e0">
|
||
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=intro_a,intro_b,intro_c"></sim>
|
||
</panel>
|
||
|
||
<panel w=550 h=450>
|
||
<pic src="pics/intro0.png" sx=950 sy=1600></pic>
|
||
<words x=10 y=10 w=480 h=90>
|
||
Still, isn't "rote memorization" bad?
|
||
Can't we look everything up these days?
|
||
Shouldn't we learn creativity & critical thinking instead?
|
||
</words>
|
||
<words x=30 y=320 w=480 h=90>
|
||
There <i>is</i> no "instead".
|
||
Cognitive science shows
|
||
you <i>need</i> memorization for creativity & critical thinking.
|
||
(Imagine writing an essay if you know no words!)
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=550 h=300>
|
||
<pic src="pics/intro0.png" sx=0 sy=1600></pic>
|
||
<words x=10 y=20 w=310 no-bg>
|
||
Spaced Repetition isn't a "study trick".
|
||
It isn't a "life hack".
|
||
</words>
|
||
<words x=30 y=113 w=320 no-bg>
|
||
It's a way to take back control of your <i>mind.</i>
|
||
To make long-term memory a <i>choice</i>.
|
||
To develop a lifelong love of learning...
|
||
</words>
|
||
</panel>
|
||
|
||
<panel w=400 h=550>
|
||
<pic src="pics/intro0.png" sx=550 sy=1600></pic>
|
||
<words x=20 y=20 w=330 h=30>
|
||
...to mother your own, inner Muse.
|
||
</words>
|
||
<words x=240 y=480 w=120 h=30>
|
||
Let's begin.
|
||
</words>
|
||
</panel>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- - - - - - - - - - -->
|
||
<!-- SIMULATION LABELS -->
|
||
<!-- - - - - - - - - - -->
|
||
|
||
<div id="labels">
|
||
|
||
<!-- 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>
|
||
|
||
|
||
|
||
|
||
<!-- Flashcards -->
|
||
<span id="flashcard_spaced_rep_front">
|
||
<div class="fcard_center" style="height:2.5em">
|
||
and the name of this game is...
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_spaced_rep_back">
|
||
<div class="fcard_bg" src="pics/fcards_intro.png" sx=0 sy=0></div>
|
||
<div class="fcard_center" style="color:white; font-size:74px; height:1.6em; line-height:0.8em;">
|
||
SPACED REPETITION
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_intro_a_front">
|
||
<div class="fcard_center" style="height:2.5em">
|
||
Spaced Repetition = <span class="underline">____</span> + <span class="underline">____</span>
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_intro_a_back">
|
||
<div class="fcard_bg" src="pics/fcards_intro.png" sx=0 sy=240></div>
|
||
<div class="fcard_center" style="height:2.5em">
|
||
testing + time
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_intro_b_front">
|
||
<div class="fcard_center" style="height:4.5em">
|
||
3 common but ineffective learning/teaching practices are...
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_intro_b_back">
|
||
<div class="fcard_center" style="height:2.2em">
|
||
...lectures, re-reading, and highlighting
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_intro_c_front">
|
||
<div class="fcard_center" style="height:4.4em">
|
||
In Greek Mythology,
|
||
the goddess of <span class="underline">____</span>
|
||
was the mother of the goddesses of
|
||
<span class="underline">________</span>
|
||
</div>
|
||
</span>
|
||
<span id="flashcard_intro_c_back">
|
||
<div class="fcard_bg" src="pics/fcards_intro.png" sx=400 sy=0></div>
|
||
<div style="position: absolute; width:250px; top:50px; left:140px; line-height:1.1em;">
|
||
Memory is the mother of Inspiration
|
||
</div>
|
||
</span>
|
||
|
||
</div>
|
||
|
||
|
||
</body>
|
||
|
||
</html>
|
||
|
||
<script src="js/minpubsub.src.js"></script>
|
||
<script src="js/comic.js"></script>
|