NotDotTeam/remember
NotDotTeam
/
remember
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

More asdasdasljl

This commit is contained in:
Nicky Case 2018-10-25 17:20:45 -04:00
parent 60b341e19f
commit 1c661adab9
6 changed files with 61 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
index.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>An Interactive Comic</title> <title>How To Remember Anything Forever-ish</title>
<link rel="stylesheet" type="text/css" href="css/comic.css"/> <link rel="stylesheet" type="text/css" href="css/comic.css"/>
<meta name="viewport" content="width=600"> <meta name="viewport" content="width=600">
</head> </head>
@ -102,7 +102,7 @@ So, how's Memory and Inspiration doing in schools?
</words> </words>
<words x=164 y=141 w=300 no-bg> <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, 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?</i> to store <i>anything you choose</i> into long-term memory, <i>forever-ish?</i>
</words> </words>
</panel> </panel>
@ -321,7 +321,7 @@ Like so:
</words> </words>
</panel> </panel>
<panel w=500 h=50 style="margin-top:-5px"> <panel w=500 h=53 style="margin-top:-5px">
<words w=500 x=-15 y=-10 no-bg style="width: 500px; font-size:0.8em; text-align: right; color:#999; line-height: 1.1em;"> <words w=500 x=-15 y=-10 no-bg style="width: 500px; font-size:0.8em; text-align: right; color:#999; line-height: 1.1em;">
* technically the curve isn't <i>exactly</i> * technically the curve isn't <i>exactly</i>
<br> <br>
@ -1661,16 +1661,16 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</panel> </panel>
<div> <div>
<a id="wallpaper_link"> <a target="_blank" id="wallpaper_link">
<img id="wallpaper_image"/><br> <img id="wallpaper_image"/><br>
(click to download &darr;) [click to download &darr;]
</a> </a>
</div> </div>
<!-- Leitner Calendar / Anki --> <!-- Leitner Calendar / Anki -->
<panel w=600 h=90> <panel w=600 h=90 style="height: auto; position: relative; left: -15px;">
<words x=-15 y=0 w=600 no-bg style="text-align:left" fontsize=30> <words x=-15 y=0 w=570 no-bg style="text-align:left; position:static" fontsize=30>
<img src="pics/gift.png" style="height:1em"/> <img src="pics/gift.png" style="height:1em"/>
<b>SECOND:</b> <b>SECOND:</b>
<span id="gift_app"></span> <span id="gift_app"></span>
@ -1680,7 +1680,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<!-- All flashcards --> <!-- All flashcards -->
<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> <words x=-15 y=0 w=600 no-bg style="text-align:left" fontsize=30>
<img src="pics/gift.png" style="height:1em"/> <img src="pics/gift.png" style="height:1em"/>
And finally, And finally,
@ -1689,15 +1689,15 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</words> </words>
</panel> </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> <sim x=0 y=0 w=400 h=100 src="sims/downloads/all.html"></sim>
</panel> </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"> <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, (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 to help you get started! And as a plus, you'll get to remember everything
you learnt here today, forever) you learnt here today, forever...ish.)
</words> </words>
</panel> </panel>
@ -1802,9 +1802,15 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</panel> </panel>
<!-- want more? further reading & credits below! --> <!-- want more? further reading & credits below! -->
<panel fadeInOn="flip_the_end" w=600 h=90> <panel fadeInOn="flip_the_end" w=600 h=200>
<words w=600 x=-15 y=0 no-bg> <words w=600 x=-15 y=0 no-bg>
(want more? scroll down for further reading &amp; credits!) (P.S: I genuinely wanna know how <i>you'll</i> use Spaced Repetition!
Tweet a photo of your Box/Anki with the tag
<a target="_blank" href="https://twitter.com/search?q=%23SpacedRepetition">
#SpacedRepetition</a> –
I'll collect examples into a page for everyone to see)
<br><br>
(Want more? Scroll down for further reading &amp; credits!)
<br> <br>
&darr; &darr; &darr; &darr; &darr; &darr; &darr; &darr; &darr; &darr;
</b> </b>
@ -1859,8 +1865,7 @@ meaning you can freely use this thing for educational, personal, or even commerc
You already have my permission! You already have my permission!
<a target="_blank" href="https://github.com/ncase/remember"> <a target="_blank" href="https://github.com/ncase/remember">
(Download the code)</a> (Download the code)</a>
&nbsp; <a target="_blank" href="https://github.com/ncase/remember#how-to-translate">
<a target="_blank" href="TODO ADD LINK">
(Translate this comic)</a> (Translate this comic)</a>
</p> </p>
@ -1890,7 +1895,7 @@ Here are the reads that made Spaced Repetition a part of my daily life:
Fluent Forever</a> Fluent Forever</a>
by Gabriel Wyner by Gabriel Wyner
convinced me to finally (re)start learning French, convinced me to finally (re)start learning French,
and adopt a Leitner Box. and create a Leitner Box. (my 64-day calendar was adapted from this book)
</li> </li>
<li> <li>
🤓 🤓
@ -1942,8 +1947,6 @@ check out Explorable Explanations!</a> 🕹️
<hr> <hr>
<hr>
<p style="font-size:50px;margin-bottom:10px"> <p style="font-size:50px;margin-bottom:10px">
More Thanks More Thanks
</p> </p>
@ -1995,7 +1998,7 @@ Zeno Rogue
<p> <p>
🔊 This project was made with Creative Commons assets 🔊 This project was made with Creative Commons assets
from Wikimedia Commons and FreeSounds. from Wikimedia Commons and FreeSounds.
<a target="_blank" href="TODO ADD LINK"> <a target="_blank" href="https://github.com/ncase/remember#full-asset-credits">
(See full credits)</a> (See full credits)</a>
</p> </p>
@ -2536,15 +2539,25 @@ DONE! Check your Downloads folder.
a lock-screen wallpaper for your phone, a lock-screen wallpaper for your phone,
</span> </span>
<span id="gift_app_leitner"> <span id="gift_app_leitner">
a looping 64-day calendar for your Leitner Box! a video (by my dear friend Chris Walker) on how to craft your very own Leitner Box!
(pdf, so you can print it out) [todo] <br><br>
<iframe width="560" height="315" src="TODO&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:
<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>
</span> </span>
<span id="gift_app_anki"> <span id="gift_app_anki">
a link to a link to
<a target="_blank" href="https://apps.ankiweb.net/">download Anki!</a> <a target="_blank" href="https://apps.ankiweb.net/">download Anki!</a>
(and here's And here's a video tutorial on how to use it:
<a target="_blank" href="https://www.youtube.com/watch?v=sQkdB3cJwn0">a video tutorial</a> <br><br>
on how to get started) <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>
<span id="gift_app_tiny"> <span id="gift_app_tiny">
a link to a link to
@ -2553,9 +2566,9 @@ DONE! Check your Downloads folder.
<a target="_blank" href="https://tinycards.duolingo.com/users/TinyGeo">geography decks</a>) <a target="_blank" href="https://tinycards.duolingo.com/users/TinyGeo">geography decks</a>)
</span> </span>
<span id="gift_app_other"> <span id="gift_app_other">
links to links to tutorials on crafting a Leitner Box
the Leitner Box 64-day calendar [todo], <a target="_blank" href="TODO">[video]</a>
the <a target="_blank" href="./pdf/leitner.pdf">[pdf]</a>,
<a target="_blank" href="https://apps.ankiweb.net/">the Anki app</a>, <a target="_blank" href="https://apps.ankiweb.net/">the Anki app</a>,
and and
<a target="_blank" href="https://tinycards.duolingo.com/">TinyCards</a>! <a target="_blank" href="https://tinycards.duolingo.com/">TinyCards</a>!

