Mettre mes réponse dans un tableau

Fermé

Utilisateur anonyme - Modifié par KX le 20/11/2016 à 15:51
hebusdetroy - 24 nov. 2016 à 04:46

Bonjour, je souhaiterai mettre les réponses de l'utilisateur de ma fonction dans un tableau est mettre une couleur verte dans la case si c'est une bonne réponse et rouge si mauvaise réponse

mon HTML

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="style.css" />
 <script type="text/javascript" src="version2.js" > </script>
 <title>Calul pour CP avec résultats </title>
</head>

<body>
 <h1>Je sais caluler en CP </h1>
  <p>Dans ce programme  informatiques,  je vous propose d'additionner et de soustraire different nombres compris entre 0 et 30.
           Afin de mieux réviser les calculs il  est préférable d'utiliser ce programme pédagogique. Et de verifier votre résultats.</br>
          </p>
    <h2>Les Sommes</h2>
    <img width="350" height="12" src="plus.jpg"/></br>
 
    <input type="button" value="Cliquer pour faire une addition!" onClick="somme()"></br>

 
<h2>Les soustractions </h2>
    <img width="350" height="45" src="moins.jpg"/></br>
 
    <input type="button" value="Cliquer pour faire une soustraction!" onClick="soustraction()">
 
 <table border: 1px solid black;
 <tr>
 <table border="1" align="center" cellspacing="10px" style="background-color:grey">
  <td style="background-color:green">Vrai</td>
    <td>réponse </td>
    <td>réponse</td>
 <td>réponse</td>
 <td>réponse</td>
 <td>réponse</td>
 <td>réponse</td>
 <td>réponse</td>
 <td>réponse</td>
 <td> réponse </td>
 <td> réponse </td>
 <td> réponse </td>
 
 
 
  </tr>
  <tr>
  <td style="background-color:red">Faux</td>
    <td>X</td>
    <td>Réponse</td>
 <td> réponse</td>
 <td>réponse</td>
 <td>réponse</td>
 <td>réponse</td>
 <td> réponse </td>
 <td>réponse</td>
 <td>réponse</td>
 <td>réponse</td>
 <td> réponse </td>
 </tr>
 </table>
 
</body>
</html>

Mon Javascript

alert("Bienvenue !");   

function composanteAlea() {    // fonction nb hasard
    return Math.floor(Math.random()*31);
}

function somme() {          //fonction somme
 for(i=0; i<10;i=i+1) {     //boucle
 var nb1=composanteAlea();     // deux nb au hasard
 var nb2=composanteAlea();

 var resultat=parseFloat(prompt("Donner le résultat de "+nb1+" + "+nb2+" ?"));    

   if (nb1+nb2 == resultat) {     //resultat gagné, perdu 
   resultat = "Gagné";
   }
   else {
   resultat = "Perdu";
   }
alert(resultat); 
}
}



function composanteAlea() {     // fonction nb hasard
    return Math.floor(Math.random()*31);
}

function soustraction() {
 for(i=0; i<10;i=i+1) {   //boucle
 var nb1=composanteAlea();    // nombre au hasard
 var nb2=composanteAlea();
 if (nb1>nb2) {        //resultat gagné, perdu 
 var resultat=parseFloat(prompt("Donner le résultat de "+nb1+" - "+nb2+" ?"));
 if (nb1-nb2 == resultat) {
  resultat = "Gagné";
 }
 else {
  resultat = "Perdu";
 }
 alert(resultat);
 }
 
 else {
 var resultat=parseFloat(prompt("Donner le résultat de "+nb2+" - "+nb1+" ?"));
 if (nb2-nb1 == resultat) {
  resultat = "Gagné";
 }
 else {
  resultat = "Perdu";
 }
 alert(resultat);
 }
}
}

Mon CSS

/* Style CSS
   ---------


*/
body{
 
 font-family:cursive ;
 background-color: Gainsboro;
}

