all text removed from images
|
@ -42,6 +42,7 @@ a:hover{
|
|||
width: 100%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background: #000;
|
||||
}
|
||||
.divider_small_height{
|
||||
height: 220px;
|
||||
|
@ -100,6 +101,7 @@ a:hover{
|
|||
/*********/
|
||||
|
||||
.comic{
|
||||
position: relative;
|
||||
overflow:hidden;
|
||||
width:610px;
|
||||
margin: 50px auto;
|
||||
|
@ -161,6 +163,24 @@ a:hover{
|
|||
color: rgba(0,0,0,0.5);
|
||||
line-height: 1em;
|
||||
}
|
||||
.comic_text.smaller{
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
/* from https://stackoverflow.com/a/16410273 */
|
||||
.strikeout {
|
||||
position: relative;
|
||||
}
|
||||
.strikeout::after {
|
||||
border-bottom: 0.2em solid #ff4040;
|
||||
content: "";
|
||||
left: 0;
|
||||
margin-top: calc(0.0em / 2 * -1);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
/**********/
|
||||
/* LABELS */
|
||||
|
@ -255,3 +275,21 @@ a:hover{
|
|||
#translation_credits{
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#language_options{
|
||||
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
text-align: left;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
font-size: 21px;
|
||||
line-height: 1.4em;
|
||||
|
||||
}
|
||||
#language_options a{
|
||||
color: #a8a8a8;
|
||||
}
|
||||
#language_options a:hover{
|
||||
color: #ccc;
|
||||
}
|
||||
|
|
|
@ -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>
|
2355
index.html
36
js/comic.js
|
@ -359,25 +359,32 @@ 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){
|
||||
|
||||
// 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];
|
||||
|
||||
////////////////////////////////
|
||||
|
||||
// A database of languages!
|
||||
var langs = xhr.response.split("\n\n");
|
||||
langs.forEach(function(lang){
|
||||
|
||||
var splitup = lang.split("\n");
|
||||
var code = splitup[0];
|
||||
if(code=="ex") return; // no Example
|
||||
|
||||
LANGUAGES[code] = {
|
||||
name: splitup[1],
|
||||
|
@ -400,22 +407,11 @@ xhr.addEventListener("load", function(event){
|
|||
var html = "";
|
||||
LANGS_SORTED.forEach(function(code){
|
||||
var lang = LANGUAGES[code];
|
||||
if(code==pageLang) return; // no need for this page, obviously
|
||||
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;
|
||||
|
|
BIN
pics/end0.png
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.3 MiB |
BIN
pics/end1.png
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
BIN
pics/leit0.png
Before Width: | Height: | Size: 969 KiB After Width: | Height: | Size: 949 KiB |
BIN
pics/leit1.png
Before Width: | Height: | Size: 342 KiB After Width: | Height: | Size: 302 KiB |
BIN
pics/leit2.png
Before Width: | Height: | Size: 378 KiB After Width: | Height: | Size: 316 KiB |
BIN
pics/leit3.png
Before Width: | Height: | Size: 213 KiB After Width: | Height: | Size: 242 KiB |
BIN
pics/sci0.png
Before Width: | Height: | Size: 376 KiB After Width: | Height: | Size: 349 KiB |
BIN
pics/sci1.png
Before Width: | Height: | Size: 169 KiB After Width: | Height: | Size: 150 KiB |
BIN
pics/sci2.png
Before Width: | Height: | Size: 312 KiB After Width: | Height: | Size: 270 KiB |
|
@ -19,12 +19,22 @@ if(!FRONT_ONLY){
|
|||
// HACK: PLAY AUDIO (if any)
|
||||
var a = $("#HACK_audio");
|
||||
if(a){
|
||||
a.play();
|
||||
|
||||
// NOW load audio and play
|
||||
var source = a.querySelector("source");
|
||||
source.setAttribute("src", source.getAttribute("gotosrc") );
|
||||
a.load();
|
||||
a.addEventListener('canplaythrough', function() {
|
||||
a.play();
|
||||
}, false);
|
||||
|
||||
// So it doesn't flip the card when you click
|
||||
if(!a.onclick){
|
||||
a.onclick = function(e){
|
||||
e.stopPropagation();
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -15,7 +15,7 @@ translated by Your Name
|
|||
original in english
|
||||
|
||||
fr
|
||||
French
|
||||
Français
|
||||
./fr.html
|
||||
Voulez-vous switcher en français?
|
||||
Oui!
|
||||
|
|