Décomposition en billets et pièces [Résolu]

Question

Posez votre question Signaler

Décomposition en billets et pièces [Résolu]

jmp365

Messages postés: 21
Date d'inscription: mercredi 6 décembre 2017
Statut: Membre
Dernière intervention: 29 décembre 2017

- 6 déc. 2017 à 20:50 - Dernière réponse : jordane45

Messages postés: 26537
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 20 octobre 2019

- 29 déc. 2017 à 21:28

Javascript / DHTML Posez votre question Signaler

Bonsoir,
j'espère être au bon endroit pour ce post.

Dans le cadre de son TFE, ma fille doit aider des enfants "différents" (handicapés mentaux, autistes, etc.) concernant l'éducation à la santé.
Je suis ne suis pas informaticien, mais j'essaye d'aider ma fille (normalement son établissement scolaire devait lui trouver une école d'informatique pour la partie technique, malheureusement personne n'a été trouvé.
Je me suis mis à la création d'un site internet qui devrait permettre aux enfants de faire virtuellement des achats de produits utilisés pour faire la cuisine. Ils devront choisir des aliments et les envoyer dans un panier. Ce panier sera imprimer afin de se rendre dans les magasins pour y faire les achats.
Mon PROBLEME est le suivant: pour éviter que ces enfants ne se fassent roulés ou ne se trompent, il faudrait qu'une page du site permette de visualiser la décomposition d'un montant en billets et en pièces. Sur excel, pas de problème pour moi, mais je n'arrive pas à intégrer ma feuille de calculs dans une de mes pages Joomla. D'après mes recherches, il faudrait une programmation en javascript, langage que je ne connais malheureusement pas.
Peut être que, parmi vous, certains ont déjà fait ce genre d'exercice.
Si vous pouviez m'aider ou me renvoyer vers des sites, tutoriaux ou autres aides... je suis preneur.
Merci d'avance.
Bonne soirée.

jean-marie

Afficher la suite

A voir également:

9 réponses

Répondre Posez votre question

jordane45 · Answer 1 · 2017-12-06T21:17:08+0100

Bonjour,

je n'arrive pas à intégrer ma feuille de calculs dans une de mes pages Joomla

Ce n'est en effet pas possible.

j'espère être au bon endroit pour ce post.

Ca dépend... Pourquoi vouloir le faire en javascript ? Pourquoi pas en PHP si jamais tu connais un peu ?

Après.. je te dirais que tout dépend comment tu souhaites le présenter et comment ça doit se "passer".
Si tu as "codé" un panier dans joomla (-donc en php...) pourquoi ne pas générer lors de l'affichage du récap de la commande la fameuse "décomposition" ?
Une image par "type" de monnaie (pieces, billets) ...
Un calcul (en php ) pour savoir combien de chaque il faut (ça tu peux le calculer puisque tu l'as déjà fait sous excel visiblement) .. il suffit donc d'appliquer la formule à ton code php.
puis affichage à l'aide de l'instruction php ECHO et de quelques balises HTML ( <img> pour commencer... )

jmp365 · Answer 2 · 2017-12-08T16:13:48+0100

Signaler Commenter la réponse de jmp365

jmp365

Messages postés: 21
Date d'inscription: mercredi 6 décembre 2017
Statut: Membre
Dernière intervention: 29 décembre 2017

Modifié le 8 déc. 2017 à 16:14

0

Merci

bonjour,

j'avais dit javascript, car j'avais lu sur le net que c'était mieux... PHP je ne connais pas vraiment, juste capable d'aller faire qq modification dans un code.
Mon panier a été réalosé avec Hikashop, mais ne comporte pas de prix.... et l'enseignante voudrait pouvoir se servir de cette décomposition indépendamment du reste. J'aime bien ton commentaire... il suffit d'appliquer... et ensuite qq balises HTML... cela à l'air si facile, probablement pour ceux qui connaissent, mais pour moi cela a l'air très compliqué :-)

Merci de ton aide

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 26537
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 20 octobre 2019

316 - 8 déc. 2017 à 20:17

Tu ne sais pas coder en js ...
Tu ne sais pas coder en php ...
Tu n'as pas l'air de vouloir essayer ....

Alors on fait quoi ??

Désolé si ma réponse ne te convient pas mais... ici ... on aide à coder ... on ne fourni pas le travail tout cuit !

De plus..tu n'as pas répondu à la principale question :

Après.. je te dirais que tout dépend comment tu souhaites le présenter et comment ça doit se "passer".

Sans savoir comment fonctionne ton fichier excel actuellement.... ni même comment tu envisagerai le fonctionnement.... il nous sera difficile de te proposer quoi que ce soit.
Et puis.. on ne sait rien du code de ton site ....
A quel endroit se trouve le "montant" à décomposer ? A quel moment veux tu procéder à ce découpage ? Dans quel fichier comptes tu mettre ton code (js ou php...peu importe)...

.

jmp365 · Answer 3 · 2017-12-09T10:42:02+0100

Signaler Commenter la réponse de jmp365

jmp365

Messages postés: 21
Date d'inscription: mercredi 6 décembre 2017
Statut: Membre
Dernière intervention: 29 décembre 2017

9 déc. 2017 à 10:42

0

Merci

Bonjour,

je trouve tes paroles blessantes, je n’ai jamais demandé qu’on me fournisse le code tout fait, mais si tu avais bien lu mon premier post, je demandais de l’aide pour trouver des tutoriaux ou des sites internet sur le sujet.

Tu m’as déjà aidé en me signalant que le PHP était plus approprié.

Pour répondre à tes questions:
- mon site est en Joomla
- la décomposition devrait se trouver dans un article du site
- c’est l’enfant qui devrait introduire le montant, qui sera totalement indépendant du reste du site
- mon fichier Excel comporte une feuille cachée avec les calculs et une feuille visible comportant une cellule ou introduire le montant et des cellules contenant le resultat de la décomposition, chacune de ces cellules sera placée à côté des l’image du billet ou de la pièce correspondante.

Merci de prendre le temps de me lire
Bon week-end

Afficher les 8 commentaires

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 26537
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 20 octobre 2019

316 - 9 déc. 2017 à 12:58

Tu m’as déjà aidé en me signalant que le PHP était plus approprié

Je n'ai pas dit que c'était mieux... j'ai seulement indiqué que ça pouvait être une possibilité si jamais tu avais su coder en php (vu que tu indiquais ne pas connaitre le js...)

c’est l’enfant qui devrait introduire le montant, qui sera totalement indépendant du reste du site

Là on a une info utile.
Donc aucun automatisme lié au panier du site...
Dans ce cas...oui.. le js est sûrement plus simple.

Mais bon... il n'existe pas de tuto qui te permettra de faire cela ...
Il faut apprendre beaucoup de choses .. que ce soit en JS ou en PHP avant d'être capable de le réaliser....

En gros.. ça donnerait ça :

<!DOCTYPE html>
<html lang="fr"
  <head>
    <meta charset="utf-8">
    <title>money is money...</title>
	
  <style>  
    .form-inline{
      display:inline-block;
      padding:8px;
      width:50%;
    }
    
    .argent{
      width:200px;
      height:100px;
      border-width: 1px; 
      border-radius: 10px; 
      border-color: grey;
    }
    .argent img{
      max-width:50%;
      
    }
  </style>
  </head>
  <body>
 
    <div class="form-inline">
      <input type="text" id="montantacalculer">
      <input type="button" value="calculer" onclick="calculerRepartition()">
    </div>
    <div class="affichage">
    
      <div class="argent">
        <img src="billet500.png">
        <span id="nb_500"></span>
      </div>
      <div class="argent">
        <img src="billet200.png">
        <span id="nb_200"></span>
      </div>
      <div class="argent">
        <img src="billet100.png">
        <span id="nb_100"></span>
      </div>
      <div class="argent">
        <img src="billet50.png">
        <span id="nb_50"></span>
      </div>
      <div class="argent">
        <img src="billet10.png">
        <span id="nb_10"></span>
      </div>
    <div class="argent">
        <img src="billet5.png">
        <span id="nb_5"></span>
      </div>
    
    <div class="argent">
        <img src="piece2.png">
        <span id="nb_2"></span>
      </div>
      <div class="argent">
        <img src="piece1.png">
        <span id="nb_1"></span>
      </div>
      <div class="argent">
        <img src="piece50ct.png">
        <span id="nb_0.5"></span>
      </div>
      <div class="argent">
        <img src="piece20ct.png">
        <span id="nb_0.2"></span>
      </div>
      <div class="argent">
        <img src="piece10ct.png">
        <span id="nb_0.1"></span>
      </div>
    </div>
 
    <script type="text/javascript">
      function calculerRepartition(){
        var BreakException = {};
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','10','5','2','1','0.5','0.2','0.1'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var nbValeur = parseInt(calc[0]);
            if(typeof(spanMontant)!='undefined' && spanMontant!=null ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = montantrestant % valArgent;
         return result;
      }
    </script>
  </body>
</html>

=> Tu peux enregistrer le code dans un fichier .html pour le tester.
A toi ensuite d'aller le mettre dans ton article jommla (que je ne connais pas).

Enjoy !

Signaler Commenter la réponse de jmp365

jmp365

Messages postés: 21
Date d'inscription: mercredi 6 décembre 2017
Statut: Membre
Dernière intervention: 29 décembre 2017

- 9 déc. 2017 à 16:51

Ma fille trouve cela génial, elle te dit bien merci.

J'ai une question, je sais que je suis difficile :-) Pour faciliter l'utilisation par ces enfants handicapés, serait-il difficile de modifier ce code pour que seul les billets ou pièces utilisées soient affichés? Si c'est difficile ou trop long à faire, laisse tomber... tu nous as déjà rendu un fameux service.
MERCI ENCORE

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 26537
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 20 octobre 2019

316 - 9 déc. 2017 à 16:58

Il faut jouer avec la propriété de style "display" et ajouter une petite condition dans le code.
Comme ceci :

<!DOCTYPE html>
<html lang="fr"
  <head>
    <meta charset="utf-8">
    <title>money is money...</title>
	
  <style>  
    .form-inline{
      display:inline-block;
      padding:8px;
      width:50%;
    }
    
    .argent{
      width:200px;
      height:100px;
      border-width: 1px; 
      border-radius: 10px; 
      border-color: grey;
      display:none;
    }
    .argent img{
      max-width:50%;
      
    }
  </style>
  </head>
  <body>
 
    <div class="form-inline">
      <input type="text" id="montantacalculer">
      <input type="button" value="calculer" onclick="calculerRepartition()">
    </div>
    <div class="affichage">
    
      <div class="argent">
        <img src="billet500.png">
        <span id="nb_500"></span>
      </div>
      <div class="argent">
        <img src="billet200.png">
        <span id="nb_200"></span>
      </div>
      <div class="argent">
        <img src="billet100.png">
        <span id="nb_100"></span>
      </div>
      <div class="argent">
        <img src="billet50.png">
        <span id="nb_50"></span>
      </div>
      <div class="argent">
        <img src="billet20.png">
        <span id="nb_20"></span>
      </div>
      <div class="argent">
        <img src="billet10.png">
        <span id="nb_10"></span>
      </div>
    <div class="argent">
        <img src="billet5.png">
        <span id="nb_5"></span>
      </div>
    
    <div class="argent">
        <img src="piece2.png">
        <span id="nb_2"></span>
      </div>
      <div class="argent">
        <img src="piece1.png">
        <span id="nb_1"></span>
      </div>
      <div class="argent">
        <img src="piece50ct.png">
        <span id="nb_0.5"></span>
      </div>
      <div class="argent">
        <img src="piece20ct.png">
        <span id="nb_0.2"></span>
      </div>
      <div class="argent">
        <img src="piece10ct.png">
        <span id="nb_0.1"></span>
      </div>
    </div>
 
    <script type="text/javascript">
      function calculerRepartition(){
        var BreakException = {};
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','20','10','5','2','1','0.5','0.2','0.1'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var nbValeur = parseInt(calc[0]);
            if(typeof(spanMontant)!='undefined' && spanMontant!=null && nbValeur ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              if(nbValeur>0){
                spanMontant.parentElement.style.display='block';
              }
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = montantrestant % valArgent;
         return result;
      }
    </script>
  </body>
</html>

Bien entendu, pour les images .. tu mets ce que tu veux.
le "src" que j'ai utilisé c'était pour que tu saches bien à quoi ça correpondait...

Signaler Commenter la réponse de jmp365

jmp365

Messages postés: 21
Date d'inscription: mercredi 6 décembre 2017
Statut: Membre
Dernière intervention: 29 décembre 2017

> jordane45

Messages postés: 26537
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 20 octobre 2019

- 12 déc. 2017 à 09:21

merci je viens de voir ta réponse... merci pour les enfants

Signaler Commenter la réponse de jmp365

jmp365

Messages postés: 21
Date d'inscription: mercredi 6 décembre 2017
Statut: Membre
Dernière intervention: 29 décembre 2017

> jordane45

Messages postés: 26537
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 20 octobre 2019

- 12 déc. 2017 à 09:36

bonjour, tu n'as pas pu regarder pour les erreurs dans les calculs? Je viens de faire un essai avec le nouveau code... 9.47 entré et ici j'obtiens 1x5 + 2x2 + 2x0.2 + 1x0.05 + 1x0.02 + 6x0.01 = 9.53 bizarre

Signaler Commenter la réponse de jmp365

jmp365

Messages postés: 21
Date d'inscription: mercredi 6 décembre 2017
Statut: Membre
Dernière intervention: 29 décembre 2017

- Modifié le 9 déc. 2017 à 17:32

Oups!! Un petit bug... certaines décompositions ne sont pas justes, peut être une question d'arrondi???
Voici le code que j'ai modifié

<!DOCTYPE html>
<html lang="fr"
  <head>
    <meta charset="utf-8">
    <title>money is money...</title>
 
  <style>  
    .form-inline{
      display:inline-block;
      padding:8px;
      width:50%;
    }
    
    .argent{
      width:200px;
      height:100px;
      border-width: 1px; 
      border-radius: 10px; 
      border-color: grey;
    }
    .argent img{
      max-width:50%;
      
    }
  </style>
  </head>
  <body>
 
    <div class="form-inline">
      <input type="text" id="montantacalculer">
      <input type="button" value="calculer" onclick="calculerRepartition()">
    </div>
    <div class="affichage">
    
      <div class="argent">
        <img src="billet500.png">
        <span id="nb_500"></span>
      </div>
      <div class="argent">
        <img src="billet200.png">
        <span id="nb_200"></span>
      </div>
      <div class="argent">
        <img src="billet100.png">
        <span id="nb_100"></span>
      </div>
      <div class="argent">
        <img src="billet50.png">
        <span id="nb_50"></span>
      </div>
   <div class="argent">
  <img src="billet20.png">
  <span id="nb_20"></span>
  </div> 
      <div class="argent">
        <img src="billet10.png">
        <span id="nb_10"></span>
      </div>
    <div class="argent">
        <img src="billet5.png">
        <span id="nb_5"></span>
      </div>
    
    <div class="argent">
        <img src="piece2.png">
        <span id="nb_2"></span>
      </div>
      <div class="argent">
        <img src="piece1.png">
        <span id="nb_1"></span>
      </div>
      <div class="argent">
        <img src="piece50ct.png">
        <span id="nb_0.5"></span>
      </div>
      <div class="argent">
        <img src="piece20ct.png">
        <span id="nb_0.2"></span>
      </div>
      <div class="argent">
        <img src="piece10ct.png">
        <span id="nb_0.1"></span>
      </div>
   <div class="argent">
  <img src="piece5ct.png">
  <span id="nb_0.05"></span>
    </div>
   <div class="argent">
  <img src="piece2ct.png">
  <span id="nb_0.02"></span>
 </div> 
    <div class="argent">
  <img src="piece1ct.png">
  <span id="nb_0.01"></span>
 </div>
    <script type="text/javascript">
      function calculerRepartition(){
        var BreakException = {};
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','20','10','5','2','1','0.5','0.2','0.1','0.05','0.02','0.01'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var nbValeur = parseInt(calc[0]);
            if(typeof(spanMontant)!='undefined' && spanMontant!=null ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = montantrestant % valArgent;
         return result;
      }
    </script>
  </body>
</html>

EDIT : Ajout du LANGAGE dans les balises de code (la coloration syntaxique).

Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.
Jordane45

J'ai rajouté le billet de 20 et les pièces rouges 5 ct, 2 ct et 1 ct qui sont tjs utilisées en Belgique.
Je viens de décomposer 9.47 € et j'obtiens 1x5 + 2x2 + 2x0.2 + 1x0.02 + 6x0.01 = 9.48 €
Et pourquoi 6x0.01???
C'est bizarre... si tu peux m'éclairer... merci

@karamel · Answer 4 · 2017-12-09T11:25:44+0100

Signaler Commenter la réponse de @karamel

@karamel

Messages postés: 1717
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 15 octobre 2019

47 9 déc. 2017 à 11:25

0

Merci

bonjour

pour simplifier il faut reproduire,retranscrire la méthode de calcule d'excel il faut donc comprendre comment fonctionne le calcule sur exel

Signaler Commenter la réponse de jmp365

jmp365

Messages postés: 21
Date d'inscription: mercredi 6 décembre 2017
Statut: Membre
Dernière intervention: 29 décembre 2017

- 9 déc. 2017 à 12:20

Le calcul sur Excel est assez simple il ne fait appel qu’a des divisions, soustractions ainsi que la fonction ENT (entier) et MOD (reste d’une division)

jmp365 · Answer 5 · 2017-12-16T14:45:33+0100

Bonjour, certains vont peut être trouver que je ne suis jamais content, car après avoir reçu généreusement, de Jordane45, le codage de mon problème, je reviens encore vers vous pour deux bugs.
J'ai essayé de comprendre le code fourni, pour essayer de faire les corrections moi-même, mais je dois me rendre à l'évidence: je n'ai pas les compétences pour y arriver, dommage.

Le premier bug est un problème de calculs, si on teste par exemple 9.47€ on aura 1x5 + 2x2 +2x0.2 + 1x0.05 + 1x0.02 + 6x0.01 ce qui fait 9.53 €… je me demande si ce n’est pas une question d’arrondis multiples dans les calculs vu qu’il y a l’utilisation de boucle ??
http://tfe.clic-nature.com/index.php/euros

Le second problème concerne la fin du calcul, si on reste sur la page et qu’on réintroduit un nouveau montant, on a parfois des résultats aberrants, comme si certains résultats étaient conservés. Fermer la page et la rouvrir corrige ce problème.
Sur les 9.47 de l’exemple précédent, je change le 9.47 en 12.39 après avoir fait calculer, j’obtiens 1x10 + 1x5 +1x2 +1x0.2 + 1x0.1 + 1x0.05 + 2x0.02 + 5x0.01 = 17.42 ????

le code se trouve dans le message 13 ci-dessus.

Merci d'avance.

Bon week-end

jordane45 · Answer 6 · 2017-12-16T16:42:34+0100

Tout est là :


      function calculerRepartition(){
        //on commence par tout réinitialiser
        reinit();
        var BreakException = {};
        var totalCalcul = 0;
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','20','10','5','2','1','0.5','0.2','0.1'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            //console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var nbValeur = parseInt(calc[0]);
            
            if(typeof(spanMontant)!='undefined' && spanMontant!=null && nbValeur ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              totalCalcul += nbValeur*montant;
              if(nbValeur>0){
                spanMontant.parentElement.style.display='block';
              }
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
              
              //si on a atteint le montant à calculer
              if(totalCalcul == montantacalculer){
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = arrondiauDizieme((parseFloat(montantrestant) - parseInt(result[0])*valArgent));
         return result;
      }
      
      function reinit(){
        //on récupère toutes les div 'argent'
        var x = document.getElementsByClassName("argent");
        if(typeof(x)!='undefined' && x !=null){
          for (var i = 0; i < x.length; i ++) {
            //on masque les div
            x[i].style.display = 'none';
            //on remet les compteurs à zéro
            var spa = x[i].getElementsByTagName('span');
            spa.innerHTML = "";
          } 
        }else{
           alert('Aucune DIV ne comporte la class "argent"');
        }  
      }
      
      function arrondiauDizieme(nombre){
        return Math.round(10*nombre)/10;
      }

C'était en effet un pb d'arrondi;

J'ai aussi ajouté la réinitialisation .

Cordialement,
Jordane

jmp365 · Answer 7 · 2017-12-16T16:55:08+0100

Signaler Commenter la réponse de jmp365

jmp365

Messages postés: 21
Date d'inscription: mercredi 6 décembre 2017
Statut: Membre
Dernière intervention: 29 décembre 2017

Modifié le 16 déc. 2017 à 17:00

0

Merci

merci beaucoup pour ta correction, mais est-ce normal que lorsque j'essaye 85.39 € j'ai comme décomposition en billet et pièce pour un total de 85.40 € ?
Pour 7.47€ j'ai 7.50 € : 1x5 + 1x2 + 1x0.5
Je suis désolé de chicaner, mais pour les enfants ce n'est pas possible d'avoir de telles différences.
Il arrondi au dixième et pas au centième d'euros

J'ai essayé en modifiant arrondirauDizieme par arrondirauCentieme mais cela ne corrige rien :-)

Encore merci pour tout ce que tu as fait pour moi et surtout pour eux.

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 26537
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 20 octobre 2019

316 - 16 déc. 2017 à 17:12

Petite erreur...
Il suffit de changer cette fonction

function arrondiauDizieme(nombre){
        return Math.round(10*nombre)/10;
      }

Par exemple

function arrondiauCentieme(nombre){
        return Math.round(100*nombre)/100;
      }

et bien entendu, modifié son appel dans le code :

 function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = arrondiauCentieme((parseFloat(montantrestant) - parseInt(result[0])*valArgent));
         return result;
      }

Enfin bon.. sans vouloir être trop désagréable... tu aurais pu trouver par toi même si tu avais lu le code un minimum...
Mais bon....

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 26537
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 20 octobre 2019

316 - 16 déc. 2017 à 17:12

J'espère que cette fois ça sera bon.
Bonne soirée.

jmp365 · Answer 8 · 2017-12-28T16:51:25+0100

Signaler Commenter la réponse de jmp365

jmp365

Messages postés: 21
Date d'inscription: mercredi 6 décembre 2017
Statut: Membre
Dernière intervention: 29 décembre 2017

28 déc. 2017 à 16:51

0

Merci

bonjour, le programme a été testé par les enfants, pour une grande partie de ceux-ci cela fonctionne bien. Par contre pour les enfants les plus déficients, ils ont des problème avec le nombre de billets ou de pièces... ils ne savent pas lire les nombres... serait-il possible (je pense que oui, j'ai fait pas mal d'essais, mais je n'arrive pas) d'afficher l'ensemble des images pour faire le montant. Si je m'exprime mal: par exemple s'il y a 2*20 € voir deux billets de 20€... plutôt qu'un billet et à coté 2*20 etc.
Merci et désolé d'encore vous solliciter.
Bonne soirée.

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 26537
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 20 octobre 2019

316 - 28 déc. 2017 à 17:57

Ca demande quelques évolutions dans le code...
La première chose à voir c'est :
As tu une image différentes pour chaque cas ( une image avec 2billets de 20 ... une image avec 3 billets de 10...) ou veux tu juste avoir (côte à côte) x fois la même image qui se répète ?

Ensuite.... par ce que bon.. à l'origine c'est comme ça que ça marche sur ce forum ... montre nous ce que tu as essayé de faire et indique nous sur quoi tu bloques....

Pour t'aider, je pense que les DIV "argent" devront être modifiées de la sorte :

<div class="argent">
        <div id="images_0.1"></div>
        <span id="nb_0.1"></span>
      </div>

La

 <div id="images_0.1"></div>

servira de "container" pour y placer la/les image(s) correspondantes.

En gros.. dans le JS, il faudra (au même endroit que là où on écrit le "nombre" d'argent (pièce/billet.) ajouter un bout de code qui crééra des balises IMG dans ce container

par exemple (juste pour illustrer) :

document.getElementById("images_0.1").innerHTML = "<img src='tonimage'>";

Signaler Commenter la réponse de jmp365

jmp365

Messages postés: 21
Date d'inscription: mercredi 6 décembre 2017
Statut: Membre
Dernière intervention: 29 décembre 2017

- Modifié le 28 déc. 2017 à 18:48

je n'aurais pas une image différente pour chaque cas, mais avoir cote à cote x fois la même image.

J'ai tellement trituré le code que j'ai tout jeté... mais à voir ce que tu à mis comme code, j'étais très loin de là... il faut que tu saches que je dois, pour chaque commande écrit dans ton code, aller sur le net pour essayer de comprendre ce que cela veut dire et surtout ce que cela fait... quand je modifie une ligne ou une partie de ligne je regarde ce que j'ai réussi à modifier...
Je vais essayer de comprendre les 6 lignes que tu viens de publier.
Pour ne pas que tu crois que je ne fais rien et que j'attends patiemment que la solution tombe toute seule, va voir ce que j'ai fait ces dernières semaines pour essayer d'aider ces enfants...
www.tfe.clic-nature.com
Merci bcp et bonne soirée.

jordane45 · Answer 9 · 2017-12-28T19:18:07+0100

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 26537
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 20 octobre 2019

316 28 déc. 2017 à 19:18

0

Merci

Ceci devrait faire l'affaire :

<!DOCTYPE html>
<html lang="fr"
  <head>
    <meta charset="utf-8">
    <title>money is money...</title>
	
  <style>  
    .form-inline{
      display:inline-block;
      padding:8px;
      width:50%;
    }
    
    .argent{
      width:200px;
      height:100px;
      border-width: 1px; 
      border-radius: 10px; 
      border-color: grey;
      display:none;
    }
    .argent .divimg{
      max-width:80%
    }
    .argent .divimg .img{
      max-width:50px;
      
    }
  </style>
  </head>
  <body>
 
    <div class="form-inline">
      <input type="text" id="montantacalculer">
      <input type="button" value="calculer" onclick="calculerRepartition()">
    </div>
    <div class="affichage">
    
      <div class="argent">
        <div id="img_500" class="divimg"></div>
        <span id="nb_500"></span>
      </div>
      <div class="argent">
        <div id="img_200" class="divimg"></div>
        <span id="nb_200"></span>
      </div>
      <div class="argent">
        <div id="img_100" class="divimg"></div>
        <span id="nb_100"></span>
      </div>
      <div class="argent">
        <div id="img_50" class="divimg"></div>
        <span id="nb_50"></span>
      </div>
      <div class="argent">
        <div id="img_20" class="divimg"></div>
        <span id="nb_20"></span>
      </div>
      <div class="argent">
        <div id="img_10" class="divimg"></div>
        <span id="nb_10"></span>
      </div>
    <div class="argent">
        <div id="img_5" class="divimg"></div>
        <span id="nb_5"></span>
      </div>
    
    <div class="argent">
        <div id="img_2" class="divimg"></div>
        <span id="nb_2"></span>
      </div>
      <div class="argent">
        <div id="img_1" class="divimg"></div>
        <span id="nb_1"></span>
      </div>
      <div class="argent">
        <div id="img_0.5" class="divimg"></div>
        <span id="nb_0.5"></span>
      </div>
      <div class="argent">
        <div id="img_0.2" class="divimg"></div>
        <span id="nb_0.2"></span>
      </div>
      <div class="argent">
        <div id="img_0.1" class="divimg"></div>
        <span id="nb_0.1"></span>
      </div>
    </div>
 
    <script type="text/javascript">
        function calculerRepartition(){
        //on commence par tout réinitialiser
        reinit();
        var BreakException = {};
        var totalCalcul = 0;
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','20','10','5','2','1','0.5','0.2','0.1'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            //console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var id_div_image = "img_"+montant;
            var divImg = document.getElementById(id_div_image);
            var nbValeur = parseInt(calc[0]);
            
            if(typeof(spanMontant)!='undefined' && spanMontant!=null && nbValeur ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              divImg.innerHTML = addImg(nbValeur,montant);
              totalCalcul += nbValeur*montant;
              if(nbValeur>0){
                spanMontant.parentElement.style.display='block';
              }
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
              
              //si on a atteint le montant à calculer
              if(totalCalcul == montantacalculer){
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = arrondiauCentieme((parseFloat(montantrestant) - parseInt(result[0])*valArgent));
         return result;
      }
      
      function arrondiauCentieme(nombre){
        return Math.round(100*nombre)/100;
      }
      
      
      function reinit(){
        //on récupère toutes les div 'argent'
        var x = document.getElementsByClassName("argent");
        if(typeof(x)!='undefined' && x !=null){
          for (var i = 0; i < x.length; i ++) {
            //on masque les div
            x[i].style.display = 'none';
            //on remet les compteurs à zéro
            var spa = x[i].getElementsByTagName('span');
            spa.innerHTML = "";
          } 
        }else{
           alert('Aucune DIV ne comporte la class "argent"');
        }  
      }
      
     
     //génère X balises img
     function addImg(nbImgToAdd,valeurArgent){
        var retour = "";
        for(var i=1;i<=nbImgToAdd;i++){
          retour += createImg('img_' + valeurArgent);
        }
        return retour;    
     }
     
     //génère le html d'une balise IMG
     // les images seront nommées img_100.png  img_0.2.img ..etc...
     function createImg(idImg){
       return "<img src='"+idImg+".png'></img>";
     }

      
     
     
    </script>
  </body>
</html>

NB : Tu dois renommer les images de tes billets et pièces sous la forme :
img_valeur.png
Par exemple : pour le billet de 500 : img_500.png
pour la pièce de 10ct : img_0.1.png
etc...

Afficher les 16 commentaires

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 26537
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 20 octobre 2019

316 - 28 déc. 2017 à 19:43

manque peut-être une info-bulle sur les icones du menu pour expliquer à quoi ça sert...
Tu peux utiliser un plugin jquery pour ça (pour faire du tooltip) (il en existe plein sur le net) ou sinon avec quelques lignes de javascript ...

Par exemple (sur le bouton)

<!DOCTYPE html>
<html lang="fr"
  <head>
    <meta charset="utf-8">
    <title>money is money...</title>
	
  <style>  
    .form-inline{
      display:inline-block;
      padding:8px;
      width:50%;
      margin-bottom:40px;
    }
    
    .argent{
      width:200px;
      height:100px;
      border-width: 1px; 
      border-radius: 10px; 
      border-color: grey;
      display:none;
    }
    .argent .divimg{
      max-width:80%
    }
    .argent .divimg .img{
      max-width:50px;
      
    }

    /*---------------------------------*/
    /* Pour faire un tooltip */
    /*---------------------------------*/
    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover + .tooltiptext {
        visibility: visible;
        opacity: 1;
    }     
    /* Tooltip text */
    .tooltip + .tooltiptext {
        visibility: hidden;
        width: 140px;
        background-color:  #1a1917 ;
        color: #fff;
        text-align: center;
        padding: 8px;
        border-radius: 6px;

        /* Position the tooltip text */
        position: absolute;
        z-index: 10;
        //bottom: 125%;
        //left: 50%;
       // margin-left: -60px;

        /* Fade in tooltip */
        opacity: 0;
        transition: opacity 1s;
    }

    /* Tooltip arrow */
    .tooltip + .tooltiptext::before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid black;
        left: -8px;
        top: 7px;
    }
    /*---------------------------------*/
  </style>
  </head>
  <body>
 
    <div class="form-inline">
      <input type="text" id="montantacalculer">
      <input type="button" value="calculer" onclick="calculerRepartition()"  class="tooltip">
      <span class="tooltiptext"> 
        Cliquez ici vous rendra moins riche.. :-)
      </span>
    </div>
    <div class="affichage">
    
      <div class="argent">
        <div id="img_500" class="divimg"></div>
        <span id="nb_500"></span>
      </div>
      <div class="argent">
        <div id="img_200" class="divimg"></div>
        <span id="nb_200"></span>
      </div>
      <div class="argent">
        <div id="img_100" class="divimg"></div>
        <span id="nb_100"></span>
      </div>
      <div class="argent">
        <div id="img_50" class="divimg"></div>
        <span id="nb_50"></span>
      </div>
      <div class="argent">
        <div id="img_20" class="divimg"></div>
        <span id="nb_20"></span>
      </div>
      <div class="argent">
        <div id="img_10" class="divimg"></div>
        <span id="nb_10"></span>
      </div>
    <div class="argent">
        <div id="img_5" class="divimg"></div>
        <span id="nb_5"></span>
      </div>
    
    <div class="argent">
        <div id="img_2" class="divimg"></div>
        <span id="nb_2"></span>
      </div>
      <div class="argent">
        <div id="img_1" class="divimg"></div>
        <span id="nb_1"></span>
      </div>
      <div class="argent">
        <div id="img_0.5" class="divimg"></div>
        <span id="nb_0.5"></span>
      </div>
      <div class="argent">
        <div id="img_0.2" class="divimg"></div>
        <span id="nb_0.2"></span>
      </div>
      <div class="argent">
        <div id="img_0.1" class="divimg"></div>
        <span id="nb_0.1"></span>
      </div>
    </div>
 
    <script type="text/javascript">
        function calculerRepartition(){
        //on commence par tout réinitialiser
        reinit();
        var BreakException = {};
        var totalCalcul = 0;
        var montantacalculer = parseFloat(document.getElementById('montantacalculer').value);
        var a = ['500','200','100','50','20','10','5','2','1','0.5','0.2','0.1'];
        try {
          a.forEach(function(montant) {
            var calc = divrest(montant,montantacalculer);
            //console.log(montant + "->>" + calc[0] + ' reste:'+ calc[1]);
            var id_span_ou_ecrire = 'nb_'+montant;
            var spanMontant = document.getElementById(id_span_ou_ecrire);
            var id_div_image = "img_"+montant;
            var divImg = document.getElementById(id_div_image);
            var nbValeur = parseInt(calc[0]);
            
            if(typeof(spanMontant)!='undefined' && spanMontant!=null && nbValeur ){
              spanMontant.innerHTML = nbValeur + "* " + montant;
              divImg.innerHTML = addImg(nbValeur,montant);
              totalCalcul += nbValeur*montant;
              if(nbValeur>0){
                spanMontant.parentElement.style.display='block';
              }
              //si il y a un reste
              if(calc[1] > 0){
                montantacalculer = calc[1];
              }else{
                throw BreakException;
              }
              
              //si on a atteint le montant à calculer
              if(totalCalcul == montantacalculer){
                throw BreakException;
              }
            }
          });        
        } catch (e) {
          //pour sortir de la boucle
          if (e !== BreakException) throw e;
        }
      }
  
      function divrest(valArgent,montantrestant){
         var result=[];
         result[0] = montantrestant / valArgent;
         result[1] = arrondiauCentieme((parseFloat(montantrestant) - parseInt(result[0])*valArgent));
         return result;
      }
      
      function arrondiauCentieme(nombre){
        return Math.round(100*nombre)/100;
      }
      
      
      function reinit(){
        //on récupère toutes les div 'argent'
        var x = document.getElementsByClassName("argent");
        if(typeof(x)!='undefined' && x !=null){
          for (var i = 0; i < x.length; i ++) {
            //on masque les div
            x[i].style.display = 'none';
            //on remet les compteurs à zéro
            var spa = x[i].getElementsByTagName('span');
            spa.innerHTML = "";
          } 
        }else{
           alert('Aucune DIV ne comporte la class "argent"');
        }  
      }
      
     
     //génère X balises img
     function addImg(nbImgToAdd,valeurArgent){
        var retour = "";
        for(var i=1;i<=nbImgToAdd;i++){
          retour += createImg('img_' + valeurArgent);
        }
        return retour;    
     }
     
     //génère le html d'une balise IMG
     // les images seront nommées img_100.png  img_0.2.img ..etc...
     function createImg(idImg){
       return "<img src='"+idImg+".png'></img>";
     }

      
     
     
    </script>
  </body>
</html>

Signaler Commenter la réponse de jmp365

jmp365

Messages postés: 21
Date d'inscription: mercredi 6 décembre 2017
Statut: Membre
Dernière intervention: 29 décembre 2017

- 29 déc. 2017 à 17:57

oui absolument

Signaler Commenter la réponse de jmp365

jmp365

Messages postés: 21
Date d'inscription: mercredi 6 décembre 2017
Statut: Membre
Dernière intervention: 29 décembre 2017

- 29 déc. 2017 à 18:14

et si je teste par http://tfe.clic-nature.com/images/billets/img_2.png
l'image s'affiche ???

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 26537
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 20 octobre 2019

316 - 29 déc. 2017 à 20:24

Comme ceci :

//génère le html d'une balise IMG
// les images seront nommées img_100.png img_0.2.img ..etc...
function createImg(idImg){
return "<img src='../images/billets/"+idImg+".png'></img>";
}

NB : Au fait ...pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

Signaler Commenter la réponse de jmp365

jmp365 - 29 déc. 2017 à 21:07

Merci, cela fonctionne maintenant.

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 26537
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 20 octobre 2019

316 - 29 déc. 2017 à 21:28

Pense à mettre le sujet en résolu.
(icone de roue crantée en haut de ton sujet)

Décomposition en billets et pièces [Résolu]

Explications disponibles ici :ICI

Votre réponse