Tester plusieurs réponses possibles à un dialog-prompt

Bonjour,
je suis toujours dans la réalisation de mon jeu

et le joueur doit cliquer sur une zone de l'image et identifier l'élément cliqué.

Pour l'instant mes zones sont paramétrées ainsi :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<map name="testmap" id="zones_image"> <area shape="rect" coords="570,195,660,275" data-id="bleu" data-img="https://upload.wikimedia.org/wikipedia/commons/7/74/Emblem-favorites.svg" /> <area shape="poly" coords="1027,266,1031,268,1034,271,1035,274,1033,279,1029,282,1021,282,1016,278,1017,271,1023,265,1024,261,1027,266" data-id="jaune" data-img="https://upload.wikimedia.org/wikipedia/commons/b/bb/Broken_heart.svg" /> </map>

---

dans le script, on valide la réponse comme cela :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

function traiteValeur(form, area) { // récup. de la saisie const elemSaisie = form.querySelector("[name='nom']"); const nomJeu = elemSaisie.value.trim(); const reponse = area.dataset.id; const srcImage = area.dataset.img; // le test if (reponse === nomJeu) { // bingo gagné ! compt += 1; // ajout création d'un point sur l'image addPointOnImage(area); // mise à jours core document.getElementById("champDuPrompt").innerHTML = compt; // (1) suppression de l'écouteur area.removeEventListener("click", fonctionSurClic); // affichage message const title = "<span class='bingo'>BRAVO</span>"; // stylé directement en CSS const msg = "<img src='" + srcImage + "'><br><b>" + nomJeu + "</b> est une bonne réponse !"; showModal(title, msg); }

---

Bien évidemment, je ne peux prévoir exactement la réponse du joueur.
J'aimerai donc que plusieurs réponses soit valide pour une même area.

Ex : bleu, bleue, BLEU, Bleu, BLEUE ...

Car le joueur a deviné la bonne réponse mais cela peut lui compter faux tout de même.

Je me disais qu'il faudrait fabriquer un tableau de bonnes réponses pour chaque area et ensuite valider la fonction traiteValeur si reponse correspond à une des valeurs du tableau.

Peut-on remplacer le data-id par une sorte de tableau?

Bonjour,

Citation:

---

Peut-on remplacer le data-id par une sorte de tableau?

---

cela me semble une très mauvaise idée, par contre tu peux te créer une table de correspondances, ou une sorte de dictionnaire, avec les données que tu autorises.
Exemple :

Code:

---

1 2 3 4

const DICO = { "bleu" : ["bleu", "bleue", "BLEU", "Bleu", "BLEUE"], // les autres }

---

En faisant un traitement en amont tu pourrais très bien alléger celui-ci, suppression espace début/fin, mise en lowerCase ... suppression accent et que sais-je d'autres !

Citation:

---

cela me semble une très mauvaise idée

---

J'essaye même pas alors.

Pour le dico, je comprends que tu y définis toutes les réponses acceptées.
Mais du coup, mais avant on lui demandait :

Code:

---

1 2 3 4

const reponse = area.dataset.id; // les autres constantes if (reponse === nomJeu) { // la suite...

---

On remplace la constante reponse par le DICO?

Citation:

---

En faisant un traitement en amont tu pourrais très bien alléger celui-ci, suppression espace début/fin, mise en lowerCase ... suppression accent et que sais-je d'autres !

---

Si je comprends bien, on créerait des fonctions en amont que l'on utiliserait dans traiteValeur? ou dans getSaisie?
Chaque fonction gèrerait une transformation possible du texte dans le dialog.

Citation:

---

Envoyé par bahh66

J'essaye même pas alors.

---

Voila une décision qu'elle est bonne :mrgreen:

Citation:

---

...
On remplace la constante reponse par le DICO?

---

Pas exactement, il faut tester si la réponse est dans le « dictionnaire ».

Citation:

---

Si je comprends bien, on créerait des fonctions en amont que l'on utiliserait dans traiteValeur? ou dans getSaisie?

---

Pas forcément, tu peux créer une fonction de test que tu pourrais mettre dans la condition.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

const DICO = { "bleu" : ["bleu", "bleue", "blue"], "vert" : ["ver", "vers", "vert", "verte", "verre"], } function existeInDico(ref, mot) { if (DICO[ref]) { // suppresion espace début/fin et mise en minuscule mot = mot.trim().toLowerCase(); // test et retour existance dans le dico return DICO[ref].includes(mot); } return false; }

---

EDIT : coquille dans nom paramètre fonction.
il suffit ensuite de tester

Code:

---

1 2 3 4 5 6 7

const nomJeu = elemSaisie.value; const reponse = area.dataset.id; // le test if (existeInDico(reponse, nomJeu)) { // bingo gagné ! // la suite du code }

---

Voila pour une façon de faire !

Je n'ai pas du placer correctement les éléments car il me renvoie que reponse n'est pas défini alors que c'est fait juste au dessus.
Pièce jointe 629463

Il te faut être plus attentif.

Regarde ton code et dis moi ce que vient faire l'accolade fermante avant le test !?!

En effet, je n'ai pas vu que ma fonction se fermait à cet endroit.
Faut dire quelle est longue cette fonction à force.

A présent, il me dit que mot n'est pas défini.
Et je ne sais pas comment le définir. Je me suis dit que c'était peut-être une constante mais à ce moment là, il me dit que je ne peux y accéder avant son initialisation.
L'aurais-je mal placé?

Citation:

---

A présent, il me dit que mot n'est pas défini.

---

celle là tu aurais pu la corriger tout seul, c'est le nom du paramètre qui n'est pas bon !

Code:

---

1 2 3

function existeInDico(ref, mot) { // ... }

---

Visiblement tu n'as pas lu les liens que je t’ai fournis sur les fonctions :calim2:

Je corrige la coquille.

Citation:

---

Visiblement tu n'as pas lu les liens que je t’ai fournis sur les fonctions

---

Si je les ai lu, mais comme je manque de pratique, je ne vois pas souvent les évidences.
Je pense que je vais reprendre depuis la base une fois ce projet terminé.

J'ai oublier ceci :

Citation:

---

Faut dire quelle est longue cette fonction à force.

---

il t'appartient de fractionner celle-ci si tu la trouves difficile à lire/maintenir

Tu pourrais, par exemple, créer deux fonctions, une si c'est bon et une si c'est mauvais

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function traiteValeur(form, area) { // récup. de la saisie const elemSaisie = form.querySelector("[name='nom']"); const nomJeu = elemSaisie.value.trim(); const reponse = area.dataset.id; // le test if (existeInDico(reponse, nomJeu)) { const srcImage = area.dataset.img; bingoGagne(area, nomJeu, srcImage); } else { fiascoPerdu(); } }

---

il te suffit de mettre dans chacunes des fonctions ce qu'il y a entre les accolades conditionnelles et de passer les bons paramètres à celles-ci et le tour est joué :D