CLASSEMENT

Exemple  avec 10 éléments à classer :

Classez les éléments suivants selon que ce sont des causes de la croissance ou des faits.
 
CAUSES DE LA CROISSANCE
FAITS : les éléments de la croissance
Déplacez les textes ci-dessous dans la bonne colonne  en cliquant sur le bouton correspondant.



 

Page vide à compléter

Passage d'une image d'une colonne à l'autre
Vous avez besoin de 10 images : i0.gif, i1.gif, i2.gif... i9.gif sur lesquelles sont écrites les textes à déplacer, plus une "vide.gif" et une autre "exercice suivant" si vous voulez envoyer vers une autre page à la fin de l'exercice (vous pouvez les charger avec cette page). Un fond transparent est préférable et la dimension prévue (à moins de changer tous les height et width) est de 120 sur 30 pixels.
a) dans la partie body :
Un tableau de 4 colonnes est créé.
Dans la deuxième ligne,
- première colonne : <img SRC="vide.gif" NAME="i02" height=30 width=120> place une image vide et lui donne le nom de i02, ce qui permettra de changer l'image.
- idem dans la deuxième colonne pour <img SRC="vide.gif" NAME="i03" height=30 width=120>
Les passages en rouge sont à changer.
 
// début du tableau, avec la première ligne
<table BORDER COLS=4 WIDTH="100%" >
<tr>
<td BGCOLOR="#00CC00">
<center><b>CAUSES DE LA CROISSANCE</b></center>
</td>

<td BGCOLOR="#FF0000">
<center><b>FAITS : les &eacute;l&eacute;ments de la croissance</b></center>
</td>

<td BGCOLOR="#CCCCCC"><font color="#000000">D&eacute;placez les textes
ci-dessous dans la bonne colonne&nbsp;</font></td>

<td BGCOLOR="#CCCCCC"><font color="#000000">en cliquant sur le bouton correspondant.</font></td>
</tr>

// deuxième ligne du tableau : passage à répéter 10 fois en changeant tous les "0" par 1,2 ...9
<tr>
<td BGCOLOR="#00CC00">
<center><img SRC="vide.gif" NAME="i02" height=30 width=120></center>
</td>

<td BGCOLOR="#FF0000">
<center><img SRC="vide.gif" NAME="i03" height=30 width=120></center>
</td>

<td BGCOLOR="#CCCCCC"><img SRC="i0.gif" NAME="i01" height=30 width=120></td>

<td BGCOLOR="#CCCCCC"><input type="button"  value="<==>" onclick="javascript:clicl0()"></td>
</tr>
// fin de la partie à répéter

// fin du tableau
</table>

dans la partie head :
La fonction clicl0( ) correspond au clic sur le bouton de la première ligne, appelée 0 (les tableaux commencent par le numéro 0). Pour les 10 lignes, 10 fonctions clic doivent être écrites.
Au départ, l'image "vide.gif" occupe les deux premières colonnes, pour la première ligne, les emplacements sont
<script language="javascript" >
clic=new Array(10);
for (i=0; i<10; i++)
 clic[i]=0;

rep=new Array(10);
for (i=0; i<10; i++)
rep[i]=0;

// la partie ci-dessous est à copier pour chaque ligne, la première ligne a le numéro 0
function clicl0()
{ if (clic[0] > 2)
   clic[0] = 1;

  if (clic[0]==0)
   { 
    document.i02.src = "i0.gif";
    rep[0]=1;
    }
   else if (clic[0]==1)
   {document.i02.src = "vide.gif";
   document.i03.src = "i0.gif";
   rep[0]=2;
   }
    else if (clic[0]==2)
    {document.i03.src = "vide.gif";
     document.i02.src = "i0.gif";
     rep[0]=1;
    }
 clic[0] ++;
}
// fin du passage à copier pour chaque ligne
<head>


sommaire