calendar and misc stuff

ch2.html

@@ -34,7 +34,7 @@
 <panel w=500 h=400>
 <pic src="pics/leit0.png" sx=500 sy=0></pic> <!-- poker: me vs brain -->
 <words x=10 y=10 w=430 h=60>
-	This method is called The Leitner System.
+	This setup is called The Leitner Box.
 	It's like a card game you play against yourself!
 </words>
 <words x=30 y=300 w=430 h=60>
@@ -43,36 +43,34 @@
 </words>
 </panel>
 
-<panel w=400 h=200 bg="#bada55">
+<panel w=500 h=400>
-"wait, what's a flashcard?"
+<!--<pic src="pics/leit0.png" sx=500 sy=0></pic> curve + box -->
-<!-- This is, ya goof -->
+<words x=10 y=10 w=430 h=90>
-<!--<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>-->
+	Remember: we need to space out our reviews with <i>increasing gaps of time</i>.
-</panel>
+	In the Leitner Box, we double the gap for each Level!
-
+</words>
-<panel w=400 h=200 bg="#bada55">
+<words x=30 y=270 w=430 h=90>
-"what kind of stuff can I learn with flashcards?"
+	So we review Level 1 every day, Level 2 every two days, Level 3 every <i>FOUR</i> days,
-<!-- This is, ya goof -->
+	Level 4 every <i>EIGHT</i> days... and so on.
-<!--<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>-->
-</panel>
-
-<panel w=600 h=80>
-<words w=600 x=-15 no-bg>
-	We need to space out our recalls with <i>increasing gaps of time</i>.
-	So, here's a calendar of when to review which Level's cards:
 </words>
 </panel>
 
-<panel w=600 h=300 bg="#bada55">
+<panel w=600 h=60>
-<!-- Note: Level 4 THEN 2 THEN 1... -->
+<words w=600 x=-15 no-bg>
+	Here's what that looks like over a 64-day, looping calendar:
+</words>
+</panel>
+
+<panel w=600 h=400 bg="#fff">
+<sim x=0 y=0 w=600 h=400 src="sims/calendar"></sim>
 </panel>
 
 
 <!-- Part 1.2: Leitner Rules -->
 
-<panel w=600 h=80>
+<panel w=600 h=60>
 <words w=600 x=-15 no-bg>
-	But how do cards move <i>between</i> Levels?
+	Now, how <i>do</i> you play this game of Spaced Repetition Solitaire?
-	How do you play this game of Spaced Repetition Solitaire?
 </words>
 </panel>
 
@@ -90,9 +88,9 @@
 <panel w=500 h=430>
 <pic src="pics/leit0.png" sx=500 sy=450></pic> <!-- valhalla -->
 <words x=10 y=10 w=430 h=90>
