download wallpaper
This commit is contained in:
parent
0c59b54f72
commit
99f925fdbf
257
ch3.html
257
ch3.html
|
@ -49,14 +49,9 @@ So, here's the <i>front</i> of our first flashcard, our question:
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=400 h=240 bg="#ff4040" style="margin-top:20px">
|
<!-- WHAT do you want to learn? -->
|
||||||
<!-- Suggestions:
|
<panel w=600 h=350 bg="#e0e0e0">
|
||||||
What do you want to learn?
|
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_what"></sim>
|
||||||
EVERYTHING (just curiosity)
|
|
||||||
a new language | an instrument | details of friends' lives |
|
|
||||||
the history of your country | countries of the world |
|
|
||||||
the entire list of pokémon
|
|
||||||
-->
|
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
@ -97,9 +92,9 @@ the entire list of pokémon
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=400 h=240 bg="#ff4040" style="margin:20px 0 10px 0">
|
<!-- WHY do you want to learn that? -->
|
||||||
<!-- Suggestions:
|
<panel w=600 h=350 bg="#e0e0e0">
|
||||||
-->
|
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_why"></sim>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
|
@ -145,9 +140,9 @@ the entire list of pokémon
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=400 h=240 bg="#ff4040" style="margin-bottom:20px">
|
<!-- HOW do you want to do Spaced Repetition? -->
|
||||||
<!-- Suggestions:
|
<panel w=600 h=350 bg="#e0e0e0">
|
||||||
-->
|
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_how"></sim>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
|
@ -219,9 +214,9 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=400 h=240 bg="#ff4040" style="margin-bottom:20px">
|
<!-- WHEN do you want to do Spaced Repetition? -->
|
||||||
<!-- Suggestions:
|
<panel w=600 h=350 bg="#e0e0e0">
|
||||||
-->
|
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_when"></sim>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
|
@ -238,27 +233,19 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=264 h=180 bg="#e0e0e0">
|
<panel w=264 h=180 bg="#e0e0e0">
|
||||||
<!--
|
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_what&refresh=yes" class="small_card"></sim>
|
||||||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=mitochondria_1" class="small_card"></sim>
|
|
||||||
-->
|
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=264 h=180 bg="#e0e0e0">
|
<panel w=264 h=180 bg="#e0e0e0">
|
||||||
<!--
|
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_why&refresh=yes" class="small_card"></sim>
|
||||||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=mitochondria_2" class="small_card"></sim>
|
|
||||||
-->
|
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=264 h=180 bg="#e0e0e0">
|
<panel w=264 h=180 bg="#e0e0e0">
|
||||||
<!--
|
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_how&refresh=yes" class="small_card"></sim>
|
||||||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=mitochondria_3" class="small_card"></sim>
|
|
||||||
-->
|
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=264 h=180 bg="#e0e0e0">
|
<panel w=264 h=180 bg="#e0e0e0">
|
||||||
<!--
|
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_when&refresh=yes" class="small_card"></sim>
|
||||||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=mitochondria_4" class="small_card"></sim>
|
|
||||||
-->
|
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
|
@ -295,30 +282,34 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||||||
|
|
||||||
<!-- Reminder Wallpaper -->
|
<!-- Reminder Wallpaper -->
|
||||||
|
|
||||||
<panel w=600 h=100>
|
<panel w=600 h=80>
|
||||||
<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>
|
||||||
<b>FIRST:</b>
|
<b>FIRST:</b>
|
||||||
a wallpaper for your desktop,
|
<span id="gift_wallpaper"></span>
|
||||||
<!--a lock screen wallpaper for your phone,-->
|
to remind you to play the Spaced Repetition game daily!
|
||||||
to remind you to play your Spaced Repetition game each day!
|
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<a id="wallpaper_link">
|
||||||
|
<img id="wallpaper_image"/><br>
|
||||||
|
(click to download ↓)
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Leitner Calendar / Anki -->
|
<!-- Leitner Calendar / Anki -->
|
||||||
|
|
||||||
<panel w=600 h=100>
|
<panel w=600 h=80>
|
||||||
<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>
|
||||||
<b>SECOND:</b>
|
<b>SECOND:</b>
|
||||||
<!--a looping 64-day calendar for your Leitner Box!-->
|
<span id="gift_app"></span>
|
||||||
a link to the Anki app!
|
|
||||||
(and here's a video tutorial on how to get started)
|
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
<!-- All flashcards -->
|
<!-- All flashcards -->
|
||||||
|
|
||||||
<panel w=600 h=100>
|
<panel w=600 h=80>
|
||||||
<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>
|
||||||
And finally,
|
And finally,
|
||||||
<b>THIRD:</b>
|
<b>THIRD:</b>
|
||||||
|
@ -326,6 +317,10 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
<panel w=400 h=200 bg="#fff">
|
||||||
|
<sim x=0 y=0 w=600 h=400 src="sims/downloads/all.html"></sim>
|
||||||
|
</panel>
|
||||||
|
|
||||||
<panel w=600 h=120>
|
<panel w=600 h=120>
|
||||||
<words x=-15 y=0 w=600 no-bg style="text-align:left">
|
<words x=-15 y=0 w=600 no-bg style="text-align:left">
|
||||||
(These can be your first few days' worth of Spaced Repetition cards,
|
(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
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=600 h=400 bg="#ff4040">
|
<panel w=600 h=400 bg="#e0e0e0">
|
||||||
<!--
|
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=sci_a,sci_b,sci_c"></sim>
|
||||||
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=leit_d,leit_b,leit_a,leit_c"></sim>
|
|
||||||
-->
|
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=240 h=300>
|
<panel w=240 h=300>
|
||||||
|
@ -446,6 +439,186 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||||||
<!-- - - - - - - - - - -->
|
<!-- - - - - - - - - - -->
|
||||||
|
|
||||||
<div id="labels">
|
<div id="labels">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- GIFTS -->
|
||||||
|
<span id="gift_wallpaper_what">
|
||||||
|
WHAT:
|
||||||
|
</span>
|
||||||
|
<span id="gift_wallpaper_why">
|
||||||
|
WHY:
|
||||||
|
</span>
|
||||||
|
<span id="gift_wallpaper_do">
|
||||||
|
DO YOUR CARDS FOR TODAY!
|
||||||
|
</span>
|
||||||
|
<span id="gift_wallpaper_filename">
|
||||||
|
wallpaper
|
||||||
|
</span>
|
||||||
|
<span id="gift_wallpaper_desktop">
|
||||||
|
a wallpaper for your desktop,
|
||||||
|
</span>
|
||||||
|
<span id="gift_wallpaper_phone">
|
||||||
|
a lock-screen wallpaper for your phone,
|
||||||
|
</span>
|
||||||
|
<span id="gift_app_leitner">
|
||||||
|
a looping 64-day calendar for your Leitner Box!
|
||||||
|
(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)
|
||||||
|
</span>
|
||||||
|
<span id="gift_app_tiny">
|
||||||
|
a link to TinyCards!
|
||||||
|
(you can try cards without download or signup.
|
||||||
|
might i recommend geography or blabla?)
|
||||||
|
</span>
|
||||||
|
<span id="gift_app_other">
|
||||||
|
links to
|
||||||
|
the Leitner Box 64-day calendar,
|
||||||
|
the Anki app,
|
||||||
|
and TinyCards!
|
||||||
|
</span>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- QUESTIONS -->
|
||||||
|
<span id="flashcard_you_what_front">
|
||||||
|
<div id="fc_words" class="fcard_center" style="height:160px;">
|
||||||
|
WHAT do you want to learn?
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_you_what_back">
|
||||||
|
<div id="fc_words" class="fcard_center" editable="you_what">
|
||||||
|
Everything
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_you_why_front">
|
||||||
|
<div id="fc_words" class="fcard_center" style="height:160px;">
|
||||||
|
WHY do you want to learn that?
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_you_why_back">
|
||||||
|
<div id="fc_words" class="fcard_center" editable="you_why">
|
||||||
|
For curiosity's sake!
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_you_how_front">
|
||||||
|
<div id="fc_words" class="fcard_center" style="height:160px;">
|
||||||
|
HOW do you want to do Spaced Repetition?
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_you_how_back">
|
||||||
|
<div id="fc_words" class="fcard_center" editable="you_how">
|
||||||
|
Leitner Box
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_you_when_front">
|
||||||
|
<div id="fc_words" class="fcard_center" style="height:160px;">
|
||||||
|
WHEN do you want to do Spaced Repetition?
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_you_when_back">
|
||||||
|
<div id="fc_words" class="fcard_center" editable="you_when">
|
||||||
|
In the evening
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- SUGGESTIONS -->
|
||||||
|
<span id="you_what_suggestions">
|
||||||
|
<li>Everything</li>
|
||||||
|
<li>herp</li>
|
||||||
|
<li>derp</li>
|
||||||
|
<li>(other)</li>
|
||||||
|
</span>
|
||||||
|
<span id="you_why_suggestions">
|
||||||
|
<li>Curiosity</li>
|
||||||
|
<li>herp</li>
|
||||||
|
<li>derp</li>
|
||||||
|
<li>(other)</li>
|
||||||
|
</span>
|
||||||
|
<span id="you_how_suggestions">
|
||||||
|
<li>Leitner Box</li>
|
||||||
|
<li>Anki</li>
|
||||||
|
<li>TinyCards</li>
|
||||||
|
<li>(other)</li>
|
||||||
|
</span>
|
||||||
|
<span id="you_when_suggestions">
|
||||||
|
<li>In the morning</li>
|
||||||
|
<li>On my commute</li>
|
||||||
|
<li>In the evening</li>
|
||||||
|
<li>(other)</li>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- TYPING CARDS -->
|
||||||
|
<span id="type_question">
|
||||||
|
Q:
|
||||||
|
</span>
|
||||||
|
<span id="type_placeholder">
|
||||||
|
type your answer here
|
||||||
|
</span>
|
||||||
|
<span id="type_suggestions">
|
||||||
|
or pick one of these suggestions:
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Flashcards -->
|
||||||
|
<span id="flashcard_sci_a_front">
|
||||||
|
<div class="fcard_center" style="height:2.5em">
|
||||||
|
The discoverer of the Forgetting Curve was...
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_sci_a_back">
|
||||||
|
<div class="fcard_bg" src="pics/fcards0.png" sx=400 sy=0></div>
|
||||||
|
<div style="position: absolute; width: 250px; top: 60px; right: 0; line-height: 1.1em;">
|
||||||
|
Hermann Ebbinghaus
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_sci_b_front">
|
||||||
|
<div class="fcard_center" style="height:3.4em">
|
||||||
|
The Forgetting Curve (<i>without</i> any recalls) looks like...
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_sci_b_back">
|
||||||
|
<div class="fcard_bg" src="pics/fcards0.png" sx=0 sy=240></div>
|
||||||
|
<div style="position: absolute; width: 280px; top: 70px; right: 20px; font-size:20px; line-height: 1.1em;">
|
||||||
|
(note: it decays quickly, then slowly – "exponential decay")
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_sci_c_front">
|
||||||
|
<div class="fcard_center" style="height:3.4em">
|
||||||
|
The Forgetting Curve (<i>with</i> optimally-spaced recalls) looks like...
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_sci_c_back">
|
||||||
|
<div class="fcard_bg" src="pics/fcards0.png" sx=400 sy=240></div>
|
||||||
|
<div style="position: absolute; width: 360px; top: 120px; left: 20px; font-size:20px; line-height: 1.1em;">
|
||||||
|
(note: the gaps between recalls <i>increase</i> in length)
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Multi Card Labels -->
|
||||||
|
<span id="multicard_q">
|
||||||
|
try to recall ↑
|
||||||
|
then flip ↻
|
||||||
|
</span>
|
||||||
|
<span id="multicard_cards_left">
|
||||||
|
(cards left: [N])
|
||||||
|
</span>
|
||||||
|
<span id="multicard_a">
|
||||||
|
did you remember this?
|
||||||
|
</span>
|
||||||
|
<span id="multicard_no">
|
||||||
|
nah, try again
|
||||||
|
</span>
|
||||||
|
<span id="multicard_yes">
|
||||||
|
yup, onwards!
|
||||||
|
</span>
|
||||||
|
<span id="multicard_done">
|
||||||
|
done for now! keep scrolling
|
||||||
|
<br>
|
||||||
|
↓
|
||||||
|
</span>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -96,3 +96,12 @@ b, strong{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/********/
|
||||||
|
/* MISC */
|
||||||
|
/********/
|
||||||
|
|
||||||
|
#wallpaper_image{
|
||||||
|
max-width: 400px;
|
||||||
|
max-height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
107
js/comic.js
107
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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 1.9 MiB |
BIN
pics/end1.png
BIN
pics/end1.png
Binary file not shown.
Before Width: | Height: | Size: 324 KiB After Width: | Height: | Size: 323 KiB |
|
@ -10,11 +10,15 @@
|
||||||
|
|
||||||
// CARDS TO LOAD
|
// CARDS TO LOAD
|
||||||
var CARDNAMES = [
|
var CARDNAMES = [
|
||||||
"test",
|
/*"test",
|
||||||
"sci_a",
|
"sci_a",
|
||||||
"mitochondria_7",
|
"mitochondria_7",
|
||||||
"mitochondria_8",
|
"mitochondria_8",
|
||||||
"sci_c"
|
"sci_c"*/
|
||||||
|
"you_what",
|
||||||
|
"you_why",
|
||||||
|
"you_how",
|
||||||
|
"you_when",
|
||||||
];
|
];
|
||||||
|
|
||||||
var download_btn = $("#download");
|
var download_btn = $("#download");
|
||||||
|
|
|
@ -16,9 +16,39 @@ The Process:
|
||||||
<link rel="stylesheet" type="text/css" href="type.css"/>
|
<link rel="stylesheet" type="text/css" href="type.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<input id="answer" type="text"></input>
|
<div id="card_container">
|
||||||
|
<div id="question">AHH</div>
|
||||||
|
<div id="card">
|
||||||
|
<input id="answer" type="text"></input>
|
||||||
|
<div id="suggestion_header">
|
||||||
|
</div>
|
||||||
|
<div id="suggestions_list">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
<!-- Default Labels -->
|
||||||
|
<div id="default_labels">
|
||||||
|
|
||||||
|
<span id="type_question">
|
||||||
|
Q: WHAT do you want to learn?
|
||||||
|
</span>
|
||||||
|
<span id="type_placeholder">
|
||||||
|
(type your answer here)
|
||||||
|
</span>
|
||||||
|
<span id="type_suggestions">
|
||||||
|
suggestions:
|
||||||
|
</span>
|
||||||
|
<span id="type_suggestions_list">
|
||||||
|
<li>The Leitner Box</li>
|
||||||
|
<li>Anki</li>
|
||||||
|
<li>TinyCards</li>
|
||||||
|
<li>(other)</li>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="../helpers.js"></script>
|
<script src="../helpers.js"></script>
|
||||||
<script src="type.js"></script>
|
<script src="type.js"></script>
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -1,6 +1,17 @@
|
||||||
|
// WHAT'S THIS CARD?
|
||||||
window.cardname = _getQueryVariable("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)
|
// Also, send message (when flipped for first time)
|
||||||
if(window.top.broadcastMessage){
|
if(window.top.broadcastMessage){
|
||||||
|
@ -9,4 +20,29 @@ $("#answer").oninput = function(){
|
||||||
},1);
|
},1);
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 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<suggestionsUL.children.length; i++){
|
||||||
|
|
||||||
|
// suggestion
|
||||||
|
var suggestion = document.createElement("div");
|
||||||
|
var s = suggestionsUL.children[i].innerText.trim();
|
||||||
|
suggestion.innerText = s;
|
||||||
|
suggestionsDOM.appendChild(suggestion);
|
||||||
|
|
||||||
|
// on click
|
||||||
|
(function(s){
|
||||||
|
suggestion.onclick = function(){
|
||||||
|
answer.value = s;
|
||||||
|
answer.oninput();
|
||||||
|
};
|
||||||
|
})(s);
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue