wrote ch3 and preface, also formatted ch3
This commit is contained in:
parent
9c772e3c1d
commit
46ace5a46e
496
ch3.html
496
ch3.html
|
@ -12,45 +12,432 @@
|
||||||
|
|
||||||
<div id="comic">
|
<div id="comic">
|
||||||
|
|
||||||
|
|
||||||
<!-- - - - - - - - - - - - -->
|
<!-- - - - - - - - - - - - -->
|
||||||
<!-- WHAT, WHY, HOW, WHEN - -->
|
<!-- WHAT, WHY, HOW, WHEN - -->
|
||||||
<!-- - - - - - - - - - - - -->
|
<!-- - - - - - - - - - - - -->
|
||||||
|
|
||||||
|
<!-- - - -->
|
||||||
|
<!-- WHAT -->
|
||||||
|
<!-- - - -->
|
||||||
|
|
||||||
<!-- Part 1.1: Leitner Calendar -->
|
<panel w=500 h=350>
|
||||||
|
<pic style="background:#bada55"></pic> <!-- WHAT, WHY, HOW, and WHEN? -->
|
||||||
<panel w=500 h=450>
|
<words x=10 y=10 w=450 h=60>
|
||||||
<pic src="pics/leit0.png" sx=0 sy=0></pic>
|
To help you get started with Spaced Repetition <i>today</i>,
|
||||||
<words x=10 y=10 w=430 h=60>
|
you need to answer four questions:
|
||||||
dasd sad assad ddasdasdasdas asdasdsd asds
|
|
||||||
</words>
|
|
||||||
<words x=30 y=350 w=430 h=60>
|
|
||||||
asdasdassaasd asdassadas sadasd s asdas as
|
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=600 h=400 bg="#fff">
|
<panel w="600" h="80">
|
||||||
<sim x=0 y=0 w=600 h=400 src="sims/type/?card=test"></sim>
|
<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>
|
||||||
|
|
||||||
<panel w=500 h=450>
|
<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>
|
<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>
|
||||||
<words x=30 y=350 w=430 h=60>
|
<words x=80 y=380 w=380 h=30>
|
||||||
asdasdassaasd asdassadas sadasd s asdas as
|
Now, you write <i>your</i> answer on the back:
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</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">
|
<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>
|
||||||
|
|
||||||
<panel w=600 h=400 bg="#fff">
|
<!-- want more? further reading & credits below! -->
|
||||||
<sim x=0 y=0 w=600 h=400 src="sims/downloads/all.html"></sim>
|
|
||||||
</panel>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -59,75 +446,6 @@
|
||||||
<!-- - - - - - - - - - -->
|
<!-- - - - - - - - - - -->
|
||||||
|
|
||||||
<div id="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 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>
|
</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{
|
#comic panel{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 250px;
|
width: 400px;
|
||||||
height: 250px;
|
height: 300px;
|
||||||
/*border: 2px solid #ccc;*/
|
/*border: 2px solid #ccc;*/
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
position: relative;
|
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...
|
- Detect device
|
||||||
|
- Download a wallpaper/lockscreen
|
||||||
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
|
|
||||||
|
|
||||||
**********************************/
|
**********************************/
|
||||||
|
|
||||||
// CARDS TO LOAD
|
// CARDS TO LOAD
|
||||||
var CARDNAMES = [
|
var CARDNAMES = [
|
||||||
|
"test",
|
||||||
"sci_a",
|
"sci_a",
|
||||||
"mitochondria_7",
|
"mitochondria_7",
|
||||||
"mitochondria_8",
|
"mitochondria_8",
|
||||||
"sci_c"
|
"sci_c"
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
var download_btn = $("#download");
|
var download_btn = $("#download");
|
||||||
download_btn.onclick = function(){
|
download_btn.onclick = function(){
|
||||||
|
|
||||||
|
@ -64,14 +59,15 @@ download_btn.onclick = function(){
|
||||||
canvasses.forEach(function(results){
|
canvasses.forEach(function(results){
|
||||||
var filename = results[0];
|
var filename = results[0];
|
||||||
var canvas = results[1];
|
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...
|
// Download...
|
||||||
zip.generateAsync({type:"blob"})
|
/*zip.generateAsync({type:"blob"})
|
||||||
.then(function(content) {
|
.then(function(content) {
|
||||||
saveAs(content, "flashcards.zip");
|
saveAs(content, "flashcards.zip");
|
||||||
});
|
});*/
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -129,10 +125,58 @@ function _drawToCanvas(filename, dom){
|
||||||
// Draw text
|
// Draw text
|
||||||
drawBG.then(function(){
|
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.fillStyle = "#000";
|
||||||
ctx.font = "20px PatrickHand";
|
ctx.font = fontsize+"px PatrickHand, Helvetica, Arial";
|
||||||
ctx.fillText(dom.innerText, 10, 50);
|
|
||||||
|
// 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!
|
// Return it!
|
||||||
resolveCanvas([filename, canvas]);
|
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 _reAlign = function(){
|
||||||
var bounds = dom.getBoundingClientRect();
|
var bounds = dom.getBoundingClientRect();
|
||||||
dom.style.top = (((240-bounds.height)/2)-10) +"px";
|
dom.style.top = (((240-bounds.height-10)/2)) +"px";
|
||||||
};
|
};
|
||||||
_reAlign();
|
_reAlign();
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue