Tuesday 27 June 2017
WORD AND PICTURE GAME
--------------------------------------------------------------------------------------------------------------
Associate Word And Corresponding Image Game
https://www.google.co.uk/search?q=associate+word+and+corresponding+image+game&rlz=1C1_____enGB747GB747&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiL6-fL8d3UAhViL8AKHZPOCxEQ_AUICigB&biw=1164&bih=631
https://au.pinterest.com/pin/38562140542641523/
http://wow.boomlearning.com/deck/synonyms-game-visuals--word-included-grammar-activities-8FACLq4AXyPdYDne5
BUTTON VALUE SWAP GAME
https://fbgadgets.blogspot.com/2018/12/input-button-value-swap.html
--------------------------------------------------------------------------------------------------------------
USEFUL IMAGES
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
CODE:
--------------------------------------------------------------------------------------------------------------
<html>
<!--
http://jeux.lulu.pagesperso-orange.fr/html/memoire/mFruits/assFru.htm -->
<HEAD>
<TITLE>Quelques WordsArray</TITLE>
<STYLE TYPE="text/css">
#Buttons {
font-size: 12pt;
color: white;
font-family: sans-serif;
background: #006600;
border-top-width: 0;
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
width: 120px;
}
#bases {
font-size: 12pt;
font-family: sans-serif;
color: #006600;
background: white;
border-top-width: 0;
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
width: 120px;
}
#Errors {
font-size: 10pt;
font-weight: bold;
color: #FF6633;
background: #006600;
border-top-width: 0;
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
}
</style>
</HEAD>
<body onload="depart();">
<script>
var WordsArray=new Array ("Cherries","Apples","Pears","Kiwis","Bananas","Oranges","Apricots","Strawberries","Plums");
var TotalArray= new Array(10);
var ButtonArray= new Array(10);
var ButtonArray2= new Array(10);
//charger "gagné"
var WinArray = new Array(5);
for (i=0; i<=4; i++) {
WinArray[i]= new Image;
WinArray[i].src="http://jeux.lulu.pagesperso-orange.fr/img/gagne"+i+".gif";
}
var EmptyArray=new Array("","","");
//Test=0 joueur a la main; =1 non
var Test=1;
var Time=0;
function depart() {
Test=1;
ForMakes=9;
document.Forms.Message.value="";
for (i=1; i<=9; i++) {
document.images["Make"+i].src="https://1.bp.blogspot.com/-NO0oP47ZVlI/WVI_G4zbp9I/AAAAAAABc5M/C_Xj2Rrb77QE5bRCHCs0CVlUujPRrytbgCLcBGAs/s1600/fond.gif";
document.Forms.elements["Button"+i].value=" ";
document.Forms.elements["base"+i].value=" ";
}
//effacer tableau gagné
for (i=0; i<=4; i++) {document.images["gagne"+i].src="https://1.bp.blogspot.com/-NO0oP47ZVlI/WVI_G4zbp9I/AAAAAAABc5M/C_Xj2Rrb77QE5bRCHCs0CVlUujPRrytbgCLcBGAs/s1600/fond.gif";}
numJeu=1;
melange();
nbErrors=0;
document.Forms.elements["Errors"].value="Number Of Errors
: 0";
// =0 rien de sélectionné; !=0 numéro base
sélectionné;
EmptyArray=0;
compteur=0;
Test=0;
}
function melange() {
for (i=1; i<=9; i++) {
TotalArray[i]=i;
ButtonArray[i]=i;
ButtonArray2[i]=0;
}
for (i=1; i<=ForMakes; i++) {
Var2 = Math.floor(Math.random()*9)+1;
Var1=Var2;
while (Var1==Var2) {Var1 = Math.floor(Math.random()*9)+1;}
y=TotalArray[Var2];
TotalArray[Var2]=TotalArray[Var1];
TotalArray[Var1]=y;
}
for (i=1; i<=ForMakes; i++) {
Var2 = Math.floor(Math.random()*9)+1;
Var1=Var2;
while (Var1==Var2) {Var1 = Math.floor(Math.random()*9)+1;}
y=ButtonArray[Var2];
ButtonArray[Var2]=ButtonArray[Var1];
ButtonArray[Var1]=y;
}
for (i=1; i<=ForMakes; i++) {
document.images["Make"+i].src="http://jeux.lulu.pagesperso-orange.fr/img/memoirei/mFruits/image"+TotalArray[i]+".gif";
document.Forms.elements["Button"+i].value="
";
document.Forms.elements["base"+i].id="bases";
document.Forms.elements["base"+i].value=WordsArray[ButtonArray[i]-1];
}
}
function Click(x) {
if (Test==0 && document.Forms.elements["base"+x].value!="
") {
EmptyArray=x;
for (i=1; i<=ForMakes; i++) {
if (document.Forms.elements["base"+i].value!="
") {
document.Forms.elements["base"+i].id="bases";
document.Forms.elements["base"+i].value=WordsArray[ButtonArray[i]-1];
}
}
document.Forms.elements["base"+x].id="Buttons";
}
}
function clique(x) {
if (Test==0) {
Test=1;
if (EmptyArray==0) {
if ( document.Forms.elements["Button"+x].value!="
" ) {
for (i=1; i<=ForMakes; i++) {
if (document.Forms.elements["base"+i].value=="
") {
document.Forms.elements["base"+i].id="bases";
ButtonArray[i]=ButtonArray2[x];
document.Forms.elements["base"+i].value="
"+WordsArray[ButtonArray[i]-1]+"
";
document.Forms.elements["Button"+x].value="
";
ButtonArray2[x]=0;
break;
}
}
}
Test=0;
} else {
if ( document.Forms.elements["Button"+x].value=="
" ) {
document.Forms.elements["base"+EmptyArray].value="
";
document.Forms.elements["Button"+x].value=WordsArray[ButtonArray[EmptyArray]-1];
ButtonArray2[x]=ButtonArray[EmptyArray];
ButtonArray[EmptyArray]=0;
//fin ?
n=0;
for (i=1; i<=ForMakes; i++) {
if (ButtonArray2[i]==0) {
n=1;
break;
}
}
if (n==0) {
Test=1;
//vérifier si bon
nn=0;
for (i=1; i<=ForMakes; i++) {
if (ButtonArray2[i]!=TotalArray[i])
{
compteur+=1;
nn=1;
document.Forms.elements["Button"+i].value="
";
document.Forms.elements["Errors"].value="Number Of Errors
: "+compteur;
remettreG(i);
}
}
if (nn==0) {
gagnperd("gagne");
Time+=1;
document.Forms.Message.value=Time+"
fois";
} else {
Test=0;
}
} else {
Test=0;
}
} else {
n=ButtonArray2[x];
document.Forms.elements["Button"+x].value=WordsArray[ButtonArray[EmptyArray]-1];
ButtonArray2[x]=ButtonArray[EmptyArray];
ButtonArray[EmptyArray]=n;
document.Forms.elements["base"+EmptyArray].id="bases";
document.Forms.elements["base"+EmptyArray].value=WordsArray[ButtonArray[EmptyArray]-1];
Test=0;
}
EmptyArray=0;
}
}
}
function remettreG(x) {
for (j=1; j<=ForMakes; j++) {
if (document.Forms.elements["base"+j].value=="
") {
document.Forms.elements["base"+j].id="bases";
ButtonArray[j]=ButtonArray2[x];
document.Forms.elements["base"+j].value=WordsArray[ButtonArray[j]-1];
document.Forms.elements["Button"+x].value="
";
ButtonArray2[x]=0;
break;
}
}
}
function gagnperd(x) {
for (i=0; i<=4; i++) {
document.images["gagne"+i].src=WinArray[i].src;
}
}
</script>
<p></p><form action="" method="POST" name="Forms">
<center><a name="jeu"></a><table border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td>
<center><table border="1" cellspacing="0" cellpadding="4" bordercolor="#669966">
<tbody><tr>
<td>
<center><input type="button" name="base1" value="Apricots" id="Buttons" onmousedown="Click(1);"></center>
</td>
</tr>
<tr>
<td>
<center><input type="button" name="base2" value="Oranges" id="bases" onmousedown="Click(2);"></center>
</td>
</tr>
<tr>
<td>
<center><input type="button" name="base3" value="Apples" id="bases" onmousedown="Click(3);"></center>
</td>
</tr>
<tr>
<td>
<center><input type="button" name="base4" value="Cherries" id="bases" onmousedown="Click(4);"></center>
</td>
</tr>
<tr>
<td>
<center><input type="button" name="base5" value="Strawberries" id="bases" onmousedown="Click(5);"></center>
</td>
</tr>
<tr>
<td>
<center><input type="button" name="base6" value="Pears" id="bases" onmousedown="Click(6);"></center>
</td>
</tr>
<tr>
<td>
<center><input type="button" name="base7" value="Kiwis" id="bases" onmousedown="Click(7);"></center>
</td>
</tr>
<tr>
<td>
<center><input type="button" name="base8" value="Bananas" id="bases" onmousedown="Click(8);"></center>
</td>
</tr>
<tr>
<td>
<center><input type="button" name="base9" value="Plums" id="bases" onmousedown="Click(9);"></center>
</td>
</tr>
</tbody></table>
</center>
</td>
<td width="80">
<p></p>
</td>
<td>
<center><table border="1" cellspacing="0" cellpadding="5" bordercolor="#669966">
<tbody><tr>
<td>
<center><a href="#" onmousedown="clique(1);" onmouseover="self.status=''; return true">
<img src="https://1.bp.blogspot.com/-IN2i__8YujY/WVI_ILWbKNI/AAAAAAABc5Y/O-dQwgTii0kvy7Fat_pmpRUy5ZlL7RlJwCLcBGAs/s1600/image5.gif" width="70" height="70" x-claris-useimagewidth="" x-claris-useimageheight="" border="0" align="bottom" name="Make1"></a><br>
<input type="button" name="Button1" value=" " id="Buttons" onmousedown="clique(1);"></center>
</td>
<td>
<center><a href="#" onmousedown="clique(2);" onmouseover="self.status=''; return true">
<img src="https://3.bp.blogspot.com/-VSb3mF_WX_A/WVI_JWUkpnI/AAAAAAABc5s/9sZzYdSVqLgtU2zF9SsedCGWKM8229W9ACLcBGAs/s1600/image9.gif" width="70" height="70" x-claris-useimagewidth="" x-claris-useimageheight="" border="0" align="bottom" name="Make2"></a><br>
<input type="button" name="Button2" value=" " id="Buttons" onmousedown="clique(2);"></center>
</td>
<td>
<center><a href="#" onmousedown="clique(3);" onmouseover="self.status=''; return true">
<img src="https://1.bp.blogspot.com/-yfbgGmpIbQk/WVI_G2VO6hI/AAAAAAABc5I/xl5QOL5ucts_P3nDcQDvmt4OeUlVMXKyACLcBGAs/s1600/image1.gif" width="70" height="70" x-claris-useimagewidth="" x-claris-useimageheight="" border="0" align="bottom" name="Make3"></a><br>
<input type="button" name="Button3" value=" " id="Buttons" onmousedown="clique(3);"></center>
</td>
</tr>
<tr>
<td>
<center><a href="#" onmousedown="clique(4);" onmouseover="self.status=''; return true">
<img src="https://4.bp.blogspot.com/-_tOsrCxbPpc/WVI_Hx8i9tI/AAAAAAABc5c/GHg_QBACG00qG_rjej5EOewZJ1Gj2E8sACLcBGAs/s1600/image4.gif" width="70" height="70" x-claris-useimagewidth="" x-claris-useimageheight="" border="0" align="bottom" name="Make4"></a><br>
<input type="button" name="Button4" value=" " id="Buttons" onmousedown="clique(4);"></center>
</td>
<td>
<center><a href="#" onmousedown="clique(5);" onmouseover="self.status=''; return true">
<img src="https://4.bp.blogspot.com/-rpobIsOydoo/WVI_G8Bs4fI/AAAAAAABc5Q/AQU0A3HZhFEPkTcw50KT3JstbnyGIkSTwCLcBGAs/s1600/image2.gif" width="70" height="70" x-claris-useimagewidth="" x-claris-useimageheight="" border="0" align="bottom" name="Make5"></a><br>
<input type="button" name="Button5" value=" " id="Buttons" onmousedown="clique(5);"></center>
</td>
<td>
<center><a href="#" onmousedown="clique(6);" onmouseover="self.status=''; return true">
<img src="https://1.bp.blogspot.com/-5ZHJRzZjm5g/WVI_ITV73lI/AAAAAAABc5g/oWmQGkCmwlcma19mSlM_LI1ebqnwnd1OACLcBGAs/s1600/image6.gif" width="70" height="70" x-claris-useimagewidth="" x-claris-useimageheight="" border="0" align="bottom" name="Make6"></a><br>
<input type="button" name="Button6" value=" " id="Buttons" onmousedown="clique(6);"></center>
</td>
</tr>
<tr>
<td>
<center><a href="#" onmousedown="clique(7);" onmouseover="self.status=''; return true">
<img src="https://3.bp.blogspot.com/-_5RzFVdN6II/WVI_JAba8tI/AAAAAAABc5o/5dJaK8WMQOEj7w3xHMdmK1KcTp6gWcGagCLcBGAs/s1600/image8.gif" width="70" height="70" x-claris-useimagewidth="" x-claris-useimageheight="" border="0" align="bottom" name="Make7"></a><br>
<input type="button" name="Button7" value=" " id="Buttons" onmousedown="clique(7);"></center>
</td>
<td>
<center><a href="#" onmousedown="clique(8);" onmouseover="self.status=''; return true">
<img src="https://1.bp.blogspot.com/-RJBjWVTXE64/WVI_IwXJzkI/AAAAAAABc5k/NFG_fdFGZHIJOYSQcO-Kzc3QGWfcG4bawCLcBGAs/s1600/image7.gif" width="70" height="70" x-claris-useimagewidth="" x-claris-useimageheight="" border="0" align="bottom" name="Make8"></a><br>
<input type="button" name="Button8" value=" " id="Buttons" onmousedown="clique(8);"></center>
</td>
<td>
<center><a href="#" onmousedown="clique(9);" onmouseover="self.status=''; return true">
<img src="https://1.bp.blogspot.com/-5ID-KMzd7NA/WVI_Hp9KP8I/AAAAAAABc5U/PHtJY22Um3I7J4sYDSGrP6fajzcRj78OACLcBGAs/s1600/image3.gif" width="70" height="70" x-claris-useimagewidth="" x-claris-useimageheight="" border="0" align="bottom" name="Make9"></a><br>
<input type="button" name="Button9" value=" " id="Buttons" onmousedown="clique(9);"></center>
</td>
</tr>
</tbody></table>
</center>
</td>
</tr>
</tbody></table>
<br>
<input type="button" name="Errors" value="Number Of Errors : 0" id="Errors"><br>
<hr>
<table border="0" cellspacing="0" cellpadding="2">
<tbody><tr>
<td width="200">
<center>
<img src="https://1.bp.blogspot.com/-NO0oP47ZVlI/WVI_G4zbp9I/AAAAAAABc5M/C_Xj2Rrb77QE5bRCHCs0CVlUujPRrytbgCLcBGAs/s1600/fond.gif" width="30" height="30" x-claris-useimagewidth="" x-claris-useimageheight="" align="bottom" name="gagne0"><img src="https://1.bp.blogspot.com/-NO0oP47ZVlI/WVI_G4zbp9I/AAAAAAABc5M/C_Xj2Rrb77QE5bRCHCs0CVlUujPRrytbgCLcBGAs/s1600/fond.gif" width="30" height="30" x-claris-useimagewidth="" x-claris-useimageheight="" align="bottom" name="gagne1"><img src="https://1.bp.blogspot.com/-NO0oP47ZVlI/WVI_G4zbp9I/AAAAAAABc5M/C_Xj2Rrb77QE5bRCHCs0CVlUujPRrytbgCLcBGAs/s1600/fond.gif" width="30" height="30" align="bottom" name="gagne2"><img src="https://1.bp.blogspot.com/-NO0oP47ZVlI/WVI_G4zbp9I/AAAAAAABc5M/C_Xj2Rrb77QE5bRCHCs0CVlUujPRrytbgCLcBGAs/s1600/fond.gif" width="30" height="30" x-claris-useimagewidth="" x-claris-useimageheight="" align="bottom" name="gagne3"><img src="https://1.bp.blogspot.com/-NO0oP47ZVlI/WVI_G4zbp9I/AAAAAAABc5M/C_Xj2Rrb77QE5bRCHCs0CVlUujPRrytbgCLcBGAs/s1600/fond.gif" width="30" height="30" x-claris-useimagewidth="" x-claris-useimageheight="" align="bottom" name="gagne4"></center>
</td>
<td width="180">
<center><input type="button" name="Replay" value="Replay" onmousedown="depart(parseInt(ForMakes))"></center>
</td>
<td width="30">
<p></p>
</td>
<td rowspan="2" width="100">
<center><a href="#" onclick="sommair();return false"><font color="#FFFFFF"><b>SOMMAIRE</b></font></a><font color="#FFFFFF"><b><br>
</b></font><a href="#aide" onmouseover="self.status=''; return true"><font color="#FFFFFF">Aide</font></a></center>
</td>
<td rowspan="2">
<center><a href="#" onclick="luluRetour();return false">
<img src="https://4.bp.blogspot.com/-RC4Zw7vH3PM/WVI-8lHvnCI/AAAAAAABc4w/fyz4rS3D9Oww0nGZA6SCgb1fzq-A8qeXACLcBGAs/s1600/retour.gif" width="45" height="43" x-claris-useimagewidth="" x-claris-useimageheight="" border="0" align="bottom"></a></center>
</td>
</tr>
<tr>
<td width="200">
<center><input type="text" name="Message" value="" size="20"></center>
</td>
<td width="180">
<p></p>
</td>
<td valign="top" width="30">
<p></p>
</td>
</tr>
</tbody></table>
<hr>
</center>
<ul><li><b>The Object of the Game</b> <ul><li>Match the words with the correct images.</li></ul></li><li><b>How to Play the Game</b><ul><li style="color:Red; border-style:
solid;
border-color: #0000ff;">First, click on a word, then click on the image that you think matches
that word.</li><li>That word will then be listed under the image whether it is correct or
not.</li><li>When you have finished matching words with the images, all the wrong
matches will go back to the list and the number of errors will be shown.</li><li>If you have made some mistakes, try matching those words again.</li><li>When you have correctly matched all of the pairs, the game is over.</li></ul></li><li><b>How to Play the Game - More Details</b><ul><li>You may replace any word under an image, by clicking on a new word, then
clicking the image.</li><li>You may remove any word by clicking on the image above that word.</li></ul></li></ul>
</body>
</HTML>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment