Insérer chronomètre dans jeux calcul mental

mikymaxxx -  
 mikymaxxx -
Bonjour,
dans le code ci-dessous, commet insérer un chronomètre avec un temps limite pour répondre à la question ....
merci beaucoup

<html>

<head>

<script type="text/javascript" language="javascript">

function Test()
{
var a=0;
var b=0;
var s=0;
var c=0;
var cpt=1;

while (cpt<21)

{

c = 100+(Math.round(Math.random()*1000));
b = 100+(Math.round(Math.random()*1000));

a = b * c;

document.test.champs1.value = a;
document.test.champs2.value = b;

var answer = prompt("Quelle est votre réponse ?\nQuestion : "+cpt);

if(answer == null)

{
break;
}

if (answer == c)

{
alert("Bonne réponse");
s= s + 1;
cpt++;

}

else

{
alert("Mauvaise réponse\nla bonne réponse était : "+c);
s = s + 0;
cpt++;

}

}

alert("C\'est terminé...\nRegardez les commentaires");

document.test.comments.value = "Votre score sur 20 est de "+s;

}

</script>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<style type="text/css">
a
{
color : blue;
}
a:hover
{
color : red;
}

#formulaire
{
width : 282px;
height : 210px;
text-align : center;
border : 1px solid;
border-color : #999999;
border-style : inset;
margin-right : auto;
margin-left : auto;
}

.start
{
width : 60px;
height : 30px;
margin-top : 4px;
}

.nb1
{
text-align : center;
border : 1px solid;
border-color : #999999;
border-style : inset;
}

.nb2
{
text-align : center;
border : 1px solid;
border-color : #999999;
border-style : inset;
}

.commentaires
{
width : 260px;
height : 78px;
margin-top : 6px;
color : red;
font-size : 15px;
}

.backmenu
{
text-align : center;
font-family : arial;
}

</style>

</head>

<body>

<div id="principal">

<div id="header">

</div>

<div id="left">

<p style="font-family : arial; font-size : 18px; text-align : center; text-decoration : underline;">Division Intermédiaire</p>

<form name="test" id="formulaire">

<input type="button" value="start" class="start" onClick="Test();" /><br /><br />

<input type="text" name="champs1" class="nb1" size="14" onFocus="this.blur()" /> / <input type="text" name="champs2" class="nb2" size="14" onFocus="this.blur()" /> = <span style="font-size : 18px; font-weight : bold;">?</span><br /><br />
<span style="font-family : arial; text-decoration : underline; font-size : 18px;">Commentaires</span>
<input type="textarea" name="comments" class="commentaires" onFocus="this.blur()" />

</form>

<p class="backmenu"><a href="index.html">Retour vers <span style="font-weight : bold;">Menu</span></a></p>

</div>

<div id="right">

<div id="menu">

<ul id="level">

<a href="operationsnul.html"><li>nul</li></a>
<a href="operationselementaire.html"><li>élémentaire</li></a>
<a href="operationssecondaire.html"><li>secondaire</li></a>
<a href="operationsintermediaire.html"><li>intermédiaire</li></a>
<a href="operationssuperieur.html"><li>supérieur</li></a>
<a href="operationsgenius.html"><li>genius</li></a>

</ul>

</div>

</div>

<div id="footer">

<div id="copyright">All rights®eserved MikyMaxXx 2009</p>

</div>

</div>

</body>
</html>
A voir également:

6 réponses

Utilisateur anonyme
 
si tu t'inscrit en tant que membre sur ce forum, et bein je pourrais suivre cette discussion pour pouvoir te donner la réponse
0
mikymaxxx020275 Messages postés 2 Statut Membre
 
cool c du chantage ...LOL

enfin soit j'ai appris que cela provoquerait des ennuis de mettre un SetTimeOut et SetInterval dans mon script, car l'utilisation de prompt et de alert.
Ou alors, il faut créer des fenêtres de saisies faites à la main, mais je me penche sur la question car je ne sais pas c koi LOL

0
mikymaxxx020275 Messages postés 2 Statut Membre
 
oki suis membres si tu veux on peut discuter à ce sujet....
j'en serai ravi si tes lumières pouvaient m'aider
a+
0
Utilisateur anonyme
 
salut je te donnerais la réponse demain
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Utilisateur anonyme
 
En javascript, toute boite d'alerte contenant un bouton (comme prompt, alert,confirm,etc..) arrete le temps (et donc le setTimeout ou setInterval) . Par conséquent tu dois créer toi-méme une boite d'alerte sans passer par prompt pour pouvoir utiliser le temps (càd setTimeout,setInterval) :

Donc voici la solution :

/***code de la page solution.html (que tu peux copier-coller*****/

