Bouton qui génère soit 1, soit 0

Résolu
thiseo Messages postés 17 Date d'inscription   Statut Membre Dernière intervention   -  
thiseo Messages postés 17 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je ne suis pas expert en codage et j'aimerais savoir s'il était possible de coder mon besoin (personnel) suivant. Et si c'est possible, si vous pouvez m'aider.

Ma question :
Créer un bouton qui génèrerait aléatoirement un chiffre : soit 1 soit 0. Si c'est 0, l'image associé à 0 s'affiche. Si c'est 1, l'image associé à 1 s'affiche. En tout, un bouton doit généré 3 images de suite. Au bout de ces trois images, nous aurions le total de ces 3 images (soit 0,1,2,3)

Ce qui revient à dire que dans l'ordre, de gauche à droite, nous aurions :
LE BOUTON - La première image - La seconde image - La troisième image - LE RESULTAT en chiffre (des trois images)



7 réponses

Réponse 1 / 7
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Salut,

Voila: 

<html>
  <head>
    <meta charset="utf8">
    <title></title>
    <style type="text/css">
      img{
        width: 50px;
        height: 50px;
      }
      #container *{
        float: left;
      }
      h4{
        font-size: 30pt;
        margin:0;
        margin-left: 20px;
      }
      button{
        margin-right: 30px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <button>1 ou 0 ?</button>
      <div id="pictures"></div>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
      var superGenerator = {
        pictures: 0,
        total: 0,
        // Nombre de clics autorisés sur le bouton
        max: 3,
        container: $('#pictures'),
        picturesUrl: [
          'http://1.bp.blogspot.com/-6detgR91RJs/UX6ZKLTp2uI/AAAAAAAAA68/OunVXlXGw8U/s320/zero.jpg',
          'http://upload.wikimedia.org/wikipedia/commons/3/3f/ONE_Campaign.svg'
        ],
        init: function(){
          var me = this;
          $('button').click(function(){me.push()});
        },
        push: function(){
          var me = this;
          //0 ou 1? place au tirage
          var nb = this.getRandom();

          this.pictures++;

          if(this.pictures > this.max){
            return;
          }
          this.total += nb;
          console.log(this.total);

          var $pict = $('<img/>')
          $pict.attr('src', me.picturesUrl[nb]);
          $(me.container).append($pict)
          // Ajout du total
          if(this.pictures == this.max){
            $(me.container).append('<h4>'+me.total+'</h4>');
          }
        },
        getRandom: function(){
          return Math.random() >= 0.5?1:0;
        }
      }
      superGenerator.init();
    </script>
  </body>
</html>
0
ElementW Messages postés 4814 Date d'inscription   Statut Contributeur Dernière intervention   1 223
 
Utiliser jQuery pour ça? Sérieux quoi... jQ c'est lourdingue pour si peu de code.
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
En le prenant en CDN, il y a de fortes chances que le client l'aie déja en cache (via d'autres sites).
Aucune raison donc de s'en priver.

De plus, Ca permet d'être sûr de la compatibilité du code avec les navigateurs supportés par jQuery
0
Réponse 2 / 7
thiseo Messages postés 17 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour,

Tu es absolument génial, c'est ce dont j'ai besoin.

J'ai une petite correction, en fait, quand je clique sur le bouton, il faudrait que les 3 images se génèrent en même temps, soit :

Je clique une fois sur le bouton, les trois images se génèrent et le total apparaît.

Ce serait possible ?

Si oui, il me restera deux choses à demander et je ne t'embête plus.
En tout cas, merci beaucoup pour ton aide précieuse, c'est très gentil de ta part.
0
Réponse 3 / 7
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Voila pour la première correction: 


