Discussion :

[bahh66]

Bonjour,
ce message fait suite à ce post.

Maintenant que les images s'affichent, j'aimerais que mes élèves puissent jouer.
Je m'explique :
1- l'idéal serait de pouvoir tracer un "cercle" autour de 10 images qui sont apparues, si 10 images sont bien entourées c'est ok sinon, un message apparait pour leur dire qu'il y en a trop ou pas assez dans leur cercle. Bien évidemment cela pose des problèmes que je n'imagine même pas. J'ai trouvé un code permettant de dessiner (ici section application de dessin simple). A partir de là est-il possible de savoir quelles sont les images qui sont entourées?

2-Si la solution optimale pour mes élèves n'est pas faisable, je pensais faire "cliquer" les images par mes élèves, celles-ci changeant de couleur (ou avec un cadre ou autre...) quand ils pensent qu'il y en a 10, ils cliqueraient sur un bouton validant ou non la quantité d'images sélectionnées. Cette solution est-elle envisageable?

Merci pour vos réponses.

[SpaceFrog]

Tracer un cercle autour est relativement complexe car il faudra pouvoir déterminer si le cercle dessiné contient bien l'image, ce qui n'est pas une mince affaire.

Il sera beaucoup plus simple d'attribuer une bordure au click sur l'image.
https://jsfiddle.net/pkcghw3r/1/

avec un peu de style pour rendre limage ronde ...

[bahh66]

C'est bien ce qui me semblait, la solution 1 me paraissait infaisable.

Pour la solution 2, j'ai essayé de coder la vérification de la dizaine à partir de ton code, mais je me heurte à un problème de compréhension.

J'ai mis un button en plus dans le html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
  <div id="layer4" style="">
    <button onclick="verifier()">Verification</button>
  </div>

et dans le script, j'ai essayé de définir cette fonction

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function verifier() {
if (imgClicked === 10) {
    alert("C'est bien une dizaine");}
else {alert("Tu n'as pas bien compté, cela ne fait pas 10.");
cleanCercle();}
 
}

Mon problème reste dans la définition de la variable imgClicked, je ne sais pas à partir de ton code comment récupérer l'info du nombre d'images cliquées.
De plus je me demande s'il n'y aura pas un problème si je clique plusieurs fois sur la même image.

Enfin, je pensais créer une fonction cleanCercle() qui enlèveraient les cercles si 10 images seulement n'ont pas été cliquées (mon objectif est de leur faire comprendre qu'une dizaine c'est exactement 10).
Mais je me dis aussi que cette fonction risque de supprimer les cercles de toutes les images même si l'on a réussi des dizaines au début.
Peut-être faut-il que je créé un css de couleur différente pour la première dizaine, la deuxième... jusqu'à la neuvième? et que la fonction ne supprime que ceux de la couleur en cours. Mais est ce faisable simplement?

[SpaceFrog]

https://jsfiddle.net/1khes5pn/1/

Il suffit de declarer la variable nbrhearts en global pour la comparer dans la fonction de verification

au click sur l'image on ajoute la classe picClicked

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
this.classList.add("picClicked");
nbrverif = document.querySelectorAll('.picClicked').length;

et on a le nombre d'images cliquées ...
En fait je me sers de la class picClicked comme d'un flag

Ne pas oubliéer de remettre les compterus à zero dans effacer ...

[bahh66]

J'ai essayé de modifier pour que l'élève puisse vérifier de lui même s'il a fait une dizaine et que les cercles soient supprimés si ce n'est pas le cas.

https://codepen.io/cyril-gomez/pen/KKeYMmd

Mais cela ne fonctionne pas. Je pensais qu'en créant une fonction je pourrais remettre le css de l'image à zéro via la ligne

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if (imgClicked != 10) {
    picClicked.style.border="";
  }

J'ai aussi essayé de remettre à zéro le compteur du nombre d'images cliquées mais du coup je n'arrive pas à voir si cela a fonctionné.

[ProgElecT]

Salut

