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

CH3 DONE

This commit is contained in:
Nicky Case 2018-10-15 15:49:25 -04:00
parent eebcb809ad
commit 15616a94ad
6 changed files with 80 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
ch3.html
View File

@ -105,8 +105,8 @@ So, here's the <i>front</i> of our first flashcard, our question:
<words x=320 y=107 w=100 style="text-align:left" no-bg class="comic_text"> <words x=320 y=107 w=100 style="text-align:left" no-bg class="comic_text">
a new instrument a new instrument
</words> </words>
<words x=137 y=180 w=100 style="text-align:left" no-bg class="comic_text"> <words x=115 y=195 w=100 style="text-align:left" no-bg class="comic_text">
world history &amp; geography computer programming
</words> </words>
<words x=340 y=195 w=150 style="text-align:left" no-bg class="comic_text"> <words x=340 y=195 w=150 style="text-align:left" no-bg class="comic_text">
details of friends' lives details of friends' lives
@ -115,7 +115,7 @@ So, here's the <i>front</i> of our first flashcard, our question:
anything interesting you find, anywhere! anything interesting you find, anywhere!
</words> </words>
<words x=389 y=290 w=100 style="text-align:left" no-bg class="comic_text"> <words x=389 y=290 w=100 style="text-align:left" no-bg class="comic_text">
every pokémon all the pokémon
</words> </words>
<words x=80 y=380 w=380 h=30> <words x=80 y=380 w=380 h=30>
Now, you write <i>your</i> answer on the back: Now, you write <i>your</i> answer on the back:
@ -169,9 +169,9 @@ So, here's the <i>front</i> of our first flashcard, our question:
WHY: to speak to friends, family, lovers in their native tongue WHY: to speak to friends, family, lovers in their native tongue
</words> </words>
<words x=130 y=210 w=350 style="text-align:left" no-bg class="comic_text"> <words x=130 y=210 w=350 style="text-align:left" no-bg class="comic_text">
WHAT: world history &amp; geography WHAT: computer programming
<br> <br>
WHY: to put the news in perspective WHY: to make money so you can eat
</words> </words>
<words x=130 y=290 w=350 style="text-align:left" no-bg class="comic_text"> <words x=130 y=290 w=350 style="text-align:left" no-bg class="comic_text">
WHAT: anything interesting WHAT: anything interesting
@ -223,23 +223,23 @@ So, here's the <i>front</i> of our first flashcard, our question:
<words x=160 y=140 w=300 fontsize=21 style="text-align:left" no-bg> <words x=160 y=140 w=300 fontsize=21 style="text-align:left" no-bg>
<b>Leitner Box</b> <b>Leitner Box</b>
<br> <br>
Pros: arts-and-craftsy, easy to start Pros: arts-and-craftsy, easy to use
<br> <br>
Cons: not as portable than an app Cons: not as portable as an app
</words> </words>
<words x=160 y=275 w=300 fontsize=21 style="text-align:left" no-bg> <words x=160 y=275 w=300 fontsize=21 style="text-align:left" no-bg>
<b>Anki</b> <b>Anki (app)</b>
<br> <br>
Pros: huge community, open-source, lots of powerful features Pros: huge community, open-source, lots of powerful features
<br> <br>
Cons: kinda ugly interface Cons: kinda ugly
</words> </words>
<words x=160 y=405 w=300 fontsize=21 style="text-align:left" no-bg> <words x=160 y=405 w=300 fontsize=21 style="text-align:left" no-bg>
<b>TinyCards</b> <b>TinyCards (app)</b>
<br> <br>
Pros: beautiful design, easy to start Pros: beautiful design, easy to use
<br> <br>
Cons: less powerful than Anki Cons: max 150 cards per deck, doesn't let <i>you</i> decide if you got a card right
</words> </words>
<words x=10 y=530 w=450 h=60> <words x=10 y=530 w=450 h=60>
(Want something else? (Want something else?
@ -403,8 +403,9 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<!-- Reminder Wallpaper --> <!-- Reminder Wallpaper -->
<panel w=600 h=80> <panel 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"/>
<b>FIRST:</b> <b>FIRST:</b>
<span id="gift_wallpaper"></span> <span id="gift_wallpaper"></span>
to remind you to play the Spaced Repetition game daily! to remind you to play the Spaced Repetition game daily!
@ -420,8 +421,9 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<!-- Leitner Calendar / Anki --> <!-- Leitner Calendar / Anki -->
<panel w=600 h=80> <panel 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"/>
<b>SECOND:</b> <b>SECOND:</b>
<span id="gift_app"></span> <span id="gift_app"></span>
</words> </words>
@ -430,8 +432,9 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<!-- All flashcards --> <!-- All flashcards -->
<panel w=600 h=80> <panel 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"/>
And finally, And finally,
<b>THIRD:</b> <b>THIRD:</b>
a .zip of all the flashcards you've been practicing in this interactive comic! a .zip of all the flashcards you've been practicing in this interactive comic!
@ -475,7 +478,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</panel> </panel>
<panel w=600 h=400 bg="#e0e0e0"> <panel w=600 h=400 bg="#e0e0e0">
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=you_why,sci_a,you_when,sci_b,you_how,sci_c"></sim> <sim x=0 y=0 w=600 h=400 src="sims/multicard/?final=yes&cards=you_why,sci_a,you_when,sci_b,you_how,sci_c"></sim>
</panel> </panel>
<panel w=240 h=300> <panel w=240 h=300>
@ -574,8 +577,11 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<span id="gift_wallpaper_why"> <span id="gift_wallpaper_why">
WHY: WHY:
</span> </span>
<span id="gift_wallpaper_do"> <span id="gift_wallpaper_do_1">
DO YOUR CARDS FOR TODAY! DO
</span>
<span id="gift_wallpaper_do_2">
ME!
</span> </span>
<span id="gift_wallpaper_filename"> <span id="gift_wallpaper_filename">
wallpaper wallpaper
@ -591,13 +597,17 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
(pdf, so you can print it out) (pdf, so you can print it out)
</span> </span>
<span id="gift_app_anki"> <span id="gift_app_anki">
a link to download Anki! a link to
(and here's a video tutorial on how to get started) <a target="_blank" href="https://apps.ankiweb.net/">download Anki!</a>
(and here's
<a target="_blank" href="https://www.youtube.com/watch?v=sQkdB3cJwn0">a video tutorial</a>
on how to get started)
</span> </span>
<span id="gift_app_tiny"> <span id="gift_app_tiny">
a link to TinyCards! a link to
(you can try cards without download or signup. <a target="_blank" href="https://tinycards.duolingo.com/">TinyCards!</a>
might i recommend geography or blabla?) (i recommend checking out their
<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
@ -615,8 +625,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</div> </div>
</span> </span>
<span id="flashcard_you_what_back"> <span id="flashcard_you_what_back">
<div id="fc_words" class="fcard_center" editable="you_what"> <div id="fc_words" class="fcard_center" editable="you_what" style="height:1.2em">
Everything Anything interesting!
</div> </div>
</span> </span>
<span id="flashcard_you_why_front"> <span id="flashcard_you_why_front">
@ -626,8 +636,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</div> </div>
</span> </span>
<span id="flashcard_you_why_back"> <span id="flashcard_you_why_back">
<div id="fc_words" class="fcard_center" editable="you_why"> <div id="fc_words" class="fcard_center" editable="you_why" style="height:1.2em">
For curiosity's sake! For curiosity's sake
</div> </div>
</span> </span>
<span id="flashcard_you_how_front"> <span id="flashcard_you_how_front">
@ -637,7 +647,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</div> </div>
</span> </span>
<span id="flashcard_you_how_back"> <span id="flashcard_you_how_back">
<div id="fc_words" class="fcard_center" editable="you_how"> <div id="fc_words" class="fcard_center" editable="you_how" style="height:1.2em">
Leitner Box Leitner Box
</div> </div>
</span> </span>
@ -648,7 +658,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</div> </div>
</span> </span>
<span id="flashcard_you_when_back"> <span id="flashcard_you_when_back">
<div id="fc_words" class="fcard_center" editable="you_when"> <div id="fc_words" class="fcard_center" editable="you_when" style="height:1.2em">
In the evening In the evening
</div> </div>
</span> </span>
@ -666,17 +676,17 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<!-- SUGGESTIONS --> <!-- SUGGESTIONS -->
<span id="you_what_suggestions"> <span id="you_what_suggestions">
<li>anything interesting!</li> <li>Anything interesting!</li>
<li>a language</li> <li>A language</li>
<li>music</li> <li>Music</li>
<li>coding</li> <li>Coding</li>
<li>personal</li> <li>Personal</li>
<li>(other)</li> <li>(other)</li>
</span> </span>
<span id="you_why_suggestions"> <span id="you_why_suggestions">
<li>Curiosity</li> <li>For people I love</li>
<li>herp</li> <li>For my own sake</li>
<li>derp</li> <li>For curiosity's sake</li>
<li>(other)</li> <li>(other)</li>
</span> </span>
<span id="you_how_suggestions"> <span id="you_how_suggestions">
@ -760,6 +770,11 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<br> <br>
&darr; &darr;
</span> </span>
<span id="multicard_done_2">
that's all, folks! keep scrolling
<br>
&darr;
</span>
<!-- Chapter Links --> <!-- Chapter Links -->
<span id="label_chapter_links"> <span id="label_chapter_links">

39
js/comic.js
View File

@ -147,6 +147,7 @@ if($("#gift_wallpaper")){
$("#gift_app").innerHTML = $("#gift_app_"+showWhat).innerHTML; $("#gift_app").innerHTML = $("#gift_app_"+showWhat).innerHTML;
},5000); },5000);
//},1000);
} }
@ -167,6 +168,8 @@ function detectmob(){
} }
} }
var wallpaperBGImage = new Image();
wallpaperBGImage.src = "pics/wallpaper.png";
function makeWallpaper(){ function makeWallpaper(){
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
@ -176,7 +179,7 @@ function makeWallpaper(){
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
// bg // bg
ctx.fillStyle = "#ff4040"; ctx.fillStyle = "#8296BF";
ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillRect(0,0,canvas.width,canvas.height);
// in a square // in a square
@ -189,22 +192,32 @@ function makeWallpaper(){
ctx.translate(-SIZE/2, -SIZE/2); ctx.translate(-SIZE/2, -SIZE/2);
// Square // Square
ctx.fillStyle = "#fff"; //ctx.fillStyle = "rgba(255,255,255,0.2)";
ctx.fillRect(0, 0, SIZE, SIZE); //ctx.fillRect(0, 0, SIZE, SIZE);
ctx.drawImage(wallpaperBGImage, 0, 0, SIZE, SIZE);
// text // text
var what = getLabel("gift_wallpaper_what").trim();
what += " " + $("#flashcard_you_what_back").innerText.trim();
var why = getLabel("gift_wallpaper_why").trim();
why += " " + $("#flashcard_you_why_back").innerText.trim();
var do1 = getLabel("gift_wallpaper_do_1").trim();
var do2 = getLabel("gift_wallpaper_do_2").trim();
// draw text
ctx.textAlign = "center";
ctx.fillStyle = "#000"; ctx.fillStyle = "#000";
ctx.font = "40px PatrickHand, Helvetica, Arial"; ctx.font = "40px PatrickHand, Helvetica, Arial";
var what = getLabel("gift_wallpaper_what").trim(); ctx.fillText(what, 250, 400);
var what2 = $("#flashcard_you_what_back").innerText.trim(); ctx.fillText(why, 250, 450);
var why = getLabel("gift_wallpaper_why").trim();
var why2 = $("#flashcard_you_why_back").innerText.trim(); // draw DO ME
var doo = getLabel("gift_wallpaper_do").trim(); ctx.font = "80px PatrickHand, Helvetica, Arial";
ctx.fillText(what, 0, 50); ctx.fillStyle = "#000";
ctx.fillText(what2, 0, 100); ctx.fillText(do1, 400, 190);
ctx.fillText(why, 0, 150); ctx.fillText(do2, 400, 270);
ctx.fillText(why2, 0, 200);
ctx.fillText(doo, 0, 250);
// Return canvas; // Return canvas;
ctx.restore(); ctx.restore();

BIN
pics/end0.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 409 KiB

After

Width:  |  Height:  |  Size: 403 KiB

BIN
pics/gift.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
pics/wallpaper.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

3
sims/multicard/multicard.js
View File

@ -169,7 +169,8 @@ function setUpInfo(){
$("#a_label").innerHTML = _getLabel("multicard_a"); $("#a_label").innerHTML = _getLabel("multicard_a");
$("#a_no").innerHTML = _getLabel("multicard_no"); $("#a_no").innerHTML = _getLabel("multicard_no");
$("#a_yes").innerHTML = _getLabel("multicard_yes"); $("#a_yes").innerHTML = _getLabel("multicard_yes");
$("#done").innerHTML = _getLabel("multicard_done"); var isFinalMulticard = (_getQueryVariable("final")=="yes");
$("#done").innerHTML = _getLabel( isFinalMulticard ? "multicard_done_2" : "multicard_done");
// Clicking "yes" or "no" // Clicking "yes" or "no"
$("#a_yes").onclick = function(){ $("#a_yes").onclick = function(){