<html>

<head>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<style type="text/css">

.pro{
border:solid blue 1px;
position:absolute;
top:20px;
left:300px;
font:normal 12px sans-serif;
padding:5px;
background-color:gray;
display:"none";
}

a
{
color : blue;
}
a:hover
{
color : red;
}

#formulaire
{
width : 282px;
height : 210px;
text-align : center;
border : 1px solid;
border-color : #999999;
border-style : inset;
margin-right : auto;
margin-left : auto;
}

.start
{
width : 60px;
height : 30px;
margin-top : 4px;
}

.nb1
{
text-align : center;
border : 1px solid;
border-color : #999999;
border-style : inset;
}

.nb2
{
text-align : center;
border : 1px solid;
border-color : #999999;
border-style : inset;
}

.commentaires
{
width : 260px;
height : 78px;
margin-top : 6px;
color : red;
font-size : 15px;
}

.backmenu
{
text-align : center;
font-family : arial;
}

</style>

</head>

<body>

<div id="principal">

<div id="header">

</div>

<div id="left">

<p style="font-family : arial; font-size : 18px; text-align : center; text-decoration : underline;">Division Intermédiaire</p>

<form name="test" id="formulaire">

<input type="button" value="start" class="start" onClick="Test();" /><br /><br />

<input type="text" name="champs1" class="nb1" size="14" onFocus="this.blur()" /> / <input type="text" name="champs2" class="nb2" size="14" onFocus="this.blur()" /> = <span style="font-size : 18px; font-weight : bold;">?</span><br /><br />
<span style="font-family : arial; text-decoration : underline; font-size : 18px;">Commentaires</span>
<input type="textarea" name="comments" class="commentaires" onFocus="this.blur()" />

</form>

<div id='question' class='pro'>
<form name='form'>
Quel est votre réponse ?
<br>Question : <span id='nQuestion'></span>
<br><input type='text' name='reponse'>
<br>Il vous reste <span id='nSeconde'>10</span> s
<br><input type='button' value='Valider' onClick='valider();'> <input type='button' value='Annuler' onClick='annuler();'>
</form>

</div>

<script type="text/javascript" language="javascript">

obj=document.getElementById('question');
objnQ=document.getElementById('nQuestion');
objnS=document.getElementById('nSeconde');

cpt=1;

i=0;
f=0;

sec=10;

function rebours()
{
objnS.innerHTML=sec;

sec=sec-1;

if(sec>=-1)
{reb=setTimeout("rebours()",1000);}

else
{
sec=10;
valider();}
}

function Test()
{
obj.style.display="inline";

document.test.comments.value='';

a=0;
b=0;
s=0;
c=0;

objnQ.innerHTML=cpt;

c=100+(Math.round(Math.random()*1000));
b=100+(Math.round(Math.random()*1000));

a=b*c;

document.test.champs1.value=a;
document.test.champs2.value=b;

rebours();

}

function valider()
{
clearTimeout(reb);
vReponse=document.form.reponse.value;
obj.style.display="none";

if(vReponse==1)
{ alert("Bonne réponse");
s=s+1;
cpt++;
}

else
{ alert("Mauvaise réponse\nla bonne réponse était : "+c);
s=s+0;
cpt++;
}

document.form.reponse.value='';

if(cpt<=3)
{sec=10;
Test();}
else
{annuler();}
}

function annuler()
{
clearTimeout(reb);
obj.style.display="none";
alert("C\'est terminé...\nRegardez les commentaires");
document.test.comments.value = "Votre score sur 20 est de "+s;
cpt=1;
document.form.reponse.value='';
}

</script>

<p class="backmenu"><a href="index.html">Retour vers <span style="font-weight : bold;">Menu</span></a></p>

</div>

<div id="right">

<div id="menu">

<ul id="level">

<a href="operationsnul.html"><li>nul</li></a>
<a href="operationselementaire.html"><li>élémentaire</li></a>
<a href="operationssecondaire.html"><li>secondaire</li></a>
<a href="operationsintermediaire.html"><li>intermédiaire</li></a>
<a href="operationssuperieur.html"><li>supérieur</li></a>
<a href="operationsgenius.html"><li>genius</li></a>

</ul>

</div>

</div>

<div id="footer">

<div id="copyright">All rights®eserved MikyMaxXx 2009</p>

</div>

</div>

</body>
</html>

0
Utilisateur anonyme
 
J'ai affiné mon code voir en gras :

<html>

<head>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<style type="text/css">

.pro{
border:solid blue 1px;
position:absolute;
top:20px;
left:300px;
font:normal 12px sans-serif;
padding:5px;
background-color:gray;
display:"none";
}

a
{
color : blue;
}
a:hover
{
color : red;
}

#formulaire
{
width : 282px;
height : 210px;
text-align : center;
border : 1px solid;
border-color : #999999;
border-style : inset;
margin-right : auto;
margin-left : auto;
}

.start
{
width : 60px;
height : 30px;
margin-top : 4px;
}

.nb1
{
text-align : center;
border : 1px solid;
border-color : #999999;
border-style : inset;
}

.nb2
{
text-align : center;
border : 1px solid;
border-color : #999999;
border-style : inset;
}

.commentaires
{
width : 260px;
height : 78px;
margin-top : 6px;
color : red;
font-size : 15px;
}

.backmenu
{
text-align : center;
font-family : arial;
}

</style>

</head>

<body>

<div id="principal">

<div id="header">

</div>

<div id="left">

<p style="font-family : arial; font-size : 18px; text-align : center; text-decoration : underline;">Division Intermédiaire</p>

<form name="test" id="formulaire">

<input type="button" value="start" class="start" onClick="Test();" /><br /><br />

<input type="text" name="champs1" class="nb1" size="14" onFocus="this.blur()" /> / <input type="text" name="champs2" class="nb2" size="14" onFocus="this.blur()" /> = <span style="font-size : 18px; font-weight : bold;">?</span><br /><br />
<span style="font-family : arial; text-decoration : underline; font-size : 18px;">Commentaires</span>
<input type="textarea" name="comments" class="commentaires" onFocus="this.blur()" />

</form>

<div id='question' class='pro'>
<form name='form'>
Quel est votre réponse ?
<br>Question : <span id='nQuestion'></span>
<br><input type='text' name='reponse'>
<br>Il vous reste <span id='nSeconde'>10</span> s
<br><input type='button' value='Valider' onClick='valider();'> <input type='button' value='Annuler' onClick='annuler();'>
</form>

</div>

<script type="text/javascript" language="javascript">

obj=document.getElementById('question');
objnQ=document.getElementById('nQuestion');
objnS=document.getElementById('nSeconde');

cpt=1;

i=0;
f=0;

sec=10;

function rebours()
{
objnS.innerHTML=sec;

sec=sec-1;

if(sec>=-1)
{reb=setTimeout("rebours()",1000);}

else
{
sec=10;
valider();}
}

function Test()
{
obj.style.display="inline";

document.test.comments.value='';

a=0;
b=0;
s=0;
c=0;

objnQ.innerHTML=cpt;

c=100+(Math.round(Math.random()*1000));
b=100+(Math.round(Math.random()*1000));

a=b*c;

document.test.champs1.value=a;
document.test.champs2.value=b;

rebours();

}

function valider()
{
clearTimeout(reb);
vReponse=document.form.reponse.value;
obj.style.display="none";

if(vReponse==1)
{ alert("Bonne réponse");
s=s+1;
cpt++;
}

else
{ alert("Mauvaise réponse\nla bonne réponse était : "+c);
s=s+0;
cpt++;
}

document.form.reponse.value='';

if(cpt<=3)
{sec=10;
Test();}
else
{annuler();}
}

function annuler()
{
clearTimeout(reb);
sec=10;
obj.style.display="none";
alert("C\'est terminé...\nRegardez les commentaires");
document.test.comments.value = "Votre score sur 20 est de "+s;
cpt=1;
document.form.reponse.value='';
}

</script>

<p class="backmenu"><a href="index.html">Retour vers <span style="font-weight : bold;">Menu</span></a></p>

</div>

<div id="right">

<div id="menu">

<ul id="level">

<a href="operationsnul.html"><li>nul</li></a>
<a href="operationselementaire.html"><li>élémentaire</li></a>
<a href="operationssecondaire.html"><li>secondaire</li></a>
<a href="operationsintermediaire.html"><li>intermédiaire</li></a>
<a href="operationssuperieur.html"><li>supérieur</li></a>
<a href="operationsgenius.html"><li>genius</li></a>

</ul>

</div>

</div>

<div id="footer">

<div id="copyright">All rights®eserved MikyMaxXx 2009</p>

</div>

</div>

</body>
</html>

0
mikymaxxx
 
Bonjout TOTO,

En tout merci beaucoup de m'avoir aidé à résoudre ce problème de chronomètre, mais je me demandais comment on pouvait utiliser le chronomètre pour à la fois calculer un temps limite par question, mais également un autre qui calculerait un temps limite par session de 20 calculs et aussi si l'on réussit la session des 20 questions, savoir en combien de temps la session à été réalisée.

C'est la galère mais si tu pouvais m'aider à resoudre ce casse tête, je t'en serai reconnaissant,

merci

a bientot
0