Un petit HTML pour te faire voir le principe de comptage et changement de class.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="fr"> <!-- ClickImage.html -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Clique sur images</title>
		<style>
                        /* ************************************ Commentaires ********************************************** */
                        .yesselect{
                                border: 2px solid blue;
                                border-radius:50%;
                        }
                        .notselect{
                                border: 0px solid blue;
                        }
                </style>
		<script>//---------------------------------------------------------------------------------------
                        'use strict'; // force la déclaration des variables
                        // ************************************ Commentaires ****************************************
                        let NbrSelect=0;
                        //---------------------------------------------------------------------------------------------
                </script>
	</head>
	<body>
		Image sélectionnée(s):<span id="score">0</span>
		<br />
		<img  id="Img1" src="CLOUD.ICO" class="notselect" alt="une image" title="image N°1" onclick="Verif(this)">
		<img  id="Img2" src="Calibrage.ico" class="notselect" alt="une image" title="image N°2" onclick="Verif(this)">
		<img  id="Img3" src="SUN.ICO" class="notselect" alt="une image" title="image N°3" onclick="Verif(this)">
		<!-- ************************************** Commentaires *********************************************** -->
		<script>//---------------------------------------------------------------------------------------
                        function Verif(elem){
                                if (elem.className=="notselect"){
                                        elem.className="yesselect";
                                        NbrSelect++
                                        document.getElementById("score").textContent=NbrSelect;
                                }else{
                                        elem.className="notselect";
                                        NbrSelect--
                                        document.getElementById("score").textContent=NbrSelect;
                                }
                                if (NbrSelect==3){
                                        alert("Trés bien vous avez sélèctionné toutes les images");
                                        for (let i = 1, iMax  = 3; i <= iMax; i++) {
                                                document.getElementById("Img"+i).className="notselect";
                                        }
                                        NbrSelect=0;
                                        document.getElementById("score").textContent=NbrSelect;
                                }
                                
                        }
                        //---------------------------------------------------------------------------------------------
                </script>
	</body>
</html>

Bien sûr il te faut mettre tes propres liens source pour les images

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function verifier() {
  document.getElementById('success').innerHTML= (imgClicked == nbrhearts)? "Bravo!":"Cela ne fait pas "+ nbrhearts;  
  if (imgClicked != nbrhearts) {
    picsclicked = document.querySelectorAll('.picClicked');  // collection des images clickées 
    for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked
    }
  nbrverif=0;
}
}

[bahh66]

Dans le html de ProgElecT, la fonction Verif s'applique sur les différentes images du body, mais dans le code que l'on a déjà, on a une seule image qui est dupliquée dans le script. Est-ce possible d'utiliser la même fonction mais sur les ImageHeart contenus dans le script?

Dans ton code SpaceFrog, je ne comprends pas la ligne suivante :

const picclicked of picsclicked

.

En revanche, le code enlève tous les cercles une fois une mauvaise réponse donnée au préalable. Est-il possible de faire en sorte que si le click sur le bouton=10 images, ces cercles là ne s'enlèvent plus. Cela permettrait de faire une première sélection de 10 images, puis une seconde et ainsi de suite jusqu'au moment où l'on ne peut plus faire de groupes de 10 images.

Je sais pas si je suis assez clair.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
picsclicked = document.querySelectorAll('.picClicked');  // collection des images clickées 
    for (const picclicked of picsclicked) {

Il s'agit d'une boucle sur la collection des images ayant la classe picClicked que j'ai récupéré avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

picsclicked = document.querySelectorAll('.picClicked');

traduction :
pour chaque image de la collection d'images

Je n'ai pas compris la fonctionnalité des de dizaines ...

Tu veux dire que tu veux faire des paliers de sélection par dizaine, une fois une dizaine sélectionnée elle reste entourée et seuls les 1 à 9 images suivantes restent entourées ?

Si c'est le cas il faudrait créer un array des selection (avec un push kors du click) et baser la fonction effacer dessus, l'effacement conserverait les x premières dizaine de l'array.

[bahh66]

En fait un exemple du jeu tel que j'aimerais qu'il se déroule.

Le tirage donne 52 images, l'élève voit les images mais pas le nombre. L'objectif est qu'il trouve qu'il y a 52 images.

L'élève doit donc entourer 10 images pour créer une dizaine, puis une autre... jusqu'à en obtenir 5 complètes et 2 images non entourées.

Ca peut donner ça du coup.

- Il clique sur 9 images et verifie la dizaine -> elle est incomplète donc les cercles s'effacent.
- Il clique sur 10 images, la dizaine est bonne donc les cercles restent.
- Il clique sur 11 autres images (sans cercle), la dizaine n'est pas bonne donc les cercles de ces 11 images s'effacent mais les premiers (ceux de la première dizaine) restent bien visibles.
- Ainsi de suite.

Donc en effet, il me faut des sortes de palier de dizaines (10, 20, 30, 40...). Dans l'idéal, les cercles de chaque dizaine sont de couleurs différentes (mais peut-être faudra-t-il que je m'y penche plus tard).