-	When you review the cards in a Level, first, shuffle them.
+	Every day, review your Levels from highest to lowest.
-	Then, try to recall them.
+	Shuffle each Level's cards first.
-	Each card you get right goes up one Level.
+	Every card you get right goes up <i>one</i> Level.
 </words>
 <words x=30 y=330 w=430 h=60>
 	(If you're already at the final Level, congrats!
@@ -103,12 +101,12 @@
 <panel w=500 h=400>
 <pic src="pics/leit0.png" sx=0 sy=900></pic> <!-- HIGH STAKES -->
 <words x=10 y=10 w=430 h=60>
-	But each card you get wrong... goes
+	However, every card you get wrong... has to go
 	<i>all the way back down to Level 1.</i>
 </words>
 <words x=30 y=300 w=430 h=60>
-	(You can change the rules – it's <i>your</i> shoebox –
+	(You can change the rules – I mean, it's <i>your</i> shoebox –
-	but I recommend playing it this way)
+	but I recommend playing this way)
 </words>
 </panel>
 
@@ -126,13 +124,14 @@
 
 <panel w=600 h=80>
 <words w=600 x=-15 no-bg>
-	And that's it! 
+	And that's all there is to it! 
-	Here's how the game plays out over several days:
+	Here's how the game plays out, over several days:
 	(Later, we'll see a sim for several <i>months</i>)
 </words>
 </panel>
 
-<panel w=600 h=300 bg="#bada55">
+<panel w=600 h=520 bg="#fff">
+<sim x=0 y=0 w=600 h=520 src="sims/leitner"></sim>
 </panel>
 
 
@@ -141,7 +140,7 @@
 
 <panel w=600 h=110>
 <words w=600 x=-15 no-bg>
-	Each daily session takes 20-30 minutes.
+	Each daily review takes 20-30 minutes.
 	Instead of watching a TV episode, you could play a card game –
 	and remember anything you want <i>for life</i>.
 </words>
@@ -174,11 +173,12 @@
 
 <panel w=600 h=50>
 <words w=600 x=-15 no-bg>
-	Here's what that looks like, over several months:
+	Here's how the game plays out, over several months:
 </words>
 </panel>
 
-<panel w=600 h=300 bg="#bada55">
+<panel w=600 h=520 bg="#fff">
+<sim x=0 y=0 w=600 h=520 src="sims/leitner"></sim>
 </panel>
 
 
@@ -194,8 +194,8 @@
 </words>
 </panel>
 
-<panel w=600 h=400 bg="#bada55">
+<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>-->
+<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=leit_a,leit_b,leit_c"></sim>
 </panel>
 
 
@@ -206,27 +206,27 @@
 <words w=600 x=-15 no-bg>
 	Spaced Repetition almost seems too good to be true.
 	<br>
-	And it is... <i>IF</i> you fall for 3 very common pitfalls.
+	And it is... <i>IF</i> you fall for some very common pitfalls.
 </words>	
 </panel>
 
 <panel w=500 h=450>
 <pic src="pics/leit1.png" sx=500 sy=0></pic> <!-- Library, humor -->
-<words x=10 y=10 w=430 h=60>
+<words x=10 y=10 w=420 h=60>
-	Spaced Repetition will fail if your cards feel
+	Memory isn't a bookshelf
-	bloated, disconnected, or meaningless.
+	where you collect random giant books to impress others.
 </words>
-<words x=30 y=350 w=430 h=60>
+<words x=10 y=350 w=450 h=60>
-	Memory isn't a private library,
+	That's to say: Spaced Repetition will fail if your cards feel
-	where you hoard a bunch of random books to impress others.
+	<i>bloated</i>, <i>disconnected</i> or <i>meaningless</i>.
 </words>
 </panel>
 
 <panel w=500 h=450>
 <pic src="pics/leit1.png" sx=500 sy=450></pic> <!-- Jigsaw ANGRY FACE -->
 <words x=10 y=10 w=430 h=90>
-	Memory is more like a jigsaw puzzle, full of tiny pieces joined together.
+	Instead, memory is like a jigsaw puzzle: full of small, connected pieces.
-	(This is also how neurons work: lots of tiny, connected things)
+	(This is also how neurons work: lots of small, connected things)
 </words>
 <words x=30 y=380 w=430 h=30>
 	It's not about <i>collection</i>, it's about <i>connection</i>.
@@ -236,19 +236,26 @@
 <panel w=500 h=400>
 <pic src="pics/leit1.png" sx=500 sy=900></pic>
 <words x=10 y=10 w=410 h=60>
-	So, to get the most out of Spaced Repetition,
+	Thus, to get the most out of Spaced Repetition,
 	you must make your cards...
 </words>
 <!--SMALL, CONNECTED, and MEANINGFUL.-->
 </panel>
 
+
+<panel w=450 h=60>
+<words w=450 x=-15 no-bg>
+	Let's see how.
+</words>	
+</panel>
+
 <!-- Part 2.2: Small -->
 
 <panel w=600 h=150>
 <pic src="pics/leit2.png" sx=0 sy=0></pic>
-<words x=10 y=10 w=200>
+<!--words x=10 y=10 w=200>
 	<b>SMALL</b>
-</words>
+</words-->
 </panel>
 
 <panel w=450 h=50>
@@ -257,24 +264,52 @@
 </words>	
 </panel>
 
-<panel w=400 h=200 bg="#bada55">
+<panel w=600 h=300 bg="#e0e0e0">
-<!-- Mitochrondria? -->
+<sim x=80 y=0 w=440 h=300 src="sims/singlecard?card=mitochondria_all"></sim>
-<!--<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>-->
 </panel>
 
-<panel w=450 h=350>
+<panel w=450 h=380>
 <pic src="pics/leit2.png" sx=0 sy=450></pic>
 <words x=10 y=10 w=400 h=30>
 	It's too big. Too much information.
 </words>
-<words x=10 y=250 w=400 h=60>
+<words x=10 y=250 w=400 h=90>
-	Instead, let's cut in up into a bunch of smaller, connected pieces,
+	Let's cut it up into smaller, connected pieces!
-	like so:
+	As a rule of thumb, each flashcard should contain only <i>one</i> idea.
+	Like so:
 </words>
 </panel>
 
-<panel w=400 h=600 bg="#bada55">
+<panel w=264 h=180 bg="#e0e0e0">
-<!--<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>-->
+<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>
+
+<panel w=264 h=180 bg="#e0e0e0">
+<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard?card=mitochondria_5" 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_6" 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_7" 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_8" class="small_card"></sim>
 </panel>
 
 <panel w=450 h=90>
@@ -289,24 +324,23 @@
 
 <panel w=600 h=150>
 <pic src="pics/leit2.png" sx=0 sy=150></pic>
-<words x=10 y=10 w=200>
+<!--words x=10 y=10 w=200>
 	<b>CONNECTED</b>
-</words>
+</words-->
 </panel>
 
 <panel w=450 h=110>
 <words w=450 x=-15 no-bg>
 	This card is... alright.
 	It's an English word on the front, French word on the back.
-	It's the standard for most flashcards:
+	It's the standard for most language-learning flashcards:
 </words>	
 </panel>
 
-<panel w=400 h=200 bg="#bada55">
+<panel w=600 h=300 bg="#e0e0e0">
-<!--<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>-->
+<sim x=80 y=0 w=440 h=300 src="sims/singlecard?card=cat"></sim>
 </panel>
 
-
 <panel w=450 h=400>
 <pic src="pics/leit2.png" sx=0 sy=800></pic>
 <words x=10 y=10 w=400 h=60>
@@ -314,20 +348,19 @@
 </words>
 <words x=10 y=300 w=400 h=60>
 	If you connected it to
-	<i>images, sounds, context, and/or personal details!</i>
+	<i>pictures, sounds, context, and/or personal details!</i>
 	Like so:
 </words>
 </panel>
 
-<panel w=400 h=200 bg="#bada55">
+<panel w=600 h=300 bg="#e0e0e0">
-<!-- comically FAT cat -->
+<sim x=80 y=0 w=440 h=300 src="sims/singlecard?card=cat2"></sim>
-<!--<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>-->
 </panel>
 
 <panel w=600 h=300>
 <pic src="pics/leit2.png" sx=600 sy=0></pic>
-<words x=10 y=10 w=200>
+<words x=10 y=10 w=210>
-	The front now has a drawing of a cat (image)
+	The front now has a drawing of a cat (picture)
 	with a fill-in-the-blank French sentence (context: grammar)
 	about my childhood cat, Stripes. (personal)
 </words>
@@ -335,12 +368,12 @@
 
 <panel w=600 h=300>
 <pic src="pics/leit2.png" sx=600 sy=300></pic>
-<words x=10 y=10 w=200>
+<words x=10 y=10 w=210>
-	The back now has a symbol of the noun's gender (image),
+	The back now has a symbol of the noun's gender (picture),
 	its pronunciation (sound*),
-	and a warning not to use the female version. (context: slang)
+	and a warning about the female version of the noun. (context: slang)
 </words>
-<words w=330 x=240 y=230 no-bg fontsize=20>
+<words w=330 x=250 y=225 no-bg fontsize=20>
 	* Obviously, paper cards can't play sounds.
 	But apps like Anki/Tinycards can!
 </words>
@@ -358,16 +391,16 @@
 
 <panel w=600 h=150>
 <pic src="pics/leit2.png" sx=0 sy=300></pic>
-<words x=10 y=10 w=200>
+<!--words x=10 y=10 w=200>
 	<b>MEANINGFUL</b>
-</words>
+</words-->
 </panel>
 
 <panel w=500 h=350>
 <pic src="pics/leit2.png" sx=450 sy=600></pic> <!-- examples: programming, ukulele, french -->
 <words x=10 y=10 w=450 h=60>
 	Personally, here's how I've learnt best:
-	First, I try to <b>do</b> something.
+	First, I try (emphasis on <i>try</i>) to <b>do</b> something.
 </words>
 </panel>
 
@@ -380,13 +413,8 @@
 </words>
 </panel>
 
-<panel w=400 h=200 bg="#bada55">
+<panel w=600 h=300 bg="#e0e0e0">
-<!--
+<sim x=80 y=0 w=440 h=300 src="sims/singlecard?card=learndo"></sim>
-..and then back to doing.
--->
-<!--
-...and then back to learning.
--->
 </panel>
 
 <panel w=450 h=30>
@@ -420,16 +448,15 @@
 <panel w=600 h=90>
 <words w=600 x=-15 no-bg>
 	Speaking of learning, let's practice recalling what we've learnt:
-	(this is the second-last time!)
+	(this will be the second-last time!)
 </words>
 </panel>
 
-<panel w=600 h=400 bg="#bada55">
+<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>-->
+<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=leit_d,leit_b,leit_a,leit_c"></sim>
 </panel>
 
 
-
 <!-- Part 2.5: Outro -->
 
 <panel w=500 h=450>
@@ -440,34 +467,34 @@
 <!-- SMALL, CONNECTED, MEANINGFUL -->
 <words x=30 y=320 w=430 h=90>
 	...are why it's consensus among the Spaced Repetition community that,
-	for the most part,
+	after a while,
-	<b>you should make your own cards.</b>
+	<b>you should start making your own cards.</b>
 </words>
 </panel>
 
 <panel w=400 h=400>
 <pic src="pics/leit3.png" sx=0 sy=450></pic> <!-- me, talking -->
-<words x=10 y=10 w=300 no-bg>
+<words x=10 y=20 w=300 no-bg>
 	This way, you can connect facts to things <i>you</i> know,
-	to images and sounds <i>you</i> like,
+	to pictures and sounds <i>you</i> like,
 	in service of something <i>you</i> love.
 </words>
 </panel>
 
 <panel w=400 h=400>
 <pic src="pics/leit3.png" sx=400 sy=450></pic>
-<words x=10 y=10 w=300 no-bg>
+<words x=10 y=15 w=300 no-bg>
 	That's why, in the <i>final</i> part of this interactive comic,
-	you're going to make your own cards!
+	you're going to make your <i>own</i> cards!
 </words>
-<words x=30 y=160 w=170 no-bg>
+<words x=30 y=165 w=170 no-bg>
-	And these cards will be about...
+	And those cards will be about...
 </words>
 </panel>
 
 <panel w=400 h=400>
 <pic src="pics/leit3.png" sx=800 sy=450></pic> <!-- goofy pic -->
-<words x=130 y=10 w=230 fontsize=150 no-bg>
+<words x=0 y=10 w=230 fontsize=150 no-bg color="#ffffff">
 	YOU
 </words>
 </panel>
@@ -481,25 +508,288 @@
 
 <div id="labels">
 
-<div id="default_labels">
+<!-- Calendar -->
-	<span id="leitner_day">
+<span id="calendar_day">
-		Day [N]
+	On Day [N]...
-	</span>
+</span>
-	<span id="leitner_step_to_review">
+<span id="calendar_review">
-		to review: Level
+	review Levels [N] (<i>in that order</i>)
-	</span>
+</span>
-	<span id="leitner_step_reviewing">
+<span id="calendar_loop">
-		review Level [N]
+	(and then loop back to Day 1!)
-	</span>
+</span>
-	<span id="leitner_step_new">
+
-		add [N] new cards
+<!-- Leitner Box -->
-	</span>
+<span id="leitner_day">
-	<span id="leitner_step_stats">
+	Day [N]
-		total: [N] cards!
+</span>
-	</span>
+<span id="leitner_step_to_review">
-	<span id="leitner_step_stats_2">
+	to review: Level
-		([N] in very-long-term memory)
+</span>
-	</span>
+<span id="leitner_step_reviewing">
+	review Level [N]
+</span>
+<span id="leitner_step_new">
+	add [N] new cards
+</span>
+<span id="leitner_step_stats">
+	total: [N] cards!
+</span>
+<span id="leitner_step_stats_2">
+	([N] in very-long-term memory)
+</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>
+
+
+
+
+
+
+
+<!-- Flashcards -->
+<span id="flashcard_cat_front">
+	<div class="fcard_center" style="height:100px">
+		<div style="font-size:120px; height:75px;">
+			cat
+		</div>
+		<div>
+			(english)
+		</div>
+	</div>
+</span>
+<span id="flashcard_cat_back">
+	<div class="fcard_center" style="height:100px">
+		<div style="font-size:120px; height:75px;">
+			chat
+		</div>
+		<div>
+			(french)
+		</div>
+	</div>
+</span>
+<span id="flashcard_cat2_front">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=0></div>
+	<div class="fcard_center"></div>
+</span>
+<span id="flashcard_cat2_back">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=0></div>
+	<div class="fcard_center"></div>
+</span>
+<!-- TODO: SOUND WHEN FLIP -->
+
+<span id="flashcard_learndo_front">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=240></div>
+	<div class="fcard_center" style="height:195px; font-size:33px;">
+		...then back to doing...
+	</div>
+</span>
+<span id="flashcard_learndo_back">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=240></div>
+	<div class="fcard_center" style="height:195px; font-size:33px;">
+		...then back to learning...
+	</div>
+</span>
+
+<!-- MITOCHONDRIA IS THE POWERHOUSE OF THE CELL -->
+<span id="flashcard_mitochondria_all_front">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=960></div>
+	<div class="fcard_center" style="height:160px;">
+		What's this?
+	</div>
+</span>
+<span id="flashcard_mitochondria_all_back">
+	<div class="fcard_center" style="height:220px; font-size:20px;">
+		This organelle is called "mitochondria".
+		Mitochondria is the powerhouse of the cell.
+		They're found in almost all eukaryotic (nucleus-having) organisms.
+		The most widely-accepted hypothesis for the origin of mitochondria is Endosymbiotic Theory:
+		around ~1.5 billion years ago, a prokaryotic (nucleus-lacking) cell that was "eaten" by another cell,
+		somehow survived, and has continued to live inside them ever since.
+	</div>
+</span>
+<span id="flashcard_mitochondria_1_front">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=960></div>
+	<div class="fcard_center" style="height:160px;">
+		What's this?
+	</div>
+</span>
+<span id="flashcard_mitochondria_1_back">
+	<div class="fcard_center" style="height:1.5em;">
+		Mitochondria
+	</div>
+</span>
+<span id="flashcard_mitochondria_2_front">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=960></div>
+	<div class="fcard_center" style="height:180px">
+		Mitochondria is the <span class="underline">_______</span> of the cell
+	</div>
+</span>
+<span id="flashcard_mitochondria_2_back">
+	<div class="fcard_center" style="height:150px">
+		powerhouse
+		<span class="bonus_note">
+		// bonus note: seriously though, we'd all be dead without 'em.
+		</span>
+	</div>
+</span>
+<span id="flashcard_mitochondria_3_front">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=960 style="top:45px"></div>
+	<div class="fcard_center" style="height:180px;">
+		Mitochondria is found in almost all <span class="underline">____</span> organisms.
+	</div>
+</span>
+<span id="flashcard_mitochondria_3_back">
+	<div class="fcard_center" style="height:1.5em">
+		eukaryotic
+	</div>
+</span>
+<span id="flashcard_mitochondria_4_front">
+	<div class="fcard_center" style="height:2.5em">
+		Eukaryotes are cells that...
+	</div>
+</span>
+<span id="flashcard_mitochondria_4_back">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=1200></div>
+	<div class="fcard_center" style="width: 200px; left: 170px; top: 20px;">
+		have a nucleus
+		<span class="bonus_note">
+		// bonus note: "eu"=good, "karyon"=kernel
+		</span>
+	</div>
+</span>
+<span id="flashcard_mitochondria_5_front">
+	<div class="fcard_center" style="height:2.5em">
+		Prokaryotes are cells that...
+	</div>
+</span>
+<span id="flashcard_mitochondria_5_back">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=1200></div>
+	<div class="fcard_center" style="width: 200px; left: 170px; top: 20px;">
+		DON'T have a nucleus
+		<span class="bonus_note">
+		// bonus note: "pro"=before, "karyon"=kernel
+		</span>
+	</div>
+</span>
+<span id="flashcard_mitochondria_6_front">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=960 style="top:10px"></div>
+	<div class="fcard_center" style="height:200px; font-size:35px">
+		The most widely-accepted hypothesis for the origin of mitochondria is...
+	</div>
+</span>
+<span id="flashcard_mitochondria_6_back">
+	<div class="fcard_center" style="height:120px">
+		Endosymbiotic Theory
+		<span class="bonus_note">
+		// bonus note: "endo"=inner, "sym"=together, "bio"=living
+		</span>
+	</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 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 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 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 class="fcard_center" style="height:230px">
+		when a prokaryote was eaten by another cell
+	</div>
+</span>
+
+<!-- Spaced Rep Flashcards -->
+<span id="flashcard_leit_a_front">
+	<div class="fcard_center" style="height:4.5em">
+	In the Leitner Box, we <span class="underline">______</span>
+	the gap (# of days between reviews) for each Level
+	</div>
+</span>
+<span id="flashcard_leit_a_back">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=720 style="left:-5px"></div>
+	<div class="fcard_center" style="height:110px">
+	double the gap
+	</div>
+</span>
+<span id="flashcard_leit_b_front">
+	<div class="fcard_center" style="height:4.5em">
+	The Leitner Box game:
+	<br>
+	when you get a card <i>right</i>, you move it <span class="underline">______</span> .
+	</div>
+</span>
+<span id="flashcard_leit_b_back">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=480></div>
+	<div class="fcard_center" style="height:170px">
+	up one Level
+	</div>
+</span>
+<span id="flashcard_leit_c_front">
+	<div class="fcard_center" style="height:4.5em">
+	The Leitner Box game:
+	<br>
+	when you get a card <i>wrong</i>, you move it <span class="underline">______</span> .
+	</div>
+</span>
+<span id="flashcard_leit_c_back">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=480></div>
+	<div class="fcard_center" style="height:180px">
+	back to Level 1!
+	</div>
+</span>
+<span id="flashcard_leit_d_front">
+	<div class="fcard_center" style="font-size:30px; height:170px;">
+	According to some random comic-game on the internet,
+	my Spaced Repetition flashcards should be
+	<span class="underline">______</span> ,
+	<span class="underline">______</span> , and 
+	<span class="underline">______</span> .
+	</div>
+</span>
+<span id="flashcard_leit_d_back">
+	<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=720></div>
+	<div class="fcard_center" style="color:#fff; height:200px; height: 180px; font-size: 30px;">
+	small, connected &amp; meaningful
+	</div>
+</span>
+
+
+
+
 </div>
 
 </div>

css/comic.css

@@ -84,6 +84,9 @@ b, strong{
 #comic panel sim > label{
 	display:none;
 }
+.small_card{
+	transform: scale(0.6, 0.6);
+}
 
 /**********/
 /* LABELS */

js/comic.js

@@ -54,12 +54,13 @@ window.onload = function(){
 
 	});
 
-	// Words... no bg? And, fontsize?
+	// Words... no bg? And, fontsize, color?
 	words.forEach(function(word){
 		var s = word.style;
 		var val;
 		if(val = word.getAttribute("bg")) s.background = val;
 		if(val = word.getAttribute("fontsize")) s.fontSize = s.lineHeight = val+"px";
+		if(val = word.getAttribute("color")) s.color = val;
 	});
 
 	// Panels... Any MESSAGES?

sims/calendar/calendar.css

@@ -0,0 +1,35 @@
+/* FONT FACE */
+@font-face {
+	font-family: "PatrickHand";
+	font-style: normal;
+	font-weight: 400;
+	src: url(../../css/PatrickHand-Regular.ttf) format('truetype');
+}
+
+body{
+	margin: 0;
+	font-family: "PatrickHand", Helvetica, Arial;
+	color: #000;
+	padding: 0 10px;
+	background: #eee;
+	letter-spacing: 1px;
+	font-size: 25px;
+}
+
+#content{
+	background: #fff;
+	width: 500px;
+	padding: 50px;
+	overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+#container{
+	width: 500px;
+    margin: 0px auto;
+}
+
+#default_labels{
+	display:none;
+}

