diff --git a/ch3.html b/ch3.html index 0776a6d..a014788 100644 --- a/ch3.html +++ b/ch3.html @@ -49,14 +49,9 @@ So, here's the front of our first flashcard, our question: - - + + + + + + @@ -145,9 +140,9 @@ the entire list of pokémon - - + + + @@ -219,9 +214,9 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter - - + + + @@ -238,27 +233,19 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter - + - + - + - + @@ -295,30 +282,34 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter - + FIRST: - a wallpaper for your desktop, - - to remind you to play your Spaced Repetition game each day! + + to remind you to play the Spaced Repetition game daily! +
+ +
+(click to download ↓) +
+
+ - + SECOND: - - a link to the Anki app! - (and here's a video tutorial on how to get started) + - + And finally, THIRD: @@ -326,6 +317,10 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter + + + + (These can be your first few days' worth of Spaced Repetition cards, @@ -358,10 +353,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter - - + + @@ -446,6 +439,186 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
+ + + + + WHAT: + + + WHY: + + + DO YOUR CARDS FOR TODAY! + + + wallpaper + + + a wallpaper for your desktop, + + + a lock-screen wallpaper for your phone, + + + a looping 64-day calendar for your Leitner Box! + (pdf, so you can print it out) + + + a link to download Anki! + (and here's a video tutorial on how to get started) + + + a link to TinyCards! + (you can try cards without download or signup. + might i recommend geography or blabla?) + + + links to + the Leitner Box 64-day calendar, + the Anki app, + and TinyCards! + + + + + +
+ WHAT do you want to learn? +
+
+ +
+ Everything +
+
+ +
+ WHY do you want to learn that? +
+
+ +
+ For curiosity's sake! +
+
+ +
+ HOW do you want to do Spaced Repetition? +
+
+ +
+ Leitner Box +
+
+ +
+ WHEN do you want to do Spaced Repetition? +
+
+ +
+ In the evening +
+
+ + + +
  • Everything
  • +
  • herp
  • +
  • derp
  • +
  • (other)
  • +
    + +
  • Curiosity
  • +
  • herp
  • +
  • derp
  • +
  • (other)
  • +
    + +
  • Leitner Box
  • +
  • Anki
  • +
  • TinyCards
  • +
  • (other)
  • +
    + +
  • In the morning
  • +
  • On my commute
  • +
  • In the evening
  • +
  • (other)
  • +
    + + + + Q: + + + type your answer here + + + or pick one of these suggestions: + + + + +
    + The discoverer of the Forgetting Curve was... +
    +
    + +
    +
    + Hermann Ebbinghaus +
    +
    + +
    + The Forgetting Curve (without any recalls) looks like... +
    +
    + +
    +
    + (note: it decays quickly, then slowly – "exponential decay") +
    +
    + +
    + The Forgetting Curve (with optimally-spaced recalls) looks like... +
    +
    + +
    +
    + (note: the gaps between recalls increase in length) +
    +
    + + + + try to recall ↑ + then flip ↻ + + + (cards left: [N]) + + + did you remember this? + + + nah, try again + + + yup, onwards! + + + done for now! keep scrolling +
    + ↓ +
    + +
    diff --git a/css/comic.css b/css/comic.css index 58b6a0f..ae09ba1 100644 --- a/css/comic.css +++ b/css/comic.css @@ -96,3 +96,12 @@ b, strong{ display: none; } +/********/ +/* MISC */ +/********/ + +#wallpaper_image{ + max-width: 400px; + max-height: 250px; +} + diff --git a/js/comic.js b/js/comic.js index 0fe6f72..8058db0 100644 --- a/js/comic.js +++ b/js/comic.js @@ -101,3 +101,110 @@ $all("div[editable]").forEach(function(dom){ }); }); + + + +////////////////////////////////////////// +// TOTAL HACK: the GIFTS ///////////////// +////////////////////////////////////////// + +// Wallpaper +var gw_text = detectmob() ? "gift_wallpaper_phone" : "gift_wallpaper_desktop"; +$("#gift_wallpaper").innerHTML = $("#"+gw_text).innerHTML; + +var WALLPAPER_CHANGED = true; +subscribe("answer_edit_you_what",function(){ + WALLPAPER_CHANGED = true; +}); +subscribe("answer_edit_you_why",function(){ + WALLPAPER_CHANGED = true; +}); + +setInterval(function(){ + + // Wallpaper, re-make ONLY IF CHANGED + if(WALLPAPER_CHANGED){ + WALLPAPER_CHANGED = false; + var canvas = makeWallpaper(); + var dataURL = canvas.toDataURL(); + $("#wallpaper_link").href = dataURL; + $("#wallpaper_link").download = (getLabel("gift_wallpaper_filename").trim())+".png"; + $("#wallpaper_image").src = dataURL; + console.log("updated!"); + } + + // Box/App + var showWhat = "other"; + var theHow = $("#flashcard_you_how_back").innerText.trim().toLocaleLowerCase(); + if(theHow.search("leitner") >= 0){ + showWhat = "leitner"; + }else if(theHow.search("anki") >= 0){ + showWhat = "anki"; + }else if(theHow.search("tiny") >= 0){ + showWhat = "tiny"; + } + $("#gift_app").innerHTML = $("#gift_app_"+showWhat).innerHTML; + +},5000); + +// From https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser +function detectmob(){ + if( navigator.userAgent.match(/Android/i) + || navigator.userAgent.match(/webOS/i) + || navigator.userAgent.match(/iPhone/i) + || navigator.userAgent.match(/iPad/i) + || navigator.userAgent.match(/iPod/i) + || navigator.userAgent.match(/BlackBerry/i) + || navigator.userAgent.match(/Windows Phone/i) + ){ + return true; + } + else { + return false; + } +} + +function makeWallpaper(){ + + var canvas = document.createElement("canvas"); + canvas.width = window.screen.width * window.devicePixelRatio; + canvas.height = window.screen.height * window.devicePixelRatio; + + var ctx = canvas.getContext("2d"); + + // bg + ctx.fillStyle = "#ff4040"; + ctx.fillRect(0,0,canvas.width,canvas.height); + + // in a square + ctx.save(); + ctx.translate(canvas.width/2, canvas.height/2); + var SIZE = 500; + var squareSize = Math.min(canvas.width,canvas.height); + var scale = (squareSize/SIZE)*0.8; + ctx.scale(scale, scale); + ctx.translate(-SIZE/2, -SIZE/2); + + // Square + ctx.fillStyle = "#fff"; + ctx.fillRect(0, 0, SIZE, SIZE); + + // text + ctx.fillStyle = "#000"; + ctx.font = "40px PatrickHand, Helvetica, Arial"; + var what = getLabel("gift_wallpaper_what").trim(); + var what2 = $("#flashcard_you_what_back").innerText.trim(); + var why = getLabel("gift_wallpaper_why").trim(); + var why2 = $("#flashcard_you_why_back").innerText.trim(); + var doo = getLabel("gift_wallpaper_do").trim(); + ctx.fillText(what, 0, 50); + ctx.fillText(what2, 0, 100); + ctx.fillText(why, 0, 150); + ctx.fillText(why2, 0, 200); + ctx.fillText(doo, 0, 250); + + // Return canvas; + ctx.restore(); + return canvas; + +} diff --git a/pics/cardboard.jpg b/pics/cardboard.jpg deleted file mode 100644 index 41e27a0..0000000 Binary files a/pics/cardboard.jpg and /dev/null differ diff --git a/pics/end1.png b/pics/end1.png index acbb9c3..86b4286 100644 Binary files a/pics/end1.png and b/pics/end1.png differ diff --git a/sims/downloads/download_all.js b/sims/downloads/download_all.js index 736f4af..deb0f2b 100644 --- a/sims/downloads/download_all.js +++ b/sims/downloads/download_all.js @@ -10,11 +10,15 @@ // CARDS TO LOAD var CARDNAMES = [ - "test", + /*"test", "sci_a", "mitochondria_7", "mitochondria_8", - "sci_c" + "sci_c"*/ + "you_what", + "you_why", + "you_how", + "you_when", ]; var download_btn = $("#download"); diff --git a/sims/type/index.html b/sims/type/index.html index 57dff58..8c610d6 100644 --- a/sims/type/index.html +++ b/sims/type/index.html @@ -16,9 +16,39 @@ The Process: - +
    +
    AHH
    +
    + +
    +
    +
    +
    +
    +
    + +
    + + + Q: WHAT do you want to learn? + + + (type your answer here) + + + suggestions: + + +
  • The Leitner Box
  • +
  • Anki
  • +
  • TinyCards
  • +
  • (other)
  • +
    + +
    + \ No newline at end of file diff --git a/sims/type/type.css b/sims/type/type.css index e69de29..60b76e1 100644 --- a/sims/type/type.css +++ b/sims/type/type.css @@ -0,0 +1,76 @@ +/* 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; + letter-spacing: 1px; + font-size: 40px; +} + +#card_container{ + width:400px; + height: 290px; + position: absolute; + top:0; left:0; right:0; bottom:0; + margin:auto; +} +#card{ + width:400px; + height:240px; + background:#fff; + border-radius: 20px; + text-align: center; +} +#answer{ + width:360px; + height:40px; + padding: 10px 0; + font-size:40px; + font-family: inherit; + text-align: center; + margin-top: 0.5em; + border: 1px solid #ddd; +} + +#question{ + height: 35px; + font-size: 20px; +} + +#default_labels{ + display:none; +} + +#suggestion_header, #suggestions_list{ + width: 360px; + margin: 0 auto; + font-size: 22px; +} +#suggestion_header{ + /*text-align: left;*/ + margin-top: 20px; +} +#suggestions_list{ + margin-top: 5px; +} +#suggestions_list > div{ + display: inline-block; + background: #bbb; + color: #666; + cursor: pointer; + margin: 3px; + padding: 0 5px; + border-radius: 5px; +} +#suggestions_list > div:hover{ + background: #ddd; + color: #888; +} + diff --git a/sims/type/type.js b/sims/type/type.js index b891375..1a79443 100644 --- a/sims/type/type.js +++ b/sims/type/type.js @@ -1,6 +1,17 @@ +// WHAT'S THIS CARD? window.cardname = _getQueryVariable("card"); -$("#answer").oninput = function(){ +// THE QUESTION +var qDOM = document.createElement("div"); +qDOM.innerHTML = _getLabel("flashcard_"+window.cardname+"_front"); +var questionText = qDOM.innerText.trim(); +questionText = _getLabel("type_question").trim() + " " + questionText; +$("#question").innerText = questionText; + +// THE ANSWER +var answer = $("#answer"); +answer.placeholder = _getLabel("type_placeholder").trim(); +answer.oninput = function(){ // Also, send message (when flipped for first time) if(window.top.broadcastMessage){ @@ -9,4 +20,29 @@ $("#answer").oninput = function(){ },1); } -}; \ No newline at end of file +}; + +// THE SUGGESTIONS +$("#suggestion_header").innerText = _getLabel("type_suggestions").trim(); + +var suggestionsDOM = $("#suggestions_list"); +var suggestionsUL = document.createElement("ul"); +var suggestions_list_name = window.cardname+"_suggestions"; +suggestionsUL.innerHTML = _getLabel(suggestions_list_name); +for(var i=0; i