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

Vue hybride

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

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    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
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    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 confirmé
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    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
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    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 confirmé
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    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 : 165
Taille : 67,0 Ko

  6. #6
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    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 !?!

+ 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, 21h23
  2. tester plusieurs touche
    Par Delphieur dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 01/08/2006, 18h35
  3. Plusieurs valeurs possibles
    Par batama dans le forum Langage SQL
    Réponses: 1
    Dernier message: 09/05/2006, 12h27
  4. [VBS] Tester plusieurs répertoire avec un seul If
    Par Edoxituz dans le forum VBScript
    Réponses: 38
    Dernier message: 25/02/2006, 20h18
  5. DBNavigator tester si validation possible
    Par gregcat dans le forum Bases de données
    Réponses: 2
    Dernier message: 12/12/2005, 16h58

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