sims/calendar/calendar.js

@@ -0,0 +1,148 @@
+var canvas = document.getElementById("sim");
+var ctx = canvas.getContext('2d');
+
+var BOXES = [
+	0,0,0,0,
+	0,0,0//,0
+];
+var ANIM_CARDS = BOXES.concat(); // clone
+var ANIM_BOXES = BOXES.concat(); // clone
+var ANIM_EASE = 0.8;
+
+var COLORS = [
+	"#ee4035", // red
+	"#f37736", // orange
+	"#ffdb13", // yellow
+	"#7bc043", // green
+	"#0392cf", // blue
+	"#673888", // indigo-ish
+	"#ef4f91", // violet-ish
+	"#e0e0e0"  // white. VALHALLA.
+];
+
+var DAY = 1;
+var CALENDAR = [
+	[2,1],	[3,1],	[2,1],	[4,1], [2,1],	[3,1],	[2,1],	[1], 
+	[2,1],	[3,1],	[2,1],	[5,1], [4,2,1],	[3,1],	[2,1],	[1], 
+	[2,1],	[3,1],	[2,1],	[4,1], [2,1],	[3,1],	[2,1],	[6,1], 
+	[2,1],	[3,1],	[2,1],	[5,1], [4,2,1],	[3,1],	[2,1],	[1],
+	[2,1],	[3,1],	[2,1],	[4,1], [2,1],	[3,1],	[2,1],	[1], 
+	[2,1],	[3,1],	[2,1],	[5,1], [4,2,1],	[3,1],	[2,1],	[1],
+	[2,1],	[3,1],	[2,1],	[4,1], [2,1],	[3,1],	[2,1],	[7,1], 
+	[2,1],	[3,1],	[6,2,1],[5,1], [4,2,1],	[3,1],	[2,1],	[1], 
+];
+
+var daySlider = $("#day");
+daySlider.oninput = function(){
+
+	window.REDRAW = 30;
+	DAY = daySlider.value;
+
+	// Labels
+	var html = "<b>" + _getLabel("calendar_day").replace("[N]", DAY) + "</b>";
+	if(DAY==64) html += _getLabel("calendar_loop");
+	$("#label_day").innerHTML = html;
+	var QUEUE = CALENDAR[DAY-1]; // -1 offset
+	$("#label_review").innerHTML = _getLabel("calendar_review").replace("[N]", QUEUE.toString() );
+
+}
+
+window.REDRAW = 0;
+function update(){
+
+	// Don't re-draw unnecessarily!
+	if(window.REDRAW>0){
+
+		window.REDRAW -= 1;
+
+		// Clear & Retina
+		ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
+		ctx.save();
+		ctx.scale(2,2);
+
+		//////////////////////////////////////////
+		// DRAW SCHEDULE /////////////////////////
+		//////////////////////////////////////////
+
+		var x = 0;
+		ctx.save();
+		for(var i=0;i<CALENDAR.length;i++){
+			x += 500/(CALENDAR.length+1);
+			var levels = CALENDAR[i];
+			var y = 0;
+			var r = (DAY==i+1) ? 6 : 4;
+			for(var j=0; j<levels.length; j++){
+				var levelNum = levels[j];
+				var color = COLORS[levelNum-1];
+				y = (8-levelNum)*12;
+				ctx.fillStyle = color;
+				ctx.beginPath();
+				ctx.arc(x,y,r,0,Math.TAU,false);
+				ctx.fill();
+			}
+		}
+		ctx.restore();
+
+
+		//////////////////////////////////////////
+		// DRAW BOXES ////////////////////////////
+		//////////////////////////////////////////
+
+		// Draw boxes, 1 to 7
+		for(var i=0;i<BOXES.length;i++){
+			
+			var w = 69;
+			var h = 69;
+
+			// Am I being reviewed today?
+			var levels = CALENDAR[DAY-1]; // -1 offset
+			var activeToday = (levels.indexOf(i+1)>=0); // +1 coz offset
+
+			// Transform...
+			ctx.save();
+			ctx.translate(i*(w+2.5), canvas.height/2-h);
+
+			// Bounce! ANIMATED!
+			var elevation = activeToday ? 10 : 0;
+			ANIM_BOXES[i] = ANIM_BOXES[i]*ANIM_EASE + elevation*(1-ANIM_EASE);
+			ctx.translate(0, -ANIM_BOXES[i]);
+
+			// Fill
+			var color = COLORS[i];
+			ctx.fillStyle = activeToday ? color : "#fff";
+			ctx.fillRect(0, 0, w, h);
+
+			// Stroke
+			if(!activeToday){
+				ctx.strokeStyle = color;
+				var lw = 2;
+				ctx.lineWidth = lw;
+				ctx.beginPath();
+				ctx.rect(lw/2, lw/2, w-lw, h-lw);
+				ctx.stroke();
+			}
+
+			// Number
+			ctx.font = "50px PatrickHand";
+			ctx.textAlign = "center";
+			ctx.textBaseline = "middle";
+			ctx.fillStyle = activeToday ? "#fff": color;
+			ctx.fillText((i+1), w/2, h/2);
+
+			ctx.restore();
+
+		}
+
+		// And, again...
+		ctx.restore();
+
+	}
+
+	requestAnimationFrame(update);
+
+}
+
+window.onload = function(){
+	daySlider.oninput();
+	update();
+};

