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">
a new instrument
</words>
<words x=137 y=180 w=100 style="text-align:left" no-bg class="comic_text">
world history &amp; geography
<words x=115 y=195 w=100 style="text-align:left" no-bg class="comic_text">
computer programming
</words>
<words x=340 y=195 w=150 style="text-align:left" no-bg class="comic_text">
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!
</words>
<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 x=80 y=380 w=380 h=30>
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
</words>
<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>
WHY: to put the news in perspective
WHY: to make money so you can eat
</words>
<words x=130 y=290 w=350 style="text-align:left" no-bg class="comic_text">
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>
<b>Leitner Box</b>
<br>
Pros: arts-and-craftsy, easy to start
Pros: arts-and-craftsy, easy to use
<br>
Cons: not as portable than an app
Cons: not as portable as an app
</words>
<words x=160 y=275 w=300 fontsize=21 style="text-align:left" no-bg>
<b>Anki</b>
<b>Anki (app)</b>
<br>
Pros: huge community, open-source, lots of powerful features
<br>
Cons: kinda ugly interface
Cons: kinda ugly
</words>
<words x=160 y=405 w=300 fontsize=21 style="text-align:left" no-bg>
<b>TinyCards</b>
<b>TinyCards (app)</b>
<br>
Pros: beautiful design, easy to start
Pros: beautiful design, easy to use
<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 x=10 y=530 w=450 h=60>
(Want something else?
@ -403,8 +403,9 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<!-- 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>
<img src="pics/gift.png" style="height:1em"/>
<b>FIRST:</b>
<span id="gift_wallpaper"></span>
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 -->
<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>
<img src="pics/gift.png" style="height:1em"/>
<b>SECOND:</b>
<span id="gift_app"></span>
</words>
@ -430,8 +432,9 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<!-- 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>
<img src="pics/gift.png" style="height:1em"/>
And finally,
<b>THIRD:</b>
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 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 w=240 h=300>
@ -574,8 +577,11 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<span id="gift_wallpaper_why">
WHY:
</span>
<span id="gift_wallpaper_do">
DO YOUR CARDS FOR TODAY!
<span id="gift_wallpaper_do_1">
DO
</span>
<span id="gift_wallpaper_do_2">
ME!
</span>
<span id="gift_wallpaper_filename">
wallpaper
@ -591,13 +597,17 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
(pdf, so you can print it out)
</span>
<span id="gift_app_anki">
a link to download Anki!
(and here's a video tutorial on how to get started)
a link to
<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 id="gift_app_tiny">
a link to TinyCards!
(you can try cards without download or signup.
might i recommend geography or blabla?)
a link to
<a target="_blank" href="https://tinycards.duolingo.com/">TinyCards!</a>
(i recommend checking out their
<a target="_blank" href="https://tinycards.duolingo.com/users/TinyGeo">geography decks</a>)
</span>
<span id="gift_app_other">
links to
@ -615,8 +625,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</div>
</span>
<span id="flashcard_you_what_back">
<div id="fc_words" class="fcard_center" editable="you_what">
Everything
<div id="fc_words" class="fcard_center" editable="you_what" style="height:1.2em">
Anything interesting!
</div>
</span>
<span id="flashcard_you_why_front">
@ -626,8 +636,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</div>
</span>
<span id="flashcard_you_why_back">
<div id="fc_words" class="fcard_center" editable="you_why">
For curiosity's sake!
<div id="fc_words" class="fcard_center" editable="you_why" style="height:1.2em">
For curiosity's sake
</div>
</span>
<span id="flashcard_you_how_front">
@ -637,7 +647,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</div>
</span>
<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
</div>
</span>
@ -648,7 +658,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
</div>
</span>
<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
</div>
</span>
@ -666,17 +676,17 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<!-- SUGGESTIONS -->
<span id="you_what_suggestions">
<li>anything interesting!</li>
<li>a language</li>
<li>music</li>
<li>coding</li>
<li>personal</li>
<li>Anything interesting!</li>
<li>A language</li>
<li>Music</li>
<li>Coding</li>
<li>Personal</li>
<li>(other)</li>
</span>
<span id="you_why_suggestions">
<li>Curiosity</li>
<li>herp</li>
<li>derp</li>
<li>For people I love</li>
<li>For my own sake</li>
<li>For curiosity's sake</li>
<li>(other)</li>
</span>
<span id="you_how_suggestions">
@ -760,6 +770,11 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
<br>
&darr;
</span>
<span id="multicard_done_2">
that's all, folks! keep scrolling
<br>
&darr;
</span>
<!-- 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;
},5000);
//},1000);
}
@ -167,6 +168,8 @@ function detectmob(){
}
}
var wallpaperBGImage = new Image();
wallpaperBGImage.src = "pics/wallpaper.png";
function makeWallpaper(){
var canvas = document.createElement("canvas");
@ -176,7 +179,7 @@ function makeWallpaper(){
var ctx = canvas.getContext("2d");
// bg
ctx.fillStyle = "#ff4040";
ctx.fillStyle = "#8296BF";
ctx.fillRect(0,0,canvas.width,canvas.height);
// in a square
@ -189,22 +192,32 @@ function makeWallpaper(){
ctx.translate(-SIZE/2, -SIZE/2);
// Square
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, SIZE, SIZE);
//ctx.fillStyle = "rgba(255,255,255,0.2)";
//ctx.fillRect(0, 0, SIZE, SIZE);
ctx.drawImage(wallpaperBGImage, 0, 0, SIZE, SIZE);
// 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.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);
ctx.fillText(what, 250, 400);
ctx.fillText(why, 250, 450);
// draw DO ME
ctx.font = "80px PatrickHand, Helvetica, Arial";
ctx.fillStyle = "#000";
ctx.fillText(do1, 400, 190);
ctx.fillText(do2, 400, 270);
// Return canvas;
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_no").innerHTML = _getLabel("multicard_no");
$("#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"
$("#a_yes").onclick = function(){