<?xml version="1.0"?>
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
       <html xmlns="http://www.w3.org/1999/xhtml"
             xml:lang="en"><head><meta name="author" content="Created with Hot Potatoes by Half-Baked Software, registered to Michael Rottmeier."></meta><meta name="keywords" content="Hot Potatoes, Hot Potatoes, Half-Baked Software, Windows, University of Victoria"></meta>
 
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
<meta name="DC:Creator" content="Michael Rottmeier" />
<meta name="DC:Title" content="Find the matching pairs" />
 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 
<title>
Find the matching pairs!
</title>
 
<!-- Made with executable version 6.0 Release 0 Build 15 -->
 
<!-- Modification Copyright (c) Michael Rottmeier, April 2005 -->
<!-- JMemory - Version 2.4 -->
<!-- http://www.teaching-tools.de.vu -->
<!-- THIS HEADER MUST STAY UN-TOUCHED -->
 
<style type="text/css"> 
 
body{
	font-family: Geneva,Arial;
	background-color: #FFFFFF;
	color: #000000;
 
	margin-right: 25%;
	margin-left: 25%;
	font-size: small;
 
}
 
p{
	text-align: left;
	margin: 0px;
	font-size: small;
}
 
div,span,td{
	font-size: large;
	color: #005b88;
}
 
div.Titles{
	padding-top: 10px;
	text-align: center;
	margin-bottom: 4px;
	color: #009eea;
}
 
.ExerciseTitle{
	color: #009eea;
	font-size: large;
}
 
.ExerciseSubtitle{
	color: #ffffff;
}
 
span.Instructions{
 
}
 
div.ExerciseText{
 
}
 
.FeedbackText{
 
}
 
div.Feedback {
	background-color: #04adff;
	left: 1px;
	top: 33%;
	z-index: 1;
	border-style: solid;
	border-width: 2px;
	padding: 5px;
	text-align: center;
	color: #000000;
	position: absolute;
	display: none;
	font-size: small;
}
 
div.ExerciseDiv{
	color: #ffffff;
}
div.StdDiv{
	background-color: #b7e8ff;
	text-align: center;
	font-size: smaller;
	color: #000000;
	padding: 20px;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-color: #ffffff;
	margin: 1px;
}
 
.FunctionButton {
	border-style: solid;

	border-left-color: #7fbfdf;
	border-top-color: #7fbfdf;
	border-right-color: #004060;
	border-bottom-color: #004060;
	color: #0080c0;
	background-color: #ffffff;

	border-width: 2px;
	cursor: pointer;	
}


a{
	color: #0000FF;
}

a:visited{
	color: #0000CC;
}

a:hover{
	color: #0000FF;
}
 
div.NavButtonBar{
	background-color:#004364;
	text-align: center;
	margin: 2px 0px 2px 0px;
	clear: both;
	font-size: small;
}
 
div.NavButtonBar button {
	border-style: solid;
	border-color: #1ab5ff;
	background-color:#009fec;
	border-width: 2px;
	padding: 2px 2px 2px 2px;
	color: #000000;
	cursor: pointer;	
}
 
a{
	color: #95ddff;
}
 
a: visited{
	color: ##d2e9ff;
}
 
a:hover{
	color: #009fec;
}
 
</style>
 
 
<script type="text/javascript"> 
 
//<![CDATA[
 
<!--
 
// BrowserCheck Object
 
 
function BrowserCheck() {
	var b = navigator.appName;
	this.mac = (navigator.appVersion.indexOf('Mac') != -1);
	if (b=="Netscape") this.b = 'ns';
	else if (b=="Microsoft Internet Explorer") this.b = 'ie';
	else this.b = b;
	this.ns = (this.b == 'ns');
	this.ie = (this.b == 'ie');
	this.version = navigator.appVersion;
	if (this.b == 'ie'){
		var x = this.version.indexOf('MSIE ') + 5;
		var vnum = '';
 
		while ((this.version.charAt(x) > -1)&&(this.version.charAt(x) < 10)){
			vnum += this.version.charAt(x);
			x++;
		}
		this.v = parseInt(vnum);
	}
	else{
		this.v = parseInt(this.version);
	}
	if (this.ns&&(this.v == 5)){
		this.v = 6;
	}
	this.min = (this.v > 5);
}
 
is = new BrowserCheck();
 
if ((is.min == false)||(is.ie5mac)){
	alert('Your browser can\'t handle this page. You need NS6+ or IE6+ on Windows, or NS6+ on Mac.');
}
 
 
function PageDim(){
//Get the page width and height
	this.W = 600;
	this.H = 400;
	if (is.ns) this.W = window.innerWidth;
	if (is.ie) this.W = document.body.clientWidth;
	if (is.ns) this.H = window.innerHeight;
	if (is.ie) this.H = document.body.clientHeight;
}
 
var pg = null;
 
function SuppressBackspace(e){ 
	 if (is.ns) {
		thisKey = e.keyCode;
	}
	else {
		thisKey = window.event.keyCode;
	}
 
	var Suppress = false;
 
	if (thisKey == 8) {
		Suppress = true;
	}
 
	if (Suppress == true){
		if (is.ie){
			window.event.returnValue = false;	
			window.event.cancelBubble = true;
		}
		else{
			e.preventDefault();
		}
	}
}
 
var NavLightColor = '#d2f0ff';
var NavShadeColor = '#00a3f0';
var NavBarColor = '#005177';
var FuncLightColor = '#b7e8ff';
var FuncShadeColor = '#0080c0';
var ExBGColor = '#009fec';
 
function NavBtnOver(Btn){
	Btn.style.padding = '1px 3px 3px 1px';
	Btn.style.borderLeftColor = NavLightColor;
	Btn.style.borderTopColor = NavLightColor;
	Btn.style.borderRightColor = NavShadeColor;
	Btn.style.borderBottomColor = NavShadeColor;
}
 
function NavBtnOut(Btn){
	Btn.style.borderColor = NavBarColor;
	Btn.style.padding = '2px 2px 2px 2px';
}
 
function NavBtnDown(Btn){
	Btn.style.borderLeftColor = NavShadeColor;
	Btn.style.borderTopColor = NavShadeColor;
	Btn.style.borderRightColor = NavLightColor;
	Btn.style.borderBottomColor = NavLightColor;
	Btn.style.padding = '3px 1px 1px 3px';
}
 
function FuncBtnOver(Btn){
	Btn.style.padding = '2px 7px 4px 5px';
	Btn.style.borderLeftColor = FuncLightColor;
	Btn.style.borderTopColor = FuncLightColor;
	Btn.style.borderRightColor = FuncShadeColor;
	Btn.style.borderBottomColor = FuncShadeColor;
}
 
function FuncBtnOut(Btn){
	Btn.style.borderColor = '#009fec';
	Btn.style.padding = '3px 6px 3px 6px';
}
 
function FuncBtnDown(Btn){
	Btn.style.borderLeftColor = FuncShadeColor;
	Btn.style.borderTopColor = FuncShadeColor;
 
 
	Btn.style.borderRightColor = FuncLightColor;
	Btn.style.borderBottomColor = FuncLightColor;
	Btn.style.padding = '4px 5px 2px 7px';
}
 
// VARIABLES
var PosFeedback = 'Pairs found so far:';
var YourScoreIs = 'Punktestand:';
var ExerciseTitle = 'Find the matching pairs';
var ExerciseSubtitle = '';
var Instructions = 'Click on two cards at a time- If they do not match, the cards are turned over. Then try again. Good luck!';
 
var topZ = 100;
 
var HPNStartTime = (new Date()).getTime();
var Finished = false;
var SubmissionTimeout = 30000;
var Score = 0;
var ShowCards = false;	// matching memory
 
// OUTPUT GOBBETS
var Exercise = '';
 
function StartUp(){
//IE bug avoidance -- remove bottom navbar
	if (is.ie){
		if (document.getElementById('BottomNavBar') != null){
			document.getElementById('TheBody').removeChild(document.getElementById('BottomNavBar'));
		}
	}
 
	if (is.ie){
		document.attachEvent('onkeydown',SuppressBackspace);
		window.attachEvent('onkeydown',SuppressBackspace);
	}
	else if (is.ns){
		window.addEventListener('keypress',SuppressBackspace,false);
	}
 
 
// get the type of exercise
	for (var x=0; x<I.length; x++){
		if (I[x][2] == 1){
			ShowCards = true;
			break;
			}
		}
		
 
	PreloadImages('brother.gif','can.gif','check-bill.gif','different-vt.gif','music.gif');
 
		
// build and show the exercise
	BuildExercise();
	DisplayExercise(Exercise);
 
	if (ShowCards == true){
		for (x=0; x<M.length; x++){
			document.getElementById(x).innerHTML = M[x][0]; 
			}
		}
}
 
// EXERCISE BUILD ROUTINES
function BuildExercise(){	
 
// build the items array
	for (var x=0; x<I.length; x++){
		M[x] = new Array();
		M[x][0] = I[x][0];
		M[x][1] = new Array(x, 0);
		}
 
	for (var x=0; x<I.length; x++){
		M[I.length+x] = new Array();
		M[I.length+x][0] = I[x][1];
		M[I.length+x][1] = new Array(x, 0);
		}
	
	M = Shuffle(M);
// build the output		
	var Words = 0;
	var Output = '';
	var QuadratZahl = '';
 
	if (Math.sqrt(M.length) == Math.round(Math.sqrt(M.length))){QuadratZahl = true;}
	else{QuadratZahl = false;}
 
	Output += '<tr>';
	for (var y=0; y<M.length; y++){
		Output += '<td id="[MNum]" onmouseover="Highlight([MNum])" onmouseout="Unhighlight([MNum])" ';
		Output += 'onclick="CheckPair([MNum])" '; 
		Output += 'style="text-align:center;background-color:#42c1ff;height:100px;width:100px">';
		Output += '[Content]</td>';
		Words++;
		if (QuadratZahl==true){
			if (Words == Math.sqrt(M.length)){
				Output += '</tr><tr>';
				Words = 0;
				}
			}
		if (QuadratZahl==false){
			if (Words == (Math.round(Math.sqrt(M.length)))+1){
				Output += '</tr><tr>';
				Words = 0;
				}
			}
 
		Output = ReplaceStuff('[Content]', '<span style="font-size:medium; font-weight:bold; font-color:#0080c0"></span>', Output);
		Output = ReplaceStuff('[MNum]', y, Output);
		}
	Output += '</tr>';
	
	Exercise += Output;	
	Exercise = '<form name="MemoryGrid"><table border="0">' + Exercise + '</table></form>';
	if (('[ Solution ]'!='')&&('[ Solution ]'!=' ')){
		Exercise += '<button id="SolutionBtn" class="FunctionButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOver(this)" onclick="ShowSolution()">&nbsp;[ Solution ]&nbsp;</button>';
		}
 
}
 
function Highlight(id){
	if (M[id][1][1] == 0){
		document.getElementById(id).style.backgroundColor = '#8ad9ff';
		}
}
 
function Unhighlight(id){
	switch (M[id][1][1]) {
		case 0 : document.getElementById(id).style.backgroundColor = '#00ecec'; break;
		case 1 : document.getElementById(id).style.backgroundColor = '#009fec'; break;
		}
}
 
function ShowLogo(){
	var Face = '<span style="font-size:medium; font-weight:bold; font-color:#000000"></span>';
	if (ShowCards == false){
		for (var x=0; x<M.length; x++){
			if (M[x][1][1] == 0){
				if (document.getElementById(x) != null){
					document.getElementById(x).innerHTML = Face;
					}
				}
			}
		}
}
 
function ShowSolution(){
	var Output = '<table border="0">';
	
	for (var x=0; x<I.length; x++){
		Output += '<tr>';
		Output += '<td style="text-align:center;">' + I[x][0] + '</td>';
		Output += '<td style="text-align:center;">' + I[x][1] + '</td>';
		Output += '</tr>';
		}
		
	Output += '</table>';
		
	DisplayExercise(Output);
 
	Finished = true;
	setTimeout('Finish()', SubmissionTimeout);
	
 
}
 
var cardno = 0;
var Pairs = 0;
var WMatches = 0; 	// stores wrong matches
 