<html>
  <head>
    <meta charset="utf8">
    <title></title>
    <style type="text/css">
      img{
        width: 50px;
        height: 50px;
      }
      #container *{
        float: left;
      }
      h4{
        font-size: 30pt;
        margin:0;
        margin-left: 20px;
      }
      button{
        margin-right: 30px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <button>1 ou 0 ?</button>
      <div id="pictures"></div>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
      var superGenerator = {
        pictures: 0,
        total: 0,
        // Nombre de clics autorisés sur le bouton
        max: 3,
        container: $('#pictures'),
        picturesUrl: [
          'http://1.bp.blogspot.com/-6detgR91RJs/UX6ZKLTp2uI/AAAAAAAAA68/OunVXlXGw8U/s320/zero.jpg',
          'http://upload.wikimedia.org/wikipedia/commons/3/3f/ONE_Campaign.svg'
        ],
        init: function(){
          var me = this;
          $('button').click(function(){me.push()});
        },
        push: function(){
          var me = this;
          for(var i = 0; i < this.max; i++){
            //0 ou 1? place au tirage
            var nb = this.getRandom();

            this.pictures++;

            if(this.pictures > this.max){
              return;
            }
            this.total += nb;
            console.log(this.total);

            var $pict = $('<img/>')
            $pict.attr('src', me.picturesUrl[nb]);
            $(me.container).append($pict)
            // Ajout du total
            if(this.pictures == this.max){
              $(me.container).append('<h4>'+me.total+'</h4>');
            }
          }
        },
        getRandom: function(){
          return Math.random() >= 0.5?1:0;
        }
      }
      superGenerator.init();
    </script>
  </body>
</html>
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Pour la suite des modifs, essaie de poster l'ensemble des modifications souhaitées en une seule fois histoire que j'aie une vue d'ensemble des fonctionnalités à coder. Ca facilitera le développement et ça s'ra plus propre :)
0
Réponse 4 / 7
thiseo Messages postés 17 Date d'inscription   Statut Membre Dernière intervention  
 
Ouah, niquel !!!! Merci beaucoup

Pour le reste, je vais t'expliquer vite fait la finalité de ce code. C'est pour du Yi-king, je ne sais pas si tu connais. Bref, pour le moment, nous avons un bouton, qui génère trois images et nous avons le résultat.

Il faudrait que cela se répète en tout six fois. Et a la fin, une concaténation des six résultats. Donc cela donne ce qui suit :

Bouton A - Image 1 - Image 2 - Image 3 - Résultat A
Bouton B - Image 1 - Image 2 - Image 3 - Résultat B
Bouton C - Image 1 - Image 2 - Image 3 - Résultat C
Bouton D - Image 1 - Image 2 - Image 3 - Résultat D
Bouton E - Image 1 - Image 2 - Image 3 - Résultat E
Bouton F - Image 1 - Image 2 - Image 3 - Résultat F

Résultat : (la concaténation) ABCDEF

Apres, pour la dernière chose, il faut que je mette en piece jointe un fichier html/JavaScript car je pense qu'un simple copier-coller fera l'affaire.

Merci beaucoup pour ton aide, c'est vraiment gentil de ta part.
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Ok, donc pour résumer: 6 boutons qui génèrent chacuns 3 images et une somme totale en fonction. On appuye 6 fois, ça génère 6 lignes. Une fois toutes les lignes générées, le total des totaux s'affiche. Le tout doit être facilement et proprement copiable/collable dans un email. Je m'y met ;)
0
thiseo Messages postés 17 Date d'inscription   Statut Membre Dernière intervention  
 
Merci beaucoup. Et demain, je te mettrais le fichier en pièces jointe pour voir si on peut juste faire un copier-coller
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Voila, je te laisse le soin de tester l'envoi par email et la mise en page. 


