Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
HTML5 - new Memory page model (incl. change to xwd to add reset butto…
…n text) git-svn-id: https://xerteonlinetoolkits.googlecode.com/svn/trunk@704 912cdd6b-5c7d-d5a7-a2ba-d0f0cdb91641
- Loading branch information
Showing
4 changed files
with
219 additions
and
7 deletions.
There are no files selected for viewing
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
212 changes: 212 additions & 0 deletions
212
modules/xerte/parent_templates/Nottingham/models_html5/memory.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,212 @@ | ||
<script type="text/javascript"> | ||
|
||
// pageChanged & sizeChanged functions are needed in every model file | ||
// other functions for model should also be in here to avoid conflicts | ||
var memory = new function() { | ||
|
||
// function called every time the page is viewed after it has initially loaded | ||
this.pageChanged = function() { | ||
$("#pageContents").data("currentCard", ""); | ||
$("#button").hide(); | ||
this.createCards(); | ||
} | ||
|
||
// function called every time the size of the LO is changed | ||
this.sizeChanged = function() { | ||
|
||
} | ||
|
||
this.createCards = function() { | ||
var $pageContents = $("#pageContents"), | ||
$cardTopHolder = $("#cardTopHolder"), | ||
$cardBottomHolder = $("#cardBottomHolder"); | ||
|
||
// clear existing cards | ||
$cardTopHolder.add($cardBottomHolder).empty(); | ||
|
||
// randomise order and create new cards | ||
var cards = []; | ||
var tempCards = $pageContents.data("cardData").slice(0); | ||
|
||
for (var i=0; i<$pageContents.data("cardData").length; i++) { | ||
var cardNum = Math.floor(Math.random() * tempCards.length); | ||
cards.push(tempCards[cardNum]); | ||
tempCards.splice(cardNum, 1); | ||
} | ||
|
||
for (var i=0; i<cards.length; i++) { | ||
// create top of cards | ||
$('<div class="card"></div>') | ||
.css("background-image", 'url("' + x_templateLocation + 'common_html5/card.png' + '")') | ||
.attr("tabindex", i+1) | ||
.appendTo($cardTopHolder) | ||
.click(function() { | ||
var $this = $(this); | ||
if ($pageContents.data("currentCard") == "") { // 1st card revealed | ||
$pageContents.data("currentCard", $this); | ||
$cardTopHolder.find(".card:not('.correct')").animate({opacity: 1}, 250); // can't use fadeIn/Out() because it stops it displaying as block | ||
clearInterval(x_timer); | ||
$this.animate({opacity: 0}, 500); | ||
|
||
} else { // 2nd card revealed - does it match? | ||
if ($this.is($pageContents.data("currentCard")) == false) { | ||
$this.animate({opacity: 0}, 500); | ||
var $card1 = $($cardBottomHolder.children()[$this.index()]); | ||
var $card2 = $($cardBottomHolder.children()[$pageContents.data("currentCard").index()]); | ||
|
||
if (parseInt($card1.data("match")) == parseInt($card2.data("match"))) { // match - short delay and then add label to image card | ||
$this.add($pageContents.data("currentCard")).addClass("correct"); | ||
|
||
clearInterval(x_timer); | ||
x_timer = setInterval(function() { | ||
if ($card1.find(".label").length == 0) { | ||
$card1.animate({opacity: 0}, 500); | ||
} else { | ||
$card2.animate({opacity: 0}, 500); | ||
} | ||
$card1.add($card2).find(".label").animate({opacity: 1}, 500); | ||
|
||
if ($pageContents.find(".correct").length == $pageContents.data("cardData").length) { // all matched | ||
$("#button").show(); | ||
} | ||
|
||
clearInterval(x_timer); | ||
}, 500); | ||
|
||
} else { // no match | ||
clearInterval(x_timer); | ||
x_timer = setInterval(function() { | ||
$cardTopHolder.find(".card:not('.correct')").animate({opacity: 1}, 250); | ||
clearInterval(x_timer); | ||
}, 1000); | ||
} | ||
$pageContents.data("currentCard", ""); | ||
} | ||
} | ||
}) | ||
.keypress(function(e) { | ||
var charCode = e.charCode || e.keyCode; | ||
if (charCode == 32) { | ||
$(this).trigger("click"); | ||
} | ||
}) | ||
.focusin(function() { | ||
$(this).addClass("focus"); | ||
}) | ||
.focusout(function() { | ||
$(this).removeClass("focus"); | ||
}); | ||
|
||
// create bottom of cards - with either text or image on them | ||
var cardContents = ""; | ||
if (cards[i].type == "text") { | ||
$('<div class="card" >' + x_addLineBreaks(cards[i].data) + '</div>') | ||
.appendTo($cardBottomHolder) | ||
.data("match", cards[i].match); | ||
|
||
} else { | ||
$('<div class="card" ><div class="label">' + cards[i].name + '</div></div>') | ||
.appendTo($cardBottomHolder) | ||
.css("background-image", 'url("' + eval(cards[i].data) + '")') | ||
.data("match", cards[i].match) | ||
.find(".label").css("opacity", 0); | ||
} | ||
} | ||
} | ||
|
||
this.init = function() { | ||
// get & store card data | ||
var cards = []; | ||
$(x_currentPageXML).children().each(function(i){ | ||
cards.push({type:"text", data:this.getAttribute("name"), match:i}); | ||
cards.push({type:"img", data:this.getAttribute("url"), match:i, name:this.getAttribute("name")}); | ||
}); | ||
|
||
$("#pageContents").data({ | ||
"cardData" :cards, | ||
"currentCard" :"" | ||
}); | ||
|
||
var resetBtnTxt = x_currentPageXML.getAttribute("resetBtnTxt"); | ||
if (resetBtnTxt == undefined) { | ||
resetBtnTxt = "Shuffle Cards"; | ||
} | ||
|
||
$("#button") | ||
.button({ | ||
label: resetBtnTxt | ||
}) | ||
.click(function() { | ||
$("#pageContents").data("currentCard", ""); | ||
$(this).hide(); | ||
memory.createCards(); | ||
}) | ||
.hide(); | ||
|
||
this.createCards(); | ||
|
||
x_pageLoaded(); | ||
} | ||
} | ||
|
||
memory.init(); | ||
|
||
</script> | ||
|
||
<style type="text/css"> | ||
|
||
#pageContents .card { | ||
width: 92px; | ||
height: 126px; | ||
float: left; | ||
margin: 10px; | ||
padding: 5px; | ||
} | ||
|
||
#cardTopHolder, #cardBottomHolder { | ||
position: absolute; | ||
} | ||
|
||
#cardTopHolder .card { | ||
border: 1px solid transparent; | ||
} | ||
|
||
#cardTopHolder .card.focus { | ||
border: 1px solid yellow; | ||
} | ||
|
||
#cardBottomHolder { | ||
z-index: -1; | ||
} | ||
|
||
#cardBottomHolder .card { | ||
background-color: white; | ||
border: 1px solid black; | ||
background-size: 100% 100%; | ||
text-align: center; | ||
} | ||
|
||
#cardBottomHolder .card .label { | ||
background-color: white; | ||
border: 1px solid black; | ||
width: 82px; | ||
padding: 5px; | ||
} | ||
|
||
#button { | ||
position: absolute; | ||
right: 10px; | ||
bottom: 10px; | ||
} | ||
|
||
</style> | ||
|
||
<div id="pageContents"> | ||
|
||
<div id="cardTopHolder"></div> | ||
|
||
<div id="cardBottomHolder"></div> | ||
|
||
<button id="button"></button> | ||
|
||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters