La Biologie Humaine

Comment créer un jeu des paires

  • Copier le programme en javascript ci-dessous, puis le coller dans le code source de votre page HTML, entre les balises <head> et </head>.

    Remplacer les textes des messages en rouge par des messages de votre choix, et les codes de couleurs en violet par les couleurs de votre choix.

    <script language="JavaScript">
    var nbtest=0;
    var nbpaire=0;
    function compare()
    {
    var t="";
    var c=0;
    var r=document.all.item("check");
    var s= new Array()
    message.value="";
    nbtest++;
    for (i=0; i<r.length; i++)
    {
    if(r[i].checked)
    {
    t+= r[i].value;
    s[c]=i;
    c++;
    r[i].checked=false;
    }
    }
    if(c!=2)
    {
    message.value="Il faut cocher 2 cases !";
    message.style.color="#B3B3C7";
    return
    }
    var x=(t % 11);
    if (x==0)
    {
    r[s[0]].parentElement.style.backgroundColor="#AACCAA";
    r[s[0]].style.display = "none";
    r[s[1]].parentElement.style.backgroundColor="#B3B3C7";
    r[s[1]].style.display = "none";
    message.value="~~~~~~ BRAVO ! ~~~~~~";
    message.style.color="#FF0000";
    nbpaire++;
    }
    else
    {
    message.value="======= erreur ! =======";
    message.style.color="#AACCAA";
    }
    if (nbpaire > 1) pluriel1="s";
    else pluriel1="";
    if (nbtest > 1) pluriel2="s";
    else pluriel2="";
    score.value= nbpaire + " paire" + pluriel1 + " trouvée" + pluriel1 + " en " + nbtest + " essai" + pluriel2;
    if (nbpaire==r.length/2)
    {
    tester.style.display="none";
    debut.style.display="" ;
    }
    }
    </script>

 

 

 

 

r est la collection des cases à cocher

Le programme compare les 2 cases cochées par l'utilisateur.

Si elles ont la même valeur, le score est incrémenté, un message "bravo" est affiché, les cellules contenant les expressions à comparer changent de couleur et les cases à cocher disparaissent.

Dans le cas contraire, c'est le message "erreur" qui est affiché.
  • Dans le corps du document, créer un tableau dont chaque cellule contient un des éléments à comparer (par exemple : SIDA), ainsi qu'une case à cocher.
    Puis un 2ème tableau dont chaque cellule contient un élément à mettre en relation avec un de ceux du 1er tableau (pour l'exemple présent : VIH), ainsi qu'une case à cocher.
    Dans le code source, entre les balises <body> et </body>, ces cellules et leurs cases à cocher sont représentées par le code suivant :

    <table>
    <td>
    SIDA
    <input id="check" type="checkbox" value="x">
    </td>
    </table>

    <table>
    <td>
    VIH
    <input id="check" type="checkbox" value="x">
    </td>
    </table>

    Remplacer les expressions en rouge par vos propres éléments à comparer 2 à 2. Les cases à cocher liées à ces 2 éléments auront des valeurs (value="x") identiques

 Les cases à cocher qui se correspondent ont la même valeur "x". On donnera à x les valeurs 0, 1, 2, etc...
  • Toujours dans le corps du document, insérer :

    - un bouton qui permettra de tester les éléments mis en relation :

<input type="button" id="tester" value = "tester" onClick="compare()">

- une zone de texte où seront affichés les messages correspondant à certaines actions de l'utilisateur

<input name="message">

- une zone de texte où sera affichée l'évolution du score :

<input name="score">

- et enfin, un bouton qui permettra de recommencer le jeu :

<input type="button" id="debut" value="recommencer" style="display: none;" onclick="javascript: location.reload()">

Un clic sur le bouton "tester" appelle la fonction "compare" de l'entête

Le bouton "recommencer" n'est visible qu'à la fin du jeu, et permet de réactualiser la page pour commencer un nouveau jeu.

 

Page précédente