<html>
  <head>
    <meta charset="utf8">
    <title></title>
    <style type="text/css">
      img{
        width: 50px;
        height: 50px;
      }
      h4{
        font-size: 30pt;
        margin:0;
        margin-left: 20px;
      }
      button{
        margin-right: 30px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="pictures"></div>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
      var superGenerator = {
        pictures: 0,
        total: 0,
        concatTotal: '',
        // Nombre de clics autorisés sur le bouton
        max: 3,
        nbTirages: 6,
        container: $('#pictures'),
        picturesUrl: [
          'http://1.bp.blogspot.com/-6detgR91RJs/UX6ZKLTp2uI/AAAAAAAAA68/OunVXlXGw8U/s320/zero.jpg',
          'http://upload.wikimedia.org/wikipedia/commons/3/3f/ONE_Campaign.svg'
        ],
        init: function(){
          var me = this;
          this.genTab();
          $('button').click(function(e){me.push(e)});
        },
        genTab: function(){
          var $tab = $('<table></table>');
          for(var i = 0; i < this.nbTirages; i++){
            var $line = $('<tr class="line-'+i+'"></tr>');
            console.log($line);
            $tab.append($line);
            for(var j = 0; j < this.max + 2 /*+2 pour bouton et resultat*/ ; j++){
              if(j == 0){
                // On place le bouton
                var $btn = $('<td><button class="tirage" data-tirage="'+i+'">Tirage ' + i +'</button></td>');
                $line.append($btn);
                if(i != 0){
                  $btn.children('button').attr('disabled', 'disable')
                }
              }else{
                $line.append('<td></td>');
              }
            }
          }
          this.container.append($tab);
        },
        push: function(e){
          console.log('click');
          var line = $(e.currentTarget).data('tirage');
          var me = this;
          for(var i = 0; i < this.max; i++){
            //0 ou 1? place au tirage
            var nb = this.getRandom();

            this.pictures++;

            if(this.pictures > this.max){
              return;
            }
            this.total += nb;

            var $pict = $('<img/>')
            $pict.attr('src', me.picturesUrl[nb]);
            $( $('.line-'+line).children('td')[i+1] ).append($pict);
            // Ajout du total
            if(this.pictures == this.max){
              $( $('.line-'+line).children('td')[i+2] ).append('<h4>'+me.total+'</h4>');
              $('.line-'+line + ' button').attr('disabled', 'disable');
              me.concatTotal += me.total;
              if(line < me.nbTirages){
                $('.line-'+(line+1) + ' button').removeAttr("disabled");
              }
            }
          }
          this.pictures = 0;
          this.total = 0;
          if(line == me.nbTirages-1){
            $(me.container).append('Résultat: ' + me.concatTotal);
          }
        },
        getRandom: function(){
          return Math.random() >= 0.5?1:0;
        }
      }
      superGenerator.init();
    </script>
  </body>
</html>
0
Réponse 6 / 7
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Quelques modifs visuelles, dont des images (je crois avoir fait juste d'après ce que j'ai pu lire sur le yi-king :p): 


<html>
  <head>
    <meta charset="utf8">
    <title></title>
    <style type="text/css">
      img{
        width: 50px;
        height: 50px;
      }
      h4{
        font-size: 30pt;
        margin:0;
        margin-left: 20px;
        color: #888;
      }
      h3{
        margin:0;
      }
      h2{
        margin-bottom: 5px;
      }
      button{
        margin-right: 30px;
        border-radius: 10%;
        font-size: 12pt;
        width: 100px;
        transition: all linear .4s;
      }
      button[disabled]{
        opacity: 0.5;
      }
      #pictures{
        display: inline-block;
        margin:0 auto;
      }
      td{
        height: 45px;
        width: 60px;
      }
      body{
        text-align: center;
      }
      .result{
        font-size: 14pt;
        margin-top: 30px;
        font-weight: bolder;
      }
      .resultCell{
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="pictures"></div>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
      var superGenerator = {
        pictures: 0,
        total: 0,
        concatTotal: '',
        // Nombre de clics autorisés sur le bouton
        max: 3,
        nbTirages: 6,
        container: $('#pictures'),
        picturesUrl: [
          'http://image.noelshack.com/fichiers/2014/19/1399362875-zero.png',
          'http://image.noelshack.com/fichiers/2014/19/1399362895-one.png',
          'http://image.noelshack.com/fichiers/2014/19/1399362909-two.png',
          'http://image.noelshack.com/fichiers/2014/19/1399364939-three.png'
        ],
        init: function(){
          var me = this;
          this.genTab();
          $('button').click(function(e){me.push(e)});
        },
        genTab: function(){
          var $tab = $('<table></table>');
          for(var i = 0; i < this.nbTirages; i++){
            var $line = $('<tr class="line-'+i+'"></tr>');
            $tab.append($line);
            for(var j = 0; j < this.max + 2 /*+2 pour bouton et resultat*/ ; j++){
              if(j == 0){
                // On place le bouton
                var $btn = $('<td><button class="tirage" data-tirage="'+i+'">Tirage ' + i +'</button></td>');
                $line.append($btn);
                if(i != 0){
                  $btn.children('button').attr('disabled', 'disable')
                }
              }else{
                $line.append('<td></td>');
              }
            }
          }
          this.container.append($tab);
        },
        push: function(e){
          var line = $(e.currentTarget).data('tirage');
          var me = this;
          for(var i = 0; i < this.max; i++){
            //0 ou 1? place au tirage
            var nb = this.getRandom();

            this.pictures++;

            if(this.pictures > this.max){
              return;
            }
            this.total += nb;

            var $pict = $('<img/>')
            $pict.attr('src', me.picturesUrl[nb]);
            $( $('.line-'+line).children('td')[i+1] ).append($pict);
            // Ajout du total
            if(this.pictures == this.max){
              $( $('.line-'+line).children('td')[i+2] ).append('<h4>'+me.total+'</h4>');
              $('.line-'+line + ' button').attr('disabled', 'disable');
              me.concatTotal += me.total;
              if(line < me.nbTirages){
                $('.line-'+(line+1) + ' button').removeAttr("disabled");
              }
            }
          }
          this.pictures = 0;
          this.total = 0;
          if(line == me.nbTirages-1){
            var $resultContainer = $('<div class="result"><h2>Résultat:</h2></div>');
            $(me.container).append($resultContainer);
            for(var i = 0; i < me.concatTotal.length; i++){
              var digit = me.concatTotal.charAt(i);
              $resultContainer.append('<span class="resultCell"><img src="'+me.picturesUrl[digit]+'"/><h3>'+digit+'</h3></span>');
            }
            //$(me.container).append('<div class="result">Résultat: ' + me.concatTotal+'</div>');
          }
        },
        getRandom: function(){
          return Math.random() >= 0.5?1:0;
        }
      }
      superGenerator.init();
    </script>
  </body>
</html>
0
Réponse 7 / 7
thiseo Messages postés 17 Date d'inscription   Statut Membre Dernière intervention  
 
Tu es magique, merci beaucoup. La première partie est finie et fonctionnelle, c'est vraiment super, merci à toi.

Je n'ose pas te demander s'il est possible de voir pour la deuxième partie, qui est la partie de l'interprétation. Dans le doute, je vais mettre un fichier en pièce jointe, il n'y a que des formules Excel, cependant, si c'est trop complexe parce que j'avoue que c'est un peu particulier, n'hésite pas.

La particularité de ce fichier, c'est que c'est l'ancienne méthode, la seule différence est :

les 0 sont des 6
les 1 sont des 7
les 2 sont des 8
les 3 sont des 9

Tout le reste est pareil.

Le fichier se trouve ici : https://hubic.com/home/pub/?ruid=aHR0cHM6Ly9sYjEuaHViaWMub3ZoLm5ldC92MS9BVVRIXzA2NTBlMTRlYTUyM2RiZDA4OGEyNWZjYjRkYjNmMTM5L2RlZmF1bHQvLm92aFB1Yi8xMzk5Mzc1MjE4XzE0MDAyMzkyMTg/dGVtcF91cmxfc2lnPTI5ZjZkZGE0NjliNmU5NWMzNTNhZmIzYmRlODgzMTc1MGMzM2NlM2UmdGVtcF91cmxfZXhwaXJlcz0xNDAwMjM5MjE4

Merci mille fois pour ton aide précieuse
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Est-ce que tu veux pouvoir modifier le contenu de ce fichier en tout temps ou est-ce que tout ça est statique et n'évoluera pas ? (juste pour savoir de quelle façon je peux l'intégrer)
0
thiseo Messages postés 17 Date d'inscription   Statut Membre Dernière intervention  
 
