2018-09-18 17:17:42 +00:00
|
|
|
window.CARDS = [];
|
|
|
|
window.onload = function(){
|
|
|
|
|
|
|
|
// Get cards, in order.
|
|
|
|
var cardnames = _getQueryVariable("cards");
|
|
|
|
cardnames = cardnames.split(",");
|
|
|
|
window.CARDS = cardnames.map(function(cardname){
|
|
|
|
return {
|
2018-10-10 19:46:46 +00:00
|
|
|
name: cardname,
|
2018-09-18 17:17:42 +00:00
|
|
|
front: _getLabel("flashcard_"+cardname+"_front"),
|
|
|
|
back: _getLabel("flashcard_"+cardname+"_back")
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
// Set up info
|
|
|
|
setUpInfo();
|
|
|
|
|
|
|
|
// Logic for flippable current card
|
|
|
|
$("#current_card").onclick = function(){
|
|
|
|
|
|
|
|
// Flip!
|
|
|
|
var flipcont = $("#flip-container");
|
|
|
|
var flip = flipcont.getAttribute("flip");
|
|
|
|
flipcont.setAttribute("flip", (flip=="yes") ? "no" : "yes");
|
2018-10-17 20:09:50 +00:00
|
|
|
playSound((flip=="yes") ? "flip_down": "flip_up");
|
2018-09-18 17:17:42 +00:00
|
|
|
|
|
|
|
// Hide Info, then ask "did you get it?"
|
|
|
|
if(INFO_MODE == "question"){
|
|
|
|
hideInfo();
|
|
|
|
setTimeout(showInfoAnswer, 700);
|
|
|
|
}
|
|
|
|
|
2018-10-16 14:41:44 +00:00
|
|
|
// KILL UI
|
|
|
|
clicky.kill();
|
|
|
|
|
2018-09-18 17:17:42 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
// Show first card
|
|
|
|
showCurrentCard();
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
function showCurrentCard(infoTimeout){
|
|
|
|
|
|
|
|
// NO MORE CARDS? guess we're DONE.
|
|
|
|
|
|
|
|
if(CARDS.length==0){
|
|
|
|
|
|
|
|
$("#next_card").style.display = "none";
|
|
|
|
$("#current_card").style.display = "none";
|
|
|
|
showInfoDone();
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
// Card
|
|
|
|
var currentCard = CARDS[0];
|
2018-10-10 19:46:46 +00:00
|
|
|
// 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");
|
|
|
|
}
|
2018-09-18 17:17:42 +00:00
|
|
|
$("#ccard_front").innerHTML = currentCard.front;
|
|
|
|
$("#ccard_back").innerHTML = currentCard.back;
|
|
|
|
|
|
|
|
_modifyFlashCard($("#ccard_front"));
|
|
|
|
_modifyFlashCard($("#ccard_back"));
|
|
|
|
|
|
|
|
// INSTANT RESET
|
|
|
|
|
|
|
|
var flipper = $("#flip-container .flipper");
|
|
|
|
flipper.style.transition = "0s"; // INSTANT
|
|
|
|
$("#flip-container").setAttribute("flip","no");
|
|
|
|
|
|
|
|
var ccardDOM = $("#current_card");
|
|
|
|
ccardDOM.style.transition = "0s"; // INSTANT
|
|
|
|
ccardDOM.style.left = "";
|
|
|
|
|
|
|
|
setTimeout(function(){
|
|
|
|
flipper.style.transition = "";
|
|
|
|
ccardDOM.style.transition = "";
|
|
|
|
},PLANCK_TIME);
|
|
|
|
|
|
|
|
|
|
|
|
// Question
|
|
|
|
infoTimeout = infoTimeout || PLANCK_TIME;
|
|
|
|
setTimeout(function(){
|
|
|
|
showInfoQuestion();
|
|
|
|
},infoTimeout);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function showNextCard(){
|
|
|
|
if(CARDS.length>0){
|
|
|
|
var nextCard = CARDS[0];
|
|
|
|
$("#next_card").style.display = "block";
|
|
|
|
$("#next_card").innerHTML = nextCard.front;
|
|
|
|
}else{
|
|
|
|
$("#card_bg_smiley").style.display = "block";
|
2018-10-25 14:31:20 +00:00
|
|
|
if(IS_FINAL_MULTICARD){
|
|
|
|
$("#card_bg_smiley").style.backgroundPosition = "-150px 0px";
|
|
|
|
}
|
2018-09-18 17:17:42 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
var PLANCK_TIME = 20;
|
|
|
|
var BUFFER_TIME = PLANCK_TIME*3;
|
|
|
|
|
|
|
|
function nextCard(removeCurrent){
|
|
|
|
|
|
|
|
hideInfo();
|
|
|
|
|
|
|
|
// Remove, or shuffle back?
|
|
|
|
var currCard = CARDS.shift();
|
|
|
|
if(!removeCurrent){
|
|
|
|
CARDS.push(currCard); // shuffle to back.
|
|
|
|
}
|
|
|
|
|
|
|
|
// REMOVE... CARD TO THE RIGHT!
|
|
|
|
if(removeCurrent){
|
|
|
|
|
|
|
|
showNextCard();
|
|
|
|
|
|
|
|
var currentCard = $("#current_card");
|
|
|
|
currentCard.style.left = "500px";
|
|
|
|
|
|
|
|
setTimeout(function(){
|
|
|
|
$("#next_card").style.display = "none";
|
|
|
|
showCurrentCard();
|
|
|
|
},300+BUFFER_TIME);
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
showNextCard();
|
|
|
|
|
|
|
|
var currentCard = $("#current_card");
|
|
|
|
currentCard.style.left = "-400px";
|
|
|
|
|
|
|
|
setTimeout(function(){
|
|
|
|
|
|
|
|
// What card is currently showing?
|
|
|
|
var cardShowing = ($("#flip-container").getAttribute("flip")=="yes") ? "#ccard_back" : "#ccard_front";
|
|
|
|
var htmlShowing = $(cardShowing).innerHTML;
|
|
|
|
|
|
|
|
// Force next card to look like past card, and teleport it out
|
|
|
|
var ncard = $("#next_card");
|
|
|
|
ncard.innerHTML = htmlShowing;
|
|
|
|
ncard.style.left = "-400px";
|
|
|
|
|
|
|
|
// Slide next card to where current card should be
|
|
|
|
setTimeout(function(){
|
|
|
|
ncard.style.transition = "left 0.3s ease-out";
|
|
|
|
setTimeout(function(){
|
|
|
|
ncard.style.left = "0px";
|
|
|
|
setTimeout(function(){
|
|
|
|
ncard.style.transition = "";
|
|
|
|
ncard.style.left = "";
|
|
|
|
ncard.style.display = "none"; // BYE.
|
|
|
|
},300+BUFFER_TIME);
|
|
|
|
},PLANCK_TIME);
|
|
|
|
},PLANCK_TIME);
|
|
|
|
|
|
|
|
// Also, show current card
|
|
|
|
showCurrentCard(300+BUFFER_TIME);
|
|
|
|
|
|
|
|
},300+BUFFER_TIME);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2018-10-17 20:09:50 +00:00
|
|
|
var IS_FINAL_MULTICARD = (_getQueryVariable("final")=="yes");
|
2018-09-18 17:17:42 +00:00
|
|
|
function setUpInfo(){
|
|
|
|
|
|
|
|
// Labels
|
|
|
|
$("#a_label").innerHTML = _getLabel("multicard_a");
|
|
|
|
$("#a_no").innerHTML = _getLabel("multicard_no");
|
|
|
|
$("#a_yes").innerHTML = _getLabel("multicard_yes");
|
2018-10-17 20:09:50 +00:00
|
|
|
$("#done").innerHTML = _getLabel( IS_FINAL_MULTICARD ? "multicard_done_2" : "multicard_done");
|
2018-09-18 17:17:42 +00:00
|
|
|
|
|
|
|
// Clicking "yes" or "no"
|
|
|
|
$("#a_yes").onclick = function(){
|
|
|
|
nextCard(true);
|
2018-10-17 20:09:50 +00:00
|
|
|
playSound("button_down");
|
2018-09-18 17:17:42 +00:00
|
|
|
};
|
|
|
|
$("#a_no").onclick = function(){
|
|
|
|
nextCard(false);
|
2018-10-17 20:09:50 +00:00
|
|
|
playSound("button_up");
|
2018-09-18 17:17:42 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
var INFO_MODE = "question";
|
|
|
|
function showInfoQuestion(){
|
|
|
|
|
|
|
|
$("#info").style.display = "block";
|
|
|
|
$("#question").style.display = "block";
|
|
|
|
$("#answer").style.display = "none";
|
|
|
|
|
|
|
|
// Show, with "(how many left)"
|
|
|
|
var html = _getLabel("multicard_q");
|
|
|
|
html += "<br>";
|
|
|
|
html += "<span>";
|
|
|
|
html += _getLabel("multicard_cards_left").replace("[N]",CARDS.length);
|
|
|
|
html += "</span>";
|
|
|
|
$("#question").innerHTML = html;
|
|
|
|
|
|
|
|
INFO_MODE = "question";
|
|
|
|
|
|
|
|
}
|
|
|
|
function showInfoAnswer(){
|
|
|
|
$("#info").style.display = "block";
|
|
|
|
$("#question").style.display = "none";
|
|
|
|
$("#answer").style.display = "block";
|
|
|
|
INFO_MODE = "answer";
|
2018-10-16 14:41:44 +00:00
|
|
|
|
|
|
|
// SHOW UI
|
|
|
|
if(!window.pointy){
|
|
|
|
window.pointy = new createAnimatedUIHelper({
|
|
|
|
x: 480,
|
|
|
|
y: 295,
|
|
|
|
width: 100,
|
|
|
|
height: 100,
|
|
|
|
img: "../../pics/ui_point.png"
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-09-18 17:17:42 +00:00
|
|
|
}
|
|
|
|
function showInfoDone(){
|
|
|
|
$("#info").style.display = "block";
|
|
|
|
$("#question").style.display = "none";
|
|
|
|
$("#answer").style.display = "none";
|
|
|
|
$("#done").style.display = "block";
|
|
|
|
INFO_MODE = "done";
|
2018-10-17 20:09:50 +00:00
|
|
|
|
|
|
|
playSound( IS_FINAL_MULTICARD ? "win_final" : "win" );
|
|
|
|
|
2018-09-18 17:17:42 +00:00
|
|
|
}
|
|
|
|
function hideInfo(){
|
|
|
|
$("#info").style.display = "none";
|
2018-10-16 14:41:44 +00:00
|
|
|
|
|
|
|
if(window.pointy) window.pointy.kill();
|
|
|
|
|
2018-09-18 17:17:42 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
// Also, Send message when ALL DONE
|
|
|
|
if(!FLIPPED && window.top.broadcastMessage){
|
|
|
|
FLIPPED = true;
|
|
|
|
setTimeout(function(){
|
|
|
|
window.top.broadcastMessage("flip_"+cardname);
|
|
|
|
},1000);
|
|
|
|
}
|
2018-10-16 14:41:44 +00:00
|
|
|
*/
|
|
|
|
|
|
|
|
/////////////////////////////////////////
|
|
|
|
/////////////////////////////////////////
|
|
|
|
|
|
|
|
var clicky = new createAnimatedUIHelper({
|
|
|
|
x: 430,
|
|
|
|
y: 225,
|
|
|
|
width: 100,
|
|
|
|
height: 100,
|
|
|
|
img: "../../pics/ui_click.png"
|
|
|
|
});
|