806 lines
24 KiB
HTML
806 lines
24 KiB
HTML
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
|
_______ ___ ____________ ___ _______ ____________________________ _ __
|
|
/ __/ _ \/ _ |/ ___/ __/ _ \ / _ \/ __/ _ \/ __/_ __/ _/_ __/ _/ __ \/ |/ /
|
|
_\ \/ ___/ __ / /__/ _// // / / , _/ _// ___/ _/ / / _/ / / / _/ // /_/ / /
|
|
/___/_/ /_/ |_\___/___/____/ /_/|_/___/_/ /___/ /_/ /___/ /_/ /___/\____/_/|_/
|
|
|
|
THIS PAGE WAS TO MAKE THE PROMOTIONAL VIDEO TRAILER.
|
|
|
|
PLZ IGNORE.
|
|
|
|
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en"> <!-- TRANSLATOR NOTE: Remember your 2-letter code? Replace "en" with that! -->
|
|
<head>
|
|
|
|
<!-- Meta Stuff -->
|
|
<title>How To Remember Anything Forever-ish</title>
|
|
<!-- TRANSLATOR NOTE: Translate the "content" attribute -->
|
|
<meta name="description" content="an interactive comic on the science of memory"/>
|
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
|
<meta content="utf-8" http-equiv="encoding">
|
|
<meta charset="utf-8">
|
|
<link rel="icon" type="image/png" href="favicon.png">
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" type="text/css" href="css/comic.css"/>
|
|
<meta name="viewport" content="width=600">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="comic">
|
|
|
|
<panel w=600 h=400 bg="#e0e0e0">
|
|
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=promo_a,promo_b,promo_c"></sim>
|
|
</panel>
|
|
|
|
</div>
|
|
|
|
<a name="0"></a>
|
|
<div class="divider divider_title">
|
|
<iframe class="splash" gotosrc="sims/splash/" scrolling="no"></iframe>
|
|
<div id="divider_container">
|
|
<div id="chapter_name">
|
|
<div>
|
|
HOW TO REMEMBER ANYTHING FOREVER-ISH
|
|
</div>
|
|
<!-- TRANSLATOR NOTE: add a hint of silliness at the end, like "ish" or "sorta" -->
|
|
</div>
|
|
<div style="text-align:right;">
|
|
by nicky case · oct 2018
|
|
<br>
|
|
<span id="translation_credits"></span>
|
|
<!-- TRANSLATOR NOTE: when you update translations.txt, your name will appear here! -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br><br><br><br>
|
|
<br><br><br><br>
|
|
|
|
<div class="comic">
|
|
|
|
<div id="language_options"></div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
<!-- LABELS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
|
|
<div id="labels">
|
|
|
|
|
|
<span id="flashcard_promo_a_front">
|
|
<div class="fcard_bg" src="pics/fcards_promo.png" sx=0 sy=0></div>
|
|
<div id="fc_words" class="fcard_center" style="height:2.5em"></div>
|
|
</span>
|
|
<span id="flashcard_promo_a_back">
|
|
<div class="fcard_bg" src="pics/fcards_promo.png" sx=400 sy=0></div>
|
|
<div id="fc_words" class="fcard_center" style="height:2.5em"></div>
|
|
</span>
|
|
<span id="flashcard_promo_b_front">
|
|
<div class="fcard_bg" src="pics/fcards_promo.png" sx=0 sy=240></div>
|
|
<div id="fc_words" class="fcard_center" style="height:2.5em"></div>
|
|
</span>
|
|
<span id="flashcard_promo_b_back">
|
|
<div class="fcard_bg" src="pics/fcards_promo.png" sx=400 sy=240></div>
|
|
<div id="fc_words" class="fcard_center" style="height:2.5em"></div>
|
|
</span>
|
|
<span id="flashcard_promo_c_front">
|
|
<div class="fcard_bg" src="pics/fcards_promo.png" sx=0 sy=480></div>
|
|
<div id="fc_words" class="fcard_center" style="height:2.5em"></div>
|
|
</span>
|
|
<span id="flashcard_promo_c_back">
|
|
<div class="fcard_bg" src="pics/fcards_promo.png" sx=400 sy=480></div>
|
|
<div id="fc_words" class="fcard_center" style="height:2.5em"></div>
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<!-- Chapter Links -->
|
|
<span id="label_chapter_links">
|
|
<a href="#0">Intro</a>
|
|
·
|
|
<a href="#1">The Science</a>
|
|
·
|
|
<a href="#2">The Art</a>
|
|
·
|
|
<a href="#3">Get Started!</a>
|
|
·
|
|
<a href="#bye">Credits</a>
|
|
</span>
|
|
|
|
<!-- Multi Card Labels -->
|
|
<span id="multicard_q">
|
|
try to recall ↑
|
|
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>
|
|
↓
|
|
</span>
|
|
<span id="multicard_done_2">
|
|
that's all, folks!
|
|
<br>
|
|
↓
|
|
</span>
|
|
|
|
<!-- Ebbinghaus Simulation -->
|
|
<span id="ebbinghaus_y_axis">
|
|
strength of memory →
|
|
</span>
|
|
<span id="ebbinghaus_x_axis">
|
|
time →
|
|
</span>
|
|
<span id="ebbinghaus_decay">
|
|
decay:
|
|
</span>
|
|
<span id="ebbinghaus_forgetting">
|
|
sweet spot:
|
|
</span>
|
|
<span id="ebbinghaus_recall">
|
|
timing of recall:
|
|
</span>
|
|
<span id="ebbinghaus_recalls">
|
|
timing of recalls:
|
|
</span>
|
|
<span id="ebbinghaus_auto">
|
|
auto-optimize!
|
|
</span>
|
|
|
|
<!-- Leitner Calendar -->
|
|
<!--
|
|
TRANSLATOR NOTE:
|
|
The exact three characters [N] is how the code knows where to put the number.
|
|
When you translate, make sure the [N] is there if it was there in the original.
|
|
-->
|
|
<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>
|
|
|
|
<!-- Leitner Box simulation -->
|
|
<span id="leitner_day">
|
|
Day [N]
|
|
</span>
|
|
<span id="leitner_step_to_review">
|
|
to review: Level
|
|
</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] retired)
|
|
</span>
|
|
<span id="leitner_button_next_step">
|
|
next step
|
|
</span>
|
|
<span id="leitner_button_next_day">
|
|
next day
|
|
</span>
|
|
<span id="leitner_button_next_week">
|
|
next week
|
|
</span>
|
|
<span id="leitner_button_next_month">
|
|
next month
|
|
</span>
|
|
<span id="leitner_slider_new">
|
|
[N] new cards a day
|
|
</span>
|
|
<span id="leitner_slider_wrong">
|
|
recall [N]% of cards <i>wrong</i>
|
|
</span>
|
|
<span id="leitner_reset">
|
|
RESET
|
|
</span>
|
|
|
|
<!-- Typing Cards -->
|
|
<span id="type_question">
|
|
Q:
|
|
<!--
|
|
TRANSLATOR NOTE: "Q" short for Question.
|
|
Dunno if other languages have similar one-letter abbreviations.
|
|
If not, just type the full translated word for "Question"
|
|
-->
|
|
</span>
|
|
<span id="type_placeholder">
|
|
type your answer here
|
|
</span>
|
|
<span id="type_suggestions">
|
|
or pick one of these suggestions:
|
|
</span>
|
|
|
|
<!-- Suggestions -->
|
|
<span id="you_what_suggestions">
|
|
<li>Anything interesting!</li>
|
|
<li>A language</li>
|
|
<li>Music</li>
|
|
<li>Coding</li>
|
|
<li>Personal</li>
|
|
<li>(other)</li>
|
|
</span>
|
|
<span id="you_why_suggestions">
|
|
<li>For people I love</li>
|
|
<li>For my own sake</li>
|
|
<li>For curiosity's sake</li>
|
|
<li>(other)</li>
|
|
</span>
|
|
<span id="you_how_suggestions">
|
|
<li>Leitner Box</li>
|
|
<li>Anki</li>
|
|
<li>TinyCards</li>
|
|
<li>(other)</li>
|
|
</span>
|
|
<span id="you_when_suggestions">
|
|
<li>In the morning</li>
|
|
<li>On my commute</li>
|
|
<li>In the evening</li>
|
|
<li>(other)</li>
|
|
</span>
|
|
|
|
<!-- Gifts -->
|
|
<span id="gift_wallpaper_what">
|
|
WHAT:
|
|
</span>
|
|
<span id="gift_wallpaper_why">
|
|
WHY:
|
|
</span>
|
|
<span id="gift_wallpaper_do_1">
|
|
DO
|
|
</span>
|
|
<span id="gift_wallpaper_do_2">
|
|
ME!
|
|
</span>
|
|
<span id="gift_wallpaper_filename">
|
|
wallpaper
|
|
</span>
|
|
<span id="gift_wallpaper_desktop">
|
|
a wallpaper for your desktop,
|
|
</span>
|
|
<span id="gift_wallpaper_phone">
|
|
a lock-screen wallpaper for your phone,
|
|
</span>
|
|
<span id="gift_app_leitner">
|
|
a video, by my dear friend Chris Walker, on how to craft your very own Leitner Box!
|
|
<br><br>
|
|
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/uvF1XuseZFE?rel=0"
|
|
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
|
|
style="display:block; margin:0 auto"></iframe>
|
|
<br>
|
|
(And here's a similar tutorial, in IKEA form:)
|
|
<br><br>
|
|
<a target="_blank" href="./pdf/leitner.pdf" style="display: block; text-align: center;">
|
|
<img src="./pdf/thumbnail.png" width="450"/><br>click to download PDF</a>
|
|
</span>
|
|
<span id="gift_app_anki">
|
|
a link to
|
|
<a target="_blank" href="https://apps.ankiweb.net/">download Anki!</a>
|
|
And here's a video tutorial on how to use it:
|
|
<br><br>
|
|
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/sQkdB3cJwn0?start=180&rel=0"
|
|
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
|
|
style="display:block; margin:0 auto"></iframe>
|
|
</span>
|
|
<span id="gift_app_tiny">
|
|
a link to
|
|
<a target="_blank" href="https://tinycards.duolingo.com/">
|
|
TinyCards!</a>
|
|
(i recommend checking out their
|
|
<a target="_blank" href="https://tinycards.duolingo.com/users/TinyGeo">
|
|
geography decks</a>)
|
|
</span>
|
|
<span id="gift_app_other">
|
|
links to tutorials on crafting a Leitner Box
|
|
<a target="_blank" href="https://www.youtube.com/watch?v=uvF1XuseZFE">
|
|
[video]</a>
|
|
<a target="_blank" href="./pdf/leitner.pdf">
|
|
[pdf]</a>,
|
|
<a target="_blank" href="https://apps.ankiweb.net/">
|
|
the Anki app</a>,
|
|
and
|
|
<a target="_blank" href="https://tinycards.duolingo.com/">
|
|
TinyCards</a>!
|
|
</span>
|
|
|
|
<!-- Downloading Cards -->
|
|
<span id="download_all">
|
|
DOWNLOAD ALL CARDS
|
|
</span>
|
|
<span id="download_all_downloading">
|
|
DOWNLOADING...
|
|
</span>
|
|
<span id="download_all_done">
|
|
DONE! Check your Downloads folder.
|
|
</span>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
TRANSLATOR NOTE:
|
|
|
|
One more section to go!
|
|
|
|
-->
|
|
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
<!-- FLASHCARDS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
|
|
|
<!--
|
|
TRANSLATOR NOTE:
|
|
The CSS for the flashcards is really touchy, so DO NOT MODIFY THE CSS.
|
|
That means, try as much as possible to make your text shorter or the same length as the original text.
|
|
Good luck!
|
|
-->
|
|
|
|
<!-- - - - - - - - - - - - -->
|
|
<!-- INTRO - - - - - - - - -->
|
|
<!-- - - - - - - - - - - - -->
|
|
|
|
<span id="flashcard_spaced_rep_front">
|
|
<div class="fcard_center" style="height:2.5em">
|
|
and the name of this game is...
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_spaced_rep_back">
|
|
<div class="fcard_bg" src="pics/fcards_intro.png" sx=0 sy=0></div>
|
|
<div class="fcard_center" style="color:white; font-size:74px; height:1.6em; line-height:0.8em;">
|
|
SPACED REPETITION
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_intro_a_front">
|
|
<div id="fc_words" class="fcard_center" style="height:2.5em">
|
|
Spaced Repetition = <span class="underline">____</span> + <span class="underline">____</span>
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_intro_a_back">
|
|
<div class="fcard_bg" src="pics/fcards_intro.png" sx=0 sy=240></div>
|
|
<div id="fc_words" class="fcard_center" style="height:2.5em">
|
|
testing + time
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_intro_b_front">
|
|
<div id="fc_words" class="fcard_center" style="height:4.5em">
|
|
3 common but ineffective learning/teaching practices are...
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_intro_b_back">
|
|
<div id="fc_words" class="fcard_center" style="height:2.2em">
|
|
...lectures, cramming, and re-reading
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_intro_c_front">
|
|
<div id="fc_words" class="fcard_center" style="height:4.4em">
|
|
In Greek Mythology,
|
|
the goddess of <span class="underline">____</span>
|
|
was the mother of the goddesses of
|
|
<span class="underline">________</span>
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_intro_c_back">
|
|
<div class="fcard_bg" src="pics/fcards_intro.png" sx=400 sy=0></div>
|
|
<div id="fc_words" style="position: absolute; width:250px; top:50px; left:140px; line-height:1.1em;">
|
|
Memory is the mother of Inspiration
|
|
</div>
|
|
</span>
|
|
|
|
<!-- - - - - - - - - - - - -->
|
|
<!-- CHAPTER 1: The Science -->
|
|
<!-- - - - - - - - - - - - -->
|
|
|
|
<span id="flashcard_guessgap_front">
|
|
<div class="fcard_center" style="height:2.5em">
|
|
the best way to space out your recalls is...
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_guessgap_back">
|
|
<div class="fcard_bg" src="pics/fcards0.png" sx=0 sy=0></div>
|
|
<div class="fcard_center" style="height:2.5em">
|
|
...with <i>increasing</i> gaps!
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_sci_a_front">
|
|
<div id="fc_words" class="fcard_center" style="height:3.5em">
|
|
The pioneer of the experimental science of memory was...
|
|
</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;">
|
|
Hermann Ebbinghaus
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_sci_b_front">
|
|
<div id="fc_words" class="fcard_center" style="height:3.4em">
|
|
The Forgetting Curve (<i>without</i> any recalls) looks like...
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_sci_b_back">
|
|
<div class="fcard_bg" src="pics/fcards0.png" sx=0 sy=240></div>
|
|
<div id="fc_words" style="position: absolute; width: 280px; top: 70px; right: 20px; font-size:20px; line-height: 1.1em;">
|
|
(note: it decays quickly, then slowly - "exponential decay")
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_sci_c_front">
|
|
<div id="fc_words" class="fcard_center" style="height:3.4em">
|
|
The Forgetting Curve (<i>with</i> well-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>
|
|
|
|
|
|
<!-- - - - - - - - - - - - -->
|
|
<!-- Chapter 2: The Art - - -->
|
|
<!-- - - - - - - - - - - - -->
|
|
|
|
<span id="flashcard_leit_a_front">
|
|
<div id="fc_words" 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 id="fc_words" class="fcard_center" style="height:110px">
|
|
double the gap
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_leit_b_front">
|
|
<div id="fc_words" 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 id="fc_words" class="fcard_center" style="height:170px">
|
|
up one Level
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_leit_c_front">
|
|
<div id="fc_words" 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 id="fc_words" class="fcard_center" style="height:180px">
|
|
back to Level 1!
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_leit_d_front">
|
|
<div id="fc_words" 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 id="fc_words" class="fcard_center" style="color:#fff; height:200px; height: 180px; font-size: 30px;">
|
|
small, connected & meaningful
|
|
</div>
|
|
</span>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<span id="flashcard_cat_front">
|
|
<div class="fcard_center" style="height:100px">
|
|
<div style="font-size:120px; height:75px;">
|
|
cat
|
|
<!--
|
|
TRANSLATOR NOTE:
|
|
If your language is NOT French, then change this to "cat" in YOUR language
|
|
-->
|
|
</div>
|
|
<div>
|
|
(english)
|
|
<!--
|
|
TRANSLATOR NOTE:
|
|
If your language is NOT French, then change this to YOUR language
|
|
-->
|
|
</div>
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_cat_back">
|
|
<div class="fcard_center" style="height:100px">
|
|
<!--
|
|
TRANSLATOR NOTE: DO NOT TRANSLATE. Leave as French!
|
|
-->
|
|
<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">
|
|
<audio controls id="HACK_audio" style="position: absolute; top: 115px; left: 30px; transform: scale(0.5);">
|
|
<source gotosrc="../../audio/chat.mp3" type="audio/mpeg">
|
|
</audio>
|
|
</div>
|
|
</span>
|
|
|
|
<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>
|
|
|
|
|
|
|
|
<!-- - - - - - - - - - - - -->
|
|
<!-- Chapter 3: Get Started -->
|
|
<!-- - - - - - - - - - - - -->
|
|
|
|
<span id="flashcard_you_what_front">
|
|
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=0 sy=0></div>
|
|
<div id="fc_words" style="line-height: 1.1em; position: absolute; width: 190px; margin: 0; top: 50px; left: 180px;">
|
|
WHAT do you want to learn?
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_you_what_back">
|
|
<div id="fc_words" class="fcard_center" editable="you_what" style="height:1.2em">
|
|
Anything interesting!
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_you_why_front">
|
|
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=400 sy=0></div>
|
|
<div id="fc_words" style="line-height: 1.1em; position: absolute; width: 190px; margin: 0; top: 50px; left: 180px;">
|
|
WHY do you want to learn?
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_you_why_back">
|
|
<div id="fc_words" class="fcard_center" editable="you_why" style="height:1.2em">
|
|
For curiosity's sake
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_you_how_front">
|
|
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=0 sy=240></div>
|
|
<div id="fc_words" style="line-height: 1.1em; position: absolute; width: 190px; margin: 0; top:31px; left: 180px;">
|
|
HOW do you want to do Spaced Repetition?
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_you_how_back">
|
|
<div id="fc_words" class="fcard_center" editable="you_how" style="height:1.2em">
|
|
Leitner Box
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_you_when_front">
|
|
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=400 sy=240></div>
|
|
<div id="fc_words" style="line-height: 1.1em; position: absolute; width: 190px; margin: 0; top:31px; left: 180px;">
|
|
WHEN do you want to do Spaced Repetition?
|
|
</div>
|
|
</span>
|
|
<span id="flashcard_you_when_back">
|
|
<div id="fc_words" class="fcard_center" editable="you_when" style="height:1.2em">
|
|
In the evening
|
|
</div>
|
|
</span>
|
|
|
|
<span id="flashcard_the_end_front">
|
|
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=0 sy=480></div>
|
|
</span>
|
|
<span id="flashcard_the_end_back">
|
|
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=400 sy=480></div>
|
|
<div id="fc_words" class="fcard_center" style="top:30px; font-size:50px;">
|
|
THE END
|
|
</div>
|
|
</span>
|
|
|
|
|
|
</div>
|
|
|
|
<!--
|
|
|
|
TRANSLATOR NOTE:
|
|
|
|
Congrats! NOW you've translated everything!
|
|
|
|
Again, from the deepest part of my heart, I want to sincerely thank you
|
|
for helping spread this page to more people, in more languages.
|
|
|
|
Oh wait, just one more thing: go to translations.txt,
|
|
and add your translation there so this project "knows" your page exists.
|
|
|
|
And once that's done, send a Pull Request, and your translation will go live!
|
|
|
|
THANK YOU! <3
|
|
~ Nicky Case
|
|
|
|
-->
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
<script src="js/howler.core.min.js"></script>
|
|
<script src="js/minpubsub.src.js"></script>
|
|
<script src="js/comic.js"></script>
|