remember/ch3.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>

<!--
<a name="0"></a>
<div class="divider" style="padding: 80px 0">
	<div id="chapter_name" style="margin-bottom:30px;">
		[UNTITLED SPACED REPETITION THING]
	</div>
	<div id="chapter_subtitle">
		by nicky case, oct 2018
	</div>
</div>

<br><br>

<a name="1"></a>
<div class="divider">
	<div id="chapter_name">
		THE SCIENCE
		<span class="small_of">
		of
		</span>
		<br>
		SPACED REPETITION
	</div>
	<div id="chapter_links"></div>
</div>

<br><br>

<a name="2"></a>
<div class="divider">
	<div id="chapter_name">
		THE ART
		<span class="small_of">
		of
		</span>
		<br>
		SPACED REPETITION
	</div>
	<div id="chapter_links"></div>
</div>

<br><br>

<a name="3"></a>
<div class="divider">
	<div id="chapter_name">
		GET STARTED TODAY!
	</div>
	<div id="chapter_links"></div>
</div>
-->

<div class="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=500 h=250 bg="#e0e0e0">
<!-- WHAT do you want to learn? -->
<sim x=29 y=-20 w=440 h=300 src="sims/singlecard/?card=you_what&front_only=yes"
	 style="width: 440px; height: 300px; transform: scale(0.83,0.83) rotate(3deg);"></sim>
<img src="pics/fcard_frontonly.png" style="width:100%; height:100%; position:absolute; top:0; left:0;"/>
</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=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>
</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 &amp; 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=500 h=250 bg="#e0e0e0">
<!-- WHY do you want to learn X? -->
<sim x=29 y=-20 w=440 h=300 src="sims/singlecard/?card=you_why&front_only=yes"
	 style="width: 440px; height: 300px; transform: scale(0.83,0.83) rotate(3deg);"></sim>
<img src="pics/fcard_frontonly.png" style="width:100%; height:100%; position:absolute; top:0; left:0;"/>
</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=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>
</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=500 h=250 bg="#e0e0e0">
<!-- HOW do you want to do Spaced Repetition? (with what tool?) -->
<sim x=29 y=-20 w=440 h=300 src="sims/singlecard/?card=you_how&front_only=yes"
	 style="width: 440px; height: 300px; transform: scale(0.83,0.83) rotate(3deg);"></sim>
<img src="pics/fcard_frontonly.png" style="width:100%; height:100%; position:absolute; top:0; left:0;"/>
</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:
	<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:
	<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.
	i just think they're cool &amp; 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=500 h=250 bg="#e0e0e0">
<!-- WHEN do you want to do Spaced Repetition? -->
<sim x=29 y=-20 w=440 h=300 src="sims/singlecard/?card=you_when&front_only=yes"
	 style="width: 440px; height: 300px; transform: scale(0.83,0.83) rotate(3deg);"></sim>
<img src="pics/fcard_frontonly.png" style="width:100%; height:100%; position:absolute; top:0; left:0;"/>
</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 &darr;)
</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=you_why,sci_a,you_when,sci_b,you_how,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=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
	helps you be more confident, and take learning into your own hands.
</words>
</panel>

<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,
	please oh <i>please</i> tell your students about Spaced Repetition
	(&amp; other evidence-based study habits) early on.
</words>
</panel>

<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...
</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">
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=the_end"></sim>
</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>


<!-- - - - - - - - - - -->
<!-- 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 class="fcard_bg" src="pics/fcards_ch3.png" sx=0 sy=0></div>
	<div id="fc_words" class="fcard_center" style="position: absolute; width: 190px; margin: 0; top: 50px; left: 180px;">
		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 class="fcard_bg" src="pics/fcards_ch3.png" sx=400 sy=0></div>
	<div id="fc_words" class="fcard_center" style="position: absolute; width: 190px; margin: 0; top: 50px; left: 180px;">
		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 class="fcard_bg" src="pics/fcards_ch3.png" sx=0 sy=240></div>
	<div id="fc_words" class="fcard_center" style="position: absolute; width: 190px; margin: 0; top:31px; left: 180px;">
		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 class="fcard_bg" src="pics/fcards_ch3.png" sx=400 sy=240></div>
	<div id="fc_words" class="fcard_center" style="position: absolute; width: 190px; margin: 0; top:31px; left: 180px;">
		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>

<!-- THE END -->
<span id="flashcard_the_end_front">
	<div class="fcard_bg" src="pics/fcards_ch3.png" sx=0 sy=480></div>
</span>
<span id="flashcard_the_end_back">
	<div class="fcard_bg" src="pics/fcards_ch3.png" sx=400 sy=480></div>
	<div id="fc_words" class="fcard_center" style="top:30px; font-size:50px;">
		THE END
	</div>
</span>

<!-- SUGGESTIONS -->
<span id="you_what_suggestions">
	<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">
	<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 &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>

<!-- Chapter Links -->
<span id="label_chapter_links">
<a href="#0">
	Intro
</a>
&middot;
<a href="#1">
	The Science
</a>
&middot;
<a href="#2">
	The Art
</a>
&middot;
<a href="#3">
	Get Started!
</a>
</span>


</div>


</body>

</html>

<script src="js/minpubsub.src.js"></script>
<script src="js/comic.js"></script>