Chrono de 20 secondes bizarre

Version imprimable

bonjjour à tous,
on m'a récemment aidé sur ce même forum à créer un chrono de 10 secondes pour mettre dans un questionnaire.
Au final, çame semblait trop court donc j'ai mis 20.
Voici mon html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?php
 
function aff_questionnaire_art () { 
 
	echo ("
	<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
	<head>
		<meta http-equiv='content-type' content='text/html' charset='utf-8' />
		<title>Questionnaire - Histoire de l'Art</title>
		<link rel='icon' href='favicon.ico' />
		<link type='text/css' rel='stylesheet' src='css/styles/questionnaire.css' />
		<script type='text/javascript' src='js/jquery.js'></script>
		<script type='text/javascript' src='js/questionnaire.js'></script>
		<!--dÃ©finir script-->
	</head>

	<body id='b'>  
		<h1>QUESTIONNAIRE - HISTOIRE DE L'ART</h1>
		<div id='QUEST'></div>
		<button id='v' title='Une bonne/mauvaise rÃ©ponse augmente/diminue votre score d'un point'>VALIDER</button>
		<button id='a' title='Retour Ã* l'accueil'>ABANDONNER</button>
		<button id='p' title='Pas de rÃ©ponse n'ajoute ni ne retire de point'>PASSER</button>
		
		<br /><br />
		
		<em id='time' >
		20
		</em>
	 </body> 
</html>
	");
 
}
 
?>

et mon js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
 
var r;
var q;
 
//var eaigu = '\xE9';
//var egrave = '\xE8';
 
var repOK = "Bonne rÃ©ponse\xA0!";
var repKO = "Mauvaise rÃ©ponse\xA0!";
var score;
var i;
var t;
 var chrono = {
     secondsLeft: 0,
     timer: undefined,
 
     Start: function (secondsLeft) {
         //Initialisation du nombre de secondes selon la valeur passée en paramètre
         this.secondsLeft = secondsLeft;
         //Démarrage du chrono
         this.timer = setInterval(this.Tick.bind(this), 1000);
     },
 
     Tick: function () {
         //On actualise la valeur affichée du nombre de secondes
         t.innerHTML = this.secondsLeft - 1;
         if (this.secondsLeft === 0)
         //Tps écoulé -> arrêt du timer
         this.Stop();
     },
 
     Stop: function () {
         //quand le temps est écoulé, on arrête le timer
         clearInterval(this.timer);
         //Et on appelle la fonction qui gère la fin du temps imparti et poursuit le traitement
         //Ici, pour le test, simplement une fonction alert
	alert('Le temps imparti est Ã©coulÃ©.');
	score--;
	i++;
	afficherQuestion(i);
     }
 
 };
window.onload = function( ){
 
	document.getElementsByTagName('h1')[0].style.fontFamily = "'alegreya_sansbold', serif";
	document.getElementsByTagName('h1')[0].style.textDecoration = "underline";
 
	t = document.getElementById("time");
	score = 0;
   i = 1;
   if (i = 1) chrono.Start(20); 
 
   q = document.getElementById("QUEST");
 
 
   afficherQuestion(i);
   document.getElementById("a").onclick = function( ){
      if (confirm("Vous avez choisi dâ€™abandonner ce jeu")) {
         location.href =  '../index.php?control=display.php&f=principal';
      }
   };
   document.getElementById("v").onclick = function( ){
      switch (r) {
         case "r1":            
         	alert(repKO);
            score--;
            break;
         case "r3":
         	alert(repKO);
            score--;
            break;
         case "r1f":            
         	alert(repKO);
            score--;
            break;            
         case "r3f":
            alert(repKO);
            score--;
            break;
 
         case "r2":            
         	alert(repOK);
            score++;
            break;
         default:
            alert("Vous n'avez pas rÃ©pondu!");
       	   i--;
            break;
      }
 
      i++;
      afficherQuestion(i);
      r = "";
   }
         document.getElementById("p").onclick = function( ){
         	alert("Vous avez choisi de passer \340 la question suivante");
         	i++;      
         	afficherQuestion(i);
         }
}; // fin window.onload
 
function reponse( rep ){
   r = rep;
};
 
function afficherQuestion( i ){
   q.innerHTML = "";
   q.style.fontFamily = "'fontleroybrown_regular_macroman', serif";
 
   var $h3 = document.createElement("h3");
   $h3.align = "center";
   $h3.textContent = "QUESTION\xA0: ";
   q.appendChild($h3);
 
   q.appendChild(document.createElement("hr"));
 
   var $ul = document.createElement("ul");
   $ul.style.listStyleType = "none";
   q.appendChild($ul);
 
   var $li1 = document.createElement("li");
   $ul.appendChild($li1);
   var $label1 = document.createElement("label");
   $li1.appendChild($label1);
   var $radio1 = document.createElement("input");
   $radio1.type = "radio";
   $radio1.name = "rd";
   $radio1.onclick = function( ){
      reponse(this.value);
   };
   $label1.appendChild($radio1);
   var $span1 = document.createElement("span");
   $label1.appendChild($span1);
 
   var $li2 = document.createElement("li");
   $ul.appendChild($li2);
   var $label2 = document.createElement("label");
   $li2.appendChild($label2);
   var $radio2 = document.createElement("input");
   $radio2.type = "radio";
   $radio2.name = "rd";
   $radio2.onclick = function( ){
      reponse(this.value);
   };
   $label2.appendChild($radio2);
   var $span2 = document.createElement("span");
   $label2.appendChild($span2);
 
   var $li3 = document.createElement("li");
   $ul.appendChild($li3);
   var $label3 = document.createElement("label");
   $li3.appendChild($label3);
   var $radio3 = document.createElement("input");
   $radio3.type = "radio";
   $radio3.name = "rd";
   $radio3.onclick = function( ){
      reponse(this.value);
   };
   $label3.appendChild($radio3);
   var $span3 = document.createElement("span");
   $label3.appendChild($span3);
 
   switch (i) {
   case 1:
      $h3.textContent += "Sur quelle pÃ©riode sâ€™Ã©tend lâ€™impressionnisme\xA0?";
      $radio1.value = "r1";
      $span1.textContent = "Seconde moitiÃ© du XVIIÃ¨me";
      $radio2.value = "r2";
      $span2.textContent = "PremiÃ¨re moitiÃ© du XIXÃ¨me";
      $radio3.value = "r3";
      $span3.textContent = "DÃ©but du XXÃ¨me";
      break;
 
   case 2:
      $h3.textContent += "Qui a peint le tableau Guernica\xA0?";
      $radio1.value = "r1";
      $span1.textContent = "Henri Salvador";
      $radio2.value = "r2";
      $span2.textContent = "Pablo Picasso";
      $radio3.value = "r3";
      $span3.textContent = "Francisco Goya";
      break;
 
   case 3:
      $h3.textContent += "Dâ€™oÃ¹ vient le nom impressionnisme\xA0?";
      $radio1.value = "r2";
      $span1.textContent = "Dâ€™un tableau de Monet";
      $radio2.value = "r1";
      $span2.textContent = "Du style de la peinture";
      $radio3.value = "r3";
      $span3.textContent = "Ce nom Ã©tait joli";
      break;
 
   case 4:
      $h3.textContent += "Quâ€™est-ce que le David de Michel-Ange\xA0?";
      $radio1.value = "r3";
      $span1.textContent = "Un ange qui sâ€™appelle David";
      $radio2.value = "r1";
      $span2.textContent = "Une peinture de David";
      $radio3.value = "r2";
      $span3.textContent = "Une sculpture de David";
      break;
 
   case 5:
      $h3.textContent += "Quâ€™est-ce que le fauvisme\xA0?";
      $radio1.value = "r2f";
      $span1.textContent = "Un courant artistique reposant sur lâ€™utilisation des couleurs";
      $radio2.value = "r1f";
      $span2.textContent = "Lâ€™art de manier la faux";
      $radio3.value = "r3f";
      $span3.textContent = "Un film documentaire centrÃ© sur la vie des fauves";
      break;
 
   default:
      alert("Le jeu est terminÃ©. Votre score est de " + score);
      document.location.href = '../index.php?control=display.php&f=principal';
   }
 
};

mon problême est que là le chrono démarre bien à 20, passe à 19 après 1 seconde, puis s'arrête.
Une idée?

Bonjour,
juste une question à quel moment du décrémente secondLeft ?

Code:

1
2
3
4
5
6
7
 Tick: function () {
     //On actualise la valeur affichée du nombre de secondes
     t.innerHTML = this.secondsLeft - 1;   // ici tu afficheras TOUJOURS 19 si secondLeft vaut 20
     if (this.secondsLeft === 0)
     //Tps écoulé -> arrêt du timer
     this.Stop();
 },

Remarque : il te sert à quoi de faire un echo de pur HTML ?

13/09/2014, 18h23
aertys

Grâce à cette ligne

Code:

this.timer = setInterval(this.Tick.bind(this), 1000);

il me semble qu'elle créée une copie de Tick chaque seconde, non?
Sinon, que me proposes-tu?
pour la remarque, c'était juste pour prévoir que j'aurais potentiellement l'envie d'y ajouter une fonction PHP

Non elle ne crée pas de copie, elle se contente d'appeler la fonction Tick toutes les secondes. Tu ne réaffectes jamais secondsLeft, donc il y aura toujours 20 secondsLeft. Il faut le décrémenter :
Code:

1 2 3 4 5 6 Tick:function(){//On actualise la valeur affichée du nombre de secondes this.secondsLeft--; t.innerHTML = this.secondsLeft; if (this.secondsLeft === 0) //Tps écoulé -> arrêt du timer this.Stop(); },

merci maintenant le chrono s'effectue bien!

j'ai tout de même remarqué que mon timer ne s'effectue qu'à la première question

j''ai donc réécris ce code (j'ai déplacé la ligne "chrono.Start" du début à la fin)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
 
var r;
var q;
 
//var eaigu = '\xE9';
//var egrave = '\xE8';
 
var repOK = "Bonne rÃ©ponse\xA0!";
var repKO = "Mauvaise rÃ©ponse\xA0!";
var score;
var i;
var t;
 var chrono = {
     secondsLeft: 0,
     timer: undefined,
 
     Start: function (secondsLeft) {
         //Initialisation du nombre de secondes selon la valeur passée en paramètre
         this.secondsLeft = secondsLeft;
         //Démarrage du chrono
         this.timer = setInterval(this.Tick.bind(this), 1000);
     },
 
     Tick: function () {
         //On actualise la valeur affichée du nombre de secondes
         this.secondsLeft = this.secondsLeft - 1;
         t.innerHTML = this.secondsLeft;
         if (this.secondsLeft === 0)
         //Tps écoulé -> arrêt du timer
         this.Stop();
     },
 
     Stop: function () {
         //quand le temps est écoulé, on arrête le timer
         clearInterval(this.timer);
         //Et on appelle la fonction qui gère la fin du temps imparti et poursuit le traitement
         //Ici, pour le test, simplement une fonction alert
	alert('Le temps imparti est Ã©coulÃ©.');
	score--;
	i++;
	afficherQuestion(i);
     }
 
 };
window.onload = function( ){
 
	document.getElementsByTagName('h1')[0].style.fontFamily = "'alegreya_sansbold', serif";
	document.getElementsByTagName('h1')[0].style.textDecoration = "underline";
 
	t = document.getElementById("time");
	score = 0;
   i = 1;
   chrono.Start(20); 
 
   q = document.getElementById("QUEST");
 
 
   afficherQuestion(i);
   document.getElementById("a").onclick = function( ){
      if (confirm("Vous avez choisi dâ&#128;&#153;abandonner ce jeu")) {
         location.href =  '../index.php?control=display.php&f=principal';
      }
   };
   document.getElementById("v").onclick = function( ){
      switch (r) {
         case "r1":            
         	alert(repKO);
            score--;
            break;
         case "r3":
         	alert(repKO);
            score--;
            break;
         case "r1f":            
         	alert(repKO);
            score--;
            break;            
         case "r3f":
            alert(repKO);
            score--;
            break;
 
         case "r2":            
         	alert(repOK);
            score++;
            break;
         default:
            alert("Vous n'avez pas rÃ©pondu!");
       	   i--;
            break;
      }
 
      i++;
      afficherQuestion(i);
      r = "";
   }
         document.getElementById("p").onclick = function( ){
         	alert("Vous avez choisi de passer \340 la question suivante");
         	i++;      
         	afficherQuestion(i);
         }
}; // fin window.onload
 
function reponse( rep ){
   r = rep;
};
 
function afficherQuestion( i ){
   q.innerHTML = "";
   q.style.fontFamily = "'fontleroybrown_regular_macroman', serif";
 
   var $h3 = document.createElement("h3");
   $h3.align = "center";
   $h3.textContent = "QUESTION\xA0: ";
   q.appendChild($h3);
 
   q.appendChild(document.createElement("hr"));
 
   var $ul = document.createElement("ul");
   $ul.style.listStyleType = "none";
   q.appendChild($ul);
 
   var $li1 = document.createElement("li");
   $ul.appendChild($li1);
   var $label1 = document.createElement("label");
   $li1.appendChild($label1);
   var $radio1 = document.createElement("input");
   $radio1.type = "radio";
   $radio1.name = "rd";
   $radio1.onclick = function( ){
      reponse(this.value);
   };
   $label1.appendChild($radio1);
   var $span1 = document.createElement("span");
   $label1.appendChild($span1);
 
   var $li2 = document.createElement("li");
   $ul.appendChild($li2);
   var $label2 = document.createElement("label");
   $li2.appendChild($label2);
   var $radio2 = document.createElement("input");
   $radio2.type = "radio";
   $radio2.name = "rd";
   $radio2.onclick = function( ){
      reponse(this.value);
   };
   $label2.appendChild($radio2);
   var $span2 = document.createElement("span");
   $label2.appendChild($span2);
 
   var $li3 = document.createElement("li");
   $ul.appendChild($li3);
   var $label3 = document.createElement("label");
   $li3.appendChild($label3);
   var $radio3 = document.createElement("input");
   $radio3.type = "radio";
   $radio3.name = "rd";
   $radio3.onclick = function( ){
      reponse(this.value);
   };
   $label3.appendChild($radio3);
   var $span3 = document.createElement("span");
   $label3.appendChild($span3);
 
   switch (i) {
   case 1:
      $h3.textContent += "Sur quelle pÃ©riode sâ&#128;&#153;Ã©tend lâ&#128;&#153;impressionnisme\xA0?";
      $radio1.value = "r1";
      $span1.textContent = "Seconde moitiÃ© du XVIIÃ¨me";
      $radio2.value = "r2";
      $span2.textContent = "PremiÃ¨re moitiÃ© du XIXÃ¨me";
      $radio3.value = "r3";
      $span3.textContent = "DÃ©but du XXÃ¨me";
      break;
 
   case 2:
      $h3.textContent += "Qui a peint le tableau Guernica\xA0?";
      $radio1.value = "r1";
      $span1.textContent = "Henri Salvador";
      $radio2.value = "r2";
      $span2.textContent = "Pablo Picasso";
      $radio3.value = "r3";
      $span3.textContent = "Francisco Goya";
      break;
 
   case 3:
      $h3.textContent += "Dâ&#128;&#153;oÃ¹ vient le nom impressionnisme\xA0?";
      $radio1.value = "r2";
      $span1.textContent = "Dâ&#128;&#153;un tableau de Monet";
      $radio2.value = "r1";
      $span2.textContent = "Du style de la peinture";
      $radio3.value = "r3";
      $span3.textContent = "Ce nom Ã©tait joli";
      break;
 
   case 4:
      $h3.textContent += "Quâ&#128;&#153;est-ce que le David de Michel-Ange\xA0?";
      $radio1.value = "r3";
      $span1.textContent = "Un ange qui sâ&#128;&#153;appelle David";
      $radio2.value = "r1";
      $span2.textContent = "Une peinture de David";
      $radio3.value = "r2";
      $span3.textContent = "Une sculpture de David";
      break;
 
   case 5:
      $h3.textContent += "Quâ&#128;&#153;est-ce que le fauvisme\xA0?";
      $radio1.value = "r2f";
      $span1.textContent = "Un courant artistique reposant sur lâ&#128;&#153;utilisation des couleurs";
      $radio2.value = "r1f";
      $span2.textContent = "Lâ&#128;&#153;art de manier la faux";
      $radio3.value = "r3f";
      $span3.textContent = "Un film documentaire centrÃ© sur la vie des fauves";
      break;
 
   default:
      alert("Le jeu est terminÃ©. Votre score est de " + score);
      document.location.href = '../index.php?control=display.php&f=principal';
   }
   chrono.Start(20); 
 
};

Maintenant la première question marche toujours mais pour les autres le chrono diminue de 2 à chaque seconde!

16/09/2014, 19h55
NoSmoking

Il te faut killer le timer, quoiqu'il arrive, avant dans relancer un autre sinon à la 4^éme question répondue avant le délai tu en auras 4 qui tournent et ainsi de suite.
18/09/2014, 20h00
aertys

Oui oui moi aussi c'est ce que je pensais, mais je croyais que c'était bon avec clearInterval()

Donc comment-faire autrement?

Avant de tout redémarrage clear le timer comme dit ci avant.

Code:

1
2
3
4
5
6
7
8
     Start: function (secondsLeft) {
         // on clear avant lancement ou relance
         clearInterval(this.timer)
         //Initialisation du nombre de secondes selon la valeur passée en paramètre
         this.secondsLeft = secondsLeft;
         //Démarrage du chrono
         this.timer = setInterval(this.Tick.bind(this), 1000);
     },

24/09/2014, 16h37
aertys

Merci ça re-marche!!!