Nicky Case
4 years ago
parent
16d3e92370
commit
6ed9ca9a47
|
After Width: | Height: | Size: 657 B |
@ -0,0 +1,805 @@
|
||||
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
_______ ___ ____________ ___ _______ ____________________________ _ __
|
||||
/ __/ _ \/ _ |/ ___/ __/ _ \ / _ \/ __/ _ \/ __/_ __/ _/_ __/ _/ __ \/ |/ /
|
||||
_\ \/ ___/ __ / /__/ _// // / / , _/ _// ___/ _/ / / _/ / / / _/ // /_/ / /
|
||||
/___/_/ /_/ |_\___/___/____/ /_/|_/___/_/ /___/ /_/ /___/ /_/ /___/\____/_/|_/
|
||||
|
||||
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>
|
||||
|
After Width: | Height: | Size: 580 KiB |