sims/calendar/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>The Calendar</title>
+	<link rel="stylesheet" type="text/css" href="calendar.css"/>
+</head>
+
+<body>
+<div id="content">
+	<div id="container">
+		<span id="label_day"></span>
+		<input id="day" type="range" style="width:100%" min=1 max=64 step=1 value=1></input>
+		<span id="label_review"></span>
+		<canvas id="sim" width="1000" height="380" style="width:500px; height:190px;"></canvas>
+	</div>
+</div>
+
+<div id="default_labels">
+	<span id="calendar_day">
+		On Day [N]...
+	</span>
+	<span id="calendar_review">
+		review Levels [N] (<i>in that order</i>)
+	</span>
+	<span id="calendar_loop">
+		(and then loop back to Day 1!)
+	</span>
+</div>
+
+</body>
+
+</html>
+
+<script src="../helpers.js"></script>
+<script src="calendar.js"></script>

sims/fcard.css

@@ -1,5 +1,5 @@
 .fcard_center{
-	max-width: 370px;
+	max-width: 360px;
 	position: absolute;
     margin: auto;
     top: 0;
@@ -10,7 +10,19 @@
 }
 .fcard_bg{
 	position:absolute;
-	width:100%;
+	/*width:100%;*/
+	width:400px;
 	height:100%;
-	background:#ff4040;
+	/*background:#ff4040;*/
+	background: #ffffff;
+}
+.underline{
+	letter-spacing: -0.1em;
+}
+.bonus_note{
+	font-size: 30px;
+    line-height: 30px;
+    color: #999;
+    display: block;
+    margin-top: 10px;
 }

sims/helpers.js

@@ -1,3 +1,5 @@
+Math.TAU = Math.PI*2; // i'm twice the number you'll ever be
+
 // The poor man's jQuery
 function $(query){
 	return document.querySelector(query);

sims/leitner/leitner.js

@@ -204,7 +204,7 @@ var COLORS = [
 	"#0392cf", // blue
 	"#673888", // indigo-ish
 	"#ef4f91", // violet-ish
-	"#eeeeee"  // white. VALHALLA.
+	"#e0e0e0"  // white. VALHALLA.
 ];
 var BOXES = [
 	0,0,0,0,