Mettre mes réponse dans un tableau

Utilisateur anonyme -
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

Afficher la suite

A voir également:

Mettre mes réponse dans un tableau
Tableau word - Guide
Réponse automatique thunderbird - Guide
Trier un tableau excel - Guide
Tableau ascii - Guide
Imprimer un tableau excel - Guide

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 760 Date d'inscription Statut Membre Dernière intervention 123

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

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 760 Date d'inscription Statut Membre Dernière intervention 123

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 760 Date d'inscription Statut Membre Dernière intervention 123

https://1fichier.com/?kj1jd0von8

codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention 123

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

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

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

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

Discussions similaires

Tableau croisé dynamique - absence de certaines données

Formule taux de marque

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport

Votre réponse

Discussions similaires