Discussion :

[bahh66]

Bonjour,

ce sujet fait suite à celui-ci.

Le code créé jusqu'à présent est celui-ci : https://codepen.io/cyril-gomez/pen/zYLOXwq.

Pour l'instant, les images cliquées ont un cercle de couleur rouge (application du css sur la classe picCliked), celles déjà comptées (dizaine réussie) ont un cercle vert (application du css sur la classe imgSaved).

Je souhaiterais que la couleur du cercle puisse changer à chaque dizaine afin que mes élèves puissent mieux voir les différentes dizaines réalisées.

Un exemple :

sélection des images : rouge
1ère dizaine : vert
2ème dizaine : bleu
3ème dizaine : orange
....
9ème dizaine : jaune.

Dans le code, c'est le changement de classe qui engendre le changement de couleur.

Code javascript :

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

1
2
3
4
5
6
7
8
    if(10 === nbrverif){
      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}
    picclicked.classList.add("imgSaved");
    picclicked.onclick = {/* void function */};
    nbrverif=0;
}

Est-il possible de mettre une classe imgSaved[i] avec i variant de 1 à 9? (Je me rends compte que ce n'est peut-être pas une gestion du css mais du javascript)
Sinon comment puis-je faire comprendre que je veux changer de couleur sans reprendre le code à zéro?

Merci par avance.

[NoSmoking]

Bonjour,
tu peux tout à fait créer des classes suivants la dizaine en cours, celle-ci étant à gérer côté JavaScript.

Code :

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

1
2
3
4
5
6
7
8
9
.dizaine-1 {
  /* tu mets ce que tu veux */
}
.dizaine-2 {
  /* tu mets ce que tu veux */  
}
.dizaine-3 {
    /* tu mets ce que tu veux */
}

Voilà une façon de faire !

[bahh66]

Alors en effet, c'est côté javascript que je bloque car en effet, j'avais prévu de faire ça côté css.

[bahh66]

J'ai créé un code qui fonctionne mais il est moche.

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
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
function verifier() {
  dizaine1 = document.querySelectorAll('.diz1').length;
  dizaine2 = document.querySelectorAll('.diz2').length;
  dizaine3 = document.querySelectorAll('.diz3').length;
   dizaine4 = document.querySelectorAll('.diz4').length;
   dizaine5 = document.querySelectorAll('.diz5').length;
   dizaine6 = document.querySelectorAll('.diz6').length;
   dizaine7 = document.querySelectorAll('.diz7').length;
   dizaine8 = document.querySelectorAll('.diz8').length;
   dizaine9 = document.querySelectorAll('.diz9').length;
    nbrdizaines = dizaine1+dizaine2+dizaine3+dizaine4+dizaine5+dizaine6+dizaine7+dizaine8+dizaine9;
    if(10 === nbrverif){
      picsclicked = document.querySelectorAll('.picClicked'); // collection des images clickées 
      if (nbrdizaines===0) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz1");
    picclicked.onclick = { };
    nbrverif=0;
        }}
      if (nbrdizaines===10) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz2");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
            if (nbrdizaines===20) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz3");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
            if (nbrdizaines===30) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz4");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
            if (nbrdizaines===40) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz5");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
            if (nbrdizaines===50) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz6");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
            if (nbrdizaines===60) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz7");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
            if (nbrdizaines===70) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz8");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
            if (nbrdizaines===80) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz9");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
 /* for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("imgSaved");
    picclicked.onclick = { };
    nbrverif=0;
*/
      msg = "Bravo, dizaine réalisée";
        document.getElementById("success").innerHTML = msg;
      // on se place sur le buffer suivant
      //indexBuffer += 1;
      }
 
    else {
      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;
}
 
      msg = "Cela ne fait pas une dizaine";
  document.getElementById("success").innerHTML = msg;
}
}

En fait je vérifie la longueur des images sauvées et je réattribue à la bonne classe.

[NoSmoking]

J'ai créé un code qui fonctionne mais il est moche.

Je confirme, tu aurais pu faire un minimum de factorisation

Ceci étant il y a plus simple pour récupérer le nombre de dizaines traitées en utilisant un sélecteur d'attribut

Code javascript :

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

1
2
3
4
// voir : Sélecteurs ciblant une sous-chaîne
// https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors#s%C3%A9lecteurs_ciblant_une_sous-cha%C3%AEne
const nbrOk = document.querySelectorAll("[class*='diz']").length;
const nbrDizaines = nbrOK / 10;

Voir : Sélecteurs ciblant une sous-chaîne

Je déplace vers le forum JavaScript pour la suite

[bahh66]

Est-il possible de factoriser les déclarations et les if?
Car en effet, il y a énormément de répétition.

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

[NoSmoking]

Allez cadeau pour les fêtes

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
24
25
26
27
function verifier() {
  const nbrOK = document.querySelectorAll("[class*='diz']").length;
  const nbrDizaines = nbrOK / 10;
  const picsclicked = document.querySelectorAll(".picClicked");
  let msg = "...";
 
  if (10 === nbrverif) {
    msg = "Bravo, dizaine réalisée";
    // class à appliquer
    const nomClass = "diz" + (nbrDizaines + 1);
    for (const picclicked of picsclicked) {
      picclicked.classList.remove("picClicked");
      picclicked.classList.add(nomClass);
      // ou directement : picclicked.classList.replace("picClicked", nomClass);
      picclicked.onclick = {};
    }
  }
  else {
    msg = "Cela ne fait pas une dizaine";
    for (const picclicked of picsclicked) {
      picclicked.classList.remove("picClicked");
    }
  }
 
  nbrverif = 0;
  document.getElementById("success").innerHTML = msg;
}

[bahh66]

Merci beaucoup.
Et j'apprécie grandement le cadeau.