Donc comme tu me le proposes, il faut j'imagine que je créé un array comme celui-ci :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function createTable() {
  Table = document.createElement('table');
 
  for (i = 0; i < 10; i++) {
    line = document.createElement('tr');
    for (j = 0; j < 10; j++) {
      cell = document.createElement('td');
      cell.id = "cell" + i + "_" + j;
      line.appendChild(cell);
    }
    Table.appendChild(line)
  }
  document.body.appendChild(Table);
}
createTable();

dans lequel, je stocke mes dizaines qui sont validées pour eviter que leurs cercles ne disparaissent?

[NoSmoking]

Bonjour,

Ca peut donner ça du coup.
...

cela me paraît un peu compliqué pour des « petits bouts de 6 ans » !

Donc comme tu me le proposes, il faut j'imagine que je créé un array comme celui-ci :

j'ai le sentiment que tu confonds les array JavaScript avec les <table> HTML qui n'ont pas la même utilité.

[bahh66]

cela me paraît un peu compliqué pour des « petits bouts de 6 ans » !

Ah Ah, pas du tout. C'est même l'essentiel du travail en maths en CP. Comprendre le système décimal. Cet exercice permet de comprendre que le système décimal facilite le "comptage" d'objets. Bien évidemment ca prend du temps.
Ca fait un mois que l'on est là-dessus avec mes élèves. Je fais exactement le même exercice sur feuille, mais certains galérant sur la tenue du crayon/stylo, je me suis dit que numériquement cela pouvait leur faciliter un peu la tache.

j'ai le sentiment que tu confonds les array JavaScript avec les <table> HTML qui n'ont pas la même utilité.

Sur le coup, j'ai en effet complètement fusionner les deux.
Du coup, est ce que je peux créer un array et lorsque la dizaine est bonne, je les y ajoute. Et si la prochaine dizaine est erronée je supprime les cercles sauf ceux des images de l'array?

[bahh66]

Alors j'ai essayé de créer tout ça mais j'ai un soucis.

J'explique ce que j'ai fait.
https://codepen.io/cyril-gomez/pen/YzjKLzQ?editors=0010

J'ai créé un array nommé imgSaved, et du coup dans ma fonction verifier(), je lui demande d'ajouter une classe picSaved sur les images cliquées, puis je les ajoute à l'array.
Ainsi je pensais que si ensuite je remove la classe picClicked pour les images suivantes celles avec picSaved ne seraient pas affectées.

[NoSmoking]

Cet exercice permet de comprendre que le système décimal facilite le "comptage" d'objets. Bien évidemment ca prend du temps.
Ca fait un mois que l'on est là-dessus avec mes élèves. Je fais exactement le même exercice sur feuille, mais certains galérant sur la tenue du crayon/stylo, je me suis dit que numériquement cela pouvait leur faciliter un peu la tache.

Les buchettes, les billes et les cartes fonctionnent également bien

Pour en revenir à la gestion et pour répondre à tes questions, il te suffit de gérer un « buffer » dans lequel tu stokes les images cliquées et cela pour chaque dizaine.

En gros deux méthodes, création à la volée du buffer ou création au départ, on va prendre la 2^éme, peut-être plus simple à prendre en compte !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
// buffer de stockage des ref. images
const bufferImagesClicked = [];
// index buffer en cours
let indexBuffer = 0;

Ton buffer devant comporter 10 niveaux, jusqu'à 100 donc on peut faire un truc simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
for (let i = 0; i < 10; i += 1) {
  bufferImagesClicked[i] = [];
}

Chaque indice de bufferImagesClicked est un array. Pour la 1st dizaine indexBuffer vaudra 0, pour la 2nd indexBuffer vaudra 1 ... etc

De la sorte tu n'as plus qu'à gérer le bufferImagesClicked en cours et de ne pas t'occuper des autres.

Si tu valides une dizaine tu passes à l'indice indexBuffer suivant.
Si tu ne valides pas tu ré-init les images référencées dans le buffer courant soit bufferImagesClicked[indexBuffer].

