IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Tester plusieurs réponses possibles à un dialog-prompt


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut 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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 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
    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?

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Bonjour,
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 !

  3. #3
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    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 javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    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?

    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.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Citation Envoyé par bahh66 Voir le message
    J'essaye même pas alors.
    Voila une décision qu'elle est bonne


    ...
    On remplace la constante reponse par le DICO?
    Pas exactement, il faut tester si la réponse est dans le « dictionnaire ».


    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 !

  5. #5
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    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.
    Nom : erreur.jpg
Affichages : 112
Taille : 67,0 Ko

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Il te faut être plus attentif.

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

  7. #7
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    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é?

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function existeInDico(ref, mot) {
      // ...
    }
    Visiblement tu n'as pas lu les liens que je t’ai fournis sur les fonctions

    Je corrige la coquille.

  9. #9
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    Points : 61
    Points
    61
    Par défaut
    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é.

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    J'ai oublier ceci :
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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é

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Plusieurs actions possible dans un <form>
    Par lodan dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 18/08/2006, 22h23
  2. tester plusieurs touche
    Par Delphieur dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 01/08/2006, 19h35
  3. Plusieurs valeurs possibles
    Par batama dans le forum Langage SQL
    Réponses: 1
    Dernier message: 09/05/2006, 13h27
  4. [VBS] Tester plusieurs répertoire avec un seul If
    Par Edoxituz dans le forum VBScript
    Réponses: 38
    Dernier message: 25/02/2006, 21h18
  5. DBNavigator tester si validation possible
    Par gregcat dans le forum Bases de données
    Réponses: 2
    Dernier message: 12/12/2005, 17h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo