This commit is contained in:
Nicky Case 2018-10-26 11:40:16 -04:00
parent 16d3e92370
commit 6ed9ca9a47
295 changed files with 1579 additions and 2710 deletions

BIN
favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 657 B

View File

@ -12,7 +12,7 @@ There's about 3500 words to translate, including the flashcards & further readin
Before doing anything, please read all these steps:
https://github.com/ncase/remember#how-to-translate
(emphasis: do NOT edit the original index.html. make a copy!)
(emphasis: do NOT edit the original index.html. make a copy of this page!)
To make translation less painful, I've added little HTML comments throughout.
Look for the ones that say "TRANSLATOR NOTE".
@ -28,12 +28,40 @@ Good luck, and many thanks again!
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!DOCTYPE html>
<html>
<html lang="en"> <!-- TRANSLATOR NOTE: Remember your 2-letter code? Replace "en" with that! -->
<head>
<meta charset="UTF-8">
<!-- 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">
<!-- Sharing Card Stuff -->
<meta itemprop="name" content="How To Remember Anything Forever-ish"> <!-- TRANSLATE "content" -->
<meta itemprop="description" content="an interactive comic on the science of memory"> <!-- TRANSLATE "content" -->
<meta itemprop="image" content="https://ncase.me/remember/sharing/thumbnail.png">
<meta name="twitter:title" content="How To Remember Anything Forever-ish"> <!-- TRANSLATE "content" -->
<meta name="twitter:description" content="an interactive comic on the science of memory"> <!-- TRANSLATE "content" -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ncasenmare">
<meta name="twitter:creator" content="@ncasenmare">
<meta name="twitter:image" content="https://ncase.me/remember/sharing/thumbnail.png">
<meta property="og:title" content="How To Remember Anything Forever-ish"> <!-- TRANSLATE "content" -->
<meta property="og:description" content="an interactive comic on the science of memory"> <!-- TRANSLATE "content" -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://ncase.me/remember/">
<meta property="og:image" content="https://ncase.me/remember/sharing/thumbnail.png">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/comic.css"/>
<meta name="viewport" content="width=600">
</head>
<body>
@ -155,7 +183,14 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
</words>
<words x=164 y=141 w=300 no-bg>
What if I said there's a memory card game you can play, for 20 minutes a day,
to store <i>anything you choose</i> into long-term memory, <i>forever-ish?</i>
to store <i>anything you choose</i> into long-term memory, <i>forever?*</i>
</words>
</panel>
<panel w=500 h=30 style="margin-top:-5px">
<words w=500 x=-15 y=-15 no-bg style="width: 500px; font-size:0.8em; text-align: right; color:#999;">
* until you die
</words>
</panel>
@ -375,7 +410,7 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
<panel w=500 h=450>
<pic src="pics/sci0.png" sx=900 sy=0></pic>
<words x=10 y=10 w=440 h=90>
<words x=10 y=10 w=450 h=90>
Philosophers have debated about memory for millennia,
but Ebbinghaus was the first to do actual <i>experiments.</i>
(which have been replicated)
@ -875,8 +910,8 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
<panel w=400 h=450>
<pic src="pics/leit0.png" sx=0 sy=1800></pic>
<words x=10 y=10 w=350 h=90>
(Note #3: Oh, and with a few index cards + some tape,
you can make your own <i>actual</i> looping calendar!)
(Note #3: Oh, and with a few index cards &amp; tape,
you can make your own foldable, looping calendar!)
</words>
<words x=10 y=350 w=350 h=60>
(at the end, I'll link to a video tutorial for crafting a Leitner Box)
@ -908,7 +943,7 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
<words x=10 y=10 w=430 h=60>
However, habits are hard. If you start big, you won't get the ball rolling...
</words>
<words x=30 y=300 w=430 h=60>
<words x=20 y=300 w=450 h=60>
But if you start <i>small</i>, you can gain momentum,
and roll your snowball bigger and bigger.
</words>
@ -1650,7 +1685,7 @@ Remember, if your translated word is too big, you can modify the CSS! (especiall
</words>
</panel>
<panel w=600 h=90>
<panel class="not_on_mobile" w=600 h=90>
<words x=-15 y=0 w=600 no-bg style="text-align:left" fontsize=30>
<img src="pics/gift.png" style="height:1em"/>
And finally,
@ -1659,15 +1694,15 @@ Remember, if your translated word is too big, you can modify the CSS! (especiall
</words>
</panel>
<panel w=400 h=100>
<panel class="not_on_mobile" w=400 h=100>
<sim x=0 y=0 w=400 h=100 src="sims/downloads/all.html"></sim>
</panel>
<panel w=600 h=120>
<panel class="not_on_mobile" 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...ish.)
you learnt here today, forever-ish.)
</words>
</panel>
@ -1850,6 +1885,14 @@ Remember, if your translated word is too big, you can modify the CSS! (especiall
</p>
<ul>
<li>
🤓
<a target="_blank" href="http://augmentingcognition.com/ltm.html">
Augmenting Long-Term Memory</a>
by Michael Nielsen
showed me that Spaced Repetition wasn't just a tool for memorization,
it's a tool to build deep understanding. It could even be a way of <i>life</i>.
</li>
<li>
💬
<a target="_blank" href="https://fluent-forever.com/the-book/">
@ -1858,13 +1901,6 @@ Remember, if your translated word is too big, you can modify the CSS! (especiall
convinced me to finally (re)start learning French,
and create a Leitner Box. (my 64-day calendar was adapted from this book)
</li>
<li>
🤓
<a target="_blank" href="http://augmentingcognition.com/ltm.html">
Augmenting Long-Term Memory</a>
by Michael Nielsen
showed me I could use Spaced Repetition to deeply learn almost <i>anything</i>, not just languages.
</li>
<li>
🃏
<a target="_blank" href="https://www.supermemo.com/en/articles/20rules">
@ -1921,6 +1957,20 @@ Remember, if your translated word is too big, you can modify the CSS! (especiall
</span>
</p>
<p>
📹 Thank you Chris Walker for making the
<a target="_blank" href="https://www.youtube.com/watch?v=uvF1XuseZFE">
Leitner Box crafting video!</a>
(P.S:
<a target="_blank" href="http://polytrope.com/">
Chris makes interactive stuff</a>,
too!)
</p>
<p>
🐞 Thank you Omar Rizwan for helping me figure out Mobile Safari's endless pit of bugs
</p>
<p>
🔊 This project was made with Creative Commons assets
from Wikimedia Commons and FreeSounds.
@ -2165,16 +2215,16 @@ When you translate, make sure the [N] is there if it was there in the original.
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!
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>
For those of you who prefer cheesy IKEA parodies, I made this:
(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="500"/><br>click to download PDF</a>
<img src="./pdf/thumbnail.png" width="450"/><br>click to download PDF</a>
</span>
<span id="gift_app_anki">
a link to
@ -2195,7 +2245,7 @@ When you translate, make sure the [N] is there if it was there in the original.
</span>
<span id="gift_app_other">
links to tutorials on crafting a Leitner Box
<a target="_blank" href="TODO">
<a target="_blank" href="https://www.youtube.com/watch?v=uvF1XuseZFE">
[video]</a>
<a target="_blank" href="./pdf/leitner.pdf">
[pdf]</a>,
@ -2569,13 +2619,13 @@ Good luck!
<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... ↻
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... ↻
then back to learning... ↻
</div>
</span>

2671
ios.html

File diff suppressed because it is too large Load Diff

View File

@ -94,7 +94,12 @@ window.onload = function(){
loadSounds();
////////////////////////
// i hate ios so much //
// i hate ios so much
// for WHATEVER reason,
// I have to DELETE AND RE-ADD THE HTML of the chapter names
// to get them to render at the correct size.
// I don't know how INTERNET EXPLORER can do this properly
// but MOBILE SAFARI can't. Gawd.
////////////////////////
setTimeout(function(){
@ -182,6 +187,11 @@ if($("#gift_wallpaper")){
//},1000);
// Can't download .zip
if(detectmob()){
$all(".not_on_mobile").forEach(function(dom){
dom.style.display = "none";
});
}
}
@ -353,7 +363,7 @@ window.onscroll = function(){
var bounds = sim.getBoundingClientRect();
if(bounds.top<innerHeight+BUFFER && bounds.top+bounds.height>-BUFFER){
sim.src = sim.getAttribute("will_source");
//console.log("Loading "+sim.src+"...");
console.log("Loading "+sim.src+"...");
}
}
});

805
promo.html Normal file
View File

@ -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 &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>

BIN
sharing/thumbnail.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 580 KiB

View File

@ -6,7 +6,7 @@ var qDOM = document.createElement("div");
qDOM.innerHTML = _getLabel("flashcard_"+window.cardname+"_front");
var questionText = qDOM.innerText.trim();
questionText = _getLabel("type_question").trim() + " " + questionText;
$("#question").innerText = questionText;
$("#question").innerHTML = questionText;
// THE ANSWER
var answer = $("#answer");

View File

@ -1,14 +1,689 @@
<!DOCTYPE html>
<html>
<head>
<title>Supporters</title>
<style>
body{
margin:0;
background: #fff;
}
</style>
<html><head>
<title>My Patreon Supporters! &lt;3</title>
<style>
body{
background: #fff;
width: 450px;
margin: 25px auto;
font-family: Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 21px;
color: #333;
overflow-x: hidden;
}
#ppn{
overflow: hidden;
padding-bottom: 20px;
text-align: center;
}
#ppn > div{
position: relative;
width: 150px;
height: 210px;
text-align: center;
display: inline-block;
margin-right: -6px;
}
#ppn > div > img:nth-child(1){
position: absolute;
left: 0;
width: 150px;
bottom: 30px;
}
#ppn > div > img:nth-child(2){
position: absolute;
width: 50px;
right: 5px;
bottom: 30px;
}
#ppn > div > span{
display: block;
position: absolute;
bottom:0;
width: 150px;
height: 20px;
/*text-transform: lowercase;*/
}
#pn{
margin-top: 15px;
overflow: hidden;
font-size: 18px;
padding-bottom: 20px;
text-align: center;
}
#pn > div{
display: inline-block;
}
#pn > div > img{
width: 40px;
position: relative;
top:10px;
}
#pn > div > span{
/*text-transform: lowercase;*/
}
#n{
margin-top: 30px;
overflow: hidden;
font-size: 16px;
padding-bottom: 20px;
text-align: center;
-webkit-columns: 100px 3;
-moz-columns: 100px 3;
columns: 100px 3;
}
</style>
</head>
<body>
</body>
</html>
<!-- PEEP+POLYGON+NAME SUPPORTERS -->
<div id="ppn">
<div><img src="peeps/aimee_jarboe.png"><img src="polygons/aimee_jarboe.png"><span>Aimee Jarboe</span></div>
<div><img src="peeps/alexis_olson.png"><img src="polygons/alexis_olson.png"><span>Alexis Olson</span></div>
<div><img src="peeps/andy_ellis.png"><img src="polygons/andy_ellis.png"><span>Andy Ellis</span></div>
<div><img src="peeps/catherine_moore.png"><img src="polygons/catherine_moore.png"><span>Catherine Moore</span></div>
<div><img src="peeps/chad_sansing.png"><img src="polygons/chad_sansing.png"><span>Chad Sansing</span></div>
<div><img src="peeps/christopher_rodier.png"><img src="polygons/christopher_rodier.png"><span>Christopher Rodier</span></div>
<div><img src="peeps/christopher_walker.png"><img src="polygons/christopher_walker.png"><span>Christopher Walker</span></div>
<div><img src="peeps/david_e_weekly.png"><img src="polygons/david_e_weekly.png"><span>David E Weekly</span></div>
<div><img src="peeps/dylan_field.png"><img src="polygons/dylan_field.png"><span>Dylan Field</span></div>
<div><img src="peeps/eugenio_battaglia.png"><img src="polygons/eugenio_battaglia.png"><span>Eugenio Battaglia</span></div>
<div><img src="peeps/guguke.png"><img src="polygons/guguke.png"><span>Guguke</span></div>
<div><img src="peeps/jared_cosulich.png"><img src="polygons/jared_cosulich.png"><span>Jared Cosulich</span></div>
<div><img src="peeps/jasmine_ren.png"><img src="polygons/jasmine_ren.png"><span>Jasmine Ren</span></div>
<div><img src="peeps/kyle_studstill.png"><img src="polygons/kyle_studstill.png"><span>Kyle Studstill</span></div>
<div><img src="peeps/marc_marasco.png"><img src="polygons/marc_marasco.png"><span>Marc Marasco</span></div>
<div><img src="peeps/matt_hughes.png"><img src="polygons/matt_hughes.png"><span>Matt Hughes</span></div>
<div><img src="peeps/michael_cisneros.png"><img src="polygons/michael_cisneros.png"><span>Michael Cisneros</span></div>
<div><img src="peeps/michael_duke.png"><img src="polygons/michael_duke.png"><span>Michael Duke</span></div>
<div><img src="peeps/michael_huff.png"><img src="polygons/michael_huff.png"><span>Michael Huff</span></div>
<div><img src="peeps/natalie_sun.png"><img src="polygons/natalie_sun.png"><span>Natalie Sun</span></div>
<div><img src="peeps/nelson_crespo.png"><img src="polygons/nelson_crespo.png"><span>Nelson Crespo</span></div>
<div><img src="peeps/sean_riley.png"><img src="polygons/sean_riley.png"><span>Sean Riley</span></div>
<div><img src="peeps/srini_kadamati.png"><img src="polygons/srini_kadamati.png"><span>Srini Kadamati</span></div>
<div><img src="peeps/t.png"><img src="polygons/t.png"><span>T</span></div>
<div><img src="peeps/yuhan_kuo.png"><img src="polygons/yuhan_kuo.png"><span>Yu-Han Kuo</span></div>
<div><img src="peeps/zach_smith.png"><img src="polygons/zach_smith.png"><span>Zach Smith</span></div>
<div><img src="peeps/_underscore.png"><img src="polygons/_underscore.png"><span>_Underscore</span></div>
<div><img src="peeps/ljt.png"><img src="polygons/ljt.png"><span>ljt</span></div>
</div>
<!-- POLYGON+NAME SUPPORTERS -->
<div id="pn">
<div><img src="polygons/abdallah_abuhashem.png"><span>Abdallah AbuHashem</span></div>
<div><img src="polygons/adam_zeiner.png"><span>Adam Zeiner</span></div>
<div><img src="polygons/aiden_clack.png"><span>Aiden Clack</span></div>
<div><img src="polygons/aiman_josefsson.png"><span>Aiman Josefsson</span></div>
<div><img src="polygons/akito_inoue.png"><span>Akito INOUE</span></div>
<div><img src="polygons/alejo_amiras.png"><span>Alejo Amiras</span></div>
<div><img src="polygons/alex_dytrych.png"><span>Alex Dytrych</span></div>
<div><img src="polygons/alex_mole.png"><span>Alex Mole</span></div>
<div><img src="polygons/allison_cliftjennings.png"><span>Allison Clift-Jennings</span></div>
<div><img src="polygons/amy_fuchs.png"><span>Amy Fuchs</span></div>
<div><img src="polygons/amy_traylor.png"><span>Amy Traylor</span></div>
<div><img src="polygons/anastasiia_shehenova_girard.png"><span>Anastasiia Shehenova Girard</span></div>
<div><img src="polygons/andrea_di_biagio.png"><span>Andrea Di Biagio</span></div>
<div><img src="polygons/andr_cerqueira.png"><span>André Cerqueira</span></div>
<div><img src="polygons/animation_at_work.png"><span>Animation at Work</span></div>
<div><img src="polygons/anshul_dhawan.png"><span>Anshul Dhawan</span></div>
<div><img src="polygons/anthony_pecorella.png"><span>Anthony Pecorella</span></div>
<div><img src="polygons/apollo_slater.png"><span>Apollo Slater</span></div>
<div><img src="polygons/aran_jger.png"><span>Aran Jäger</span></div>
<div><img src="polygons/aria_minaei.png"><span>Aria Minaei</span></div>
<div><img src="polygons/autumn_rizzo.png"><span>Autumn Rizzo</span></div>
<div><img src="polygons/ben_bleything.png"><span>Ben Bleything</span></div>
<div><img src="polygons/ben_kraft.png"><span>Ben Kraft</span></div>
<div><img src="polygons/benjamin_lindsay.png"><span>Benjamin Lindsay</span></div>
<div><img src="polygons/bob_wise.png"><span>Bob Wise</span></div>
<div><img src="polygons/bohdan_makohin.png"><span>Bohdan Makohin</span></div>
<div><img src="polygons/boondoggle.png"><span>Boondoggle</span></div>
<div><img src="polygons/brian.png"><span>Brian</span></div>
<div><img src="polygons/brian_lange.png"><span>Brian Lange</span></div>
<div><img src="polygons/brianna_bergen.png"><span>Brianna Bergen</span></div>
<div><img src="polygons/bruce_steinberg.png"><span>Bruce Steinberg</span></div>
<div><img src="polygons/c.png"><span>C</span></div>
<div><img src="polygons/caelyn_mcaulay.png"><span>Caelyn McAulay</span></div>
<div><img src="polygons/caio_vinicius_do_nascimento.png"><span>Caio Vinicius do Nascimento</span></div>
<div><img src="polygons/caleb_denton.png"><span>Caleb Denton</span></div>
<div><img src="polygons/carmen.png"><span>Carmen</span></div>
<div><img src="polygons/caryn_vainio.png"><span>Caryn Vainio</span></div>
<div><img src="polygons/cathy_deng.png"><span>Cathy Deng</span></div>
<div><img src="polygons/ceceron44.png"><span>Ceceron44</span></div>
<div><img src="polygons/charlie_stigler.png"><span>Charlie Stigler</span></div>
<div><img src="polygons/chris_makler.png"><span>Chris Makler</span></div>
<div><img src="polygons/chris_ploeg.png"><span>Chris Ploeg</span></div>
<div><img src="polygons/christopher_ferrie.png"><span>Christopher Ferrie</span></div>
<div><img src="polygons/clive_freeman.png"><span>Clive Freeman</span></div>
<div><img src="polygons/colin_anderson.png"><span>Colin Anderson</span></div>
<div><img src="polygons/colin_liotta.png"><span>Colin Liotta</span></div>
<div><img src="polygons/conor_tickner.png"><span>Conor Tickner</span></div>
<div><img src="polygons/cristy_stone.png"><span>Cristy Stone</span></div>
<div><img src="polygons/curtis_frye.png"><span>Curtis Frye</span></div>
<div><img src="polygons/cyrus_levy.png"><span>Cyrus Levy</span></div>
<div><img src="polygons/da_liberman.png"><span>Da LIberman</span></div>
<div><img src="polygons/dag_frode_solberg.png"><span>Dag Frode Solberg</span></div>
<div><img src="polygons/daniel_teitelbaum.png"><span>Daniel Teitelbaum</span></div>
<div><img src="polygons/dave_mcclure.png"><span>Dave McClure</span></div>
<div><img src="polygons/dave_tu.png"><span>Dave Tu</span></div>
<div><img src="polygons/david_mora.png"><span>David Mora</span></div>
<div><img src="polygons/david_sallmann.png"><span>David Sallmann</span></div>
<div><img src="polygons/dinos_papadopoulos.png"><span>Dinos Papadopoulos</span></div>
<div><img src="polygons/discovery_ov103.png"><span>Discovery OV-103</span></div>
<div><img src="polygons/edward_j_yee.png"><span>Edward J Yee</span></div>
<div><img src="polygons/eli_jeschke.png"><span>Eli Jeschke</span></div>
<div><img src="polygons/eric_chisholm.png"><span>Eric Chisholm</span></div>
<div><img src="polygons/eric_martini.png"><span>Eric Martini</span></div>
<div><img src="polygons/evan_rocha.png"><span>Evan Rocha</span></div>
<div><img src="polygons/evan_shulman.png"><span>Evan Shulman</span></div>
<div><img src="polygons/fiona_nielsen.png"><span>Fiona Nielsen</span></div>
<div><img src="polygons/florencia_herra_vega.png"><span>Florencia Herra Vega</span></div>
<div><img src="polygons/francisco_hf.png"><span>Francisco HF</span></div>
<div><img src="polygons/fred_ehrsam.png"><span>Fred Ehrsam</span></div>
<div><img src="polygons/fred_tschepp.png"><span>Fred Tschepp</span></div>
<div><img src="polygons/fritz_solares.png"><span>Fritz Solares</span></div>
<div><img src="polygons/gabriel_barbosa_nunes.png"><span>Gabriel Barbosa Nunes</span></div>
<div><img src="polygons/gim_seul.png"><span>김슬</span></div>
<div><img src="polygons/glen_e_ivey.png"><span>Glen E. Ivey</span></div>
<div><img src="polygons/green.png"><span>Green</span></div>
<div><img src="polygons/greg_nelson.png"><span>Greg Nelson</span></div>
<div><img src="polygons/grvling.png"><span>Grävling</span></div>
<div><img src="polygons/hi.png"><span>HI</span></div>
<div><img src="polygons/harry_brisson.png"><span>Harry Brisson</span></div>
<div><img src="polygons/hilary_fried.png"><span>Hilary Fried</span></div>
<div><img src="polygons/iago_medeiros_cordeiro.png"><span>Iago Medeiros Cordeiro</span></div>
<div><img src="polygons/iain_kirkpatrick.png"><span>Iain Kirkpatrick</span></div>
<div><img src="polygons/idahosa_ness.png"><span>Idahosa Ness</span></div>
<div><img src="polygons/industrialrobot.png"><span>IndustrialRobot</span></div>
<div><img src="polygons/ivar_troost.png"><span>Ivar Troost</span></div>
<div><img src="polygons/ivo_murrell.png"><span>Ivo Murrell</span></div>
<div><img src="polygons/jaakko.png"><span>Jaakko</span></div>
<div><img src="polygons/jack.png"><span>Jack</span></div>
<div><img src="polygons/jacob_christian_munchandersen.png"><span>Jacob Christian Munch-Andersen</span></div>
<div><img src="polygons/jacob_james_leaney.png"><span>Jacob James Leaney</span></div>
<div><img src="polygons/jacopo_cascioli.png"><span>Jacopo Cascioli</span></div>
<div><img src="polygons/jason_crawford.png"><span>Jason Crawford</span></div>
<div><img src="polygons/jeaneudes_denis.png"><span>Jean-Eudes Denis</span></div>
<div><img src="polygons/jesper_the_end.png"><span>Jesper the End</span></div>
<div><img src="polygons/jessica_osio.png"><span>Jessica Osio</span></div>