NotDotTeam/remember
NotDotTeam
/
remember
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

intro TOTALLY DONE

This commit is contained in:
Nicky Case 2018-10-15 14:47:58 -04:00
parent ac4272d56c
commit eebcb809ad
15 changed files with 394 additions and 843 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ch1.html
View File

@ -268,7 +268,7 @@ then when you’re ready, <b>flip the card over &darr;</b>
the memory’s decay slows down...
</words>
<words x=10 y=400 w=300>
...meaning it’ll take <i>longer</i>
...meaning it’ll take <i>longer</i>
to hit the sweet spot next time!
</words>
</panel>
@ -400,7 +400,7 @@ Early feedback helps me a lot. Many thanks in advance!
</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;">
<div style="position: absolute; width: 250px; top: 60px; left:0; line-height: 1.1em;">
Hermann Ebbinghaus
</div>
</span>

91
ch3.html
View File

@ -10,6 +10,7 @@
<body>
<!--
<a name="0"></a>
<div class="divider" style="padding: 80px 0">
<div id="chapter_name" style="margin-bottom:30px;">
@ -59,7 +60,8 @@
</div>
<div id="chapter_links"></div>
</div>
-->
<div class="comic">
<!-- - - - - - - - - - - - -->
@ -97,6 +99,24 @@ So, here's the <i>front</i> of our first flashcard, our question:
<words x=10 y=10 w=430 h=60>
For example, you could use Spaced Repetition to help you learn...
</words>
<words x=120 y=104 w=100 style="text-align:left" no-bg class="comic_text">
a new language
</words>
<words x=320 y=107 w=100 style="text-align:left" no-bg class="comic_text">
a new instrument
</words>
<words x=137 y=180 w=100 style="text-align:left" no-bg class="comic_text">
world history &amp; geography
</words>
<words x=340 y=195 w=150 style="text-align:left" no-bg class="comic_text">
details of friends' lives
</words>
<words x=129 y=283 w=200 style="text-align:left" no-bg class="comic_text">
anything interesting you find, anywhere!
</words>
<words x=389 y=290 w=100 style="text-align:left" no-bg class="comic_text">
every pokémon
</words>
<words x=80 y=380 w=380 h=30>
Now, you write <i>your</i> answer on the back:
</words>
@ -143,6 +163,21 @@ So, here's the <i>front</i> of our first flashcard, our question:
That may be too philosophical, so here's some
concrete examples of a <i>why</i> behind a <i>what:</i>
</words>
<words x=130 y=105 w=350 style="text-align:left" no-bg class="comic_text">
WHAT: a new language
<br>
WHY: to speak to friends, family, lovers in their native tongue
</words>
<words x=130 y=210 w=350 style="text-align:left" no-bg class="comic_text">
WHAT: world history &amp; geography
<br>
WHY: to put the news in perspective
</words>
<words x=130 y=290 w=350 style="text-align:left" no-bg class="comic_text">
WHAT: anything interesting
<br>
WHY: curiosity, for its own sake!
</words>
<words x=210 y=380 w=250 h=30>
So... what's <i>your</i> why?
</words>
@ -179,13 +214,39 @@ So, here's the <i>front</i> of our first flashcard, our question:
<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.
<a target="_blank" href="https://en.wikipedia.org/wiki/Leitner_system">The Leitner Box</a>,
<a target="_blank" href="https://apps.ankiweb.net/">Anki</a>,
and
<a target="_blank" href="https://tinycards.duolingo.com/">TinyCards</a>.
Here's the more detailed pros-and-cons of each:
</words>
<words x=160 y=140 w=300 fontsize=21 style="text-align:left" no-bg>
<b>Leitner Box</b>
<br>
Pros: arts-and-craftsy, easy to start
<br>
Cons: not as portable than an app
</words>
<words x=160 y=275 w=300 fontsize=21 style="text-align:left" no-bg>
<b>Anki</b>
<br>
Pros: huge community, open-source, lots of powerful features
<br>
Cons: kinda ugly interface
</words>
<words x=160 y=405 w=300 fontsize=21 style="text-align:left" no-bg>
<b>TinyCards</b>
<br>
Pros: beautiful design, easy to start
<br>
Cons: less powerful than Anki
</words>
<words x=10 y=530 w=450 h=60>
(Want something else?
Here's a few other tools:
SuperMemo, NimbleNotes, Mnemosyne)
<a target="_blank" href="https://www.supermemo.com/">SuperMemo</a>,
<a target="_blank" href="https://www.nimblenotes.com/">NimbleNotes</a>,
<a target="_blank" href="https://mnemosyne-proj.org/">Mnemosyne</a>)
</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.
@ -444,7 +505,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<!-- Classroom -->
<panel w=500 h=400>
<panel w=500 h=350>
<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
@ -452,7 +513,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</words>
</panel>
<panel w=500 h=400>
<panel w=500 h=350>
<pic src="pics/end1.png" sx=500 sy=800></pic>
<words x=10 y=10 w=430 h=90>
If you're a teacher,
@ -461,12 +522,12 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</words>
</panel>
<panel w=500 h=400>
<panel w=500 h=350>
<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...
your Muse...
</words>
</panel>
@ -487,6 +548,14 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</panel>
<!-- want more? further reading & credits below! -->
<panel fadeInOn="flip_the_end" w=600 h=90>
<words w=600 x=-15 y=0 no-bg>
(want more? scroll down for further reading &amp; credits!)
<br>
&darr; &darr; &darr; &darr; &darr;
</b>
</words>
</panel>
@ -597,9 +666,11 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<!-- SUGGESTIONS -->
<span id="you_what_suggestions">
<li>Everything</li>
<li>herp</li>
<li>derp</li>
<li>anything interesting!</li>
<li>a language</li>
<li>music</li>
<li>coding</li>
<li>personal</li>
<li>(other)</li>
</span>
<span id="you_why_suggestions">

