writing your own flashcard code
This commit is contained in:
parent
4b7c88b188
commit
44a7ba4116
2
ch2.html
2
ch2.html
|
@ -590,7 +590,6 @@ Early feedback helps me a lot. Many thanks in advance!
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- - - - - - - - - - -->
|
<!-- - - - - - - - - - -->
|
||||||
<!-- SIMULATION LABELS -->
|
<!-- SIMULATION LABELS -->
|
||||||
|
@ -931,7 +930,6 @@ Early feedback helps me a lot. Many thanks in advance!
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,80 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>An Interactive Comic</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/comic.css"/>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="comic">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- - - - - - - - - - - - -->
|
||||||
|
<!-- WHAT, WHY, HOW, WHEN - -->
|
||||||
|
<!-- - - - - - - - - - - - -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Part 1.1: Leitner Calendar -->
|
||||||
|
|
||||||
|
<panel w=500 h=450>
|
||||||
|
<pic src="pics/leit0.png" sx=0 sy=0></pic>
|
||||||
|
<words x=10 y=10 w=430 h=60>
|
||||||
|
dasd sad assad ddasdasdasdas asdasdsd asds
|
||||||
|
</words>
|
||||||
|
<words x=30 y=350 w=430 h=60>
|
||||||
|
asdasdassaasd asdassadas sadasd s asdas as
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=600 h=400 bg="#fff">
|
||||||
|
<sim x=0 y=0 w=600 h=400 src="sims/type/?card=test"></sim>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=500 h=450>
|
||||||
|
<pic src="pics/leit0.png" sx=0 sy=0></pic>
|
||||||
|
<words x=10 y=10 w=430 h=60>
|
||||||
|
dasd sad assad ddasdasdasdas asdasdsd asds
|
||||||
|
</words>
|
||||||
|
<words x=30 y=350 w=430 h=60>
|
||||||
|
asdasdassaasd asdassadas sadasd s asdas as
|
||||||
|
</words>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
<panel w=600 h=300 bg="#e0e0e0">
|
||||||
|
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=test&refresh=yes"></sim>
|
||||||
|
</panel>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- - - - - - - - - - -->
|
||||||
|
<!-- SIMULATION LABELS -->
|
||||||
|
<!-- - - - - - - - - - -->
|
||||||
|
|
||||||
|
<div id="labels">
|
||||||
|
|
||||||
|
<!-- MITOCHONDRIA IS THE POWERHOUSE OF THE CELL -->
|
||||||
|
<span id="flashcard_test_front">
|
||||||
|
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=960></div>
|
||||||
|
<div class="fcard_center" style="height:160px;">
|
||||||
|
What's this?
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span id="flashcard_test_back">
|
||||||
|
<div class="fcard_center" editable="test">
|
||||||
|
Mitochondria
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<script src="js/minpubsub.src.js"></script>
|
||||||
|
<script src="js/comic.js"></script>
|
14
js/comic.js
14
js/comic.js
|
@ -88,6 +88,16 @@ window.getLabel = function(name){
|
||||||
return $("#"+name).innerHTML;
|
return $("#"+name).innerHTML;
|
||||||
}
|
}
|
||||||
|
|
||||||
window.broadcastMessage = function(message){
|
window.broadcastMessage = function(message, args){
|
||||||
publish(message);
|
publish(message, args);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Editable Flashcard Labels
|
||||||
|
$all("div[editable]").forEach(function(dom){
|
||||||
|
|
||||||
|
var cardname = dom.getAttribute("editable");
|
||||||
|
subscribe("answer_edit_"+cardname, function(text){
|
||||||
|
dom.innerText = text;
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
|
@ -39,4 +39,25 @@ $("#front").innerHTML = frontHTML;
|
||||||
$("#back").innerHTML = backHTML;
|
$("#back").innerHTML = backHTML;
|
||||||
|
|
||||||
_modifyFlashCard($("#front"));
|
_modifyFlashCard($("#front"));
|
||||||
_modifyFlashCard($("#back"));
|
_modifyFlashCard($("#back"));
|
||||||
|
|
||||||
|
// Refresh in real time...
|
||||||
|
if(_getQueryVariable("refresh")=="yes"){
|
||||||
|
|
||||||
|
var dom = back.querySelector(".fcard_center");
|
||||||
|
|
||||||
|
dom.style.top = "auto";
|
||||||
|
dom.style.bottom = "auto";
|
||||||
|
|
||||||
|
var _reAlign = function(){
|
||||||
|
var bounds = dom.getBoundingClientRect();
|
||||||
|
dom.style.top = (((240-bounds.height)/2)-10) +"px";
|
||||||
|
};
|
||||||
|
_reAlign();
|
||||||
|
|
||||||
|
window.top.subscribe("answer_edit_"+cardname, function(new_answer){
|
||||||
|
dom.innerText = new_answer;
|
||||||
|
_reAlign();
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!--
|
||||||
|
|
||||||
|
The Process:
|
||||||
|
1. type something @done
|
||||||
|
2. it sends signal @done
|
||||||
|
3. label is updated in parent @done
|
||||||
|
4. flashcard in different iframe updates @done
|
||||||
|
5. flashcard answer auto-centers @done
|
||||||
|
|
||||||
|
-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Typing</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="type.css"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<input id="answer" type="text"></input>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<script src="../helpers.js"></script>
|
||||||
|
<script src="type.js"></script>
|
|
@ -0,0 +1,12 @@
|
||||||
|
window.cardname = _getQueryVariable("card");
|
||||||
|
|
||||||
|
$("#answer").oninput = function(){
|
||||||
|
|
||||||
|
// Also, send message (when flipped for first time)
|
||||||
|
if(window.top.broadcastMessage){
|
||||||
|
setTimeout(function(){
|
||||||
|
window.top.broadcastMessage("answer_edit_"+cardname, [$("#answer").value]);
|
||||||
|
},1);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
Loading…
Reference in New Issue