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