function CheckPair(id){
 
	document.getElementById(id).innerHTML = M[id][0]; 
 
	var Output = '';
 
	if(cardno==0){
		cardno++;
		clickarray[0][0]=M[id][1][0];
		clickarray[0][1]=id;
		return;
		}
 
	clickarray[1][0]=M[id][1][0];
	clickarray[1][1]=id;
	cardno=0;
 
	if (clickarray[0][1] == clickarray[1][1]){
		clickarray[0][0] = 0;
		clickarray[1][0] = 0;
		clickarray[0][1] = 0;
		clickarray[1][1] = 0;
		setTimeout('ShowLogo()', 1000);
		return;
		}
	
	if (clickarray[0][0]==clickarray[1][0]){
		clickarray[0][0] = 0;
		clickarray[1][0] = 0;
		if ((M[(clickarray[0][1])][1][1] == 0)||(M[(clickarray[1][1])][1][1] == 0)){
			Pairs++;
			M[(clickarray[0][1])][1][1] = 1;
			M[(clickarray[1][1])][1][1] = 1;
			}
 
		document.getElementById(clickarray[0][1]).style.backgroundColor='#7dd5ff';
		document.getElementById(clickarray[1][1]).style.backgroundColor='#7dd5ff';
		clickarray[0][1] = 0;
		clickarray[1][1] = 0;
								
		Output += PosFeedback + ' ' + Pairs;
		}
		else{
			if ((M[(clickarray[0][1])][1][1] == 1)||(M[(clickarray[1][1])][1][1] == 1)){}
			else{
				WMatches++;
				clickarray[0][0] = 0;
				clickarray[1][0] = 0;
						
				setTimeout('ShowLogo()', 1000); 
						
				clickarray[0][1] = 0;
				clickarray[1][1] = 0;
				
				Output += NegFeedback;
				Output += '<br />' + PosFeedback + ' ' + Pairs;
				}
			}	
 
	if (Output == ''){		
		Output += PosFeedback + ' ' + Pairs;
		}
	document.getElementById('FeedbackBox').innerHTML = Output;
	
	if (Pairs == I.length){
		if (document.getElementById('SolutionBtn') != null){
			document.getElementById('SolutionBtn').style.display = 'none';
			}
		Score = CalculateScore();
		WriteFeedback(Output + '<br />' + Score + ' seconds left');
		Finished = true;
		setTimeout('Finish()', SubmissionTimeout);
 
	}
}
	function CalculateScore(){
	var ThisScore = 0;
	var z = Pairs - WMatches;
	var s = Pairs + WMatches;
	if (z < 0){z = 0;}	
	ThisScore = Math.floor((z*100)/s);	
	return ThisScore;
}
 

 
 
I = new Array();
I[0] = new Array();
I[0][0] = 'Her shoes';
I[0][1] = 'HERS';
I[0][2] = 0;
I[1] = new Array();
I[1][0] = 'His hat';
I[1][1] = 'HIS';
I[1][2] = 0;
I[2] = new Array();
I[2][0] = 'Our book';
I[2][1] = 'OURS';
I[2][2] = 0;
I[3] = new Array();
I[3][0] = 'Their bags';
I[3][1] = 'THEIRS';
I[3][2] = 0;
I[4] = new Array();
I[4][0] = 'My friends';
I[4][1] = 'MINE';
I[4][2] = 0;
I[5] = new Array();
I[5][0] = 'Your pen';
I[5][1] = 'YOURS';
I[5][2] = 0;


 
M = new Array();
 
clickarray = new Array();
clickarray[0] = new Array(0,0);
clickarray[1] = new Array(0,0);	
 
 
// OUTPUT ROUTINES
 
function WriteFeedback(Feedback){
	var Output = Feedback + '<br /><br />';
	document.getElementById('FeedbackContent').innerHTML = Output;
	var FDiv = document.getElementById('FeedbackDiv');
//Calculate and set its left setting
	topZ++;
	FDiv.style.zIndex = topZ;
 
//Position the feedback div
	pg = new PageDim();
	FDiv.style.left = Math.floor(pg.W/3) + 'px';
	FDiv.style.width = Math.floor(pg.W/3) + 'px';
//Set the top again in case the window has been resized
	if (is.ns){
		FDiv.style.top = Math.floor(pg.H/3) + window.pageYOffset + 'px';
	}
	else{
		FDiv.style.top = Math.floor(pg.H/3) + document.body.scrollTop + 'px';
	}
 
//Special for IE bug -- hide all the form elements that will show through the popup
	if (is.ie){
		for (var i=0; i<document.all.length; i++){
			if (document.all[i].id.substring(0,3) == 'sel'){
				document.all[i].style.display = 'none';
			}
		}
	}
	FDiv.style.display = 'block';
	document.getElementById('FeedbackOKButton').focus();
 
 
	RefreshImages();
 
}
 
function HideFeedback(){
	document.getElementById('FeedbackContent').innerHTML = '';
	document.getElementById('FeedbackDiv').style.display='none';
 
//Special for IE bug -- redisplay all the form elements hidden in WriteFeedback()
	if (is.ie){
		for (var i=0; i<document.all.length; i++){
			if (document.all[i].id.substring(0,3) == 'sel'){
 
				document.all[i].style.display = 'inline';
			}
		}
	}
	FocusAButton();
	if (Finished == true){
		Finish();
	}
}
 
function FocusAButton(){
	if (document.getElementById('SolutionBtn') != null){
		if (document.getElementById('SolutionBtn').style.display != 'none'){
			document.getElementById('SolutionBtn').focus();
			}
	}
}
 
function WriteToInstructions(Feedback) {
	Feedback = '<span class="FeedbackText">' + Feedback + '</span>';
	document.getElementById('InstructionsDiv').innerHTML = Feedback;
 
	RefreshImages();
 
}
 
 
 
