all text removed from images

This commit is contained in:
Nicky Case 2018-10-24 12:40:01 -04:00
parent 49681317ed
commit f6ac74b481
16 changed files with 2687 additions and 2346 deletions

View File

@ -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;
}

286
en.html Normal file
View File

@ -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 &middot; 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 &amp; 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 &amp; highlighting don't work,
less-common techniques like spacing &amp; 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>
&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>
</div>
</body>
</html>
<script src="js/howler.core.min.js"></script>
<script src="js/minpubsub.src.js"></script>
<script src="js/comic.js"></script>

2304
full.html

File diff suppressed because it is too large Load Diff

2355
index.html

File diff suppressed because it is too large Load Diff

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 969 KiB

After

Width:  |  Height:  |  Size: 949 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 342 KiB

After

Width:  |  Height:  |  Size: 302 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 378 KiB

After

Width:  |  Height:  |  Size: 316 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 213 KiB

After

Width:  |  Height:  |  Size: 242 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 376 KiB

After

Width:  |  Height:  |  Size: 349 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 169 KiB

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 312 KiB

After

Width:  |  Height:  |  Size: 270 KiB

View File

@ -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();
};
}
}
}

View File

@ -15,7 +15,7 @@ translated by Your Name
original in english
fr
French
Français
./fr.html
Voulez-vous switcher en français?
Oui!