misc crap
This commit is contained in:
parent
8be519b464
commit
8a6cab8a14
2
ch1.html
2
ch1.html
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="comic">
|
<div class="comic">
|
||||||
|
|
||||||
<!-- - - - - - - - - - - - -->
|
<!-- - - - - - - - - - - - -->
|
||||||
<!-- THE SCIENCE of SRS - - -->
|
<!-- THE SCIENCE of SRS - - -->
|
||||||
|
|
2
ch2.html
2
ch2.html
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="comic">
|
<div class="comic">
|
||||||
|
|
||||||
|
|
||||||
<panel w=600 h=180>
|
<panel w=600 h=180>
|
||||||
|
|
123
ch3.html
123
ch3.html
|
@ -10,7 +10,57 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="comic">
|
<a name="0"></a>
|
||||||
|
<div class="divider" style="padding: 80px 0">
|
||||||
|
<div id="chapter_name" style="margin-bottom:30px;">
|
||||||
|
[UNTITLED SPACED REPETITION THING]
|
||||||
|
</div>
|
||||||
|
<div id="chapter_subtitle">
|
||||||
|
by nicky case, oct 2018
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<a name="1"></a>
|
||||||
|
<div class="divider">
|
||||||
|
<div id="chapter_name">
|
||||||
|
THE SCIENCE
|
||||||
|
<span class="small_of">
|
||||||
|
of
|
||||||
|
</span>
|
||||||
|
<br>
|
||||||
|
SPACED REPETITION
|
||||||
|
</div>
|
||||||
|
<div id="chapter_links"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<a name="2"></a>
|
||||||
|
<div class="divider">
|
||||||
|
<div id="chapter_name">
|
||||||
|
THE ART
|
||||||
|
<span class="small_of">
|
||||||
|
of
|
||||||
|
</span>
|
||||||
|
<br>
|
||||||
|
SPACED REPETITION
|
||||||
|
</div>
|
||||||
|
<div id="chapter_links"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<a name="3"></a>
|
||||||
|
<div class="divider">
|
||||||
|
<div id="chapter_name">
|
||||||
|
GET STARTED TODAY!
|
||||||
|
</div>
|
||||||
|
<div id="chapter_links"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="comic">
|
||||||
|
|
||||||
<!-- - - - - - - - - - - - -->
|
<!-- - - - - - - - - - - - -->
|
||||||
<!-- WHAT, WHY, HOW, WHEN - -->
|
<!-- WHAT, WHY, HOW, WHEN - -->
|
||||||
|
@ -35,8 +85,11 @@ So, here's the <i>front</i> of our first flashcard, our question:
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=400 h=240 bg="#bada55" style="margin-bottom:20px">
|
<panel w=500 h=250 bg="#e0e0e0">
|
||||||
<!-- WHAT do you want to learn? -->
|
<!-- WHAT do you want to learn? -->
|
||||||
|
<sim x=29 y=-20 w=440 h=300 src="sims/singlecard/?card=you_what&front_only=yes"
|
||||||
|
style="width: 440px; height: 300px; transform: scale(0.83,0.83) rotate(3deg);"></sim>
|
||||||
|
<img src="pics/fcard_frontonly.png" style="width:100%; height:100%; position:absolute; top:0; left:0;"/>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=500 h=450>
|
<panel w=500 h=450>
|
||||||
|
@ -77,8 +130,11 @@ So, here's the <i>front</i> of our first flashcard, our question:
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=400 h=240 bg="#bada55" style="margin-bottom:20px">
|
<panel w=500 h=250 bg="#e0e0e0">
|
||||||
<!-- WHY do you want to learn X? -->
|
<!-- WHY do you want to learn X? -->
|
||||||
|
<sim x=29 y=-20 w=440 h=300 src="sims/singlecard/?card=you_why&front_only=yes"
|
||||||
|
style="width: 440px; height: 300px; transform: scale(0.83,0.83) rotate(3deg);"></sim>
|
||||||
|
<img src="pics/fcard_frontonly.png" style="width:100%; height:100%; position:absolute; top:0; left:0;"/>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=500 h=450>
|
<panel w=500 h=450>
|
||||||
|
@ -112,8 +168,11 @@ So, here's the <i>front</i> of our first flashcard, our question:
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=400 h=240 bg="#bada55" style="margin-bottom:20px">
|
<panel w=500 h=250 bg="#e0e0e0">
|
||||||
<!-- HOW do you want to do Spaced Repetition? (with what tool?) -->
|
<!-- HOW do you want to do Spaced Repetition? (with what tool?) -->
|
||||||
|
<sim x=29 y=-20 w=440 h=300 src="sims/singlecard/?card=you_how&front_only=yes"
|
||||||
|
style="width: 440px; height: 300px; transform: scale(0.83,0.83) rotate(3deg);"></sim>
|
||||||
|
<img src="pics/fcard_frontonly.png" style="width:100%; height:100%; position:absolute; top:0; left:0;"/>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=500 h=700>
|
<panel w=500 h=700>
|
||||||
|
@ -145,8 +204,6 @@ So, here's the <i>front</i> of our first flashcard, our question:
|
||||||
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_how"></sim>
|
<sim x=0 y=0 w=600 h=350 src="sims/type/?card=you_how"></sim>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- - - -->
|
<!-- - - -->
|
||||||
<!-- WHEN -->
|
<!-- WHEN -->
|
||||||
<!-- - - -->
|
<!-- - - -->
|
||||||
|
@ -176,8 +233,11 @@ So, here's the <i>front</i> of our first flashcard, our question:
|
||||||
</words>
|
</words>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=400 h=240 bg="#bada55" style="margin:20px 0">
|
<panel w=500 h=250 bg="#e0e0e0">
|
||||||
<!-- WHEN do you want to do Spaced Repetition? -->
|
<!-- WHEN do you want to do Spaced Repetition? -->
|
||||||
|
<sim x=29 y=-20 w=440 h=300 src="sims/singlecard/?card=you_when&front_only=yes"
|
||||||
|
style="width: 440px; height: 300px; transform: scale(0.83,0.83) rotate(3deg);"></sim>
|
||||||
|
<img src="pics/fcard_frontonly.png" style="width:100%; height:100%; position:absolute; top:0; left:0;"/>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=500 h=450>
|
<panel w=500 h=450>
|
||||||
|
@ -354,7 +414,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=sci_a,sci_b,sci_c"></sim>
|
<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>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=240 h=300>
|
<panel w=240 h=300>
|
||||||
|
@ -423,10 +483,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||||||
<!-- Bow Goodbye -->
|
<!-- Bow Goodbye -->
|
||||||
|
|
||||||
<panel w=600 h=300 bg="#e0e0e0">
|
<panel w=600 h=300 bg="#e0e0e0">
|
||||||
<!-- THE END, with full cast of characters -->
|
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=the_end"></sim>
|
||||||
<!--
|
|
||||||
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=mitochondria_all"></sim>
|
|
||||||
-->
|
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<!-- want more? further reading & credits below! -->
|
<!-- want more? further reading & credits below! -->
|
||||||
|
@ -483,7 +540,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||||||
|
|
||||||
<!-- QUESTIONS -->
|
<!-- QUESTIONS -->
|
||||||
<span id="flashcard_you_what_front">
|
<span id="flashcard_you_what_front">
|
||||||
<div id="fc_words" class="fcard_center" style="height:160px;">
|
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=0 sy=0></div>
|
||||||
|
<div id="fc_words" class="fcard_center" style="position: absolute; width: 190px; margin: 0; top: 50px; left: 180px;">
|
||||||
WHAT do you want to learn?
|
WHAT do you want to learn?
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
|
@ -493,7 +551,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
<span id="flashcard_you_why_front">
|
<span id="flashcard_you_why_front">
|
||||||
<div id="fc_words" class="fcard_center" style="height:160px;">
|
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=400 sy=0></div>
|
||||||
|
<div id="fc_words" class="fcard_center" style="position: absolute; width: 190px; margin: 0; top: 50px; left: 180px;">
|
||||||
WHY do you want to learn that?
|
WHY do you want to learn that?
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
|
@ -503,7 +562,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
<span id="flashcard_you_how_front">
|
<span id="flashcard_you_how_front">
|
||||||
<div id="fc_words" class="fcard_center" style="height:160px;">
|
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=0 sy=240></div>
|
||||||
|
<div id="fc_words" class="fcard_center" style="position: absolute; width: 190px; margin: 0; top:31px; left: 180px;">
|
||||||
HOW do you want to do Spaced Repetition?
|
HOW do you want to do Spaced Repetition?
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
|
@ -513,7 +573,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
<span id="flashcard_you_when_front">
|
<span id="flashcard_you_when_front">
|
||||||
<div id="fc_words" class="fcard_center" style="height:160px;">
|
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=400 sy=240></div>
|
||||||
|
<div id="fc_words" class="fcard_center" style="position: absolute; width: 190px; margin: 0; top:31px; left: 180px;">
|
||||||
WHEN do you want to do Spaced Repetition?
|
WHEN do you want to do Spaced Repetition?
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
|
@ -523,6 +584,17 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
<!-- THE END -->
|
||||||
|
<span id="flashcard_the_end_front">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=0 sy=480></div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_the_end_back">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=400 sy=480></div>
|
||||||
|
<div id="fc_words" class="fcard_center" style="top:30px; font-size:50px;">
|
||||||
|
THE END
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
|
||||||
<!-- SUGGESTIONS -->
|
<!-- SUGGESTIONS -->
|
||||||
<span id="you_what_suggestions">
|
<span id="you_what_suggestions">
|
||||||
<li>Everything</li>
|
<li>Everything</li>
|
||||||
|
@ -618,6 +690,25 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||||||
↓
|
↓
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
<!-- Chapter Links -->
|
||||||
|
<span id="label_chapter_links">
|
||||||
|
<a href="#0">
|
||||||
|
Intro
|
||||||
|
</a>
|
||||||
|
·
|
||||||
|
<a href="#1">
|
||||||
|
The Science
|
||||||
|
</a>
|
||||||
|
·
|
||||||
|
<a href="#2">
|
||||||
|
The Art
|
||||||
|
</a>
|
||||||
|
·
|
||||||
|
<a href="#3">
|
||||||
|
Get Started!
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -25,17 +25,55 @@ b, strong{
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**********/
|
||||||
|
/* SPLASH */
|
||||||
|
/**********/
|
||||||
|
|
||||||
|
.divider{
|
||||||
|
/*background: #2c313a;
|
||||||
|
background: hsla(36, 100%, 60%, 1);*/
|
||||||
|
background: #000;
|
||||||
|
width: 100%;
|
||||||
|
/*height: 200px;*/
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 50px 0;
|
||||||
|
}
|
||||||
|
.divider > div{
|
||||||
|
width: calc(100% - 100px);
|
||||||
|
min-width: 600px;
|
||||||
|
max-width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.divider > #chapter_name{
|
||||||
|
font-size: 100px;
|
||||||
|
line-height: 0.75em;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.divider > #chapter_links{
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.divider .small_of{
|
||||||
|
font-size:0.75em; line-height:0;
|
||||||
|
}
|
||||||
|
.divider > #chapter_subtitle{
|
||||||
|
text-align: right;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********/
|
/*********/
|
||||||
/* COMIC */
|
/* COMIC */
|
||||||
/*********/
|
/*********/
|
||||||
|
|
||||||
#comic{
|
.comic{
|
||||||
overflow:hidden;
|
overflow:hidden;
|
||||||
width:610px;
|
width:610px;
|
||||||
margin: 50px auto;
|
margin: 50px auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
#comic panel{
|
.comic panel{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
|
@ -45,10 +83,10 @@ b, strong{
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: opacity 0.5s ease-in-out;
|
transition: opacity 0.5s ease-in-out;
|
||||||
}
|
}
|
||||||
#comic panel[fadeInOn]{
|
.comic panel[fadeInOn]{
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
#comic panel pic{
|
.comic panel pic{
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0;
|
top:0;
|
||||||
|
@ -58,7 +96,7 @@ b, strong{
|
||||||
/*background: #bada55;*/
|
/*background: #bada55;*/
|
||||||
background: #ccc;
|
background: #ccc;
|
||||||
}
|
}
|
||||||
#comic panel words{
|
.comic panel words{
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0;
|
top:0;
|
||||||
|
@ -67,21 +105,21 @@ b, strong{
|
||||||
/*text-align: left;*/
|
/*text-align: left;*/
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
#comic panel words[no-bg]{
|
.comic panel words[no-bg]{
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
#comic panel sim{
|
.comic panel sim{
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
#comic panel sim > iframe{
|
.comic panel sim > iframe{
|
||||||
border: none;
|
border: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0; left:0;
|
top:0; left:0;
|
||||||
}
|
}
|
||||||
#comic panel sim > label{
|
.comic panel sim > label{
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
.small_card{
|
.small_card{
|
||||||
|
|
79
js/comic.js
79
js/comic.js
|
@ -109,43 +109,46 @@ $all("div[editable]").forEach(function(dom){
|
||||||
//////////////////////////////////////////
|
//////////////////////////////////////////
|
||||||
|
|
||||||
// Wallpaper
|
// Wallpaper
|
||||||
var gw_text = detectmob() ? "gift_wallpaper_phone" : "gift_wallpaper_desktop";
|
if($("#gift_wallpaper")){
|
||||||
$("#gift_wallpaper").innerHTML = $("#"+gw_text).innerHTML;
|
|
||||||
|
|
||||||
var WALLPAPER_CHANGED = true;
|
var gw_text = detectmob() ? "gift_wallpaper_phone" : "gift_wallpaper_desktop";
|
||||||
subscribe("answer_edit_you_what",function(){
|
$("#gift_wallpaper").innerHTML = $("#"+gw_text).innerHTML;
|
||||||
WALLPAPER_CHANGED = true;
|
|
||||||
});
|
|
||||||
subscribe("answer_edit_you_why",function(){
|
|
||||||
WALLPAPER_CHANGED = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
setInterval(function(){
|
var WALLPAPER_CHANGED = true;
|
||||||
|
subscribe("answer_edit_you_what",function(){
|
||||||
|
WALLPAPER_CHANGED = true;
|
||||||
|
});
|
||||||
|
subscribe("answer_edit_you_why",function(){
|
||||||
|
WALLPAPER_CHANGED = true;
|
||||||
|
});
|
||||||
|
|
||||||
// Wallpaper, re-make ONLY IF CHANGED
|
setInterval(function(){
|
||||||
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
|
// Wallpaper, re-make ONLY IF CHANGED
|
||||||
var showWhat = "other";
|
if(WALLPAPER_CHANGED){
|
||||||
var theHow = $("#flashcard_you_how_back").innerText.trim().toLocaleLowerCase();
|
WALLPAPER_CHANGED = false;
|
||||||
if(theHow.search("leitner") >= 0){
|
var canvas = makeWallpaper();
|
||||||
showWhat = "leitner";
|
var dataURL = canvas.toDataURL();
|
||||||
}else if(theHow.search("anki") >= 0){
|
$("#wallpaper_link").href = dataURL;
|
||||||
showWhat = "anki";
|
$("#wallpaper_link").download = (getLabel("gift_wallpaper_filename").trim())+".png";
|
||||||
}else if(theHow.search("tiny") >= 0){
|
$("#wallpaper_image").src = dataURL;
|
||||||
showWhat = "tiny";
|
}
|
||||||
}
|
|
||||||
$("#gift_app").innerHTML = $("#gift_app_"+showWhat).innerHTML;
|
|
||||||
|
|
||||||
},5000);
|
// 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
|
// From https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser
|
||||||
function detectmob(){
|
function detectmob(){
|
||||||
|
@ -208,3 +211,15 @@ function makeWallpaper(){
|
||||||
return canvas;
|
return canvas;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
///////////////////
|
||||||
|
// Chapter Links //
|
||||||
|
///////////////////
|
||||||
|
|
||||||
|
var linx = $("#label_chapter_links");
|
||||||
|
if(linx){
|
||||||
|
$all(".divider > #chapter_links").forEach(function(linkContainer){
|
||||||
|
linkContainer.innerHTML = linx.innerHTML;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
BIN
pics/fcard_frontonly.png
Normal file
BIN
pics/fcard_frontonly.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 16 KiB |
BIN
pics/fcards_ch3.png
Normal file
BIN
pics/fcards_ch3.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 53 KiB |
|
@ -30,13 +30,13 @@ body{
|
||||||
}
|
}
|
||||||
.card{
|
.card{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 390px; /* 5 x 3 */
|
width: 396px; /* 5 x 3 */
|
||||||
height: 230px;
|
height: 236px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 5px inset rgba(0,0,0,0.15);
|
border: 2px inset rgba(0,0,0,0.15);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
#card_bg{
|
#card_bg{
|
||||||
|
|
|
@ -6,6 +6,7 @@ window.onload = function(){
|
||||||
cardnames = cardnames.split(",");
|
cardnames = cardnames.split(",");
|
||||||
window.CARDS = cardnames.map(function(cardname){
|
window.CARDS = cardnames.map(function(cardname){
|
||||||
return {
|
return {
|
||||||
|
name: cardname,
|
||||||
front: _getLabel("flashcard_"+cardname+"_front"),
|
front: _getLabel("flashcard_"+cardname+"_front"),
|
||||||
back: _getLabel("flashcard_"+cardname+"_back")
|
back: _getLabel("flashcard_"+cardname+"_back")
|
||||||
};
|
};
|
||||||
|
@ -49,6 +50,11 @@ function showCurrentCard(infoTimeout){
|
||||||
|
|
||||||
// Card
|
// Card
|
||||||
var currentCard = CARDS[0];
|
var currentCard = CARDS[0];
|
||||||
|
// HACK. If it's a YOU card, AUTO-REFRESH.
|
||||||
|
if(currentCard.name.search("you_")>=0){
|
||||||
|
currentCard.front = _getLabel("flashcard_"+currentCard.name+"_front");
|
||||||
|
currentCard.back = _getLabel("flashcard_"+currentCard.name+"_back");
|
||||||
|
}
|
||||||
$("#ccard_front").innerHTML = currentCard.front;
|
$("#ccard_front").innerHTML = currentCard.front;
|
||||||
$("#ccard_back").innerHTML = currentCard.back;
|
$("#ccard_back").innerHTML = currentCard.back;
|
||||||
|
|
||||||
|
|
|
@ -1,36 +1,45 @@
|
||||||
|
window.front_only = _getQueryVariable("front_only");
|
||||||
|
window.FRONT_ONLY = (front_only && front_only=="yes");
|
||||||
|
|
||||||
var flashcard = $("#flashcard");
|
var flashcard = $("#flashcard");
|
||||||
var FLIPPED = false;
|
var FLIPPED = false;
|
||||||
flashcard.onclick = function(){
|
if(!FRONT_ONLY){
|
||||||
|
flashcard.onclick = function(){
|
||||||
|
|
||||||
// Flip!
|
// Flip!
|
||||||
var flip = flashcard.getAttribute("flip");
|
var flip = flashcard.getAttribute("flip");
|
||||||
if(flip=="yes"){
|
if(flip=="yes"){
|
||||||
flashcard.setAttribute("flip","no");
|
flashcard.setAttribute("flip","no");
|
||||||
}else{
|
}else{
|
||||||
flashcard.setAttribute("flip","yes");
|
flashcard.setAttribute("flip","yes");
|
||||||
|
|
||||||
// HACK: PLAY AUDIO
|
// HACK: PLAY AUDIO (if any)
|
||||||
var a = $("#HACK_audio");
|
var a = $("#HACK_audio");
|
||||||
if(a){
|
if(a){
|
||||||
a.play();
|
a.play();
|
||||||
if(!a.onclick){
|
if(!a.onclick){
|
||||||
a.onclick = function(e){
|
a.onclick = function(e){
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
};
|
};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
// Also, send message (when flipped for first time)
|
||||||
|
if(!FLIPPED && window.top.broadcastMessage){
|
||||||
|
FLIPPED = true;
|
||||||
|
setTimeout(function(){
|
||||||
|
window.top.broadcastMessage("flip_"+cardname);
|
||||||
|
},1000);
|
||||||
|
}
|
||||||
|
|
||||||
// Also, send message (when flipped for first time)
|
};
|
||||||
if(!FLIPPED && window.top.broadcastMessage){
|
}else{
|
||||||
FLIPPED = true;
|
|
||||||
setTimeout(function(){
|
|
||||||
window.top.broadcastMessage("flip_"+cardname);
|
|
||||||
},1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
window.cardname = _getQueryVariable("card");
|
window.cardname = _getQueryVariable("card");
|
||||||
var frontHTML = _getLabel("flashcard_"+cardname+"_front");
|
var frontHTML = _getLabel("flashcard_"+cardname+"_front");
|
||||||
|
|
Loading…
Reference in New Issue
Block a user