Skip to content

Commit

Permalink
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
FayCross committed Feb 27, 2013
1 parent 0ae9811 commit fe990e3
Show file tree
Hide file tree
Showing 4 changed files with 219 additions and 7 deletions.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions modules/xerte/parent_templates/Nottingham/data.xwd
Expand Up @@ -74,7 +74,7 @@
nextBtnText="Next" nextBtnTip="Next Question" nextBtnWidth="100"
restartBtnText="Restart" restartBtnTip="Restart Quiz" restartBtnWidth="100"
/>]]></inventory><iSpring><![CDATA[<iSpring name="Enter Page Title" url="Select an iSpring Movie" version="Pro"/>]]></iSpring><jing><![CDATA[<jing name="Enter Page Title" url="Select a Jing SWF File"/>]]></jing><jmol><![CDATA[<jmol name="Enter Page Title" text="Enter text for the page" xyz="Select an XYZ file" size="Medium" initLook="Ball and Stick" colour="Default" controls="true"/>]]></jmol><links><![CDATA[<links name="Enter Page Title" text="Enter Page Text" cols="3" height="80"/>]]></links><list><![CDATA[<list name="Enter Page Title" text="Enter text for the page here"/>]]></list><map><![CDATA[<map name="Enter Page Title" text="Enter text for the page here" align="left" mapurl="Paste the link here" maptype="roadmap" tooltip="Enter a tooltip" link="true"/>]]></map><mapstraction><![CDATA[<mapstraction name="Enter Page Title" provider="google" lat="0" lng="0" zoom="4"/>]]></mapstraction><mcq><![CDATA[<mcq name="Enter Page Title" instruction="Enter Instruction" prompt="Enter a Prompt" type="Single Answer" align="Left" panelWidth="Medium"
feedbackLabel="Feedback" checkBtnTxt="Check" checkBtnTip="Check Answer" checkBtnWidth="100"/>]]></mcq><memory><![CDATA[<memory name="Enter Page Title"/>]]></memory><modelAnswer><![CDATA[<modelAnswer name="Enter Page Title" text="Enter text for the page here" prompt="Enter prompt here" feedback="Enter feedback here" panelWidth="Medium" align="left"
feedbackLabel="Feedback" checkBtnTxt="Check" checkBtnTip="Check Answer" checkBtnWidth="100"/>]]></mcq><memory><![CDATA[<memory name="Enter Page Title" resetBtnTxt="Shuffle Cards"/>]]></memory><modelAnswer><![CDATA[<modelAnswer name="Enter Page Title" text="Enter text for the page here" prompt="Enter prompt here" feedback="Enter feedback here" panelWidth="Medium" align="left"
feedbackBtnTxt="Feedback" feedbackBtnTip="Feedback" feedbackBtnWidth="80"
instructHeaderATxt="The instruction and question on page" instructHeaderBTxt="was" responseHeaderTxt="Your response was:"
noAnswerHeaderTxt="You didn't answer this question." exampleHeaderTxt="The example answer was:"
Expand Down Expand Up @@ -925,7 +925,8 @@

</option><memory menu="Games" menuItem="Memory Game" hint="An interaction for the user to match chunks of text" icon="icConnect" thumb="thumbs/memoryGame.jpg" remove="true">

<name label="Page Title" type="TextInput"/>
<name label="Page Title" type="TextInput"/>
<resetBtnTxt label="Reset Button Label" type="textInput" language="true"/>

<newNodes>
<matchItem><![CDATA[<matchItem name="Enter Label" url="Select Image"/>]]></matchItem>
Expand Down
212 changes: 212 additions & 0 deletions modules/xerte/parent_templates/Nottingham/models_html5/memory.html
@@ -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>
Expand Up @@ -6,8 +6,6 @@
<name type="TextInput" label="Learning Object Title"/>
<navigation type="ComboBox" options="Linear,Historic,Menu,Menu with Page Controls" data="Linear,Historic,Menu,Menu with Page Controls" label="Navigation" width="170"/>
<textSize type="ComboBox" options="10,12,14,16,18,24,36" label="Default Text Size" width="100"/>
<visuals optional="true" type="ComboBox" options="No Visuals,Default Visuals,Clean Visuals without titles, Clean Visuals with titles" data="0,1,2,3" label="Flash Engine Visuals" defaultValue="1" width="250"/>
<language type="LanguageList" label="Language" width="170"/>
<kblanguage type="ComboBox" options="Chinese,Croation,English,French,German,Italian,Japanese,Polish,Portuguese,Russian,Serbian,Slovene,Spanish" data="Chinese,Croation,English,French,German,Italian,Japanese,Polish,Portuguese,Russian,Serbian,Slovene,Spanish" width="120" label="Keyboard Language" optional="true"/>
<displayMode type="ComboBox" options="default,full screen,fill window" data="default,full screen,fill window" label="Display Mode" width="100"/>
<allpagestitlesize optional="true" type="NumericStepper" min="16" max="30" step="1" label="Page title size" defaultValue="24"/>
Expand Down Expand Up @@ -76,7 +74,7 @@
nextBtnText="Next" nextBtnTip="Next Question" nextBtnWidth="100"
restartBtnText="Restart" restartBtnTip="Restart Quiz" restartBtnWidth="100"
/>]]></inventory><iSpring><![CDATA[<iSpring name="Enter Page Title" url="Select an iSpring Movie" version="Pro"/>]]></iSpring><jing><![CDATA[<jing name="Enter Page Title" url="Select a Jing SWF File"/>]]></jing><jmol><![CDATA[<jmol name="Enter Page Title" text="Enter text for the page" xyz="Select an XYZ file" size="Medium" initLook="Ball and Stick" colour="Default" controls="true"/>]]></jmol><links><![CDATA[<links name="Enter Page Title" text="Enter Page Text" cols="3" height="80"/>]]></links><list><![CDATA[<list name="Enter Page Title" text="Enter text for the page here"/>]]></list><map><![CDATA[<map name="Enter Page Title" text="Enter text for the page here" align="left" mapurl="Paste the link here" maptype="roadmap" tooltip="Enter a tooltip" link="true"/>]]></map><mapstraction><![CDATA[<mapstraction name="Enter Page Title" provider="google" lat="0" lng="0" zoom="4"/>]]></mapstraction><mcq><![CDATA[<mcq name="Enter Page Title" instruction="Enter Instruction" prompt="Enter a Prompt" type="Single Answer" align="Left" panelWidth="Medium"
feedbackLabel="Feedback" checkBtnTxt="Check" checkBtnTip="Check Answer" checkBtnWidth="100"/>]]></mcq><memory><![CDATA[<memory name="Enter Page Title"/>]]></memory><modelAnswer><![CDATA[<modelAnswer name="Enter Page Title" text="Enter text for the page here" prompt="Enter prompt here" feedback="Enter feedback here" panelWidth="Medium" align="left"
feedbackLabel="Feedback" checkBtnTxt="Check" checkBtnTip="Check Answer" checkBtnWidth="100"/>]]></mcq><memory><![CDATA[<memory name="Enter Page Title" resetBtnTxt="Shuffle Cards"/>]]></memory><modelAnswer><![CDATA[<modelAnswer name="Enter Page Title" text="Enter text for the page here" prompt="Enter prompt here" feedback="Enter feedback here" panelWidth="Medium" align="left"
feedbackBtnTxt="Feedback" feedbackBtnTip="Feedback" feedbackBtnWidth="80"
instructHeaderATxt="The instruction and question on page" instructHeaderBTxt="was" responseHeaderTxt="Your response was:"
noAnswerHeaderTxt="You didn't answer this question." exampleHeaderTxt="The example answer was:"
Expand Down Expand Up @@ -927,7 +925,8 @@

</option><memory menu="Games" menuItem="Memory Game" hint="An interaction for the user to match chunks of text" icon="icConnect" thumb="thumbs/memoryGame.jpg" remove="true">

<name label="Page Title" type="TextInput"/>
<name label="Page Title" type="TextInput"/>
<resetBtnTxt label="Reset Button Label" type="textInput" language="true"/>

<newNodes>
<matchItem><![CDATA[<matchItem name="Enter Label" url="Select Image"/>]]></matchItem>
Expand Down Expand Up @@ -1564,7 +1563,7 @@
</textSWF><textVideo menu="Media" menuItem="Video" hint="A page for integrating FLV video files with your presentation" label="Page Text" icon="icPageWhiteFilm" thumb="thumbs/textVideo.jpg" type="text" height="180" remove="true">

<name label="Page Title" type="TextInput"/>
<align label="Align Text" options="Left,Right" type="ComboBox" data="Left,Right" defaultValue="Left" width="100"/>
<align label="Align Text" options="Left,Right,Top,Bottom" type="ComboBox" data="Left,Right,Top,Bottom" defaultValue="Left" width="100"/>
<url label="Video File" type="media"/>
<tip label="Video Tooltip" type="TextInput"/>
<reset label="Reset on Completion" type="Checkbox" defaultValue="false"/>
Expand Down

0 comments on commit fe990e3

Please sign in to comment.