seul les textes peuvent évoluer, les chiffres eux resteront 0,1,2, ou 3
De plus, je ne sais pas si on peux prévoir un système d'onglet ou de menu car à finalité, il y aura 3 à 4 fichier textes.
Par exemple, aujourd'hui, je travaille avec 4 fichiers excel comme je t'ai envoyé, seul les textes sont différents
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Dans l'onglet Tableau de ton fichier, les combinaisons ne comportent que des 7 et des 8. Quid des 6 et des 9 ?
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
est-ce qu'on peut passer sur skype à la limite ? la communication via forum devient limite.

Mon pseudo est le même qu'ici si jamais.
0
thiseo Messages postés 17 Date d'inscription   Statut Membre Dernière intervention  
 
Yep, je pense que ce sera plus simple en effet, parce que cette seconde partie, bien que simple, n'est pas facile à expliquer. Je te rajoute sur Skype, mais je suis en formation, tu serais dispo vers 17:30 ? Mon pseudo est aussi identique
0

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
Quel est la touche shift sur le clavier
paoade -
PRIPRI -

8 réponses
Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
Quel pilote pour ACPI\INT33A0 *INT33A0
MrMeeTron -
cheeta -

19 réponses
faire afficher "0" à la place de #N/A
sunray2000 -
Nono -

7 réponses