32
js/comic.js
View File

@ -23,7 +23,9 @@ window.onload = function(){
if(val = b.getAttribute("x")) s.left = val+"px"; if(val = b.getAttribute("x")) s.left = val+"px";
if(val = b.getAttribute("y")) s.top = val+"px"; if(val = b.getAttribute("y")) s.top = val+"px";
if(val = b.getAttribute("w")) s.width = val+"px"; if(val = b.getAttribute("w")) s.width = val+"px";
if(val = b.getAttribute("h")) s.height = val+"px"; if(val = b.getAttribute("h")){
if(s.height!="auto") s.height = val+"px";
}
}); });
@ -118,6 +120,7 @@ $all("div[editable]").forEach(function(dom){
////////////////////////////////////////// //////////////////////////////////////////
// Wallpaper // Wallpaper
var _lastHow = null;
if($("#gift_wallpaper")){ if($("#gift_wallpaper")){
var gw_text = detectmob() ? "gift_wallpaper_phone" : "gift_wallpaper_desktop"; var gw_text = detectmob() ? "gift_wallpaper_phone" : "gift_wallpaper_desktop";
@ -143,21 +146,28 @@ if($("#gift_wallpaper")){
$("#wallpaper_image").src = dataURL; $("#wallpaper_image").src = dataURL;
} }
// Box/App // Box/App, change ONLY IF HOW CHANGED
var showWhat = "other"; var currHow = $("#flashcard_you_how_back").innerText.trim().toLocaleLowerCase();
var theHow = $("#flashcard_you_how_back").innerText.trim().toLocaleLowerCase(); if(_lastHow != currHow){
if(theHow.search("leit") >= 0 || theHow.search("liet") >= 0){ // for typos
showWhat = "leitner"; var showWhat = "other";
}else if(theHow.search("anki") >= 0){ if(currHow.search("leit") >= 0 || currHow.search("liet") >= 0){ // for typos
showWhat = "anki"; showWhat = "leitner";
}else if(theHow.search("tiny") >= 0){ }else if(currHow.search("anki") >= 0){
showWhat = "tiny"; showWhat = "anki";
}else if(currHow.search("tiny") >= 0){
showWhat = "tiny";
}
$("#gift_app").innerHTML = $("#gift_app_"+showWhat).innerHTML;
} }
$("#gift_app").innerHTML = $("#gift_app_"+showWhat).innerHTML; _lastHow = currHow;
},5000); },5000);
//},1000); //},1000);
// Can't download .zip
} }
// From https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser // From https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser

BIN
leitner/Page1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 479 KiB

BIN
leitner/Page2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 320 KiB

BIN
pdf/leitner.pdf Normal file
View File

Binary file not shown.

BIN
pdf/thumbnail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB