calcul mental pour site de maths

degbegnon
Javascript

Bonjour,
Je voudrais faire de l'addition mentalement à mes eleves par exemple avec ce code

<script language="javascript" type="text/javascript">
var t1=new Array(10, 20, 30, 40, 50, 60, 70, 80, 90);

var t2=new Array(10, 20, 30, 40, 50, 60, 70, 80, 90);  

for (i = 0; i < 10; i++) {    

var n1 = t1[Math.floor(Math.random()*t1.length)];

var n2 = t2[Math.floor(Math.random()*t2.length)];

   document.write(n1  + "+" +  n2 , "<br />");

}

</script>

Question: Comment modifier ce code pour me pas afficher l'ensemble de l'itération de ma boucle d'un seul coup,
mais plutot les cacher puis afficher chaque itération une par une toutes les 10 ou 20 ou 30 secondes que
j'aurai choisies . Avec (jquery on m'a dit que c'est possible mais je ne sais pas le faire) .
Merci d'avance pour votre aide.

10 réponses

antho07

Bonjour :

Il faut utiliser un un intervalle: 

var currentCalcul = 1;
var nbCalcul = 10;
var timeInSecond = 30;
var timer = setInterval(function(){
var n1 = t1[Math.floor(Math.random()*t1.length)];

var n2 = t2[Math.floor(Math.random()*t2.length)];

   document.write(n1  + "+" +  n2 , "<br />");
currentCalcul ++;
if(currentCalcul == nbCalcul){
clearInterval(timer);
}

},timeInSecond * 60);
degbegnon
Auteur

Bonjour;
MErci pour votre aide.
Mais quand j'execute le code, l'opération s'affiche qu'une seule fois. Les 9 autres itérations qui restent ne s'affichent pas les unes apès les autres.
Auriez vous d'autres idées ?
D'avance merci.

Makino

Pour cela il faut modifier juste une petite partie du code.
Au lieu de 

document.write(n1  + "+" +  n2 , "<br />");

Il faut créer un élément et l'ajouter à notre page, on peut faire comme ceci :

//Création de l'élément
var p = document.createElement('p');
//On définit le contenu ( on peut aussi utiliser innerHTML)
p.innerText = n1  + "+" +  n2;
//Et on l'ajoute au body
document.body.appendChild(p);
degbegnon
Auteur

Bonjour encore une fois merci.
Voici le code tel que je l'ai mis à jour et malgré cela toujours rien :

<!DOCTYPE html>
<html>
<head>

<script language="javascript" type="text/javascript">
var t1=new Array(10, 20, 30, 40, 50, 60, 70, 80, 90);

var t2=new Array(10, 20, 30, 40, 50, 60, 70, 80, 90);  

var currentCalcul = 1;
var nbCalcul = 10;
var timeInSecond = 30;
var timer = setInterval(function(){
var n1 = t1[Math.floor(Math.random()*t1.length)];

var n2 = t2[Math.floor(Math.random()*t2.length)];

var p = document.createElement('p');
//On définit le contenu ( on peut aussi utiliser innerHTML)
p.innerText = n1  + "+" +  n2;
currentCalcul ++;
if(currentCalcul == nbCalcul){
clearInterval(timer);
}

},timeInSecond * 60);

</script>
</head>

<body> document.body.appendChild(p); </body>
<html>

Pourriez vous m'indiquer eventuellemnt où se trouve l'erreur s'il vous plait ?
Cordialement

Makino 
<body> document.body.appendChild(p); </body>

Cette ligne n'est pas placée au bon endroit :).

Voici le code corrigé :

<!DOCTYPE html>
<html>
<head>

<script language="javascript" type="text/javascript">
var t1=new Array(10, 20, 30, 40, 50, 60, 70, 80, 90);

var t2=new Array(10, 20, 30, 40, 50, 60, 70, 80, 90);  

var currentCalcul = 1;
var nbCalcul = 10;
var timeInSecond = 30;
var timer = setInterval(function(){
var n1 = t1[Math.floor(Math.random()*t1.length)];

var n2 = t2[Math.floor(Math.random()*t2.length)];

var p = document.createElement('p');
//On définit le contenu ( on peut aussi utiliser innerHTML)
p.innerText = n1  + "+" +  n2;
document.body.appendChild(p);
currentCalcul ++;
if(currentCalcul == nbCalcul){
clearInterval(timer);
}

},timeInSecond * 60);

</script>
</head>

<body>  </body>
<html>
degbegnon
Auteur

Bonsoir;
Grand merci pour votre aide.
Toutefois, le code ne fonctionne toujours pas .
je ne sais pas ce qui cloche .

Damarus

Avec le code donné au dessus on obtient ça http://codepen.io/DAMARUS13/pen/rVayRb.
C'est le résultat recherché non ? J'ai fait un copié/collé du JavaScript rien de plus.

degbegnon
Auteur

Bonjour,
Un grand merci, effectivement ca fonctionne avec cet editeur.
Mais le probleme est que, avant que l'itération suivante s'affiche , il faut cacher l'itération précédente .
On ne doit avoir s'affiché qu'une et une seule itération à l'ecran , de la première à la dernière.

Encore une fois, un grand merci.

Pachenko

Salut degbegnon,

Pour remplacer le contenu html, il suffit d'utiliser : "innerHTML" en JS natif.

Utilise le code suivant : 

document.body.innerHTML = p.innerText;

Au lieu de : 

document.body.appendChild(p);
degbegnon
Auteur

Merci merci merci merci.
Fonctionne parfaitement comme je le souhaite.
Maintenant est ce qu'il est possible d'afficher après la dernière itération, l'ensemble de tous les résultats, afin que mes éleves puissent savoir combien d'erreurs ils ont commises pendant cette activité de calcul mental ?

Grand merci pour cette aide précieuse.