writing your own flashcard code
This commit is contained in:
Nicky Case
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 -->
|
||||
|
|
@ -931,7 +930,6 @@ Early feedback helps me a lot. Many thanks in advance!
|
|||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
window.broadcastMessage = function(message){
|
||||
publish(message);
|
||||
window.broadcastMessage = function(message, args){
|
||||
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;
|
||||
|
||||
_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