misc crap
This commit is contained in:
Nicky Case
parent
8be519b464
commit
8a6cab8a14
2
ch1.html
2
ch1.html
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div id="comic">
|
||||
<div class="comic">
|
||||
|
||||
<!-- - - - - - - - - - - - -->
|
||||
<!-- THE SCIENCE of SRS - - -->
|
||||
|
|
|
|||
2
ch2.html
2
ch2.html
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div id="comic">
|
||||
<div class="comic">
|
||||
|
||||
|
||||
<panel w=600 h=180>
|
||||
|
|
|
|||
123
ch3.html
123
ch3.html
|
|
@ -9,8 +9,58 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<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 id="comic">
|
||||
<div class="comic">
|
||||
|
||||
<!-- - - - - - - - - - - - -->
|
||||
<!-- WHAT, WHY, HOW, WHEN - -->
|
||||
|
|
@ -35,8 +85,11 @@ So, here's the <i>front</i> of our first flashcard, our question:
|
|||
</words>
|
||||
</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? -->
|
||||
<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 w=500 h=450>
|
||||
|
|
@ -77,8 +130,11 @@ So, here's the <i>front</i> of our first flashcard, our question:
|
|||
</words>
|
||||
</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? -->
|
||||
<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 w=500 h=450>
|
||||
|
|
@ -112,8 +168,11 @@ So, here's the <i>front</i> of our first flashcard, our question:
|
|||
</words>
|
||||
</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?) -->
|
||||
<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 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>
|
||||
</panel>
|
||||
|
||||
|
||||
|
||||
<!-- - - -->
|
||||
<!-- WHEN -->
|
||||
<!-- - - -->
|
||||
|
|
@ -176,8 +233,11 @@ So, here's the <i>front</i> of our first flashcard, our question:
|
|||
</words>
|
||||
</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? -->
|
||||
<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 w=500 h=450>
|
||||
|
|
@ -354,7 +414,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=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 w=240 h=300>
|
||||
|
|
@ -423,10 +483,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
|||
<!-- Bow Goodbye -->
|
||||
|
||||
<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=mitochondria_all"></sim>
|
||||
-->
|
||||
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=the_end"></sim>
|
||||
</panel>
|
||||
|
||||
<!-- want more? further reading & credits below! -->
|
||||
|
|
@ -483,7 +540,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
|||
|
||||
<!-- QUESTIONS -->
|
||||
<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?
|
||||
</div>
|
||||
</span>
|
||||
|
|
@ -493,7 +551,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
|||
</div>
|
||||
</span>
|
||||
<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?
|
||||
</div>
|
||||
</span>
|
||||
|
|
@ -503,7 +562,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
|||
</div>
|
||||
</span>
|
||||
<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?
|
||||
</div>
|
||||
</span>
|
||||
|
|
@ -513,7 +573,8 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
|||
</div>
|
||||
</span>
|
||||
<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?
|
||||
</div>
|
||||
</span>
|
||||
|
|
@ -523,6 +584,17 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
|||
</div>
|
||||
</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 -->
|
||||
<span id="you_what_suggestions">
|
||||
<li>Everything</li>
|
||||
|
|
@ -618,6 +690,25 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
|||
↓
|
||||
</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>
|
||||
|
||||
|
|
|
|||
|
|
@ -25,17 +25,55 @@ b, strong{
|
|||
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{
|
||||
overflow:hidden;
|
||||
width:610px;
|
||||
margin: 50px auto;
|
||||
text-align: center;
|
||||
}
|
||||
#comic panel{
|
||||
.comic panel{
|
||||
display: inline-block;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
|
|
@ -45,10 +83,10 @@ b, strong{
|
|||
overflow: hidden;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
#comic panel[fadeInOn]{
|
||||
.comic panel[fadeInOn]{
|
||||
opacity: 0;
|
||||
}
|
||||
#comic panel pic{
|
||||
.comic panel pic{
|
||||
display: block;
|
||||
position: absolute;
|
||||
top:0;
|
||||
|
|
@ -58,7 +96,7 @@ b, strong{
|
|||
/*background: #bada55;*/
|
||||
background: #ccc;
|
||||
}
|
||||
#comic panel words{
|
||||
.comic panel words{
|
||||
display: block;
|
||||
position: absolute;
|
||||
top:0;
|
||||
|
|
@ -67,21 +105,21 @@ b, strong{
|
|||
/*text-align: left;*/
|
||||
padding: 15px;
|
||||
}
|
||||
#comic panel words[no-bg]{
|
||||
.comic panel words[no-bg]{
|
||||
background: none;
|
||||
}
|
||||
#comic panel sim{
|
||||
.comic panel sim{
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
#comic panel sim > iframe{
|
||||
.comic panel sim > iframe{
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top:0; left:0;
|
||||
}
|
||||
#comic panel sim > label{
|
||||
.comic panel sim > label{
|
||||
display:none;
|
||||
}
|
||||
.small_card{
|
||||
|
|
|
|||
79
js/comic.js
79
js/comic.js
|
|
@ -109,43 +109,46 @@ $all("div[editable]").forEach(function(dom){
|
|||
//////////////////////////////////////////
|
||||
|
||||
// Wallpaper
|
||||
var gw_text = detectmob() ? "gift_wallpaper_phone" : "gift_wallpaper_desktop";
|
||||
$("#gift_wallpaper").innerHTML = $("#"+gw_text).innerHTML;
|
||||
if($("#gift_wallpaper")){
|
||||
|
||||
var WALLPAPER_CHANGED = true;
|
||||
subscribe("answer_edit_you_what",function(){
|
||||
WALLPAPER_CHANGED = true;
|
||||
});
|
||||
subscribe("answer_edit_you_why",function(){
|
||||
WALLPAPER_CHANGED = true;
|
||||
});
|
||||
var gw_text = detectmob() ? "gift_wallpaper_phone" : "gift_wallpaper_desktop";
|
||||
$("#gift_wallpaper").innerHTML = $("#"+gw_text).innerHTML;
|
||||
|
||||
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
|
||||
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!");
|
||||
}
|
||||
setInterval(function(){
|
||||
|
||||
// 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;
|
||||
// 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;
|
||||
}
|
||||
|
||||
},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
|
||||
function detectmob(){
|
||||
|
|
@ -208,3 +211,15 @@ function makeWallpaper(){
|
|||
return canvas;
|
||||
|
||||
}
|
||||
|
||||
///////////////////
|
||||
// Chapter Links //
|
||||
///////////////////
|
||||
|
||||
var linx = $("#label_chapter_links");
|
||||
if(linx){
|
||||
$all(".divider > #chapter_links").forEach(function(linkContainer){
|
||||
linkContainer.innerHTML = linx.innerHTML;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
|
|
@ -30,13 +30,13 @@ body{
|
|||
}
|
||||
.card{
|
||||
position: absolute;
|
||||
width: 390px; /* 5 x 3 */
|
||||
height: 230px;
|
||||
width: 396px; /* 5 x 3 */
|
||||
height: 236px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
font-size: 40px;
|
||||
background: #fff;
|
||||
border: 5px inset rgba(0,0,0,0.15);
|
||||
border: 2px inset rgba(0,0,0,0.15);
|
||||
text-align: center;
|
||||
}
|
||||
#card_bg{
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ window.onload = function(){
|
|||
cardnames = cardnames.split(",");
|
||||
window.CARDS = cardnames.map(function(cardname){
|
||||
return {
|
||||
name: cardname,
|
||||
front: _getLabel("flashcard_"+cardname+"_front"),
|
||||
back: _getLabel("flashcard_"+cardname+"_back")
|
||||
};
|
||||
|
|
@ -49,6 +50,11 @@ function showCurrentCard(infoTimeout){
|
|||
|
||||
// Card
|
||||
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_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 FLIPPED = false;
|
||||
flashcard.onclick = function(){
|
||||
if(!FRONT_ONLY){
|
||||
flashcard.onclick = function(){
|
||||
|
||||
// Flip!
|
||||
var flip = flashcard.getAttribute("flip");
|
||||
if(flip=="yes"){
|
||||
flashcard.setAttribute("flip","no");
|
||||
}else{
|
||||
flashcard.setAttribute("flip","yes");
|
||||
// Flip!
|
||||
var flip = flashcard.getAttribute("flip");
|
||||
if(flip=="yes"){
|
||||
flashcard.setAttribute("flip","no");
|
||||
}else{
|
||||
flashcard.setAttribute("flip","yes");
|
||||
|
||||
// HACK: PLAY AUDIO
|
||||
var a = $("#HACK_audio");
|
||||
if(a){
|
||||
a.play();
|
||||
if(!a.onclick){
|
||||
a.onclick = function(e){
|
||||
e.stopPropagation();
|
||||
};
|
||||
// HACK: PLAY AUDIO (if any)
|
||||
var a = $("#HACK_audio");
|
||||
if(a){
|
||||
a.play();
|
||||
if(!a.onclick){
|
||||
a.onclick = function(e){
|
||||
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){
|
||||
FLIPPED = true;
|
||||
setTimeout(function(){
|
||||
window.top.broadcastMessage("flip_"+cardname);
|
||||
},1000);
|
||||
}
|
||||
};
|
||||
}else{
|
||||
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
|
||||
window.cardname = _getQueryVariable("card");
|
||||
var frontHTML = _getLabel("flashcard_"+cardname+"_front");
|
||||
|
|
|
|||
Loading…
Reference in New Issue