Compte à rebours + ordre

**julienber** · 05/02/2010, 14h55

Bonjour,

J'ai trouvé un compte à rebour que je voudrais modifier:
quand il est à 0, je voudrais qu'il valide automatiquement le formulaire.

voici les fichiers:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
<title>QUIZ QPUC</title> 
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" src="chrono.js"></script> 
</head>
 
 
<body>
 
<form method="post" action="quiz_qpuc_version1.php">
 
	<div class="theme">
		<?php
		mysql_connect("localhost", "root", "");
		mysql_select_db("QPUC");
		$requete = mysql_query("SELECT theme, question, reponse FROM qpuc ORDER BY rand() LIMIT 0,1") or die(mysql_error(select)); 
		while($data = mysql_fetch_array($requete)) {echo $data['theme'];} // THEME DE LA QUESTION
		?>
	</div>
 
</form>
 
</body>
</html>

fichier js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
	var valeur_origine = 10;
	var valeur = valeur_origine
	var x;
 
	function Init()	{
		window.document.getElementById('compteur').value=valeur;
		x = window.setInterval('Decompte()', 1000);
	}
 
	function Decompte()	{
		((valeur > 0)&&( ! window.document.getElementById('MaCheck').checked)) ? (window.document.getElementById('compteur').value = --valeur) : (window.clearInterval(x));
	}
 
	function Relance(elem)	{
		if( ! elem.checked ) {x= window.setInterval('Decompte()', 1000);}
	}
 
	function ResetCompteur()	{
		valeur = valeur_origine;
		window.document.getElementById('MaCheck').checked = false;
		window.clearInterval(x)
		Init();
	}
	window.onload = Init;

j'ai supprimé des options (pause et restart) il y a donc des function inutiles dans ce fichiers mais si je les supprimes, ca fonctionne plus...

Merci de votre aide, j'espere avoir été clair...

**Bovino** · 06/02/2010, 10h02

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function Init()	{
	window.document.getElementById('compteur').value=valeur;
	x = window.setInterval('Decompte()', 1000);
}

Il est où ton élément compteur ?

**julienber** · 08/02/2010, 12h02

voila mon code complet:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
<title>QUIZ QPUC</title> 
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" src="chrono.js"></script> 
</head>
 
 
<body>
 
<!-- ######## TITRE ########
<div class="titre">
	<img src="img.bmp" height="80px" />
</div>
######## TITRE ######## -->
 
 
<!-- ZONE DE LA QUESTION -->
<div class="question">
<form method="post" action="quiz_qpuc_version2.php">
 
	<!-- ######## THEME DE LA QUESTION ######## -->
	<div class="theme">
		<?php
		mysql_connect("localhost", "root", "");
		mysql_select_db("QPUC");
		$requete = mysql_query("SELECT theme, question, reponse FROM qpuc ORDER BY rand() LIMIT 0,1") or die(mysql_error(select)); 
		$num_quest = 1;
		while($data = mysql_fetch_array($requete)) {echo $data['theme']; $num_quest++;} // THEME DE LA QUESTION
		?>
 
		<input type="hidden" name="num_question" value="<?php echo $num_quest; ?>" />
	</div>
	<!-- ######## THEME DE LA QUESTION ######## -->
 
	<!-- ######## QUESTION ######## -->
	<div class="quest">
	<p id="display"></p> <!-- ESPACE POUR LA QUESTION -->
 
<script type="text/javascript">
var vitesse = 60;			// vitesse de défilement
var txt = "<?php 
$requete = mysql_query('SELECT theme, question, reponse FROM qpuc ORDER BY rand() LIMIT 0,1') or die(mysql_error(select)); 
while($data = mysql_fetch_array($requete)) {echo utf8_encode(html_entity_decode($data['question']));} ?>",				// texte à afficher
 
display = document.getElementById('display');
 
for(var i = 0, l = txt.length; i < l; i++) {
(function(i) {
setTimeout(function() {display.innerHTML += txt.charAt(i);}, i * vitesse);
}(i));
}
</script>
 
	</div>
	<!-- ######## QUESTION ######## -->
 
	<!-- ######## REPONSE DU JOUEUR ######## -->
	<div id="reponse" class="reponse">
		<input type="text" name="rep" size="25" value="Tapez votre réponse" onfocus="this.value=''" />
		<input type="submit" name="valid" value="OK" onclick="" />
	</div>
	<!-- ######## REPONSE DU JOUEUR ######## -->
 
</form>
</div>
 
<!-- ######## ZONE DE RESULTAT (à droite) ######## -->
<div class="droite">
 
	<!-- ######## COMPTEUR A REBOUR ######## -->
	<input type="text" name="compteur" id="compteur"  class="chrono" size="2" readonly="readonly">
	<input type="hidden" name="MaCheck" id="MaCheck" onclick="Relance(this);">
	<!-- ######## COMPTEUR A REBOUR ######## -->
 
	<!-- ######## SCORES ######## -->
	<div class="score">
	<?php 
        $score = 0;
        $reponse = $data['reponse'];
        $reponsejoueur = $_POST['rep'];
        if ($reponse == $reponsejoueur) {$score++; echo '<font color="#00ff00">'.$score.'/'.$num_quest.'</font>';} 
        else {echo '<font color="#ff0000">'.$score.'/'.$num_quest.'</font>';} ?>
	<input type="hidden" name="score" value="<?php echo $score; ?>" />
	</div>
	<!-- ######## SCORES ######## -->
 
	<!-- NUMERO DE LA QUESTION -->
	<div class="num"><?php echo 'Question '.$num_quest.'/10'; ?>
	</div>
 
</div>
<!-- ######## ZONE DE RESULTAT (à droite) ######## -->
 
</body>
</html>

**vermine** · 08/02/2010, 12h26

Bonjour,

Comme le souligne Bovino, vous faites peut-être appel à des éléments que vous auriez supprimez hativement ?

Si dans votre page chrono.js vous avez ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('compteur').value

Cela veut dire que vous cherchez l'élément de la page PhP/HTML qui a pour id compteur:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="text" name="compteur" id="compteur"  class="chrono" size="2" readonly="readonly">

Lorsque vous épurez-vos pages, vérifiez bien que vous n'enlevez pas trop de choses.

**julienber** · 08/02/2010, 13h12

J'ai épuré juste pour vous faire un sujet plus clair...
J'ai gardé cet élément dans mon fichier...

Mais là n'est pas ma question...
je voudrais que lorsque le compteur est à 0, le formulaire soit envoyé...

Merci

**vermine** · 08/02/2010, 13h25

j'ai supprimé des options (pause et restart) il y a donc des function inutiles dans ce fichiers mais si je les supprimes, ca fonctionne plus...

On a donc répondu à une de vos questions...

Dans la fonction décompte, lorsque vous arrivez à zéro, vous stoppez le décompte. Hé bien vous pouvez en profiter pour soumettre le formulaire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function Decompte()
{
		if((valeur > 0)&&( ! window.document.getElementById('MaCheck').checked))
		{
		   window.document.getElementById('compteur').value = --valeur);
		}
		else
		{
		   window.clearInterval(x);
		   document.forms['mon_formulaire'].submit();
		}
}

Mais pour ça, il faudra préciser un name ("mon_formulaire") à votre formulaire.

Compte à rebours + ordre

JavaScript

Vue hybride

Discussions similaires

Partager

Partager