Discussion :

[zlepoizon]

Bonjour à tous,
Mon code pen :

https://codepen.io/zlepoizon/pen/JjWmBNb


Appel aux pros, je rame depuis des heures sur un bogue sur un jeu de Quiz dont je ne trouve pas l'erreur. (Erreur vient de manière aléatoire)

J'ai une page HTML qui contient 3 boutons avec id = a, b, c. pour éviter de proposer les questions réponses je mélange l'ordre (ça fonctionne)
tableauId ex: mélange de lettre b,c,a .. a,c,b

Fonctionne parfaitement : (import question)
mesDonnees[tableauQuestion][index+1]


Mon console log fonctionne parfaitement et toujours
console.log(this.tableauId[index]); // 0:b, 1:c, 2:a

Erreur occasionnel lors de mes boucles. (il sélectionne le bouton de id (ex:a,b,c) et lui applique la question associée
document.getElementById(this.tableauId[index]).textContent = mesDonnees[tableauQuestion][index+1];

// 0:b, 1:c, 2:a - console.log toujours BON
Erreur se situera au niveau de mon affiche écran.


Ma question est : Y a t'il une latente de mes sélections, et import de données en textContent ?
C'est à dire que l'ordre n'est pas chronologique ex: 0:b, 1:c, 2:a

Merci

Code :

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

1
2
3
4
5
6
7
8
 
 
                // this.tableauId = b,c,a .. a,c,b .. 
 
                for (let index = 0; index < 3; index++) {
                    console.log(this.tableauId[index]);
                    document.getElementById(this.tableauId[index]).textContent = mesDonnees[tableauQuestion][index+1];
                }

[Eckmül]

Bonjour, Je ne comprends pas quelle est l'erreur que tu as, elle vient de l'ordre des réponse ?

[zlepoizon]

Oui cela se passe bien la plupart du temps sans bogue puis l'ordre des réponses change de temps en temps.
Dans le console.log l'ordre des réponses est toujours bonnes mais pas toujours dans mon affichage HTML. (qui a pourtant les mêmes données : this.tableauId[index) )

Code :

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

1
2
3
4
             for (let index = 0; index < 3; index++) {
                    console.log(this.tableauId[index]);
                    document.getElementById(this.tableauId[index]).textContent = mesDonnees[tableauQuestion][index+1];
                }

[NoSmoking]

Bonjour,
pas regardé le code en profondeur, il me paraît bien complexe pour ce qu'il semble que tu veux faire.

J'essaie de résumer mais pour commencer je ne vois pas trop l’intérêt de la structure de mesDonnees, un simple tableau de tableaux ferait l'affaire

Code :

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

1
2
3
4
5
let mesDonnees = [
  ["Peux-tu me donner la race de ce chien ?", "0", "Berger Malinois", "Berger Australien", "0 Faux, ..."],
  ["Peux-tu me donner la race de ce chien ?", "1", "Berger Malinois", "Berger Australien", "1 Faux, ..."],
 // ...
]

Donc si l'on découpe les informations contenu dans un enregistrement on obtient

Code :

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

1
2
3
4
5
6
7
mesDonnees[0] = [
  "Peux-tu me donner la race de ce chien ?",  // la question
  "0",                                        // l'indice !?!   
  "Berger Malinois",                          // choix 1
  "Berger Australien",                        // choix 2
  "0 Faux, ..."                               // réponse
]

Déjà :

• pourquoi trois boutons, il n'y que deux choix et pourquoi donc trier les trois ?.
• pourquoi mettre l'indice dans un bouton ?

Les éléments dans le DOM ne bouge pas, ce sont les informations que tu mets dedans qui ne sont pas au bon endroit.

Mais ai-je tout compris ?

[tag9724]

Ton problème n'as rien a voir avec une exécution non-chronologique ( ou asynchrone ) mais dans un problème de logique.

Chaque question se compose de la sorte donc :

Code :

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

1
2
3
4
5
6
7
mesDonnees[0] = [
  "Peux-tu me donner la race de ce chien ?",  // la question
  "0",                                        // choix 1 ( bonne réponse )   
  "Berger Malinois",                          // choix 2
  "Berger Australien",                        // choix 3
  "0 Faux, ..."                               // ??
]

Etant donné que la bonne réponse sera toujours le second élément dans le tableau le premier button ( <button id="a" ...> ) contiendra toujours la bonne réponse.
Pour éviter ça tu as mis en place un système pour mélanger les choix affichés, en sommes faire en sorte qu'alternativement le bouton "a", "b" et "c" puisse contenir la bonne réponse aléatoirement.

Tu as donc une méthode melAbc() qui s'occupera à chaque nouvelle question posée de générer un tableau ["a","b","c"], ce tableau sera ensuite utilisé pour récupérer l'index de la bonne réponse soit la position de "a" dans le tableau généré aléatoirement.

Et c'est la que ça commence a coincer.

La méthode melAbc peux générer 6 tableaux possibles différents dont 4 qui fonctionnerons et 2 qui planterons systématiquement.

Code :

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

1
2
3
4
5
6
7
8
9
// Ne Fonctionne pas
this.tableauId = ["c", "a", "b"]
this.tableauId = ["b", "c", "a"]
 
// Fonctionne
this.tableauId = ["c", "b", "a"]
this.tableauId = ["b", "a", "c"]
this.tableauId = ["a", "b", "c"]
this.tableauId = ["a", "c", "b"]

Toutes les fois ou tu rencontre ton problème sont toutes les fois ou melAbc() auras généré les combinaisons ["c", "a", "b"] ou ["b", "c", "a"].

Si on passe donc dans la partie du code qui affiche le texte dans les boutons nous pourrons voir le problème en action

Code :

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

1
2
3
4
for (let index = 0; index < 3; index++) {
  let maQ = document.getElementById(this.tableauId[index])
  maQ.textContent = mesDonnees[tableauQuestion][index + 1]
}

Ici donc avec ["c", "a", "b"] l'index de la bonne réponse sera 1 car "a" est en seconde position dans le tableau sauf que ce sera <button id="c" qui affichera la bonne réponse parce que "c" est en première position dans le tableau.

Pour résumer donc tu génère aléatoirement un tableau tableauId qui contiendras les lettres "a","b" et "c" positionnées aléatoirement dedans.
Tu feras en sorte que le bouton dont l'id est égale à tableauId[0] contienne la bonne réponse.
Mais ! Tu considéreras que la bonne réponse sera équivalente a la position de "a" dans tableauId.

Exemple qui fonctionnera
tableauId = [ "a", "b", "c" ] : Le bouton id="a" affichera la bonne réponse, le système considérera 0 donc "a" comme étant la solution

Exemple qui ne fonctionnera pas
tableauId = [ "c", "a", "b" ] : Le bouton id="c" affichera la bonne réponse, le système considérera 1 donc "b" comme étant la solution


Pour résoudre le problème il suffirais de modifier

Code :

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

1
2
    const indice = this.tableauId.findIndex((monIndex) => monIndex == "a") // ===
    this.indice = indice

Par

Code :

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

    this.indice = ["a","b","c"].indexOf( this.tableauId[0] )

Même si je pense que tu devrais te prendre le temps de repenser la logique de ton système pour le simplifier quitte a le réécrire complètement, auquel cas tu risque de ne plus t'y retrouver toi même dans ton code.

[Doksuri]

hello : je complete cette discussion pour signaler qu'il ne faut pas se fier a 100% sur des console.log ....
en effet, le console.log va "logger" a proprement parler quand le navigateur "a le temps" entre 2 executions.... ce n'est pas forcement a l'instant T ou dans le code, le console.log apparait

[zlepoizon]

Bonjour, je te remercie beaucoup pour ton explication et le temps consacré pour expliquer !
Je suis apprenant donc effectivement je peux choisir des solutions pas toujours les plus adaptées.
Merci

[zlepoizon]

Un grand merci déjà pour ton temps, et ton explication.
Par contre même si ça fonctionne je ne comprends pas totalement la logique de this.tableauId[0]) pour trouver l'index de a en proposant par exemplel'index 0 tableauId[0] = qui peut être a,b ou c.