h1{
 font-size: 24px;
 color:Crimson;
 margin:20px;
 padding:10px;
 font-weight:bold;
 text-align:center;
 border-color:Crimson;
 border-style:dotted;
 border-width:5px;
 background-color:white;
 opacity:0.5;
}
img {
    margin : 10px;
    padding : 5px;
    height : 338px;
 border-width : 5px;
 border-style : dotted;
 border-color :Tan ;
 border-radius : 10px; 
 margin-left: auto;
    margin-right: auto;
}

voila merci

A voir également:

Mettre mes réponse dans un tableau
Tableau croisé dynamique - Guide
Tableau ascii - Guide
Thunderbird réponse automatique - Guide
Réponse automatique outlook - Guide
Tableau word - Guide

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
20 nov. 2016 à 17:14

Bonjour,

Tes éléments HTML (tes tableaux, les celulles qu'ils contiennent....etc....) ne contiennent aucune donnée permettant de facilement les identifier (tels que des ID par exemple)).

Nous ne savons pas non plus ce que tu désires mettre ni à quel endroit exactement ni même à quel moment !

Donc je t'invite à :
1 - structurer tes éléments html avec des ID
2 - Nous indiquer ce que tu désires inscrire... à quel endroit .. et à quel moment de ton script.

Réponse 2 / 4

codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
Modifié par codeurh24 le 20/11/2016 à 18:04

Bonsoir,

j'ai améliorer la fonction d'addition qui affiche a la fin les résultats dans un tableau. j'ai presque pas touché au code a part avoir rajouté du jquery.

il y avait une grosse erreur html au niveau de la balise table.

Attantion, tu utilise du javascript. C'est très éphémère comme affichage.
Si tu appuis sur la touche F5 ou que tu quitte la page, tu perd tout.

html

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Calul pour CP avec résultats </title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  <link rel="stylesheet" href="style.css" />
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  <script type="text/javascript" src="version2.js" >
  </script>
 </head>
 <body>
  <h1>Je sais caluler en CP </h1>
  <p>
   Dans ce programme  informatiques,  je vous propose d'additionner et de soustraire different nombres compris entre 0 et 30.Afin de mieux réviser les calculs il  est préférable d'utiliser ce programme pédagogique. Et de verifier votre résultats.
   </br>
  </p>
  <h2>Les Sommes</h2>
  <img width="350" height="12" src="plus.jpg"/>
  </br>
  <input type="button" value="Cliquer pour faire une addition!" onClick="somme()" />
  </br>
  <h2>Les soustractions </h2>
  <img width="350" height="45" src="moins.jpg"/>
  </br>
  <input type="button" value="Cliquer pour faire une soustraction!" onClick="soustraction()" />
  <table id="resultat" border="1" align="center" cellspacing="10px" style="background-color:grey">
   <tr>
   </tr>
  </table>
 </body>
</html>

alert("Bienvenue !");   

function composanteAlea() {    // fonction nb hasard
    return Math.floor(Math.random()*31);
}

function somme() {          //fonction somme
 for(i=0; i<10;i=i+1) {     //boucle
  var nb1=composanteAlea();     // deux nb au hasard
  var nb2=composanteAlea();

  var resultat=parseFloat(prompt("Donner le résultat de "+nb1+" + "+nb2+" ?"));    

  if (nb1+nb2 == resultat) {     //resultat gagné, perdu 
   info = "Gagné";
   $( "#resultat tr:eq(0)" ).append( '<td class="win">'+nb1+'+'+nb2+'='+resultat+'</td>' );
  }
  else {
   info = "Perdu";
   $( "#resultat tr:eq(0)" ).append( '<td class="fail">'+nb1+'+'+nb2+'='+resultat+'</td>' );
  }
  alert(info); 
 }
 $( "#resultat" ).css( 'display', 'table' );
}



function soustraction() {
 for(i=0; i<10;i=i+1) {   //boucle
 var nb1=composanteAlea();    // nombre au hasard
 var nb2=composanteAlea();
 if (nb1>nb2) {        //resultat gagné, perdu 
 var resultat=parseFloat(prompt("Donner le résultat de "+nb1+" - "+nb2+" ?"));
 if (nb1-nb2 == resultat) {
  resultat = "Gagné";
 }
 else {
  resultat = "Perdu";
 }
 alert(resultat);
 }else {
 var resultat=parseFloat(prompt("Donner le résultat de "+nb2+" - "+nb1+" ?"));
 if (nb2-nb1 == resultat) {
  resultat = "Gagné";
 }
 else {
  resultat = "Perdu";
 }
 alert(resultat);
 }
}
}

css



body{
 
 font-family:cursive ;
 background-color: Gainsboro;
}

h1{
 font-size: 24px;
 color:Crimson;
 margin:20px;
 padding:10px;
 font-weight:bold;
 text-align:center;
 border-color:Crimson;
 border-style:dotted;
 border-width:5px;
 background-color:white;
 opacity:0.5;
}
img {
    margin : 10px;
    padding : 5px;
    height : 338px;
 border-width : 5px;
 border-style : dotted;
 border-color :Tan ;
 border-radius : 10px; 
 margin-left: auto;
    margin-right: auto;
}

#resultat{
	display: none;
}

