NotDotTeam/remember
NotDotTeam/remember
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add thumbnail to readme

Browse source
This commit is contained in:
Nicky Case 2018-10-26 13:41:01 -04:00
parent 6ed9ca9a47
commit 9c40f20a3a
4 changed files with 3 additions and 808 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -1,4 +1,4 @@
!["thumbnail"]()
!["Some Thumbnail Image"](https://ncase.me/remember/sharing/thumbnail.png)
**[How To Remember Anything Forever-ish](https://ncase.me/remember/)** is dedicated to the public domain,
and was made possible thanks to [my Patreon supporters](https://www.patreon.com/ncase)! Love y'all~

4
index.html
View file

@ -1950,10 +1950,10 @@ Remember, if your translated word is too big, you can modify the CSS! (especiall
<p>
👀 Thank you to all my playtesters for making this project not suck:
<span style="font-size: 18px; line-height: 0px; color: #999;">
<span style="font-size: 19px; line-height: 0px; color: #999;">
Aatish Bhatia, Adam Filinovich, Aimee Jarboe, Alex Jaffe, Amit Patel, Andy Matuschak, B Cavello, Chris Walker, Frank Lantz, Gal Green, Glen Chiacchieri, Hamish Todd, Henry Reich, Jacque Goupil, James Lytle,
Jez Swanson, Josh Comeau, Kayle Sawyer, Levi Robertson, Marcelo Gallardo, Martyna Wasiluk, Michael Nielsen, Mikayla Hutchinson, Mike Gifford, Monica Srivastava, Owen Landgren,
Paul Butler, Paul Simeon, Philipp Wacker, Pontus Granström, Rowan, Sebastian Morr, SpacieCat, Tim &amp; Alexandra Swast, Tom Hermans, Toph Tucker, Will Harris-Braun, Zeno Rogue
Paul Butler, Paul Simeon, Philipp Wacker, Pontus Granström, Rowan, Sebastian Morr, SpacieCat, Tanya Short, Tim &amp; Alexandra Swast, Tom Hermans, Toph Tucker, Will Harris-Braun, Zeno Rogue
</span>
</p>

BIN
pics/fcards_promo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 MiB

805
promo.html
View file

@ -1,805 +0,0 @@
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
_______ ___ ____________ ___ _______ ____________________________ _ __
/ __/ _ \/ _ |/ ___/ __/ _ \ / _ \/ __/ _ \/ __/_ __/ _/_ __/ _/ __ \/ |/ /
_\ \/ ___/ __ / /__/ _// // / / , _/ _// ___/ _/ / / _/ / / / _/ // /_/ / /
/___/_/ /_/ |_\___/___/____/ /_/|_/___/_/ /___/ /_/ /___/ /_/ /___/\____/_/|_/
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 &middot; 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>
&middot;
<a href="#1">The Science</a>
&middot;
<a href="#2">The Art</a>
&middot;
<a href="#3">Get Started!</a>
&middot;
<a href="#bye">Credits</a>
</span>
<!-- Multi Card Labels -->
<span id="multicard_q">
try to recall &uarr;
then flip ↻
</span>
<span id="multicard_cards_left">
(cards left: [N])
</span>
<span id="multicard_a">
did you remember this?
</span>
<span id="multicard_no">
nah, try again
</span>
<span id="multicard_yes">
yup, onwards!
</span>
<span id="multicard_done">
done for now! keep scrolling
<br>
&darr;
</span>
<span id="multicard_done_2">
that's all, folks!
<br>
&darr;
</span>
<!-- Ebbinghaus Simulation -->
<span id="ebbinghaus_y_axis">
strength of memory &rarr;
</span>
<span id="ebbinghaus_x_axis">
time &rarr;
</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 &amp; 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>