preface words
This commit is contained in:
Nicky Case
parent
8a6cab8a14
commit
ac4272d56c
|
|
@ -38,7 +38,7 @@ window.onload = function(){
|
|||
var y = p.getAttribute("sy") || 0;
|
||||
s.backgroundPosition = (-x)+"px "+(-y)+"px";
|
||||
var w = p.getBoundingClientRect().width;
|
||||
s.backgroundSize = Math.round((3000/w)*50)+"%";
|
||||
s.backgroundSize = ((3000/w)*50).toFixed(2)+"%";
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
|
|
@ -0,0 +1,213 @@
|
|||
<!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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div id="comic">
|
||||
<div class="comic">
|
||||
|
||||
<!-- Muse -->
|
||||
<panel w=500 h=450>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div id="comic">
|
||||
<div class="comic">
|
||||
|
||||
<!-- Muse -->
|
||||
<panel w=500 h=450>
|
||||
|
|
|
|||
Loading…
Reference in New Issue