145
ch3_codetest.html
View File

@ -1,145 +0,0 @@
<!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 - -->
<!-- - - - - - - - - - - - -->
<!-- Part 1.1: Leitner Calendar -->
<panel w=500 h=450>
<pic src="pics/leit0.png" sx=0 sy=0></pic>
<words x=10 y=10 w=430 h=60>
dasd sad assad ddasdasdasdas asdasdsd asds
</words>
<words x=30 y=350 w=430 h=60>
asdasdassaasd asdassadas sadasd s asdas as
</words>
</panel>
<panel w=600 h=400 bg="#fff">
<sim x=0 y=0 w=600 h=400 src="sims/type/?card=test"></sim>
</panel>
<panel w=500 h=450>
<pic src="pics/leit0.png" sx=0 sy=0></pic>
<words x=10 y=10 w=430 h=60>
dasd sad assad ddasdasdasdas asdasdsd asds
</words>
<words x=30 y=350 w=430 h=60>
asdasdassaasd asdassadas sadasd s asdas as
</words>
</panel>
<panel w=600 h=300 bg="#e0e0e0">
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=test&refresh=yes"></sim>
</panel>
<panel w=600 h=300 bg="#e0e0e0">
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=mitochondria_7"></sim>
</panel>
<panel w=600 h=400 bg="#fff">
<sim x=0 y=0 w=600 h=400 src="sims/downloads/all.html"></sim>
</panel>
<!-- - - - - - - - - - -->
<!-- SIMULATION LABELS -->
<!-- - - - - - - - - - -->
<div id="labels">
<!-- MITOCHONDRIA IS THE POWERHOUSE OF THE CELL -->
<span id="flashcard_test_front">
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=960></div>
<div id="fc_words" class="fcard_center" style="height:160px;">
What's this?
</div>
</span>
<span id="flashcard_test_back">
<div id="fc_words" class="fcard_center" editable="test">
Mitochondria
</div>
</span>
<!--
TO TEST DOWNLOADING OF ALL THE CARDS
-->
<span id="flashcard_sci_a_front">
<div id="fc_words" class="fcard_center" style="height:2.5em">
여보세요
Здравствуйте
</div>
</span>
<span id="flashcard_sci_a_back">
<div class="fcard_bg" src="pics/fcards0.png" sx=400 sy=0></div>
<div id="fc_words" style="position: absolute; width: 250px; top:60px; left:150px; line-height: 1.1em;">
你好
こんにちは
</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 id="fc_words" 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 id="fc_words" 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 id="fc_words" 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 id="fc_words" class="fcard_center" style="height:230px">
when a prokaryote was eaten by another cell
</div>
</span>
<span id="flashcard_sci_c_front">
<div id="fc_words" 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 id="fc_words" 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>
</div>
</body>
</html>
<script src="js/minpubsub.src.js"></script>
<script src="js/comic.js"></script>

14
css/comic.css
View File

@ -41,15 +41,15 @@ b, strong{
}
.divider > div{
width: calc(100% - 100px);
min-width: 600px;
max-width: 960px;
min-width: 600px;
max-width: 960px;
margin: 0 auto;
}
.divider > #chapter_name{
font-size: 100px;
line-height: 0.75em;
text-align: left;
margin-bottom: 10px;
line-height: 0.75em;
text-align: left;
margin-bottom: 10px;
}
.divider > #chapter_links{
text-align: right;
@ -125,6 +125,10 @@ b, strong{
.small_card{
transform: scale(0.6, 0.6);
}
.comic_text{
color: rgba(0,0,0,0.5);
line-height: 1em;
}
/**********/
/* LABELS */

301
intro.html Normal file
View File

@ -0,0 +1,301 @@
<!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 &amp; 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 &amp; 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 &uarr;
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>
&darr;
</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>

2
js/comic.js
View File

@ -137,7 +137,7 @@ if($("#gift_wallpaper")){
// Box/App
var showWhat = "other";
var theHow = $("#flashcard_you_how_back").innerText.trim().toLocaleLowerCase();
if(theHow.search("leitner") >= 0){
if(theHow.search("leit") >= 0 || theHow.search("liet") >= 0){ // for typos
showWhat = "leitner";
}else if(theHow.search("anki") >= 0){
showWhat = "anki";

BIN
pics/end0.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 423 KiB

After

Width:  |  Height:  |  Size: 409 KiB

BIN
pics/end1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 323 KiB

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
pics/fcard_frontonly.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 35 KiB

BIN
pics/fcards_ch3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 89 KiB

BIN
pics/fcards_intro.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
pics/intro0.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 3.1 MiB

213
preface.html
View File

@ -1,213 +0,0 @@
<!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=550>
<pic src="pics/intro0.png" sx=0 sy=0></pic>
<words x=10 y=10 w=350 h=60>
In Greek mythology, the Muses, the goddesses of inspiration...
</words>
<words x=10 y=450 w=350 h=60>
...were the daughters of Mnemosyne: the goddess of Memory.
</words>
</panel>
<panel w=600 h=60>
<words w=600 x=-15 no-bg>
So, uh, how's Memory 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=200 y=80 w=260 no-bg>
Not only are lectures, re-reading, and highlighting <i>boring</i>,
scientists have shown they <i>don't work</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=100 y=30 w=320 no-bg>
But, there's another way to learn
that's evidence-based <i>and</i> fun!
</words>
<words x=190 y=125 w=260 no-bg>
It'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=guessgap"></sim> -->
</panel>
<!-- Model: Us & Others -->
<panel w=500 h=450>
<pic src="pics/intro0.png" sx=950 sy=0></pic>
<words x=10 y=10 w=430 h=60>
I first 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 French class.
</words>
</panel>
<panel w=500 h=450>
<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 learn all sorts of things...
</words>
<words x=60 y=350 w=400 h=60>
...and this lil' 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 is “flashcards on steroids”.
</words>
<words x=10 y=220 w=500 h=90>
You test yourself on a fact a few times, spacing out your repetitions over time.
(<i>How</i> it's spaced is crucial, and clever. More on that later.)
</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 one like Spaced Repetition.
</words>
<words x=110 y=130 w=260 no-bg>
That's why I made this interactive comic: to help.
</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=130 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=sci_a,sci_b,sci_c"></sim>
-->
</panel>
<!-- Muse: not lifehack, but control over your memory -->
<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=110 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 for learning...
</words>
</panel>
<panel w=400 h=500>
<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=430 w=120 h=30>
Let's begin.
</words>
</panel>
<!-- - - - - - - - - - -->
<!-- SIMULATION LABELS -->
<!-- - - - - - - - - - -->
<div id="labels">
</div>
</body>
</html>
<script src="js/minpubsub.src.js"></script>
<script src="js/comic.js"></script>

211
preface_a.html
View File

@ -1,211 +0,0 @@
<!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">
<!-- Muse -->
<panel w=500 h=450>
<pic style="background:#bada55"></pic> <!-- Muse. plus fidget spinner. -->
<words x=10 y=10 w=430 h=60>
In Greek mythology, the Muses, the goddesses of inspiration...
</words>
<words x=30 y=350 w=430 h=60>
...were the daughters of Mnemosyne: the goddess of Memory.
</words>
</panel>
<!-- Pfffft. Lookup. Rote -->
<panel w=500 h=450>
<pic style="background:#bada55"></pic>
<words x=10 y=10 w=430 h=60>
PFFFFFFFFFT
</words>
<words x=30 y=350 w=430 h=60>
Who cares about MEMORY anymore?
</words>
</panel>
<panel w=500 h=450>
<pic style="background:#bada55"></pic> <!-- Teacher: "lecture lecture lecture" -->
<words x=10 y=10 w=430 h=60>
Seriously, why memorize anything when we can just look it up?
</words>
<words x=30 y=350 w=430 h=60>
And besides, isn't rote memorization bad?
Shouldn't we focus instead on teaching creativity and critical thinking?
</words>
</panel>
<!-- Need mem -->
<panel w=500 h=450>
<pic style="background:#bada55"></pic> <!-- greeks & mnemosyne w/ foundation -->
<words x=10 y=10 w=430 h=60>
On the contrary: cognitive scientists have shown that
creativity and critical thinking <i>require</i> memory.
</words>
<words x=30 y=350 w=430 h=60>
(Imagine trying to compose a poem or essay if you haven't memorized any words!)
</words>
</panel>
<!-- Lectures, highlighting, re-reading? Actually NO! Instead, SR! -->
<panel w=500 h=450>
<pic style="background:#bada55"></pic> <!-- Teacher: "lecture lecture lectu- hey who's talking during class" -->
<words x=10 y=10 w=430 h=60>
That said, the ways most of us try to memorize things... suck.
</words>
<words x=30 y=350 w=430 h=60>
In 2013, a meta-study of 100+ other studies ranked how effective (or not)
different learning techniques are.
</words>
</panel>
Hey, why don't you take a guess at what works &amp; what doesn't?
<!-- Re-reading -->
<panel w=600 h=300 bg="#ff4040">
<!--
What?! Aren't you supposed to get better the more you practice something?
Scroll down, and let's find out what's up...
-->
</panel>
<!-- Testing Yourself -->
<panel w=600 h=300 bg="#ff4040">
<!-- Ah... that's why re-reading doesn't work.
When you re-read, you're only practicing "feeling familiar".
When you test yourself, you're practicing ACTUAL RECALL. -->
</panel>
<!-- Highlighting/underlining -->
<panel w=600 h=300 bg="#ff4040">
<!-- Same problem as re-reading. You're not actually practicing RECALL. -->
</panel>
<!-- Spacing -->
<panel w=600 h=300 bg="#ff4040">
<!-- You know how you cram for an exam, then one month later you remember nothing?
Cramming only works short-term. If you want long-term, space it out.
-->
</panel>
<panel w=500 h=450>
<pic style="background:#bada55"></pic> <!-- dumpster -->
<words x=10 y=10 w=430 h=60>
The most popular study techniques – re-reading, highlighting, cramming...
</words>
<words x=30 y=350 w=430 h=60>
...don't work.
</words>
</panel>
<panel w=500 h=450>
<pic style="background:#bada55"></pic> <!-- combination -->
<words x=10 y=10 w=430 h=60>
Instead, <i>testing yourself</i> and <i>spacing out your learning</i>
are the two most science-backed ways to learn...
</words>
<words x=30 y=350 w=430 h=60>
...which can be combined into a simple but powerful method called “Spaced Repetition”.
</words>
</panel>
<!-- What is Spaced Repetition? -->
<panel w=600 h=300 bg="#ff4040">
<!-- FREAKING AWESOME, THAT'S WHAT -->
</panel>
<panel w=500 h=450>
<pic style="background:#bada55"></pic> <!-- Teacher: "nicky, stop talking during class." "NICKY." -->
<words x=10 y=10 w=430 h=60>
But seriously, at the risk of sounding like a cult,
</words>
<words x=30 y=350 w=430 h=60>
Spaced Repetition has <i>changed my life.</i>
</words>
</panel>
<panel w=500 h=450>
<pic style="background:#bada55"></pic> <!-- examples -->
<words x=10 y=10 w=430 h=60>
Spaced Repetition is most popular for language-learning,
</words>
<words x=30 y=350 w=430 h=60>
but I, and friends I know, are using it to learn so much more!
</words>
</panel>
<panel w=500 h=450>
<pic style="background:#bada55"></pic> <!-- Teacher standing behind Nicky with ruler -->
<words x=10 y=10 w=430 h=60>
In this interactive comic, I want to share with you the science &amp; art of Spaced Repetition...
</words>
<words x=30 y=350 w=430 h=60>
...and help you get started using it <i>today.</i>
</words>
</panel>
And throughout this comic,
you can test yourself on what you've learnt,
in spaced-out intervals.
<b>That is, you'll use Spaced Repetition to learn about Spaced Repetition.</b>
Like so:
<!-- Review -->
<panel w=600 h=400 bg="#ff4040">
<!--
Three popular but ineffective learning techniques are: (re-reading), (highlighting), (cramming)
The two most science-backed ways to learn are: (testing yourself) and (
The Goddess of (Memory) is the mother of the goddesses of (Inspiration)
-->
</panel>
<!-- Not study hacks -->
<panel w=500 h=450>
<pic style="background:#bada55"></pic> <!-- A spanked Nicky -->
<words x=10 y=10 w=430 h=60>
I want to clarify something.
This isn't just a "study trick" or a "life hack".
</words>
<words x=30 y=350 w=430 h=60>
This is a way to take control of your <i>mind.</i>
To make long-term memory a <i>choice</i>.
To develop a lifelong love for learning...
</words>
</panel>
<!-- But, a muse -->
<panel w=500 h=450>
<pic style="background:#bada55"></pic> <!-- Muse. fidget spinner -->
<words x=10 y=10 w=430 h=60>
...to mother your own, inner Muse.
</words>
</panel>
<!-- - - - - - - - - - -->
<!-- SIMULATION LABELS -->
<!-- - - - - - - - - - -->
<div id="labels">
</div>
</body>
</html>
<script src="js/minpubsub.src.js"></script>
<script src="js/comic.js"></script>

256
preface_b.html
View File

@ -1,256 +0,0 @@
<!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=500 h=450>
<pic style="background:#bada55"></pic> <!-- Muse. plus electroswing. -->
<words x=10 y=10 w=430 h=60>
In Greek mythology, the Muses, the goddesses of inspiration...
</words>
<words x=30 y=350 w=430 h=60>
...were the daughters of Mnemosyne: the goddess of Memory.
</words>
</panel>
<!-- Class sucks -->
<!-- But: a better way? (WHAT) -->
<panel w=500 h=250>
<pic style="background:#bada55"></pic> <!-- talking in class -->
<words x=10 y=10 w=430 h=60>
Meanwhile, in classrooms around the world:
</words>
<words x=30 y=150 w=430 h=60>
UGHHHHHHHHHHH
</words>
</panel>
<panel w=500 h=250>
<pic style="background:#bada55"></pic> <!-- talking in class -->
<words x=10 y=10 w=430 h=60>
Memorization gets a bad rap.
</words>
<words x=30 y=150 w=430 h=60>
We all know too well school's "drill and kill" rote memorization.
</words>
</panel>
<panel w=500 h=250>
<pic style="background:#bada55"></pic> <!-- talking in class -->
<words x=10 y=10 w=430 h=60>
But not only are traditional lectures &amp; study techniques boring,
they've been scientifically shown to <i>not work.</i>
</words>
<words x=30 y=150 w=430 h=60>
What if there was a better way?
</words>
</panel>
<panel w=500 h=250>
<pic style="background:#bada55"></pic> <!-- talking in class -->
<words x=10 y=10 w=430 h=60>
What if you could play a memory card game with yourself,
every day for ~20 minutes,
</words>
<words x=30 y=150 w=430 h=60>
which would help you store <i>anything you choose</i>
into your long-term memory <i>forever?</i>
</words>
</panel>
<panel w=500 h=250>
<pic style="background:#bada55"></pic> <!-- talking in class -->
</panel>
<panel w=500 h=250>
<pic style="background:#bada55"></pic> <!-- talking in class -->
<words x=10 y=10 w=430 h=60>
Now, what if I said THIS ALREADY EXISTS.
</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=guessgap"></sim> -->
</panel>
<!-- Model: Us & Others -->
<panel w=500 h=450>
<pic style="background:#bada55"></pic>
<words x=10 y=10 w=430 h=60>
I first started using Spaced Repetition earlier this year,
when I begun learning French on my own.
</words>
<words x=30 y=350 w=430 h=60>
Within two months of using Spaced Repetition,
I'd learnt more words than I did in two <i>years</i>
of high school French.
</words>
</panel>
<panel w=500 h=450>
<pic style="background:#bada55"></pic>
<words x=10 y=10 w=430 h=60>
But wait, there's more!
A friend then showed me how to use Spaced Repetition to learn <i>anything</i>,
not just new languages.
</words>
<words x=30 y=350 w=430 h=60>
Since then, I've also been using it to learn programming,
ukulele chords, poems, and interesting tidbits from articles &amp; talks
I come across.
</words>
</panel>
<panel w=500 h=450>
<pic style="background:#bada55"></pic>
<words x=10 y=10 w=430 h=60>
I've even seen people use Spaced Repetition to
improve their <i>personal lives</i>...
</words>
<words x=30 y=150 w=430 h=60>
by using it to remember details about friends
(birthdays, pets' names, dietary restrictions)
and acquaintances (names, faces, occupations)...
</words>
<words x=30 y=350 w=430 h=60>
or using it to remember what to do/not do,
to make new habits or break bad habits!
</words>
</panel>
<!-- This Comic: YOU. (efficacy) -->
<panel w=500 h=250>
<pic style="background:#bada55"></pic>
<words x=10 y=10 w=430 h=60>
so what's the catch
</words>
</panel>
<panel w=500 h=250>
<pic style="background:#bada55"></pic> <!-- are you a cult -->
<words x=10 y=10 w=430 h=60>
None! It's free, it's evidence-based,
and it's so simple,
you can do Spaced Repetition with a <i>shoebox.</i>
</words>
<words x=30 y=150 w=430 h=60>
In this interactive comic, I'll show you
WHY it works, HOW it works, and help you get started using Spaced Repetition <i>today.</i>
</words>
</panel>
<panel w=500 h=250>
<pic style="background:#bada55"></pic> <!-- is this the initiation ritual -->
<words x=10 y=10 w=430 h=60>
Okay, the catch is this:
it's hard to create <i>any</i> new habit,
even a simple habit like Spaced Repetition.
</words>
<words x=30 y=150 w=430 h=60>
But, I hope this interactive comic will help you take the first few steps.
How?
</words>
</panel>
<panel w=500 h=250>
<pic style="background:#bada55"></pic> <!-- do i need to sacrifice a goat -->
<words x=10 y=10 w=430 h=60>
By having you learn about Spaced Repetition
</words>
<words x=30 y=150 w=430 h=60>
<i>USING</i> Spaced Repetition!
</words>
</panel>
<!-- Ergo: SR WITH SR -->
<panel w=600 h=100>
Heck, let's practice it right now!
Spaced Repetition is like flashcards, but with a twist.
Go through these cards, and see how well you remember them:
</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=500 h=400>
<pic style="background:#bada55"></pic> <!-- clever clock -->
<words x=10 y=10 w=430 h=60>
The twist is in the <i>timing</i>.
Spaced Repetition spaces out when you repeat a card,
in a clever, scientifically-backed way.
</words>
<words x=10 y=150 w=430 h=60>
(we'll practice Spaced Repetition a few more times in this interactive comic)
</words>
<words x=30 y=250 w=430 h=60>
I'll explain more later,
but for now, I want to say what Spaced Repetition is <i>not:</i>
</words>
</panel>
<!-- Muse: not lifehack, but control over your memory -->
<panel w=500 h=250>
<pic style="background:#bada55"></pic> <!-- back in class, sitting in corner -->
<words x=10 y=10 w=430 h=60>
It's <i>not</i> a "study trick".
It's <i>not</i> a "life hack".
</words>
<words x=30 y=150 w=430 h=60>
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 for learning...
</words>
</panel>
<panel w=500 h=450>
<pic style="background:#bada55"></pic> <!-- Muse. -->
<words x=10 y=10 w=430 h=60>
...to mother your own, inner Muse.
</words>
</panel>
<!-- - - - - - - - - - -->
<!-- SIMULATION LABELS -->
<!-- - - - - - - - - - -->
<div id="labels">
</div>
</body>
</html>
<script src="js/minpubsub.src.js"></script>
<script src="js/comic.js"></script>