287 lines
8.7 KiB
HTML
287 lines
8.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
<html>
|
||
|
<head>
|
||
|
<meta charset="UTF-8">
|
||
|
<title>An Interactive Comic</title>
|
||
|
<link rel="stylesheet" type="text/css" href="css/comic.css"/>
|
||
|
<meta name="viewport" content="width=600">
|
||
|
</head>
|
||
|
|
||
|
<body>
|
||
|
|
||
|
|
||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||
|
<!-- CHAPTER 0: INTRODUCTION - -->
|
||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||
|
|
||
|
<a name="0"></a>
|
||
|
<div class="divider divider_big_height">
|
||
|
<iframe class="splash" gotosrc="sims/splash/" scrolling="no"></iframe>
|
||
|
<div id="divider_container">
|
||
|
<div id="chapter_name">
|
||
|
HOW TO REMEMBER ANYTHING FOREVER-ISH
|
||
|
</div>
|
||
|
<div style="text-align:right;">
|
||
|
by nicky case · oct 2018
|
||
|
<br>
|
||
|
<span id="translation_credits"></span>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div id="language_options">
|
||
|
</div>
|
||
|
|
||
|
<br><br><br>
|
||
|
<br><br><br>
|
||
|
<br><br><br>
|
||
|
<br><br><br>
|
||
|
|
||
|
<a name="1"></a>
|
||
|
<div class="divider divider_big_height">
|
||
|
<iframe class="splash" gotosrc="sims/splash/" scrolling="no"></iframe>
|
||
|
<div id="divider_container">
|
||
|
<div id="chapter_name">
|
||
|
THE SCIENCE of
|
||
|
SPACED REPETITION
|
||
|
</div>
|
||
|
<div id="chapter_links"></div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<br><br><br>
|
||
|
<br><br><br>
|
||
|
<br><br><br>
|
||
|
<br><br><br>
|
||
|
<br><br><br>
|
||
|
|
||
|
|
||
|
<a name="2"></a>
|
||
|
<div class="divider divider_big_height">
|
||
|
<iframe class="splash" gotosrc="sims/splash/" scrolling="no"></iframe>
|
||
|
<div id="divider_container">
|
||
|
<div id="chapter_name">
|
||
|
THE ART of
|
||
|
SPACED REPETITION
|
||
|
</div>
|
||
|
<div id="chapter_links"></div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<br><br><br>
|
||
|
<br><br><br>
|
||
|
<br><br><br>
|
||
|
<br><br><br>
|
||
|
<br><br><br>
|
||
|
|
||
|
|
||
|
<a name="3"></a>
|
||
|
<div class="divider divider_small_height">
|
||
|
<iframe class="splash" gotosrc="sims/splash/" scrolling="no"></iframe>
|
||
|
<div id="divider_container">
|
||
|
<div id="chapter_name">
|
||
|
GET STARTED TODAY!
|
||
|
</div>
|
||
|
<div id="chapter_links"></div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<br><br><br>
|
||
|
<br><br><br>
|
||
|
<br><br><br>
|
||
|
|
||
|
|
||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||
|
<!-- CREDITS - -->
|
||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||
|
|
||
|
<a name="bye"></a>
|
||
|
<div id="credits">
|
||
|
|
||
|
<div>
|
||
|
|
||
|
<p style="font-size:30px; margin-bottom:0">
|
||
|
<img style="background:#bada55" width="100" height="100" />
|
||
|
<span style="display:inline-block; position: relative; top: -14px; left: 14px;">
|
||
|
Written, drawn, and programmed by
|
||
|
<br>
|
||
|
<a target="_blank" href="https://ncase.me/" style="font-size:2em; display:inline-block; line-height:1em">
|
||
|
Nicky Case
|
||
|
</a>
|
||
|
</span>
|
||
|
</p>
|
||
|
|
||
|
<p>
|
||
|
Also, this interactive comic is
|
||
|
|
||
|
<span style="display:block; margin-top:5px;">
|
||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="64px" height="64px" viewBox="-0.5 0.5 64 64" enable-background="new -0.5 0.5 64 64" xml:space="preserve">
|
||
|
<g>
|
||
|
<circle fill="#000000" cx="31.325" cy="32.873" r="30.096"/>
|
||
|
<path fill="#FFFFFF" id="text2809_1_" d="M31.5,14.08c-10.565,0-13.222,9.969-13.222,18.42c0,8.452,2.656,18.42,13.222,18.42 c10.564,0,13.221-9.968,13.221-18.42C44.721,24.049,42.064,14.08,31.5,14.08z M31.5,21.026c0.429,0,0.82,0.066,1.188,0.157 c0.761,0.656,1.133,1.561,0.403,2.823l-7.036,12.93c-0.216-1.636-0.247-3.24-0.247-4.437C25.808,28.777,26.066,21.026,31.5,21.026z M36.766,26.987c0.373,1.984,0.426,4.056,0.426,5.513c0,3.723-0.258,11.475-5.69,11.475c-0.428,0-0.822-0.045-1.188-0.136 c-0.07-0.021-0.134-0.043-0.202-0.067c-0.112-0.032-0.23-0.068-0.336-0.11c-1.21-0.515-1.972-1.446-0.874-3.093L36.766,26.987z"/>
|
||
|
<path fill="#FFFFFF" id="path2815_1_" d="M31.433,0.5c-8.877,0-16.359,3.09-22.454,9.3c-3.087,3.087-5.443,6.607-7.082,10.532 C0.297,24.219-0.5,28.271-0.5,32.5c0,4.268,0.797,8.32,2.397,12.168c1.6,3.85,3.921,7.312,6.969,10.396 c3.085,3.049,6.549,5.399,10.398,7.037c3.886,1.602,7.939,2.398,12.169,2.398c4.229,0,8.34-0.826,12.303-2.465 c3.962-1.639,7.496-3.994,10.621-7.081c3.011-2.933,5.289-6.297,6.812-10.106C62.73,41,63.5,36.883,63.5,32.5 c0-4.343-0.77-8.454-2.33-12.303c-1.562-3.885-3.848-7.32-6.857-10.33C48.025,3.619,40.385,0.5,31.433,0.5z M31.567,6.259 c7.238,0,13.412,2.566,18.554,7.709c2.477,2.477,4.375,5.31,5.67,8.471c1.296,3.162,1.949,6.518,1.949,10.061 c0,7.354-2.516,13.454-7.506,18.33c-2.592,2.516-5.502,4.447-8.74,5.781c-3.2,1.334-6.498,1.994-9.927,1.994 c-3.468,0-6.788-0.653-9.949-1.948c-3.163-1.334-6.001-3.238-8.516-5.716c-2.515-2.514-4.455-5.353-5.826-8.516 c-1.333-3.199-2.017-6.498-2.017-9.927c0-3.467,0.684-6.787,2.017-9.949c1.371-3.2,3.312-6.074,5.826-8.628 C18.092,8.818,24.252,6.259,31.567,6.259z"/>
|
||
|
</g>
|
||
|
</svg>
|
||
|
<span style="font-size: 60px; position: relative; top: -12px; left: 8px;">
|
||
|
PUBLIC DOMAIN
|
||
|
</span>
|
||
|
</span>
|
||
|
|
||
|
meaning you can freely use this thing for educational, personal, or even commercial purposes.
|
||
|
You already have my permission!
|
||
|
<a target="_blank" href="TODO ADD LINK">
|
||
|
(Download the full source code on GitHub)
|
||
|
</a>
|
||
|
</p>
|
||
|
|
||
|
<p>
|
||
|
However, I'm only able to do this thanks to my 1,000+ Patreon supporters.
|
||
|
They let me keep doing what I love. Thank you! 💖
|
||
|
<a target="_blank" href="https://www.patreon.com/ncase">
|
||
|
(Wanna chip in too? Click here!)
|
||
|
</a>
|
||
|
</p>
|
||
|
|
||
|
<hr>
|
||
|
|
||
|
<p style="font-size:50px;margin-bottom:10px">
|
||
|
Further Reading
|
||
|
</p>
|
||
|
|
||
|
<p>
|
||
|
Something something shoulders of giants.
|
||
|
Here are the reads that made Spaced Repetition a part of my daily life:
|
||
|
</p>
|
||
|
|
||
|
<ul>
|
||
|
<li>
|
||
|
💬
|
||
|
<a target="_blank" href="https://fluent-forever.com/the-book/">
|
||
|
Fluent Forever</a>
|
||
|
by Gabriel Wyner
|
||
|
convinced me to finally (re)start learning French,
|
||
|
and adopt a Leitner Box.
|
||
|
</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">
|
||
|
20 Rules for Cards</a>
|
||
|
by Piotr Wozniak taught me how to squeeze the most out of Spaced Repetition.
|
||
|
(Note: the author also invented the algorithm used by Anki!)
|
||
|
</li>
|
||
|
</ul>
|
||
|
|
||
|
And my favorite reads on the science of learning:
|
||
|
|
||
|
<ul>
|
||
|
<li>
|
||
|
👩🎓
|
||
|
<a target="_blank" href="https://www.amazon.com/Why-Dont-Students-Like-School/dp/047059196X/">
|
||
|
Why Don't Students Like School?</a>
|
||
|
by Daniel Willingham
|
||
|
proved to me that "mere memorization" is actually <i>necessary</i>
|
||
|
for creativity & critical thinking.
|
||
|
</li>
|
||
|
<li>
|
||
|
✏️
|
||
|
<a target="_blank" href="http://tlcp.depaultla.org/wp-content/uploads/sites/2/2015/05/Dunlosky-et-al-2013-What-Works-What-Doesnt.pdf">
|
||
|
What Works, What Doesn't [PDF]
|
||
|
</a>
|
||
|
by Dunlosky et al
|
||
|
summarizes <i>200+ studies</i> on various learning methods.
|
||
|
In sum: common techniques like re-reading & highlighting don't work,
|
||
|
less-common techniques like spacing & self-testing do.
|
||
|
<a target="_blank" href="http://journals.sagepub.com/doi/abs/10.1177/1529100612453266">
|
||
|
(Link to original paper)
|
||
|
</a>
|
||
|
</li>
|
||
|
</ul>
|
||
|
|
||
|
<p>
|
||
|
And if you want to learn-by-playing more stuff,
|
||
|
<a target="_blank" href="https://explorabl.es/">
|
||
|
check out Explorable Explanations!</a> 🕹️
|
||
|
</p>
|
||
|
|
||
|
<hr>
|
||
|
|
||
|
<p style="font-size:50px;margin-bottom:10px">
|
||
|
More Thanks
|
||
|
</p>
|
||
|
|
||
|
<p>
|
||
|
👀 Thank you to all my playtesters for making this project shine!
|
||
|
Name, Name, Name
|
||
|
</p>
|
||
|
|
||
|
<p>
|
||
|
🔊 This project was made with Creative Commons assets
|
||
|
from Wikimedia Commons and FreeSounds.
|
||
|
<a target="_blank" href="TODO ADD LINK">
|
||
|
(See full credits)</a>
|
||
|
</p>
|
||
|
|
||
|
<p>
|
||
|
💖 And again, huge thanks to all my Patreon supporters who made this possible:
|
||
|
</p>
|
||
|
|
||
|
<iframe gotosrc="supporters"></iframe>
|
||
|
|
||
|
<p>
|
||
|
🙏 And finally, thank <i>you</i> for being the kind of person who sits through the credits!
|
||
|
You can
|
||
|
<a target="_blank" href="https://ncase.me/">
|
||
|
play more of my stuff</a>,
|
||
|
<a target="_blank" href="https://twitter.com/ncasenmare">
|
||
|
follow me on Twitter</a>,
|
||
|
or
|
||
|
<a target="_blank" href="https://www.patreon.com/ncase">
|
||
|
support me on Patreon</a>.
|
||
|
I sincerely hope this comic could help you, in whatever small way.
|
||
|
</p>
|
||
|
|
||
|
<p>
|
||
|
Happy learning!<br>
|
||
|
~ Nicky Case
|
||
|
</p>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
<div id="labels">
|
||
|
|
||
|
<!-- 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>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
</body>
|
||
|
|
||
|
</html>
|
||
|
|
||
|
<script src="js/howler.core.min.js"></script>
|
||
|
<script src="js/minpubsub.src.js"></script>
|
||
|
<script src="js/comic.js"></script>
|