Convertir une chaine avec des astérisques tout en laissant un caractère en random dans la chaine

**mecmec** · 20/02/2018, 21h12

Bonjour,

J'essaye de coder ceci : https://www.w3schools.com/code/tryit...e=FOMTXLQUO8AW

Voici l'explication rapide: J'essaye de créer un Quizz en JavaScript composé de une question et d'une réponse.
Voici un exemple d'une question:
"Quel est l'acteur principal du film Le Petit Baigneur ?"

Donc la réponse c'est "Louis de Funes" mais le JavaScript il faudrait qu'il affiche ceci en astérisque :
***** ** ***** (grâce à une fonction "ConvertirEnAstérisque(reponse, 0)"

Mais c'est pas le tout il faudrait qu'il y a un système d'indice donc il faudrait remplacer le "0" par "1" dans la fonction "ConvertirEnAstérisque(reponse, 1)" et l'indice de la réponse afficherait ceci de façon random :
***** ** F****

Ensuite prochainement il faudrait un nouveau indice mais il ne faut pas qu'il tombe par hasard sur 10éme lettre qui est le "F", il faudrait qu'il en tire un autre, biensur il ne faut pas convertir les espaces par des astérisques.

Avez-vous une idée ?

Salutations

**danielhagnoul** · 21/02/2018, 15h02

Voir : Comment dévoiler lettre par lettre un message caché ?

**mecmec** · 21/02/2018, 15h26

Bonjour Daniel,

Il est génial ce code !

J'ai ajouté 2 lignes en + afin qu'il affiche la réponse avec des astérisques comme par défaut :

Code :

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

1
2
3
4
5
6
7
8
	  var reponse = "À Édouart 4 baron du néant";
	  document.querySelector( "#demo" ).innerHTML = reponse.replace( /[A-za-z0-9\u00C0-\u00FF]/g, "*" );
 
...
                        /*
                         * Itérateur mettant en oeuvre le générateur donneMessage
                         */ 
                        let response = donneResponse(reponse);

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
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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
  <!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
*,  *:after,  *:before {
        box-sizing: border-box;
}
                
                /* CSS du test */
                
                
                /* Fin CSS du test */
</style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.5.0.js"></script>
  <script>
    'use strict';
        
        
 
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
                        // code du test
                
                
                        // fin code du test
                        
                }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
          
          var reponse = "À Édouart 4 baron du néant";
          document.querySelector( "#demo" ).innerHTML = reponse.replace( /[A-za-z0-9\u00C0-\u00FF]/g, "*" );
                        
                        /*
                         * Pour remplacer une partie d'un String
                         */ 
                        String.prototype.replaceAt = function( index, replacement ){
                                return this.substr( 0, index ) + replacement + this.substr( index + replacement.length );
                        }
                        
                        /*
                         * Générateur dévoilant un message lettre par lettre
                         */
                        function* donneResponse( str ){
                                const
                                        strLength = str.length;
                                
                                let 
                                        message = str.replace( /[A-za-z0-9\u00C0-\u00FF]/g, "*" ), // \u00C0-\u00FF pour les à, é, è, etc.
                                        arIndex = kBrouilleArray( Array.from( new Array( strLength ), ( item, i ) => i ) ); // dans dvjhUtilities-1.5.0.js
                                
                                for ( const index of arIndex ){
                                        if ( str[ index ] === " " ) continue;
                                        yield message = message.replaceAt( index, str[ index ] );
                                }
                        }
                        
                        /*
                         * Itérateur mettant en oeuvre le générateur donneMessage
                         */ 
                        let response = donneResponse(reponse);
                        
                        /*
                         * Gestionnaire d'événement "donne une lettre"
                         */ 
                        const
                                elemDemo = document.querySelector( "#demo" ),
                                elemBtnIndice = document.querySelector( "#btnIndice" );
                        
                        elemBtnIndice.addEventListener( "click", ev => {
                                let message = response.next();
                                
                                if ( ! message.done ){
                                        elemDemo.textContent = message.value;
                                } else {
                                        elemDemo.setAttribute( "disabled", true );
                                }
                        }, false );
 
                        // fin code du test
                                                
      kIDUnique();
    }, false );
  </script>
  </head>
  <body>
  <main>
    <p id="demo"></p>
    <button id="btnIndice">Donner une lettre</button>
  </main>
</body>
</html>

Je vais bidouiller avec ça. Merci.

Cordialement

**mecmec** · 21/02/2018, 21h18

Bonjour Daniel,

Le script je dois l'utiliser pour une application NodeJS, j'ai essayé de reproduire ton script ici : https://www.w3schools.com/code/tryit...e=FOOQC402YTJ4

Tout ce qui est "fonction*", "dvjhUtilities-1.5.0.js", "kBrouilleArray", "let" je ne pense pas que tout ça soient compatibles dans un server.js (pour NodeJS). Il y a t'il un moyen d'utiliser toutes ses fonctions dans un seul fichier "server.js" ?

Cordialement

[Edit: Mise à jour de l'url w3schools.com]

**danielhagnoul** · 21/02/2018, 21h34

node.js (à jour) est totalement compatible avec ES2015+

Pour les fichiers "moment.js" et "dvjhUtilities-1.5.0.js" c'est comme pour n'importe quel autre fichier externe, il faut faire un import.

**mecmec** · 21/02/2018, 21h37

Pour NodeJS je travail que dans le côté serveur et non pas dans le côté client.

**mecmec** · 21/02/2018, 22h29

J'ai un peu bidouillé le code JavaScript pour qu'il fonctionne sans aucun fichier ".js" : https://www.w3schools.com/code/tryit...e=FOOSV6X4EY3U
Il fonctionne asez bien mais j'ai l'impression qu'il faut pas cliquer trop vite sur "Donner une lettre", il faut compter 2 ou 3 secondes avant de recliquer car parfois sa bug mais sinon ça me plait bien.

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
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
<!DOCTYPE html>
<html>
<head>
 
</head>
<body>
 
<div id="demo"></div>
 
<button id="btnIndice">Donner une lettre</button>
 
<script>
'use strict';
 
function kIntRandom(min, max) {
    // retourne X tel que : min <= X <= max
    return Math.floor(Math.random() * (max - min + 1) + min);
}
 
function kBrouilleArray(arP) {
    // retourne un array dans un ordre alÃ©atoire
    let
        pos,
        temp;
 
    for (var j = arP.length - 1; j > 0; j--) {
        pos = kIntRandom(0, j + 1);
        temp = arP[j];
        arP[j] = arP[pos];
        arP[pos] = temp;
    }
    return arP;
}
 
var reponse = "Test 2mots";
document.getElementById("demo").innerHTML = reponse.replace(/[A-za-z0-9\u00C0-\u00FF]/g, "*");
 
 
/*
 * Pour remplacer une partie d'un String
 */
String.prototype.replaceAt = function(index, replacement) {
    return this.substr(0, index) + replacement + this.substr(index + replacement.length);
}
 
let response = donneResponse(reponse);
 
/*
 * Générateur dévoilant un message lettre par lettre
 */
function* donneResponse(str) {
    var strLength = str.length;
 
    let
        message = str.replace(/[A-za-z0-9\u00C0-\u00FF]/g, "*"), // \u00C0-\u00FF pour les à, é, è, etc.
        arIndex = kBrouilleArray(Array.from(new Array(strLength), (item, i) => i)); // dans dvjhUtilities-1.5.0.js
    for (const index of arIndex) {
        if (str[index] === " ") continue;
        yield message = message.replaceAt(index, str[index]);
    }
 
}
 
 
// document.getElementById("demo").innerHTML = response;
 
 
/** Gestionnaire d'événement "donne une lettre" */
const elemDemo = document.querySelector("#demo");
const elemBtnIndice = document.querySelector("#btnIndice");
 
 
elemBtnIndice.addEventListener("click", function() {
    let message = response.next();
    //alert(message);
    if (!message.done) {
        elemDemo.textContent = message.value;
    } else {
        alert("Fini");
        //elemDemo.setAttribute( "disabled", true );
    }
})
 
</script>
 
 
</body>

**mecmec** · 27/02/2018, 23h41

Bonjour Daniel.

Ton script fonctionne très bien, je l'utilise pour un bot IRC créé en NodeJS, ce robot est en test depuis maintenant 24h sur un serveur IRC et tout fonctionne bien, le début de la création du bot a eu lieu vers le 19 février dans la soirée et 98% du projet est terminé depuis hier.
Par contre j'ai remarqué un problème, j'ai vérifier ton script sur qu'une page html en local (ou un "javascript tester" sur google) et si on chnage la réponse "À Édouart 4 baron du néant" par un mot de 2 mots comme "Te" alors il y a un problème, si on clique sur "Donner une lettre" alors la première lettre est toujours donné, mais il arrive que parfois il y a un bug au 2ème clique, il est ignoré. J'ai ce même problème sur le bot en JS !

Il y a t'il un moyen de savoir d'où pourrait venir le problème ? Peut-être que le "T" est généré une première fois mais qu'au deuxième clique c'est encore le "T" qui est généré et cela produit donc un bug et il ne souhaite pas continuer à trouver la lettre suivante.

J'ai aussi corrigé un autre problème :

Code js :

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

1
2
3
4
5
6
 
  kIntRandom = ( min, max ) => {
    // retourne X tel que : min <= X <= max
    //return Math.floor( Math.random() * ( max - min + 1 ) + min );
    return Math.floor( Math.random() * ( max - min ) + min ); // le " + 1" a été retiré.
  },

Cordialement.

**danielhagnoul** · 28/02/2018, 00h52

Pour kIntRandom( min, max ) :

Code JavaScript :

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

1
2
3
for ( let i = 0; i < 100; i++ ){
	klog( kIntRandom( 1, 2 ) );
}

Vous donnera plus ou moins 50 fois 1 et 50 fois 2, alors que votre version modifiée vous donnera 100 fois 1 !

****

Je viens de faire plusieurs dizaines de tests avec "Te" sur Chrome, c'est bizarre, souvent cela fonctionne sans problème ! Avec :

Code JavaScript :

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

1
2
3
4
5
6
7
String.prototype.replaceAt = function( index, replacement ){
 
  // debug
  klog( this, index, replacement );
 
  return this.substr( 0, index ) + replacement + this.substr( index + replacement.length );
}

J'obtiens bien :

** 0 T
T* 1 e

et parfois il y a un blocage avec l'erreur :

Uncaught TypeError: Cannot read property 'length' of undefined
at String.replaceAt (test21.html:55)
at donneResponse (test21.html:71)
at donneResponse.next (<anonymous>)
at HTMLButtonElement.elemBtnIndice.addEventListener.ev (test21.html:88)

Je ne comprends pas cette erreur aléatoire !

Conclusion : il faut limiter l'usage à un message caché qui contient plus de deux lettres

**mecmec** · 28/02/2018, 01h51

C'est bien cette erreur que j'ai :

Code :

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

Uncaught TypeError: Cannot read property 'length' of undefined

J'essaye de construire un nouveau système pour qu'il ressemble à ceci :

Code imagination de js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var réponse = "coucou";
 
// convertir "coucou" en : 
 
var array = [[c,invisible],[o,invisible],[u,invisible],[c,invisible],[o,invisible],[u,invisible]];
 
// afficher "coucou" en ******
 
// dès qu'il y a une demande d'indice faut que l'array ressemble aléatoirement à : [[c,invisible],[o,VISIBLE],[u,invisible],[c,invisible],[o,invisible],[u,invisible]];
// donc ici la réponse est:  *o****
 
// Dès qu'il y a une nouvelle demande d'indice il cherche un indice au hasard dans les "invisible" pour l'afficher donc par exemple:  [[c,invisible],[o,VISIBLE],[u,invisible],[c,VISIBLE],[o,invisible],[u,invisible]];
// qui serait donc *o*c** ça va être la guerre de construire ça, je vais galérer !!
 
// dès que tous les invisible sont à "visible" il arrête de chercher !

L'idée pourrait être bonne et logique ?

**danielhagnoul** · 28/02/2018, 02h47

Problème résolu

Il y a avait bien un + 1 de trop, pas dans kIntRandom mais dans kBrouilleArray, ici : pos = kIntRandom( 0, j + 1 );
Il faut utiliser la version corrigée de mon fichier :

<script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.5.1.js"></script>

.

Bien entendu, le message caché doit avoir au minimum deux lettres !

Je vais modifier mes billets de blog pour prendre en compte la correction, merci de m'avoir signalé le problème.

**mecmec** · 28/02/2018, 03h25

Ok merci, j'ai fait la mise à jour dans nodeJS en remettant l'ancien "+ 1" et en retirant "+1" de kIntRandom(). C'est publié, je verrai bien demain si tout est correct.

Cordialement.

Convertir une chaine avec des astérisques tout en laissant un caractère en random dans la chaine

JavaScript

Discussions similaires

Partager

Partager