diff --git a/ch2.html b/ch2.html index 0f9d117..22f6242 100644 --- a/ch2.html +++ b/ch2.html @@ -34,7 +34,7 @@ - This method is called The Leitner System. + This setup is called The Leitner Box. It's like a card game you play against yourself! @@ -43,36 +43,34 @@ - -"wait, what's a flashcard?" - - - - - -"what kind of stuff can I learn with flashcards?" - - - - - - - We need to space out our recalls with increasing gaps of time. - So, here's a calendar of when to review which Level's cards: + + + + Remember: we need to space out our reviews with increasing gaps of time. + In the Leitner Box, we double the gap for each Level! + + + So we review Level 1 every day, Level 2 every two days, Level 3 every FOUR days, + Level 4 every EIGHT days... and so on. - - + + + Here's what that looks like over a 64-day, looping calendar: + + + + + - + - But how do cards move between Levels? - How do you play this game of Spaced Repetition Solitaire? + Now, how do you play this game of Spaced Repetition Solitaire? @@ -90,9 +88,9 @@ - When you review the cards in a Level, first, shuffle them. - Then, try to recall them. - Each card you get right goes up one Level. + Every day, review your Levels from highest to lowest. + Shuffle each Level's cards first. + Every card you get right goes up one Level. (If you're already at the final Level, congrats! @@ -103,12 +101,12 @@ - But each card you get wrong... goes + However, every card you get wrong... has to go all the way back down to Level 1. - (You can change the rules – it's your shoebox – - but I recommend playing it this way) + (You can change the rules – I mean, it's your shoebox – + but I recommend playing this way) @@ -126,13 +124,14 @@ - And that's it! - Here's how the game plays out over several days: + And that's all there is to it! + Here's how the game plays out, over several days: (Later, we'll see a sim for several months) - + + @@ -141,7 +140,7 @@ - Each daily session takes 20-30 minutes. + Each daily review takes 20-30 minutes. Instead of watching a TV episode, you could play a card game – and remember anything you want for life. @@ -174,11 +173,12 @@ - Here's what that looks like, over several months: + Here's how the game plays out, over several months: - + + @@ -194,8 +194,8 @@ - - + + @@ -206,27 +206,27 @@ Spaced Repetition almost seems too good to be true.
- And it is... IF you fall for 3 very common pitfalls. + And it is... IF you fall for some very common pitfalls.
- - Spaced Repetition will fail if your cards feel - bloated, disconnected, or meaningless. + + Memory isn't a bookshelf + where you collect random giant books to impress others. - - Memory isn't a private library, - where you hoard a bunch of random books to impress others. + + That's to say: Spaced Repetition will fail if your cards feel + bloated, disconnected or meaningless. - Memory is more like a jigsaw puzzle, full of tiny pieces joined together. - (This is also how neurons work: lots of tiny, connected things) + Instead, memory is like a jigsaw puzzle: full of small, connected pieces. + (This is also how neurons work: lots of small, connected things) It's not about collection, it's about connection. @@ -236,19 +236,26 @@ - So, to get the most out of Spaced Repetition, + Thus, to get the most out of Spaced Repetition, you must make your cards... + + + + Let's see how. + + + - + @@ -257,24 +264,52 @@ - - - + + - + It's too big. Too much information. - - Instead, let's cut in up into a bunch of smaller, connected pieces, - like so: + + Let's cut it up into smaller, connected pieces! + As a rule of thumb, each flashcard should contain only one idea. + Like so: - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -289,24 +324,23 @@ - + This card is... alright. It's an English word on the front, French word on the back. - It's the standard for most flashcards: + It's the standard for most language-learning flashcards: - - + + - @@ -314,20 +348,19 @@ If you connected it to - images, sounds, context, and/or personal details! + pictures, sounds, context, and/or personal details! Like so: - - - + + - - The front now has a drawing of a cat (image) + + The front now has a drawing of a cat (picture) with a fill-in-the-blank French sentence (context: grammar) about my childhood cat, Stripes. (personal) @@ -335,12 +368,12 @@ - - The back now has a symbol of the noun's gender (image), + + The back now has a symbol of the noun's gender (picture), its pronunciation (sound*), - and a warning not to use the female version. (context: slang) + and a warning about the female version of the noun. (context: slang) - + * Obviously, paper cards can't play sounds. But apps like Anki/Tinycards can! @@ -358,16 +391,16 @@ - + Personally, here's how I've learnt best: - First, I try to do something. + First, I try (emphasis on try) to do something. @@ -380,13 +413,8 @@ - - - + + @@ -420,16 +448,15 @@ Speaking of learning, let's practice recalling what we've learnt: - (this is the second-last time!) + (this will be the second-last time!) - - + + - @@ -440,34 +467,34 @@ ...are why it's consensus among the Spaced Repetition community that, - for the most part, - you should make your own cards. + after a while, + you should start making your own cards. - + This way, you can connect facts to things you know, - to images and sounds you like, + to pictures and sounds you like, in service of something you love. - + That's why, in the final part of this interactive comic, - you're going to make your own cards! + you're going to make your own cards! - - And these cards will be about... + + And those cards will be about... - + YOU @@ -481,25 +508,288 @@
-
- - Day [N] - - - to review: Level - - - review Level [N] - - - add [N] new cards - - - total: [N] cards! - - - ([N] in very-long-term memory) - + + + On Day [N]... + + + review Levels [N] (in that order) + + + (and then loop back to Day 1!) + + + + + Day [N] + + + to review: Level + + + review Level [N] + + + add [N] new cards + + + total: [N] cards! + + + ([N] in very-long-term memory) + + + + + try to recall ↑ + then flip ↻ + + + (cards left: [N]) + + + did you remember this? + + + nah, try again + + + yup, onwards! + + + done for now! keep scrolling +
+ ↓ +
+ + + + + + + + + +
+
+ cat +
+
+ (english) +
+
+
+ +
+
+ chat +
+
+ (french) +
+
+
+ +
+
+
+ +
+
+
+ + + +
+
+ ...then back to doing... +
+
+ +
+
+ ...then back to learning... +
+
+ + + +
+
+ What's this? +
+
+ +
+ This organelle is called "mitochondria". + Mitochondria is the powerhouse of the cell. + They're found in almost all eukaryotic (nucleus-having) organisms. + The most widely-accepted hypothesis for the origin of mitochondria is Endosymbiotic Theory: + around ~1.5 billion years ago, a prokaryotic (nucleus-lacking) cell that was "eaten" by another cell, + somehow survived, and has continued to live inside them ever since. +
+
+ +
+
+ What's this? +
+
+ +
+ Mitochondria +
+
+ +
+
+ Mitochondria is the _______ of the cell +
+
+ +
+ powerhouse + + // bonus note: seriously though, we'd all be dead without 'em. + +
+
+ +
+
+ Mitochondria is found in almost all ____ organisms. +
+
+ +
+ eukaryotic +
+
+ +
+ Eukaryotes are cells that... +
+
+ +
+
+ have a nucleus + + // bonus note: "eu"=good, "karyon"=kernel + +
+
+ +
+ Prokaryotes are cells that... +
+
+ +
+
+ DON'T have a nucleus + + // bonus note: "pro"=before, "karyon"=kernel + +
+
+ +
+
+ The most widely-accepted hypothesis for the origin of mitochondria is... +
+
+ +
+ Endosymbiotic Theory + + // bonus note: "endo"=inner, "sym"=together, "bio"=living + +
+
+ +
+
+ According to Endosymbiotic Theory, mitochondria arose around + ____ years ago +
+
+ +
+ ~1.5 billion years ago +
+
+ +
+
+ According to Endosymbiotic Theory, mitochondria first arose when... +
+
+ +
+
+ when a prokaryote was eaten by another cell +
+
+ + + +
+ In the Leitner Box, we ______ + the gap (# of days between reviews) for each Level +
+
+ +
+
+ double the gap +
+
+ +
+ The Leitner Box game: +
+ when you get a card right, you move it ______ . +
+
+ +
+
+ up one Level +
+
+ +
+ The Leitner Box game: +
+ when you get a card wrong, you move it ______ . +
+
+ +
+
+ back to Level 1! +
+
+ +
+ According to some random comic-game on the internet, + my Spaced Repetition flashcards should be + ______ , + ______ , and + ______ . +
+
+ +
+
+ small, connected & meaningful +
+
+ + + +
diff --git a/css/comic.css b/css/comic.css index 2da22c5..64d2499 100644 --- a/css/comic.css +++ b/css/comic.css @@ -84,6 +84,9 @@ b, strong{ #comic panel sim > label{ display:none; } +.small_card{ + transform: scale(0.6, 0.6); +} /**********/ /* LABELS */ diff --git a/js/comic.js b/js/comic.js index 794a955..5e0c777 100644 --- a/js/comic.js +++ b/js/comic.js @@ -54,12 +54,13 @@ window.onload = function(){ }); - // Words... no bg? And, fontsize? + // Words... no bg? And, fontsize, color? words.forEach(function(word){ var s = word.style; var val; if(val = word.getAttribute("bg")) s.background = val; if(val = word.getAttribute("fontsize")) s.fontSize = s.lineHeight = val+"px"; + if(val = word.getAttribute("color")) s.color = val; }); // Panels... Any MESSAGES? diff --git a/pics/fcards_ch2.png b/pics/fcards_ch2.png new file mode 100644 index 0000000..3a9a4e6 Binary files /dev/null and b/pics/fcards_ch2.png differ diff --git a/pics/leit0.png b/pics/leit0.png index 116d52d..400ab52 100644 Binary files a/pics/leit0.png and b/pics/leit0.png differ diff --git a/pics/leit1.png b/pics/leit1.png index 2fa7be3..c744800 100644 Binary files a/pics/leit1.png and b/pics/leit1.png differ diff --git a/pics/leit2.png b/pics/leit2.png index 5ff494d..90ea1f3 100644 Binary files a/pics/leit2.png and b/pics/leit2.png differ diff --git a/pics/leit3.png b/pics/leit3.png index ef76d0a..e754a8f 100644 Binary files a/pics/leit3.png and b/pics/leit3.png differ diff --git a/sims/calendar/calendar.css b/sims/calendar/calendar.css new file mode 100644 index 0000000..af3acfa --- /dev/null +++ b/sims/calendar/calendar.css @@ -0,0 +1,35 @@ +/* FONT FACE */ +@font-face { + font-family: "PatrickHand"; + font-style: normal; + font-weight: 400; + src: url(../../css/PatrickHand-Regular.ttf) format('truetype'); +} + +body{ + margin: 0; + font-family: "PatrickHand", Helvetica, Arial; + color: #000; + padding: 0 10px; + background: #eee; + letter-spacing: 1px; + font-size: 25px; +} + +#content{ + background: #fff; + width: 500px; + padding: 50px; + overflow: hidden; + position: absolute; + top: 0; + left: 0; +} +#container{ + width: 500px; + margin: 0px auto; +} + +#default_labels{ + display:none; +} \ No newline at end of file diff --git a/sims/calendar/calendar.js b/sims/calendar/calendar.js new file mode 100644 index 0000000..906fa7a --- /dev/null +++ b/sims/calendar/calendar.js @@ -0,0 +1,148 @@ +var canvas = document.getElementById("sim"); +var ctx = canvas.getContext('2d'); + +var BOXES = [ + 0,0,0,0, + 0,0,0//,0 +]; +var ANIM_CARDS = BOXES.concat(); // clone +var ANIM_BOXES = BOXES.concat(); // clone +var ANIM_EASE = 0.8; + +var COLORS = [ + "#ee4035", // red + "#f37736", // orange + "#ffdb13", // yellow + "#7bc043", // green + "#0392cf", // blue + "#673888", // indigo-ish + "#ef4f91", // violet-ish + "#e0e0e0" // white. VALHALLA. +]; + +var DAY = 1; +var CALENDAR = [ + [2,1], [3,1], [2,1], [4,1], [2,1], [3,1], [2,1], [1], + [2,1], [3,1], [2,1], [5,1], [4,2,1], [3,1], [2,1], [1], + [2,1], [3,1], [2,1], [4,1], [2,1], [3,1], [2,1], [6,1], + [2,1], [3,1], [2,1], [5,1], [4,2,1], [3,1], [2,1], [1], + [2,1], [3,1], [2,1], [4,1], [2,1], [3,1], [2,1], [1], + [2,1], [3,1], [2,1], [5,1], [4,2,1], [3,1], [2,1], [1], + [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 daySlider = $("#day"); +daySlider.oninput = function(){ + + window.REDRAW = 30; + DAY = daySlider.value; + + // Labels + var html = "" + _getLabel("calendar_day").replace("[N]", DAY) + ""; + if(DAY==64) html += _getLabel("calendar_loop"); + $("#label_day").innerHTML = html; + var QUEUE = CALENDAR[DAY-1]; // -1 offset + $("#label_review").innerHTML = _getLabel("calendar_review").replace("[N]", QUEUE.toString() ); + +} + +window.REDRAW = 0; +function update(){ + + // Don't re-draw unnecessarily! + if(window.REDRAW>0){ + + window.REDRAW -= 1; + + // Clear & Retina + ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); + ctx.save(); + ctx.scale(2,2); + + ////////////////////////////////////////// + // DRAW SCHEDULE ///////////////////////// + ////////////////////////////////////////// + + var x = 0; + ctx.save(); + for(var i=0;i=0); // +1 coz offset + + // Transform... + ctx.save(); + ctx.translate(i*(w+2.5), canvas.height/2-h); + + // Bounce! ANIMATED! + var elevation = activeToday ? 10 : 0; + ANIM_BOXES[i] = ANIM_BOXES[i]*ANIM_EASE + elevation*(1-ANIM_EASE); + ctx.translate(0, -ANIM_BOXES[i]); + + // Fill + var color = COLORS[i]; + ctx.fillStyle = activeToday ? color : "#fff"; + ctx.fillRect(0, 0, w, h); + + // Stroke + if(!activeToday){ + ctx.strokeStyle = color; + var lw = 2; + ctx.lineWidth = lw; + ctx.beginPath(); + ctx.rect(lw/2, lw/2, w-lw, h-lw); + ctx.stroke(); + } + + // Number + ctx.font = "50px PatrickHand"; + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; + ctx.fillStyle = activeToday ? "#fff": color; + ctx.fillText((i+1), w/2, h/2); + + ctx.restore(); + + } + + // And, again... + ctx.restore(); + + } + + requestAnimationFrame(update); + +} + +window.onload = function(){ + daySlider.oninput(); + update(); +}; \ No newline at end of file diff --git a/sims/calendar/index.html b/sims/calendar/index.html new file mode 100644 index 0000000..5d7e382 --- /dev/null +++ b/sims/calendar/index.html @@ -0,0 +1,36 @@ + + + + + The Calendar + + + + +
+
+ + + + +
+
+ +
+ + On Day [N]... + + + review Levels [N] (in that order) + + + (and then loop back to Day 1!) + +
+ + + + + + + \ No newline at end of file diff --git a/sims/fcard.css b/sims/fcard.css index 247b9fd..e1eaf1d 100644 --- a/sims/fcard.css +++ b/sims/fcard.css @@ -1,5 +1,5 @@ .fcard_center{ - max-width: 370px; + max-width: 360px; position: absolute; margin: auto; top: 0; @@ -10,7 +10,19 @@ } .fcard_bg{ position:absolute; - width:100%; + /*width:100%;*/ + width:400px; height:100%; - background:#ff4040; + /*background:#ff4040;*/ + background: #ffffff; +} +.underline{ + letter-spacing: -0.1em; +} +.bonus_note{ + font-size: 30px; + line-height: 30px; + color: #999; + display: block; + margin-top: 10px; } \ No newline at end of file diff --git a/sims/helpers.js b/sims/helpers.js index 8e6a3b5..198cc9d 100644 --- a/sims/helpers.js +++ b/sims/helpers.js @@ -1,3 +1,5 @@ +Math.TAU = Math.PI*2; // i'm twice the number you'll ever be + // The poor man's jQuery function $(query){ return document.querySelector(query); diff --git a/sims/leitner/leitner.js b/sims/leitner/leitner.js index 3ec6fe4..028f65c 100644 --- a/sims/leitner/leitner.js +++ b/sims/leitner/leitner.js @@ -204,7 +204,7 @@ var COLORS = [ "#0392cf", // blue "#673888", // indigo-ish "#ef4f91", // violet-ish - "#eeeeee" // white. VALHALLA. + "#e0e0e0" // white. VALHALLA. ]; var BOXES = [ 0,0,0,0,