translation and lang detect
This commit is contained in:
parent
95de8de58e
commit
49681317ed
125
ahhh.html
125
ahhh.html
|
@ -1,125 +0,0 @@
|
|||
<!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" src="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
|
||||
</div>
|
||||
</div>
|
||||
</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" src="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" src="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" src="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>
|
||||
|
||||
|
||||
|
||||
<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>
|
|
@ -29,6 +29,9 @@ b, strong{
|
|||
a{
|
||||
color:#5b8df1;
|
||||
}
|
||||
a:hover{
|
||||
color:#8aadf5;
|
||||
}
|
||||
|
||||
/**********/
|
||||
/* SPLASH */
|
||||
|
@ -188,9 +191,67 @@ a{
|
|||
#credits > div{
|
||||
color:white;
|
||||
margin: 50px auto 100px auto;
|
||||
width: 600px;
|
||||
width: 550px;
|
||||
}
|
||||
#credits hr{
|
||||
border: none;
|
||||
border-bottom: 10px dashed rgba(255,255,255,0.25);
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
#credits li{
|
||||
list-style-type: none;
|
||||
text-indent: -1.25em;
|
||||
}
|
||||
#credits iframe{
|
||||
display:block;
|
||||
background:#fff;
|
||||
border:none;
|
||||
width:500px;
|
||||
height:350px;
|
||||
margin:0 auto;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
|
||||
/*******************/
|
||||
/* LANGUAGE PROMPT */
|
||||
/*******************/
|
||||
|
||||
#prompt{
|
||||
|
||||
width: 100%;
|
||||
|
||||
background:#5b8df1;
|
||||
color:#fff;
|
||||
|
||||
position: fixed;
|
||||
top:0;
|
||||
transition: top 0.5s ease-in-out;
|
||||
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
padding: 15px 0 20px 0;
|
||||
line-height: 1.3em;
|
||||
|
||||
}
|
||||
#prompt[hide=yes]{
|
||||
top:-150px;
|
||||
}
|
||||
#prompt a{
|
||||
|
||||
color:#5b8df1;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
|
||||
padding: 0 8px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
#prompt a:hover{
|
||||
color:#8aadf5;
|
||||
}
|
||||
#translation_credits{
|
||||
pointer-events: all;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,286 @@
|
|||
<!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">
|
||||
DEUTSCH DEUTSCH DESUTCH DESUTCH
|
||||
</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 sitting through the credits at the end!
|
||||
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>
|
|
@ -0,0 +1,293 @@
|
|||
<!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">
|
||||
FRANÇAIS FRANÇAIS FRANÇAIS FRANÇAIS
|
||||
</div>
|
||||
<div style="text-align:right;">
|
||||
par nicky case · oct 2018
|
||||
<br>
|
||||
<span id="translation_credits"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="language_options">
|
||||
</div>
|
||||
|
||||
<br><br><br>
|
||||
<br><br><br>
|
||||
|
||||
<a href="">top</a>
|
||||
<a href="/">top</a>
|
||||
<a href="./">top</a>
|
||||
<a href="./ex.html">top</a>
|
||||
<a href="/ex.html">top</a>
|
||||
|
||||
<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>
|
114
full.html
114
full.html
|
@ -18,7 +18,7 @@
|
|||
|
||||
<a name="0"></a>
|
||||
<div class="divider divider_small_height">
|
||||
<iframe class="splash" src="sims/splash/" scrolling="no"></iframe>
|
||||
<iframe class="splash" gotosrc="sims/splash/" scrolling="no"></iframe>
|
||||
<div id="divider_container">
|
||||
<div id="chapter_name">
|
||||
[todo: some friggin' title]
|
||||
|
@ -40,6 +40,15 @@
|
|||
<words x=30 y=330 w=310 h=60>
|
||||
...was the mother of the Muses, the goddesses of inspiration.
|
||||
</words>
|
||||
<words x=70 y=445 w=90 style="color:#fff" no-bg class="comic_text">
|
||||
music
|
||||
</words>
|
||||
<words x=119 y=494 w=90 style="color:#fff" no-bg class="comic_text">
|
||||
theatre
|
||||
</words>
|
||||
<words x=214 y=464 w=90 style="color:#fff" no-bg class="comic_text">
|
||||
weird fanfic
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=600 h=60>
|
||||
|
@ -52,6 +61,16 @@ So, how's Memory and Inspiration doing in schools?
|
|||
|
||||
<panel w=550 h=250>
|
||||
<pic src="pics/intro0.png" sx=400 sy=0></pic>
|
||||
|
||||
<words x=-12 y=81 w=40 no-bg class="comic_text" style="font-size:20px"> bla </words>
|
||||
<words x=50 y=85 w=40 no-bg class="comic_text" style="font-size:20px"> bla </words>
|
||||
<words x=114 y=84 w=40 no-bg class="comic_text" style="font-size:20px"> bla </words>
|
||||
<words x=172 y=91 w=40 no-bg class="comic_text" style="font-size:20px"> bla </words>
|
||||
<words x=295 y=80 w=40 no-bg class="comic_text" style="font-size:20px"> bla </words>
|
||||
<words x=363 y=83 w=40 no-bg class="comic_text" style="font-size:20px"> bla </words>
|
||||
<words x=444 y=81 w=40 no-bg class="comic_text" style="font-size:20px"> bla </words>
|
||||
<words x=518 y=81 w=40 no-bg class="comic_text" style="font-size:20px"> bla </words>
|
||||
|
||||
</panel>
|
||||
|
||||
<panel w=500 h=250>
|
||||
|
@ -107,6 +126,18 @@ So, how's Memory and Inspiration doing in schools?
|
|||
<words x=10 y=10 w=400 h=60>
|
||||
Since then, I've used Spaced Repetition to remember all sorts of things...
|
||||
</words>
|
||||
<words x=81 y=113 w=100 style="text-align:left" no-bg class="comic_text">
|
||||
ukulele chords
|
||||
</words>
|
||||
<words x=212 y=114 w=100 style="text-align:left" no-bg class="comic_text">
|
||||
computer code
|
||||
</words>
|
||||
<words x=380 y=137 w=100 style="text-align:left" no-bg class="comic_text">
|
||||
friends' birthdays
|
||||
</words>
|
||||
<words x=188 y=204 w=270 style="text-align:left" no-bg class="comic_text">
|
||||
anything interesting i find in books, talks, articles, etc!
|
||||
</words>
|
||||
<words x=60 y=300 w=400 h=60>
|
||||
...and this lil' memory card game became a core part of my <i>life</i>.
|
||||
</words>
|
||||
|
@ -128,6 +159,9 @@ So, how's Memory and Inspiration doing in schools?
|
|||
<words x=10 y=20 w=290 no-bg>
|
||||
Spaced Repetition is free, evidence-based, and so simple you can do it with a <i>shoebox</i>.
|
||||
</words>
|
||||
<words x=308 y=265 w=50 no-bg class="comic_text" style="text-align:left; font-size:20px">
|
||||
nicky shut up
|
||||
</words>
|
||||
<words x=90 y=130 w=270 no-bg>
|
||||
So, what's the catch? Why isn't <i>everyone</i> already doing Spaced Repetition?
|
||||
</words>
|
||||
|
@ -139,6 +173,9 @@ So, how's Memory and Inspiration doing in schools?
|
|||
Well, the catch is that making <i>any</i> new habit is hard
|
||||
– especially a weird habit like Spaced Repetition.
|
||||
</words>
|
||||
<words x=292 y=303 w=80 no-bg class="comic_text" style="text-align:left; font-size:20px">
|
||||
teacher's coming
|
||||
</words>
|
||||
<words x=100 y=134 w=270 no-bg>
|
||||
That's why I made this badly-drawn interactive comic.
|
||||
</words>
|
||||
|
@ -190,6 +227,15 @@ Like so:
|
|||
you <i>need</i> memorization for creativity & critical thinking.
|
||||
(Imagine writing an essay if you know no words!)
|
||||
</words>
|
||||
<words x=187 y=138 w=150 no-bg class="comic_text" style="font-size:40px">
|
||||
MEMORY
|
||||
</words>
|
||||
<words x=22 y=222 w=100 no-bg class="comic_text" style="font-size:20px">
|
||||
art
|
||||
</words>
|
||||
<words x=408 y=224 w=100 no-bg class="comic_text" style="font-size:20px">
|
||||
science
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=550 h=300>
|
||||
|
@ -210,6 +256,11 @@ Like so:
|
|||
<words x=20 y=20 w=330 h=30>
|
||||
...to mother your own, inner Muse.
|
||||
</words>
|
||||
<words x=117 y=131 w=140 no-bg class="comic_text" style="font-size:20px; color:#fff">
|
||||
Tony Stark nearly gasped as a gloved hand trailed down his spine.
|
||||
The steady pressure was smooth and almost reassuring.
|
||||
Obama chuckled. “You mean, the–
|
||||
</words>
|
||||
<words x=240 y=480 w=120 h=30>
|
||||
Let's begin.
|
||||
</words>
|
||||
|
@ -230,7 +281,7 @@ Like so:
|
|||
|
||||
<a name="1"></a>
|
||||
<div class="divider divider_big_height">
|
||||
<iframe class="splash" src="sims/splash/" scrolling="no"></iframe>
|
||||
<iframe class="splash" gotosrc="sims/splash/" scrolling="no"></iframe>
|
||||
<div id="divider_container">
|
||||
<div id="chapter_name">
|
||||
THE SCIENCE of
|
||||
|
@ -559,7 +610,7 @@ It’s actually so simple, you can even create your own automatic scheduler...
|
|||
|
||||
<a name="2"></a>
|
||||
<div class="divider divider_big_height">
|
||||
<iframe class="splash" src="sims/splash/" scrolling="no"></iframe>
|
||||
<iframe class="splash" gotosrc="sims/splash/" scrolling="no"></iframe>
|
||||
<div id="divider_container">
|
||||
<div id="chapter_name">
|
||||
THE ART of
|
||||
|
@ -1054,7 +1105,7 @@ It’s actually so simple, you can even create your own automatic scheduler...
|
|||
|
||||
<a name="3"></a>
|
||||
<div class="divider divider_small_height">
|
||||
<iframe class="splash" src="sims/splash/" scrolling="no"></iframe>
|
||||
<iframe class="splash" gotosrc="sims/splash/" scrolling="no"></iframe>
|
||||
<div id="divider_container">
|
||||
<div id="chapter_name">
|
||||
GET STARTED TODAY!
|
||||
|
@ -1579,11 +1630,38 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
|||
|
||||
<div>
|
||||
|
||||
[TODO: FULL CREDITS]
|
||||
Made by Nicky Case
|
||||
|
||||
<br><br>
|
||||
Public Domain (link to other work & patreon)
|
||||
|
||||
[I'll put YOUR name here – thank you so much for playtesting this thing, friend!~]
|
||||
===
|
||||
|
||||
Further Reading:
|
||||
|
||||
- Fluent Forever
|
||||
|
||||
- Michael Nielsen's
|
||||
http://augmentingcognition.com/ltm.html
|
||||
|
||||
- SuperMemo's 20 Tips
|
||||
|
||||
===
|
||||
|
||||
Scientific Sources:
|
||||
|
||||
===
|
||||
|
||||
Special Thanks / Playtesters
|
||||
|
||||
Made with CC WikiCommons art and FreeSounds
|
||||
|
||||
===
|
||||
|
||||
Patreon
|
||||
|
||||
Support me
|
||||
Twitter
|
||||
Ncase!
|
||||
|
||||
</div>
|
||||
|
||||
|
@ -1611,25 +1689,15 @@ DOWNLOAD ALL CARDS ↓
|
|||
|
||||
<!-- Chapter Links -->
|
||||
<span id="label_chapter_links">
|
||||
<a href="#0">
|
||||
Intro
|
||||
</a>
|
||||
<a href="#0">Intro</a>
|
||||
·
|
||||
<a href="#1">
|
||||
The Science
|
||||
</a>
|
||||
<a href="#1">The Science</a>
|
||||
·
|
||||
<a href="#2">
|
||||
The Art
|
||||
</a>
|
||||
<a href="#2">The Art</a>
|
||||
·
|
||||
<a href="#3">
|
||||
Get Started!
|
||||
</a>
|
||||
<a href="#3">Get Started!</a>
|
||||
·
|
||||
<a href="#bye">
|
||||
Credits
|
||||
</a>
|
||||
<a href="#bye">Credits</a>
|
||||
</span>
|
||||
|
||||
<!-- Multi Card Labels -->
|
||||
|
@ -1766,7 +1834,7 @@ DOWNLOAD ALL CARDS ↓
|
|||
<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")
|
||||
(note: it decays quickly, then slowly - "exponential decay")
|
||||
</div>
|
||||
</span>
|
||||
<span id="flashcard_sci_c_front">
|
||||
|
|
|
@ -0,0 +1,286 @@
|
|||
<!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>
|
141
js/comic.js
141
js/comic.js
|
@ -328,9 +328,148 @@ window.onscroll = function(){
|
|||
var bounds = sim.getBoundingClientRect();
|
||||
if(bounds.y<innerHeight+BUFFER && bounds.y+bounds.height>-BUFFER){
|
||||
sim.src = sim.getAttribute("will_source");
|
||||
console.log("Loading "+sim.src+"...");
|
||||
//console.log("Loading "+sim.src+"...");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// More iframes
|
||||
var iframes = $all("iframe");
|
||||
iframes.forEach(function(iframe){
|
||||
if(!iframe.src){
|
||||
var gotoSrc = iframe.getAttribute("gotosrc");
|
||||
if(gotoSrc){
|
||||
|
||||
var bounds = iframe.getBoundingClientRect();
|
||||
if(bounds.y<innerHeight+BUFFER && bounds.y+bounds.height>-BUFFER){
|
||||
iframe.src = gotoSrc;
|
||||
console.log("Loading "+iframe.src+"...");
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
setInterval(window.onscroll, 1000); // to update late-loaders
|
||||
|
||||
|
||||
/////////////////////////////
|
||||
// TRANSLATIONS /////////////
|
||||
/////////////////////////////
|
||||
|
||||
// todo:
|
||||
// - show prompt @done
|
||||
// - list of languages @done
|
||||
// - translated by and original in @done
|
||||
// - remove all text from thing
|
||||
// - clean up html, add comments
|
||||
// - github instructions
|
||||
|
||||
var LANGUAGES = {};
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.addEventListener("load", function(event){
|
||||
|
||||
// A database of languages!
|
||||
var langs = xhr.response.split("\n\n");
|
||||
langs.forEach(function(lang){
|
||||
|
||||
var splitup = lang.split("\n");
|
||||
var code = splitup[0];
|
||||
|
||||
LANGUAGES[code] = {
|
||||
name: splitup[1],
|
||||
link: splitup[2],
|
||||
ask: splitup[3],
|
||||
yes: splitup[4],
|
||||
no: splitup[5],
|
||||
translatedBy: splitup[6],
|
||||
originalIn: splitup[7]
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
// Show languages options in the box
|
||||
var LANGS_SORTED = [];
|
||||
for(var code in LANGUAGES){
|
||||
LANGS_SORTED.push(code);
|
||||
}
|
||||
LANGS_SORTED.sort();
|
||||
var html = "";
|
||||
LANGS_SORTED.forEach(function(code){
|
||||
var lang = LANGUAGES[code];
|
||||
html += "<a href='"+lang.link+"'>"+lang.name+"</a><br>";
|
||||
});
|
||||
$("#language_options").innerHTML = html;
|
||||
|
||||
// What's user's language(s)?
|
||||
var userLang = navigator.language || navigator.userLanguage;
|
||||
var userLangs = [userLang];
|
||||
if(userLang.search("-")>=0){
|
||||
userLangs.push( userLang.split("-")[0] ); // e.g. en-US => en
|
||||
}
|
||||
|
||||
// What's this page's language?
|
||||
var pathnameSplit = window.location.pathname.split("/");
|
||||
var pagename = pathnameSplit[pathnameSplit.length-1];
|
||||
var pageLang = (pagename==""||pagename=="index") ? "en" : pagename.split(".")[0];
|
||||
|
||||
// When to show prompt:
|
||||
// If browser language is supported AND it's not this page
|
||||
var l;
|
||||
l = userLangs[0];
|
||||
if(LANGUAGES[l] && l!=pageLang) _showPrompt(l);
|
||||
l = userLangs[1];
|
||||
if(LANGUAGES[l] && l!=pageLang) _showPrompt(l);
|
||||
|
||||
// Translation credits if NOT english
|
||||
if(pageLang!="en"){
|
||||
var html = "";
|
||||
var lang = LANGUAGES[pageLang];
|
||||
html += lang.translatedBy;
|
||||
html += " · ";
|
||||
html += "<a href='./'>"+lang.originalIn+"</a>";
|
||||
$("#translation_credits").innerHTML = html;
|
||||
}
|
||||
|
||||
});
|
||||
function _showPrompt(lang){
|
||||
|
||||
lang = LANGUAGES[lang];
|
||||
|
||||
// Add prompt
|
||||
var promptDOM = document.createElement("div");
|
||||
promptDOM.id = "prompt";
|
||||
document.body.appendChild(promptDOM);
|
||||
|
||||
// Fill in prompt
|
||||
var askDOM = document.createElement("div");
|
||||
askDOM.innerHTML = lang.ask;
|
||||
var yesDOM = document.createElement("a");
|
||||
yesDOM.innerHTML = lang.yes;
|
||||
var nbsp = document.createElement("span");
|
||||
nbsp.innerHTML = " ";
|
||||
var noDOM = document.createElement("a");
|
||||
noDOM.innerHTML = lang.no;
|
||||
|
||||
promptDOM.appendChild(askDOM);
|
||||
promptDOM.appendChild(yesDOM);
|
||||
promptDOM.appendChild(nbsp);
|
||||
promptDOM.appendChild(noDOM);
|
||||
|
||||
// Code Logic
|
||||
yesDOM.href = lang.link;
|
||||
noDOM.onclick = function(){
|
||||
promptDOM.setAttribute("hide", "yes");
|
||||
setTimeout(function(){
|
||||
document.body.removeChild(promptDOM);
|
||||
},2000);
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
xhr.open("GET", "translations.txt");
|
||||
xhr.send();
|
||||
|
||||
|
|
BIN
pics/intro0.png
BIN
pics/intro0.png
Binary file not shown.
Before Width: | Height: | Size: 4.3 MiB After Width: | Height: | Size: 4.3 MiB |
|
@ -31,6 +31,17 @@ var CALENDAR = [
|
|||
[2,1], [3,1], [2,1], [4,1], [2,1], [3,1], [2,1], [7,1],
|
||||
[2,1], [3,1], [6,2,1],[5,1], [4,2,1], [3,1], [2,1], [1],
|
||||
];
|
||||
/*
|
||||
var CALENDAR = [
|
||||
[2,1], [3,1], [2,1], [4,1], [2,1], [3,1], [2,1], [5,1],
|
||||
[2,1], [3,1], [2,1], [4,1], [2,1], [3,1], [2,1], [6,1],
|
||||
[2,1], [3,1], [2,1], [4,1], [2,1], [3,1], [2,1], [5,1],
|
||||
[2,1], [3,1], [2,1], [4,1], [2,1], [3,1], [2,1], [7,1],
|
||||
[2,1], [3,1], [2,1], [4,1], [2,1], [3,1], [2,1], [5,1],
|
||||
[2,1], [3,1], [2,1], [4,1], [2,1], [3,1], [2,1], [6,1],
|
||||
[2,1], [3,1], [2,1], [4,1], [2,1], [3,1], [2,1], [5,1],
|
||||
[2,1], [3,1], [2,1], [4,1], [2,1], [3,1], [2,1], [1],
|
||||
];*/
|
||||
|
||||
var daySlider = $("#day");
|
||||
daySlider.oninput = function(){
|
||||
|
|
|
@ -53,7 +53,7 @@
|
|||
document.body.addEventListener("touchmove",onTouchMove = function(event){
|
||||
Mouse.x = event.changedTouches[0].clientX;
|
||||
Mouse.y = event.changedTouches[0].clientY - window.pageYOffset;
|
||||
event.preventDefault();
|
||||
//event.preventDefault();
|
||||
},false);
|
||||
|
||||
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Supporters</title>
|
||||
<style>
|
||||
body{
|
||||
margin:0;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,33 @@
|
|||
en
|
||||
English
|
||||
./
|
||||
Would you like to switch to English?
|
||||
Sure!
|
||||
Nah
|
||||
|
||||
ex
|
||||
Example Language
|
||||
./ex.html
|
||||
Would you like to switch to Example Language?
|
||||
Sure!
|
||||
Nah
|
||||
translated by Your Name
|
||||
original in english
|
||||
|
||||
fr
|
||||
French
|
||||
./fr.html
|
||||
Voulez-vous switcher en français?
|
||||
Oui!
|
||||
Non
|
||||
tranduire par Nicky Case
|
||||
l'original en anglais
|
||||
|
||||
de
|
||||
Deutsch
|
||||
./de.html
|
||||
Volkswagon Volkswagon Volkswagon?
|
||||
Ja!
|
||||
Na
|
||||
translated by Hermann Ebbinghaus
|
||||
original in anglo
|
Loading…
Reference in New Issue