Cela pourrait ressembler à quelque chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function verifier() {
  const nbrImagesCliked = listImgesCliked.length;
  let msg = "Encore rien de fait !"
  if (nbrImagesCliked) {
    // test sur buffer en cours
    if(10 === bufferImagesClicked[indexBuffer].length) {
      msg = "Bravo, dizaine réalisée";
      // on se place sur le buffer suivant
      indexBuffer += 1;
    }
    else {
      msg = "Cela ne fait pas une dizaine";
      // on enlève la classe clicked
      bufferImagesClicked[indexBuffer].forEach((img) => {
        img.classList.remove(CLASS_CLICKED);
      })
      // on reset le tableau
      bufferImagesClicked[indexBuffer] = [];
    }
  }
 
  document.getElementById("success").innerHTML = msg;
}

... en procédant de la sorte tu n'auras aucun mal à gérer des couleurs de bordures différents suivant les dizaines.

Remarques :

• Pense à bien déclarer tes variables via des const, let ou pour les nostalgiques var ;
• Déplace le maximum de style dans les classes, la gestion en sera plus simple/claire ;
• Ils ont peut-être le droit à l'erreur lors du click !
• ...

Voilà pour la fin du week-end et/ou les vacances

[bahh66]

Alors, j'ai essayé de comprendre ce que tu as fait. J'y arrive dans l'ensemble mais il me manque des morceaux du puzzle pour l'appliquer.

https://codepen.io/cyril-gomez/pen/zYLOXwq?editors=0010

Tu fabriques un tableau contenant 10 niveaux et dans chaque niveau, tu vérifies si cela fait 10. Si c'est le cas, tu passes au niveau suivant.

Sauf que j'ai quelques problèmes.
J'ai essayé de mettre les images dans le niveau utilisé pour ensuite vérifier si cela fait 10.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

listImgesClicked = bufferImagesClicked[indexBuffer].push('picClicked');

Avec cette ligne, je pensais que les images, dont la classe était picClicked, entreraient dans l'array : bufferImagesClicked[indexBuffer].
Mais je pense que cela ne doit pas être ça.

Ensuite, j'ai modifier verifier().

CLASS_CLICKED par picClickedet je me demandais, s'il ne fallait pas modifier succes dans le HTML car tu as mis msg. Du coup, plus d'affichage.

[NoSmoking]

J'ai essayé de mettre les images dans le niveau utilisé pour ensuite vérifier si cela fait 10.

non dans le cas présent tu mets une chaine de caractères, 'picClicked', dans le tableau et non la référence, DOM, de l'image.

Dans ton code cela donnerait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

bufferImagesClicked[indexBuffer].push(this);

Ensuite, j'ai modifier verifier().

Il faut que tu te poses la question, mais que représente listImgesClicked dans mon code !

PS : le code que je t'ai montrer était un juste support

[bahh66]

Pour moi lisImgesClicked est un array contenant la liste des images que l'on a cliquée celle qui ont la classe picClicked.

Si c'est le cas, je ne sais pas pourquoi on fait ça car on affecte déjà dans le buffer.

[NoSmoking]

Pour moi lisImgesClicked est un array contenant la liste des images...

Pas exactement comme expliqué ...

Toujours est-il que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
      bufferImagesClicked[indexBuffer].forEach((img) => {
        img.classList.remove(picClicked);
      })

va planter car ce sont des chaines qui sont contenues dans ton buffer et non des éléments <img>, voilà c'est peut être plus clair !

[bahh66]

Ah ****** c'est vrai, mais du coup est ce que je peux utiliser

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
picsclicked = document.querySelectorAll('.picClicked'); // collection des images clickées 
  for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}

à la place du morceau de code

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
bufferImagesClicked[indexBuffer].forEach((img) => {
        img.classList.remove(picClicked);
      })

Ca enlèverait les cercles des images (à moins que ca enlève pour tout le monde).
Et ensuite je remets

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

      bufferImagesClicked[indexBuffer] = [];

pour reset le tableau.

J'avoue que là, je suis encore plus perdu que d'habitude.

[SpaceFrog]

En gros il y a un fall back à la dernière dizaine saisie.

il suffit donc de mettre les images clickées en le pushant dans un array.
Ensuite tu verifies le modulo 10 et tu retires la classe aux images cliquées à la fin de l'array (reste du modulo)