Imgs = new Array();
 
function PreloadImages(){
	var a = PreloadImages.arguments;
	for (var i=0; i<a.length; i++){
		Imgs[i] = new Image();
		Imgs[i].src = a[i];
	}
}
 
function RefreshImages(){
	for (var i=0; i<document.images.length; i++){
		if (document.images[i].name.substring(0,6) != 'NavBar'){
			document.images[i].src = document.images[i].src;
		}
	}
}
 
 
function DisplayExercise(StuffToDisplay){
	document.getElementById('MatchDiv').innerHTML = StuffToDisplay;
 
	RefreshImages();
 
}
 
 
// UTILITY ROUTINES
function GoBack(){
	var BackSkip = history.length - PreviousPage;
	if (BackSkip > 0){
		history.go((BackSkip+1)*-1);
	}
	else{
		parent.history.back();
	}
}
 
function Shuffle(InArray){
	Temp = new Array();
	var Len = InArray.length;
 
	var j = Len;
 
	for (var i=0; i<Len; i++){
		Temp[i] = InArray[i];
	}
 
	for (i=0; i<Len; i++){
		Num = Math.floor(j  *  Math.random());
		InArray[i] = Temp[Num];
 
		for (var k=Num; k < j; k++) {
			Temp[k] = Temp[k+1];
		}
		j--;
	}
	return InArray;
}
 
function ReplaceStuff(Token, Replacement, InString){
	var i = InString.indexOf(Token);
	var FirstBit = '';
	var LastBit = '';
	while (i>-1){
		FirstBit = InString.substring(0, i);
		LastBit = InString.substring(i + Token.length, InString.length);	
		InString = FirstBit + Replacement + LastBit;
		i = InString.indexOf(Token);
	}
	return InString;
}
 
function EscapeDoubleQuotes(InString){
	var Result = '';
	for (var i=0; i<InString.length; i++){
		if (InString.charAt(i) == '"'){
			Result += '&quot;';
		}
		else{
			Result += InString.charAt(i);
		}
	}
	return Result;
}
 
// CGI SUBMISSION ROUTINES
 
 
// HOTPOT.NET FUNCTIONALITY
function Finish(){
//If there's a form, fill it out and submit it
	if (document.store != null){
		Frm = document.store;
		Frm.starttime.value = HPNStartTime;
		Frm.endtime.value = (new Date()).getTime();
		Frm.mark.value = Score;
		Frm.submit();
	}
}
 
//-->
 
//]]>
 
</script>
 
 
</head>
<!-- <body>Fool those dumb ad-inserting ISPs</body> -->
 
<body onload="StartUp()" id="TheBody">
 
<!-- BeginTopNavButtons --><CENTER><FORM NAME="NavigationButtons">
<INPUT TYPE="button" VALUE="Home" onClick="self.location='http://lewebpedagogique.com/davies57'"><INPUT TYPE="button" VALUE="Play again" onClick="self.location='http://lewebpedagogique.com/davies57/files/2011/09/possadj3.html'"><INPUT TYPE="button" VALUE="Back" onClick="history.back()"></FORM></CENTER>


 
 
 
<!-- EndTopNavButtons -->
 
<div class="Titles">
	<span class="ExerciseTitle">Find the matching pairs</span><br />
	<span class="ExerciseSubtitle"></span><br />
</div>
 
 
 
<div id="InstructionsDiv" class="StdDiv">
	<p id="Instructions"><center>Click on two cards at a time - If they do not match, they are turned over. Then try again! Good luck!</center></p>	
</div>
 
<div id="DivFeedbackBox" class="StdDiv">
	<p id="FeedbackBox" style="text-align:center;">&nbsp;&nbsp;&nbsp;&nbsp;</p>
</div>
 
<div id="MainDiv" class="StdDiv">
 
<div id="MatchDiv" align="center"></div>
 
</div>
 
 
<div class="Feedback" id="FeedbackDiv">
<div class="FeedbackText" id="FeedbackContent"></div>
<button id="FeedbackOKButton" class="FunctionButton" onfocus="FuncBtnOver(this)" onblur="FuncBtnOut(this)" onmouseover="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOver(this)" onclick="HideFeedback(); return false;">&nbsp;OK&nbsp;</button>
</div>
 
<!-- BeginBottomNavButtons -->
 
 
 
<!-- EndBottomNavButtons -->
 
<!-- BeginSubmissionForm -->
 
<!-- EndSubmissionForm -->
 
</body>
 
</html>

