Mettre mes réponse dans un tableau
Utilisateur anonyme
-
hebusdetroy -
hebusdetroy -
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
Mon Javascript
Mon CSS
voila merci
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
4 réponses
-
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.
-
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>
jsalert("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;
}-
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
-
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. -
-
-
-
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. -
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
