wrote ch3 and preface, also formatted ch3
This commit is contained in:
Nicky Case
parent
9c772e3c1d
commit
46ace5a46e
496
ch3.html
496
ch3.html
|
|
@ -12,45 +12,432 @@
|
|||
|
||||
<div id="comic">
|
||||
|
||||
|
||||
<!-- - - - - - - - - - - - -->
|
||||
<!-- WHAT, WHY, HOW, WHEN - -->
|
||||
<!-- - - - - - - - - - - - -->
|
||||
|
||||
<!-- - - -->
|
||||
<!-- WHAT -->
|
||||
<!-- - - -->
|
||||
|
||||
<!-- 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
|
||||
<panel w=500 h=350>
|
||||
<pic style="background:#bada55"></pic> <!-- WHAT, WHY, HOW, and WHEN? -->
|
||||
<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=400 bg="#fff">
|
||||
<sim x=0 y=0 w=600 h=400 src="sims/type/?card=test"></sim>
|
||||
<panel w="600" h="80">
|
||||
<words w="600" x="-15" no-bg="">
|
||||
Now, let's make a flashcard! I'll give you the question on the front,
|
||||
you write your <i>own</i> answer on the back. Here's the front:
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=400 h=240 bg="#bada55" style="margin-bottom:20px">
|
||||
<!-- WHAT do you want to learn? -->
|
||||
</panel>
|
||||
|
||||
<panel w=500 h=450>
|
||||
<pic src="pics/leit0.png" sx=0 sy=0></pic>
|
||||
<pic style="background:#bada55"></pic>
|
||||
<words x=10 y=10 w=430 h=60>
|
||||
dasd sad assad ddasdasdasdas asdasdsd asds
|
||||
For example, you could use Spaced Repetition to help you learn...
|
||||
</words>
|
||||
<words x=30 y=350 w=430 h=60>
|
||||
asdasdassaasd asdassadas sadasd s asdas as
|
||||
<words x=80 y=380 w=380 h=30>
|
||||
Now, you write <i>your</i> answer on the back:
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=400 h=240 bg="#ff4040" style="margin-top:20px">
|
||||
<!-- Suggestions:
|
||||
What do you want to learn?
|
||||
EVERYTHING (just curiosity)
|
||||
a new language | an instrument | details of friends' lives |
|
||||
the history of your country | countries of the world |
|
||||
the entire list of pokémon
|
||||
-->
|
||||
</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 & 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 card is:
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=400 h=240 bg="#bada55" style="margin-bottom:20px">
|
||||
<!-- WHY do you want to learn X? -->
|
||||
</panel>
|
||||
|
||||
<panel w=500 h=450>
|
||||
<pic style="background:#bada55"></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=210 y=380 w=250 h=30>
|
||||
So... what's <i>your</i> why?
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=400 h=240 bg="#ff4040" style="margin:20px 0 10px 0">
|
||||
<!-- Suggestions:
|
||||
-->
|
||||
</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=400 h=240 bg="#bada55" style="margin-bottom:20px">
|
||||
<!-- HOW do you want to do Spaced Repetition? (with what tool?) -->
|
||||
</panel>
|
||||
|
||||
<panel w=500 h=700>
|
||||
<pic style="background:#bada55"></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.
|
||||
Here's the more detailed pros-and-cons of each:
|
||||
</words>
|
||||
<words x=10 y=530 w=450 h=60>
|
||||
(Want something else?
|
||||
Here's a few other tools:
|
||||
SuperMemo, NimbleNotes, Mnemosyne)
|
||||
</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 & helpful!
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=600 h=50>
|
||||
<words w=600 x=-15 no-bg>
|
||||
So, what's it gonna be?
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=400 h=240 bg="#ff4040" style="margin-bottom:20px">
|
||||
<!-- Suggestions:
|
||||
-->
|
||||
</panel>
|
||||
|
||||
|
||||
|
||||
<!-- - - -->
|
||||
<!-- WHEN -->
|
||||
<!-- - - -->
|
||||
|
||||
<panel w=500 h=450>
|
||||
<pic style="background:#bada55"></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=30 y=380 w=430 h=30>
|
||||
Why? Because making <i>any</i> new habit is hard.
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=500 h=500>
|
||||
<pic style="background:#bada55"></pic> <!-- thanks, you too! -->
|
||||
<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=400 w=440 h=60>
|
||||
...it'll become a habit, for better or worse.
|
||||
So for a Spaced Repetition habit, the question is:
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=400 h=240 bg="#bada55" style="margin:20px 0">
|
||||
<!-- WHEN do you want to do Spaced Repetition? -->
|
||||
</panel>
|
||||
|
||||
<panel w=500 h=500>
|
||||
<pic style="background:#bada55"></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=370 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 style="background:#bada55"></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>
|
||||
|
||||
<panel w=400 h=240 bg="#ff4040" style="margin-bottom:20px">
|
||||
<!-- Suggestions:
|
||||
-->
|
||||
</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=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>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- - - - - - - - - - - - - - - -->
|
||||
<!-- DOWNLOADABLES TO START NOW - -->
|
||||
<!-- - - - - - - - - - - - - - - -->
|
||||
|
||||
<br><br>
|
||||
|
||||
<panel w=500 h=250>
|
||||
<pic style="background:#bada55"></pic> <!-- brain squirm -->
|
||||
<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 style="background:#bada55"></pic> <!-- brain given gift -->
|
||||
<words x=160 y=30 w=100 no-bg>
|
||||
SO...
|
||||
</words>
|
||||
<words x=230 y=90 w=250 no-bg>
|
||||
here's some
|
||||
<br>
|
||||
<b style="font-size:30px">
|
||||
COOL STUFF
|
||||
</b>
|
||||
<br>
|
||||
you can download!
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<!-- Reminder Wallpaper -->
|
||||
|
||||
<panel w=600 h=100>
|
||||
<words x=-15 y=0 w=600 no-bg style="text-align:left" fontsize=30>
|
||||
<b>FIRST:</b>
|
||||
a wallpaper for your desktop,
|
||||
<!--a lock screen wallpaper for your phone,-->
|
||||
to remind you to play your Spaced Repetition game each day!
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<!-- Leitner Calendar / Anki -->
|
||||
|
||||
<panel w=600 h=100>
|
||||
<words x=-15 y=0 w=600 no-bg style="text-align:left" fontsize=30>
|
||||
<b>SECOND:</b>
|
||||
<!--a looping 64-day calendar for your Leitner Box!-->
|
||||
a link to the Anki app!
|
||||
(and here's a video tutorial on how to get started)
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
|
||||
<!-- All flashcards -->
|
||||
|
||||
<panel w=600 h=100>
|
||||
<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=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 style="background:#bada55"></pic> <!-- holding card -->
|
||||
<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="#ff4040">
|
||||
<!--
|
||||
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=leit_d,leit_b,leit_a,leit_c"></sim>
|
||||
-->
|
||||
</panel>
|
||||
|
||||
<panel w=240 h=300>
|
||||
<pic style="background:#bada55"></pic>
|
||||
<words x=0 y=10 w=210 no-bg>
|
||||
Sniff...
|
||||
It's always so hard to say goodbye...
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=240 h=300>
|
||||
<pic style="background:#bada55"></pic> <!-- blow nose into a card -->
|
||||
</panel>
|
||||
|
||||
<panel w=500 h=250>
|
||||
<pic style="background:#bada55"></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=400>
|
||||
<pic style="background:#bada55"></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=400>
|
||||
<pic style="background:#bada55"></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
|
||||
(& other science-based study habits) early on.
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=500 h=400>
|
||||
<pic style="background:#bada55"></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 style="background:#fff"></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=test&refresh=yes"></sim>
|
||||
<!-- THE END, with full cast of characters -->
|
||||
<!--
|
||||
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=mitochondria_all"></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>
|
||||
<!-- want more? further reading & credits below! -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -59,75 +446,6 @@
|
|||
<!-- - - - - - - - - - -->
|
||||
|
||||
<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 class="fcard_center" style="height:160px;">
|
||||
What's this?
|
||||
</div>
|
||||
</span>
|
||||
<span id="flashcard_test_back">
|
||||
<div class="fcard_center" editable="test">
|
||||
Mitochondria
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<!--
|
||||
|
||||
TO TEST DOWNLOADING OF ALL THE CARDS
|
||||
|
||||
-->
|
||||
|
||||
<span id="flashcard_sci_a_front">
|
||||
<div 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 style="position: absolute; width: 250px; top: 60px; right: 0; 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 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>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,145 @@
|
|||
<!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>
|
||||
|
|
@ -37,8 +37,8 @@ b, strong{
|
|||
}
|
||||
#comic panel{
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
/*border: 2px solid #ccc;*/
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,211 @@
|
|||
<!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">
|
||||
|
||||
<!-- 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 & 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 & 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>
|
||||
|
|
@ -1,27 +1,22 @@
|
|||
/**********************************
|
||||
|
||||
1. ONLY when you press the button, does it take labels & pics & such... @done
|
||||
- Draw text box in correct position @done
|
||||
- With word wrap @done
|
||||
|
||||
2. Loads 'em all...
|
||||
|
||||
3. Draws html to canvasses!
|
||||
- draw SOMETHING @done
|
||||
- draw background image (if any) @done
|
||||
- draw text box in correct position & text align with word wrap
|
||||
|
||||
4. Lets you download all of 'em, as a .zip! @done
|
||||
- Detect device
|
||||
- Download a wallpaper/lockscreen
|
||||
|
||||
**********************************/
|
||||
|
||||
// CARDS TO LOAD
|
||||
var CARDNAMES = [
|
||||
"test",
|
||||
"sci_a",
|
||||
"mitochondria_7",
|
||||
"mitochondria_8",
|
||||
"sci_c"
|
||||
];
|
||||
|
||||
|
||||
var download_btn = $("#download");
|
||||
download_btn.onclick = function(){
|
||||
|
||||
|
|
@ -64,14 +59,15 @@ download_btn.onclick = function(){
|
|||
canvasses.forEach(function(results){
|
||||
var filename = results[0];
|
||||
var canvas = results[1];
|
||||
zip.file(filename+".png", canvas.toDataURL().substr(22), {base64: true});
|
||||
//zip.file(filename+".png", canvas.toDataURL().substr(22), {base64: true});
|
||||
document.body.appendChild(canvas);
|
||||
});
|
||||
|
||||
// Download...
|
||||
zip.generateAsync({type:"blob"})
|
||||
/*zip.generateAsync({type:"blob"})
|
||||
.then(function(content) {
|
||||
saveAs(content, "flashcards.zip");
|
||||
});
|
||||
});*/
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -129,10 +125,58 @@ function _drawToCanvas(filename, dom){
|
|||
// Draw text
|
||||
drawBG.then(function(){
|
||||
|
||||
// Draw the innerText, w/e
|
||||
// Get font size
|
||||
var words = dom.querySelector("#fc_words");
|
||||
var fontsize = words.style.fontSize || 40;
|
||||
fontsize = parseInt(fontsize);
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "top";
|
||||
ctx.fillStyle = "#000";
|
||||
ctx.font = "20px PatrickHand";
|
||||
ctx.fillText(dom.innerText, 10, 50);
|
||||
ctx.font = fontsize+"px PatrickHand, Helvetica, Arial";
|
||||
|
||||
// Line Height
|
||||
var lineHeight = words.style.lineHeight || "1.1em";
|
||||
if(lineHeight.includes("em")){
|
||||
lineHeight = fontsize * parseFloat(lineHeight);
|
||||
}
|
||||
|
||||
// Width & Lineheight
|
||||
var maxWidth = words.style.width || 360;
|
||||
maxWidth = parseInt(maxWidth);
|
||||
|
||||
// Get position
|
||||
var position = {x:0, y:0};
|
||||
if(words.classList.contains("fcard_center")){
|
||||
var h = words.style.height || "44px";
|
||||
if(h.includes("em")){
|
||||
h = fontsize * parseFloat(h);
|
||||
}else if(h.includes("px")){
|
||||
h = parseFloat(h);
|
||||
}
|
||||
|
||||
// Editable?
|
||||
if(words.getAttribute("editable")){
|
||||
var numLines = testHowManyLines(ctx, dom.innerText.trim(), maxWidth);
|
||||
h = fontsize * numLines;
|
||||
}
|
||||
|
||||
position.x = 200;
|
||||
position.y = (240-h-10)/2;
|
||||
}else{
|
||||
var x = parseFloat(words.style.left)
|
||||
var y = parseFloat(words.style.top)
|
||||
position.x = x + maxWidth/2;
|
||||
position.y = y;
|
||||
}
|
||||
|
||||
// Draw the innerText, w/e
|
||||
wrapText(
|
||||
ctx,
|
||||
dom.innerText.trim(),
|
||||
position.x, position.y,
|
||||
maxWidth,
|
||||
lineHeight
|
||||
);
|
||||
|
||||
// Return it!
|
||||
resolveCanvas([filename, canvas]);
|
||||
|
|
@ -142,3 +186,63 @@ function _drawToCanvas(filename, dom){
|
|||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
function wrapText(context, text, x, y, maxWidth, lineHeight) {
|
||||
var words = text.replace(/\n/g," ").split(' ');
|
||||
words = words.map(word => word.trim());
|
||||
var line = '';
|
||||
for(var n=0; n<words.length; n++){
|
||||
|
||||
var testLine;
|
||||
if(n==0){
|
||||
testLine = line + words[n];
|
||||
}else{
|
||||
testLine = line + " " + words[n];
|
||||
}
|
||||
|
||||
var metrics = context.measureText(testLine);
|
||||
var testWidth = metrics.width;
|
||||
|
||||
if(testWidth>maxWidth && n>0){
|
||||
context.fillText(line, x, y);
|
||||
line = words[n];
|
||||
y += lineHeight;
|
||||
}else{
|
||||
line = testLine;
|
||||
}
|
||||
|
||||
}
|
||||
context.fillText(line, x, y);
|
||||
}
|
||||
|
||||
function testHowManyLines(context, text, maxWidth){
|
||||
var numLines = 1;
|
||||
var words = text.replace(/\n/g," ").split(' ');
|
||||
words = words.map(word => word.trim());
|
||||
var line = '';
|
||||
for(var n=0; n<words.length; n++){
|
||||
|
||||
var testLine;
|
||||
if(n==0){
|
||||
testLine = line + words[n];
|
||||
}else{
|
||||
testLine = line + " " + words[n];
|
||||
}
|
||||
|
||||
var metrics = context.measureText(testLine);
|
||||
var testWidth = metrics.width;
|
||||
|
||||
if(testWidth>maxWidth && n>0){
|
||||
//context.fillText(line, x, y);
|
||||
line = words[n];
|
||||
numLines++;
|
||||
}else{
|
||||
line = testLine;
|
||||
}
|
||||
|
||||
}
|
||||
//context.fillText(line, x, y);
|
||||
|
||||
return numLines;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ if(_getQueryVariable("refresh")=="yes"){
|
|||
|
||||
var _reAlign = function(){
|
||||
var bounds = dom.getBoundingClientRect();
|
||||
dom.style.top = (((240-bounds.height)/2)-10) +"px";
|
||||
dom.style.top = (((240-bounds.height-10)/2)) +"px";
|
||||
};
|
||||
_reAlign();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue