diff --git a/ch1.html b/ch1.html index ba36aad..5b3fa95 100644 --- a/ch1.html +++ b/ch1.html @@ -3,7 +3,8 @@ An Interactive Comic - + diff --git a/ch2.html b/ch2.html index 62de1d8..8de650b 100644 --- a/ch2.html +++ b/ch2.html @@ -52,33 +52,68 @@ if you haven't already.) - + This setup is called The Leitner Box. It's like a card game you play against yourself! - + First, divide your box up into seven "Levels". - Each Level will store some flashcards. + + + + + + + All new flashcards start at Level 1. + + + (If you're new to Spaced Repetition, I recommend starting with 5 new cards a day.) - - - Remember: we need to space out our reviews with increasing gaps of time. - In the Leitner Box, we double the gap for each Level! + + + When you review a card, and get it right, it moves up one 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. + + (If you're at the final Level, congrats! + Your card gets to retire in your long-term memory) + + + + + + + But if you review a card, and get it wrong... it has to go + all the way back down to Level 1. + + + (If it's already at Level 1, good news: + you can keep testing yourself on it until you get it right, + and move it up to Level 2) + + + + + + + But when do we review cards? + That's the trick. + In the Leitner Box, we review Level 1 cards every day, + Level 2 every two days, Level 3 every FOUR days, + Level 4 every EIGHT days, etc... + + + The pattern is: we double the gap (# of days between reviews) for each Level! - Here's what that looks like over a 64-day, looping calendar: + Here's what the looping 64-day game calendar looks like: @@ -86,68 +121,35 @@ if you haven't already.) - - - - - - Now, how do you play this game of Spaced Repetition Solitaire? - - - - - - - The rules are simple. - First, all new cards start at Level 1. - - - (If you're new to Spaced Repetition, I recommend starting with 5 new cards a day.) - - - - - + + - Every day, review your Levels from highest to lowest. - Shuffle each Level's cards first. - Every card you get right goes up one Level. + (Note: the reason we review Level 1 at the end + is so you see your new cards and the cards you forgot from higher Levels.) - - (If you're at the final Level, congrats! - Your card gets to retire in your long-term memory) + + (At the end of a daily game of Spaced Repetition, + leave no cards in Level 1. + Test yourself until you can get them all right, + and move them up to Level 2!) - - - - However, every card you get wrong... has to go - all the way back down to Level 1. + + + + (Note #2: Spaced Repetition apps like Anki use a more sophisticated algorithm...) - - (You can change the rules – I mean, it's your shoebox – - but I recommend playing this way) - - - - - - - Each day, you review Level 1 at the end. - You'll see your new cards + the cards you forgot. - - - Keep trying to recall them, until you can get every one right! - Move them all to Level 2. + + (...but at its core, it works on the same principles as the Leitner Box) - And that's all to it! - Here's how the game plays out, over a few days: - (There's no end. Once you "get it", just keep scrolling.) + And that's all to it! + Here's how the game plays out, step by step: + (This sim has no end. Once you "get it", just keep scrolling.) @@ -206,14 +208,12 @@ if you haven't already.) - + That's it. That's how you can make long-term memory a choice. Let's let that sink in. Take a break, and recall what we just learnt: -
- (CLICK CARD TO FLIP)
@@ -283,11 +283,9 @@ if you haven't already.)
- + This card sucks: -
- (CLICK CARD TO FLIP)
@@ -444,22 +442,12 @@ if you haven't already.)
- + - And so on. - - - - - And so on. - - - - - And so on. + And so on. @@ -489,25 +477,14 @@ if you haven't already.) - - - - These three rules for making cards... - - - - ...are why it's consensus among the Spaced Repetition community that, - after a while, - you should start making your own cards. - - - - - This way, you can connect facts to things you know, - to pictures and sounds you like, - in service of doing something you love. + + The consensus in the Spaced Repetition community is, + after a while, you should make your own cards. + + + That way, you can connect facts to what you know, what you love. diff --git a/ch2_old.html b/ch2_old.html new file mode 100644 index 0000000..b4ba450 --- /dev/null +++ b/ch2_old.html @@ -0,0 +1,938 @@ + + + + + An Interactive Comic + + + + + + + +
+ + + + + +(This is a work-in-progress! +Please don't share yet. +
+Let me know your honest feedback, thanks!) + +

+ +(Also, this is CHAPTER 2 of my prototype. +You might wanna play CHAPTER 1 first, +if you haven't already.) + +
+
+ + + + + + + + + + + + + + + You don't have to use a shoebox for Spaced Repetition, + but it's funnier if you do. + + + (Later, we'll look at some Spaced Repetition apps, + like Anki & Tinycards) + + + + + + + This setup is called The Leitner Box. + It's like a card game you play against yourself! + + + First, divide your box up into seven "Levels". + + + + + + + All new cards start at Level 1, then get promoted to higher Levels + as your memory of them improves. (I'll explain the details later) + + + Thus: Level 1 cards have fast memory-decay, Level 2 cards have slower memory-decay, etc. + + + + + + + + But remember, we have to try recalling a card just as we're about to forget it. + + + And as we saw earlier, + you do this by scheduling recalls with increasing gaps of time. + + + + + + + That's why, in the Leitner Box, + we review Level 1 cards every day, + Level 2 every two days, + Level 3 every FOUR days, + Level 4 every EIGHT days... and so on. + + + The pattern is: we double the gap between Levels! + + + + + + Here's what that looks like over a 64-day, looping calendar: + + + + + + + + + + + + + Now, how do you play this game of Spaced Repetition Solitaire? + + + + + + + The rules are simple. + First, all new cards start at Level 1. + + + (If you're new to Spaced Repetition, I recommend starting with 5 new cards a day.) + + + + + + + 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 at the final Level, congrats! + Your card gets to retire in your long-term memory) + + + + + + + However, every card you get wrong... has to go + all the way back down to Level 1. + + + (You can change the rules – I mean, it's your shoebox – + but I recommend playing this way) + + + + + + + Each day, you review Level 1 at the end. + You'll see your new cards + the cards you forgot. + + + Keep trying to recall them, until you can get every one right! + Move them all to Level 2. + + + + + + And that's all to it! + Here's how the game plays out, over a few days: + (There's no end. Once you "get it", just keep scrolling.) + + + + + + + + + + + + + + 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. + + + + + + + However, habits are hard. If you start big, you won't get the ball rolling... + + + But if you start small, you can gain momentum, + and roll your snowball bigger and bigger. + + + + + + + That's why I recommend starting with 5 new cards a day. + + + Once you're comfortable with that, you can do 10 new cards/day. + Then 15. Then 20, 25, 30. + + + And at 30 new cards a day, you can learn 10,000+ new facts/words/etc a year. + + + + + + Here's how the game plays out, in the long, long run: + + + + + + + + + + + + + + That's it. That's how you can make long-term memory a choice. + + + Let's let that sink in. Take a break, and recall what we just learnt: + + + + + + + + + + + + + + (TODO: Include practice flashcards from Chapter 1) +

+ Spaced Repetition almost seems too good to be true. +
+ And it is... IF you fall for some very common pitfalls. +
+
+ + + + + Memory isn't a bookshelf + where you collect random giant tomes to impress others. + + + That's to say: Spaced Repetition will fail if your cards feel + bloated, disconnected or meaningless. + + + + + + + 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. + + + + + + + Thus, to get the most out of Spaced Repetition, + you must make your cards... + + + + + + + + Let's see how. + + + + + + + + + + + + + This card sucks: + + + + + + + + + + + It's too big. Too much information. + + + Let's cut it up into smaller, connected pieces! + As a rule of thumb, each flashcard should have one & only one idea. + Like so: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Facts connect to facts. + But there's other, more playful ways for cards to be... + + + + + + + + + + + + + + This card is... alright. + It's an English word on the front, French word on the back. + It's the standard for most language-learning flashcards: + + + + + + + + + + + But you know what would make it stick in memory better? + + + If you connected it to + pictures, sounds, context, and/or personal details! + Like so: + + + + + + + + + + + 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) + + + + + + + The back now has a symbol of the noun's gender (picture), + its pronunciation (sound*), + 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! + + + + + + + But the most important connection of all, + is to connect your learning to something that is... + + + + + + + + + + + + + + + Personally, here's how I've learnt best: + First, I try (emphasis on try) to do something. + + + + + + + Inevitably, I'll get stuck. + In that moment, I'll look up what I need, + and learn something. + + + + + + + + + + And so on. + + + + + + + That, I believe, is the best way to keep yourself motivated while learning: + + + By making sure your learning is in service of doing something you care about. + + + + + + + + Speaking of learning, let's practice recalling what we've learnt: + (this will be the second-last time!) + + + + + + + + + + + + + + The consensus in the Spaced Repetition community is, + after a while, you should make your own cards. + + + That way, you can connect facts to what you know, what you love. + + + + + + + That's why, in the final part of this interactive comic, + you're going to make your own cards! + + + And those cards will be about... + + + + + + + YOU + + + + + + + + +[END OF CHAPTER TWO] + +

+ +Sorry for the cliffhanger, again! +The 3rd/final short chapter will have you make your own flashcards to these questions: + +
    + +
  • + WHAT do you want to learn? +
  • + +
  • + WHY do you want to learn that? (to make your cards meaningful) +
  • + +
  • + HOW will you learn? (choose: Leitner Box, or digital apps like Anki / TinyCards / etc) +
  • + +
+ +If you picked Anki/Tinycards, it'll help you download them and get started. +If you picked a Leitner Box, it'll give you a 64-day calendar to download & print out. + +

+ +And finally, to really help you get started and keep going, you'll also get to download a laptop/phone wallpaper +to remind you to do your Spaced Repetition. +You'll also get to download all the practice flashcards +in this interactive comic, including the ones you just made. These can be your first cards! + +

+ +Hopefully... this all helps you start using Spaced Repetition TODAY – +letting you take better control of your learning, and fill the long-term memory library of your mind +with wonderful things. + +

+ +Anyway, please let me know your honest feedback so far! +Early feedback helps me a lot. Many thanks in advance! + +

+ +<3, +
~ Nicky + +
+
+ +
+ + + + + + + + +
+ + + + + + + + + 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] retired) + + + + + next step + + + next day + + + next week + + + next month + + + + + [N] new cards a day + + + recall [N]% of cards wrong + + + + + RESET + + + + + + + + + + + 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/pics/leit0.png b/pics/leit0.png index 1f2d852..392479a 100644 Binary files a/pics/leit0.png and b/pics/leit0.png differ diff --git a/pics/leit3.png b/pics/leit3.png index e754a8f..0bc00fc 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 index af3acfa..53dad61 100644 --- a/sims/calendar/calendar.css +++ b/sims/calendar/calendar.css @@ -32,4 +32,33 @@ body{ #default_labels{ display:none; -} \ No newline at end of file +} + +input[type=range]{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + height: 2px; + border-radius: 5px; + background: #d3d3d3; + outline: none; + margin-top: 15px; + margin-bottom: 15px; +} +input[type=range]::-webkit-slider-thumb{ + -webkit-appearance: none; + appearance: none; + width: 15px; + height: 35px; + border-radius: 8px; + background: #333; + cursor: pointer; +} +input[type=range]::-moz-range-thumb{ + width: 15px; + height: 35px; + border-radius: 8px; + background: #333; + cursor: pointer; +} + diff --git a/sims/calendar/calendar.js b/sims/calendar/calendar.js index 906fa7a..b9e580e 100644 --- a/sims/calendar/calendar.js +++ b/sims/calendar/calendar.js @@ -45,6 +45,9 @@ daySlider.oninput = function(){ var QUEUE = CALENDAR[DAY-1]; // -1 offset $("#label_review").innerHTML = _getLabel("calendar_review").replace("[N]", QUEUE.toString() ); + // KILL SLIDEY + if(window.slidey) window.slidey.kill(); + } window.REDRAW = 0; @@ -143,6 +146,16 @@ function update(){ } window.onload = function(){ + daySlider.oninput(); update(); -}; \ No newline at end of file + + window.slidey = new createAnimatedUIHelper({ + x: 8, + y: 95, + width: 100, + height: 100, + img: "../../pics/ui_slide.png" + }); + +}; diff --git a/sims/leitner/leitner.css b/sims/leitner/leitner.css index 6f43b28..3ae7e61 100644 --- a/sims/leitner/leitner.css +++ b/sims/leitner/leitner.css @@ -48,3 +48,48 @@ body{ #MODE2_time, #MODE2_sliders{ display:none; } + +button{ + font-size:18px; + font-family: "PatrickHand", Helvetica, Arial; + background: #fff; + border: 1px solid #ccc; + border-radius: 5px; + cursor: pointer; + position: relative; +} +button:focus { + outline:0; +} +button:hover{ + top:-2px; +} + +input[type=range]{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + height: 2px; + border-radius: 5px; + background: #d3d3d3; + outline: none; + margin-top: 20px; + margin-bottom: 30px; +} +input[type=range]::-webkit-slider-thumb{ + -webkit-appearance: none; + appearance: none; + width: 15px; + height: 35px; + border-radius: 8px; + background: #333; + cursor: pointer; +} +input[type=range]::-moz-range-thumb{ + width: 15px; + height: 35px; + border-radius: 8px; + background: #333; + cursor: pointer; +} + diff --git a/sims/leitner/leitner.js b/sims/leitner/leitner.js index 0ba881d..947a23a 100644 --- a/sims/leitner/leitner.js +++ b/sims/leitner/leitner.js @@ -37,6 +37,9 @@ window.onload = function(){ //$("#MODE2_sliders").style.display = "block"; } + // POINTY + _addPointy(MODE==2); + }; ////////////////////////////////////////// @@ -86,6 +89,8 @@ $("#reset").onclick = function(){ _newStep(); //update(); + _killPointy(); + }; // UI Sliders @@ -142,6 +147,7 @@ function _updateLabels(){ $("#next_step").onclick = function(){ _newStep(); + _killPointy(); }; function _newStep(skipLabels){ @@ -207,6 +213,7 @@ function _newStep(skipLabels){ $("#next_day").onclick = function(){ _newDay(); _updateLabels(); + _killPointy(); }; function _newDay(skipLabels){ @@ -239,9 +246,11 @@ function _reviewMultipleDays(days){ $("#next_week").onclick = function(){ _reviewMultipleDays(7); + _killPointy(); }; $("#next_month").onclick = function(){ _reviewMultipleDays(30); + _killPointy(); }; ////////////////////////////////////////// @@ -487,3 +496,21 @@ function _drawArrow(fail){ ctx.fillText(label, cp.x, cp.y+15); } + +////////////////////////////////////////// +////////////////////////////////////////// + +function _addPointy(mode2){ + + window.pointy = new createAnimatedUIHelper({ + x: mode2 ? 380 : 120, + y: 50, + width: 100, + height: 100, + img: "../../pics/ui_point.png" + }); + +} +function _killPointy(){ + if(window.pointy) window.pointy.kill(); +} \ No newline at end of file diff --git a/sims/singlecard/singlecard.js b/sims/singlecard/singlecard.js index 81afb0d..38393f0 100644 --- a/sims/singlecard/singlecard.js +++ b/sims/singlecard/singlecard.js @@ -1,4 +1,5 @@ window.front_only = _getQueryVariable("front_only"); +window.forever_card = (_getQueryVariable("forever_card")=="yes"); window.FRONT_ONLY = (front_only && front_only=="yes"); var flashcard = $("#flashcard"); @@ -34,8 +35,9 @@ if(!FRONT_ONLY){ },1000); // AND REMOVE UI - // TODO: unless it's the forever-card - clicky.kill(); + if(!window.forever_card){ + clicky.kill(); + } }