// this.tableauId = b,c,a ...
tableauId[0] = exemple b.

Concernant les id pourquoi la logique système (voir commentaire) c'est le c qui devient la bonne réponse, et b l'index 1 ?

Code :

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

1
2
3
4
 
console.log(this.tableauId); // b,c,a
console.log(this.tableauId[0]); // b... premier index b,c,a
 this.indice = ["a","b","c"].indexOf(this.tableauId[0]);

[tag9724]

La confusion vient du fait que tu convertis les lettres "a", "b", "c" par des chiffres 0, 1, 2

• a = 0
• b = 1
• c = 2

Quand melAbc() produit comme tableau ["b","c","a"] la logique sera donc :
tableauId = [ "b", "c", "a" ] : Le bouton id="b" affichera la bonne réponse, le système considérera 2 donc "c" comme étant la solution


Ici "b" étant la première entrée du tableau ce sera ce bouton qui affichera la bonne réponse.
Dans le code qui affiche les questions dans les boutons nous verrons que la première réponse possible est affichée dans le premier bouton listé dans tableauId.

Code :

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

1
2
3
4
5
6
    for (let index = 0; index < 3; index++) {
      let maQ = document.getElementById(this.tableauId[index])
      maQ.textContent = mesDonnees[tableauQuestion][index + 1]
 
      console.log(index, ["a", "b", "c"][index], maQ)
    }