.win{
	background-color:green;
}

.fail{
	background-color:red;
}

Utilisateur anonyme
Modifié par victord62 le 21/11/2016 à 18:49

Merci beaucoup codeur h 24 mais votre programme fonctionne avec un lien avec internet et cela ne me plait pas je cite " "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">" . De plus la couleur ne s'affiche pas si bonne ou mauvais réponse et fonctionne avec un lien internet pourriez vous recommencez svp sans utiliser des pages internet en plus merci bien. Cela est pour l'école

codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
Modifié par codeurh24 le 21/11/2016 à 22:04

il suffit de télécharger le fichier jquery. Tout le monde connait jquery, il y a donc aucun danger. Puis ce fichier css je l'ai juste ajouté avant même d'en avoir besoin. il est donc inutile pour cette version.
Le jquery c'est fait pour ce simplifier la vie donc je ne recommencerai pas sans jquery surtout qu'une fois les 10 additions finis, un tableau s'affiche en bas de page avec des couleurs vertes ou rouges et son opération.
C'est comme ça que ça fonctionne vue qu'on est limité au niveau du code par des boucles js qui bloque l'affichage html.
Je veux bien m'amuser a donner des solutions toute faite mais faut pas oublier que, je ne suis pas censé faire ce genre de chose.
Bonne chance pour la suite.

codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
21 nov. 2016 à 22:09

https://1fichier.com/?kj1jd0von8

codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
Modifié par codeurh24 le 21/11/2016 à 22:15

et là http://essais.lionzone.fr/calcul/
la version complètement modifiée et améliorée mais pas fini

Réponse 3 / 4

Utilisateur anonyme
21 nov. 2016 à 23:42

Bonjour

Hors sujet :

Le français est approximatif et l'orthographe plus que pitoyable.
On en a vu de bien pires sur CCM, mais quand je vois que c'est pour une classe de CP, je ne peux pas me retenir.

Réponse 4 / 4

Utilisateur anonyme
23 nov. 2016 à 19:09

Merci pour tout en tout cas codeurh24 c'est que je suis un débutant désolé. Je vous dirais ma note si jamais cela vous intéresse

hebusdetroy
24 nov. 2016 à 04:46

bravo, tu saura pas faire par toi même...

Discussions similaires

ou sont les bananes ?

Tableau croisé dynamique avec plusieurs en-têtes identiques

Retrouver l'image originale après avoir fait des modifications ?

tableaux croisés dynamique

Bibliothèque

Discussions similaires

Newsletters