download wallpaper
This commit is contained in:
Nicky Case
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>
|
||||
</panel>
|
||||
|
||||
<panel w=400 h=240 bg="#ff4040" style="margin-top:20px">
|
||||
<!-- Suggestions:
|
||||
What do you want to learn?
|
||||
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
|
||||
-->
|
||||
<!-- WHAT do you want to learn? -->
|
||||
<panel w=600 h=350 bg="#e0e0e0">
|
||||
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_what"></sim>
|
||||
</panel>
|
||||
|
||||
<!--
|
||||
|
|
@ -97,9 +92,9 @@ the entire list of pokémon
|
|||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=400 h=240 bg="#ff4040" style="margin:20px 0 10px 0">
|
||||
<!-- Suggestions:
|
||||
-->
|
||||
<!-- WHY do you want to learn that? -->
|
||||
<panel w=600 h=350 bg="#e0e0e0">
|
||||
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_why"></sim>
|
||||
</panel>
|
||||
|
||||
|
||||
|
|
@ -145,9 +140,9 @@ the entire list of pokémon
|
|||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=400 h=240 bg="#ff4040" style="margin-bottom:20px">
|
||||
<!-- Suggestions:
|
||||
-->
|
||||
<!-- HOW do you want to do Spaced Repetition? -->
|
||||
<panel w=600 h=350 bg="#e0e0e0">
|
||||
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_how"></sim>
|
||||
</panel>
|
||||
|
||||
|
||||
|
|
@ -219,9 +214,9 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
|||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=400 h=240 bg="#ff4040" style="margin-bottom:20px">
|
||||
<!-- Suggestions:
|
||||
-->
|
||||
<!-- WHEN do you want to do Spaced Repetition? -->
|
||||
<panel w=600 h=350 bg="#e0e0e0">
|
||||
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_when"></sim>
|
||||
</panel>
|
||||
|
||||
|
||||
|
|
@ -238,27 +233,19 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
|||
</panel>
|
||||
|
||||
<panel w=264 h=180 bg="#e0e0e0">
|
||||
<!--
|
||||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=mitochondria_1" class="small_card"></sim>
|
||||
-->
|
||||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_what&refresh=yes" class="small_card"></sim>
|
||||
</panel>
|
||||
|
||||
<panel w=264 h=180 bg="#e0e0e0">
|
||||
<!--
|
||||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=mitochondria_2" class="small_card"></sim>
|
||||
-->
|
||||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_why&refresh=yes" class="small_card"></sim>
|
||||
</panel>
|
||||
|
||||
<panel w=264 h=180 bg="#e0e0e0">
|
||||
<!--
|
||||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=mitochondria_3" class="small_card"></sim>
|
||||
-->
|
||||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_how&refresh=yes" class="small_card"></sim>
|
||||
</panel>
|
||||
|
||||
<panel w=264 h=180 bg="#e0e0e0">
|
||||
<!--
|
||||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=mitochondria_4" class="small_card"></sim>
|
||||
-->
|
||||
<sim x=-88 y=-60 w=440 h=300 src="sims/singlecard/?card=you_when&refresh=yes" class="small_card"></sim>
|
||||
</panel>
|
||||
|
||||
|
||||
|
|
@ -295,30 +282,34 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
|||
|
||||
<!-- 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>
|
||||
<b>FIRST:</b>
|
||||
a wallpaper for your desktop,
|
||||
<!--a lock screen wallpaper for your phone,-->
|
||||
to remind you to play your Spaced Repetition game each day!
|
||||
<span id="gift_wallpaper"></span>
|
||||
to remind you to play the Spaced Repetition game daily!
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
<div>
|
||||
<a id="wallpaper_link">
|
||||
<img id="wallpaper_image"/><br>
|
||||
(click to download ↓)
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<b>SECOND:</b>
|
||||
<!--a looping 64-day calendar for your Leitner Box!-->
|
||||
a link to the Anki app!
|
||||
(and here's a video tutorial on how to get started)
|
||||
<span id="gift_app"></span>
|
||||
</words>
|
||||
</panel>
|
||||
|
||||
|
||||
<!-- 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>
|
||||
And finally,
|
||||
<b>THIRD:</b>
|
||||
|
|
@ -326,6 +317,10 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
|||
</words>
|
||||
</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>
|
||||
<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,
|
||||
|
|
@ -358,10 +353,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
|||
</words>
|
||||
</panel>
|
||||
|
||||
<panel w=600 h=400 bg="#ff4040">
|
||||
<!--
|
||||
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?cards=leit_d,leit_b,leit_a,leit_c"></sim>
|
||||
-->
|
||||
<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>
|
||||
</panel>
|
||||
|
||||
<panel w=240 h=300>
|
||||
|
|
@ -446,6 +439,186 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
|||
<!-- - - - - - - - - - -->
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -96,3 +96,12 @@ b, strong{
|
|||
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
|
||||
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");
|
||||
|
|
|
|||
|
|
@ -16,9 +16,39 @@ The Process:
|
|||
<link rel="stylesheet" type="text/css" href="type.css"/>
|
||||
</head>
|
||||
<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>
|
||||
</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="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");
|
||||
|
||||
$("#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);
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
// 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