La première réponse possible pour chaque question est toujours la bonne réponse.

Code :

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

1
2
3
4
5
6
7
mesDonnees[0] = [
  "Peux-tu me donner la race de ce chien ?",  // la question
  "0",                                        // choix 1 ( bonne réponse )   
  "Berger Malinois",                          // choix 2
  "Berger Australien",                        // choix 3
  "0 Faux, ..."                               // ??
]

Ca donneras :

• bouton "b" affichera mesDonnees[0][1] ( "0" )
• bouton "c" affichera mesDonnees[0][2] ( "Berger Malinois" )
• bouton "a" affichera mesDonnees[0][3] ( "Berger Australien" )

La ou ça coince donc c'est que 2 sera considéré comme la bonne réponse.
Ca s'explique par le fait que tu considère que la bonne réponse sera liée à la position de "a" dans tableauId

Code :

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

const indice = this.tableauId.findIndex((monIndex) => monIndex == "a") // ===

Sauf que dans ce cas "a" nous donneras 2 alors que le bouton qui affiche la bonne réponse est le bouton 1 donc "b".
C'est ce qui est attendus dans la fonction getId(), plus précisément dans le block switch

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
switch (idBouton) {
  case "a":
    conversion = 0
    // [...]
    break
 
  case "b":
    conversion = 1
    // [...]
    break
 
  case "c":
    conversion = 2
    // [...]
    break
}

Celui-ci pourrais s'écrire en une ligne de code :

Code :

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

conversion = ["a", "b", "c"].indexOf(idBouton)

getId() sera appelé au click d'un bouton, convertiras la lettre qui l'identifie en nombre et vérifiera si ce nombre correspond a bonneReponseId
Donc si on appuie sur le bouton "b" qui affiche la bonne réponse getId() convertiras la lettre "b" en chiffre 1 et le compareras à 2.


Dans la solution proposée nous allons à la place récupérer à quel chiffre correspond le bouton qui contient la bonne réponse.
Le bouton qui contient la bonne réponse est toujours le premier listé dans tableauId

Code :

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

this.indice = ["a","b","c"].indexOf( this.tableauId[0] )

Ici this.indice vaudra 1 parce que "b" = 1, on pourras lire la ligne comme ça ["a","b","c"].indexOf( "b" )C'est ce qu'attend getId() dans sa vérification.

• 0 = a
• 1 = b
• 2 = c

[zlepoizon]

Compris, tout grand merci tu es très pédagogique, et bon développeur.
Je pense que dans ma logique n'était pas la plus simple et surtout que j'ai omis et oublié certaines choses .
Merci bcp