Un jeu sur le web

**aertys** · 31/01/2014, 16h55

Bonjour,
j'ai écrit un code de façon à produire un questionnaire en javascript:
code 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
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
var r;
var q; 
 
//var eaigu = '\351';
//var egrave = '\350';
 
var quest  =   "<h3 align='center'> QUESTION : ";
	quest  +=   "Sur quelle période s'étend l'impressionnisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Seconde moitié du XVIIème</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Première moitié du XIXème</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Début du XXème</li>";
	quest  +=     "</ul>";
 
var repOK = "Bonne r\351ponse !";
var repKO = "Mauvaise r\351ponse !";
var score=0;
var i=1;
window.onload= function(){
	q=document.getElementById("QUEST");
	q.innerHTML=quest.toString();                                                                                                                                   
}
 
function question ()  {
	q.innerHTML=quest.toString();
	}
 
function reponse(rep)  {
	r=rep;
}
 
document.getElementByName("v").onclick=function {
	if (r="r2") {
		alert(repOK);
		score++;
	}
	else if (r="r1"||r="r3") {
		alert(repKO);
		score--;
	}
	else if (r="r1f"||r="r3f") {
		alert(repKO);
		score--;
		alert("le jeu est terminé. Votre score est de"+score);
		document.load("../index.html");
		}
		else {
		alert(repOK);
		score++;
		document.load("../index.html");
		}
	i++;
	qi();
	question();
}
function q2(){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qui a peint le tableau Guernica ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Henri Salvador</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Pablo Picasso</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Francisco Goya</li>";
	quest  +=     "</ul>";
	}
	function q3(){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "D'où vient le nom impressionnisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> D'un tableau de Monet</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Du style de la peinture</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Ce nom était joli</li>";
	quest  +=     "</ul>";
	}
	function q4(){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qu'est-ce que le David de Michel-Ange ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Un ange qui s'appelle David</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Une peinture de David</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Une sculpture de David</li>";
	quest  +=     "</ul>";
	}
	function q5(){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qu'est-ce que le fauvisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2f' onclick='reponse(this.value)' /> Un courant artistique reposant sur l'utilisation des couleurs</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1f' onclick='reponse(this.value)' /> L'art de manier la faux</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3f' onclick='reponse(this.value)' /> Un film documentaire centré sur la vie des fauves</li>";
	quest  +=     "</ul>";
	}
 
document.getElementByName("a").onclick= function () {	
	alert("Vous avez choisi d'abandonner ce jeu");
	document.load("../index.html");
}

code html:

Code html :

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
<!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="ISO-8859-15" />
<title>Questionnaire - Histoire de l'Art</title>
	<script type="text/javascript" src="../scriptJS/jquery.js"></script>
<script src="../scriptJS/questionnaire.js"></script>
<!--définir script-->
</head>
 
<body>  
	<h1>QUESTIONNAIRE - HISTOIRE DE L'ART</h1>
	<form>
	 <div id='QUEST'></div>
	 <input type ="submit" name="v" value="valider"></input>
	 <input type ="submit" name="a" value="abandonner"></input>
	</form>
 
</body> </html>

le problème est que les questions ne s'affichent pas!

**NoSmoking** · 01/02/2014, 20h00

Bonjour,
plusieurs maladresses voire grosses erreurs

Code :

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

document.getElementByName("v").onclick=function {

la syntaxe est incorrecte il manque les paranthéses de passage des paramètres

Code :

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

1
2
3
document.getElementByName("v").onclick=function() {
  // le code
};

d'autres part au moment où tu appeles cette fonction les éléments sont-ils présent dans ta page ?

Code :

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

if (r="r2") {

ceci est un affectation et non une comparaison qui s'effectue via les opérateurs de comparaison == (égal) ou encore === (strictement égal)

**aertys** · 02/02/2014, 13h45

D'abord merci pour ces corrections maintenant la première question s'affiche correctement (youpi!) mais aucun moyen de passer à la suivante.je pense que ke problème se situe à la ligne

Code :

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

qi();

voilà le 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
var r;
var q; 
 
//var eaigu = '\351';
//var egrave = '\350';
 
var quest  =   "<h3 align='center'> QUESTION : ";
	quest  +=   "Sur quelle période s'étend l'impressionnisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Seconde moitié du XVIIème</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Première moitié du XIXème</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Début du XXème</li>";
	quest  +=     "</ul>";
 
var repOK = "Bonne r\351ponse !";
var repKO = "Mauvaise r\351ponse !";
var score=0;
var i=1;
window.onload= function(){
	q=document.getElementById("QUEST");
	q.innerHTML=quest.toString();                                                                                                                                   
};
 
function question ()  {
	q.innerHTML=quest.toString();
	};
 
function reponse(rep)  {
	r=rep;
};
 
document.getElementByName("v").onclick=function() {
	if (r=="r2") {
		alert(repOK);
		score++;
	}
	else if (r=="r1"||r=="r3") {
		alert(repKO);
		score--;
	}
	else if (r=="r1f"||r=="r3f") {
		alert(repKO);
		score--;
		alert("le jeu est terminé. Votre score est de"+score);
		document.load("../index.html");
		}
		else {
		alert(repOK);
		score++;
		document.load("../index.html");
		}
	i++;
	qi();
	question();
};
function q2(){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qui a peint le tableau Guernica ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Henri Salvador</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Pablo Picasso</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Francisco Goya</li>";
	quest  +=     "</ul>";
	};
	function q3(){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "D'où vient le nom impressionnisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> D'un tableau de Monet</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Du style de la peinture</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Ce nom était joli</li>";
	quest  +=     "</ul>";
	};
	function q4(){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qu'est-ce que le David de Michel-Ange ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Un ange qui s'appelle David</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Une peinture de David</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Une sculpture de David</li>";
	quest  +=     "</ul>";
	};
	function q5(){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qu'est-ce que le fauvisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2f' onclick='reponse(this.value)' /> Un courant artistique reposant sur l'utilisation des couleurs</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1f' onclick='reponse(this.value)' /> L'art de manier la faux</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3f' onclick='reponse(this.value)' /> Un film documentaire centré sur la vie des fauves</li>";
	quest  +=     "</ul>";
	};
 
document.getElementByName("a").onclick= function () {	
	alert("Vous avez choisi d'abandonner ce jeu");
	document.load("../index.html");
};

**NoSmoking** · 02/02/2014, 14h34

Envoyé par rappel

d'autres part au moment où tu appelles cette fonction les éléments sont-ils présent dans ta page ?

la réponse reste NON

donc les fonctions faisant appel à document.getElementByName doivent être placées dans la fonction onload de ton document.

Important: On notera au passage que la méthode est document.getElementsByName.

Voilà encore un pas de franchi.

**aertys** · 02/02/2014, 16h13

j'ai placé ces méthodes dans le onload comme tu dis mais on est revenu en arrière puisque la première question ne s'affiche plus!

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
var r;
var q; 
 
//var eaigu = '\351';
//var egrave = '\350';
 
var quest  =   "<h3 align='center'> QUESTION : ";
	quest  +=   "Sur quelle période s'étend l'impressionnisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Seconde moitié du XVIIème</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Première moitié du XIXème</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Début du XXème</li>";
	quest  +=     "</ul>";
 
var repOK = "Bonne r\351ponse !";
var repKO = "Mauvaise r\351ponse !";
var score=0;
var i=1;
window.onload= function(){
	q=document.getElementById("QUEST");
	q.innerHTML=quest.toString();
	document.getElementsByName("a").onclick= function () {	
		alert("Vous avez choisi d'abandonner ce jeu");
		document.load("../index.html");
	};                                  
	document.getElementsByName("v").onclick=function() {
		if (r=="r2") {
			alert(repOK);
			score++;
		}
		else if (r=="r1"||r=="r3") {
			alert(repKO);
			score--;
		}
		else if (r=="r1f"||r=="r3f") {
			alert(repKO);
			score--;
			alert("le jeu est terminé. Votre score est de"+score);
			document.load("../index.html");
		}
		else {
			alert(repOK);
			score++;
			document.load("../index.html");
		}
	i++;
	qi();
	question();
	};                                                                                        
function question ()  {
	q.innerHTML=quest.toString();
	};
 
function reponse(rep)  {
	r=rep;
	};
function q2(){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qui a peint le tableau Guernica ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Henri Salvador</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Pablo Picasso</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Francisco Goya</li>";
	quest  +=     "</ul>";
	};
	function q3(){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "D'où vient le nom impressionnisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> D'un tableau de Monet</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Du style de la peinture</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Ce nom était joli</li>";
	quest  +=     "</ul>";
	};
	function q4(){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qu'est-ce que le David de Michel-Ange ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Un ange qui s'appelle David</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Une peinture de David</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Une sculpture de David</li>";
	quest  +=     "</ul>";
	};
	function q5(){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qu'est-ce que le fauvisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2f' onclick='reponse(this.value)' /> Un courant artistique reposant sur l'utilisation des couleurs</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1f' onclick='reponse(this.value)' /> L'art de manier la faux</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3f' onclick='reponse(this.value)' /> Un film documentaire centré sur la vie des fauves</li>";
	quest  +=     "</ul>";
	};

**SylvainPV** · 02/02/2014, 16h34

http://javascript.developpez.com/faq...syntaxe#Erreur

**NoSmoking** · 02/02/2014, 17h42

En plus des outils disponibles, signalés dans le lien fourni par SylvainPV, une bonne indentation te permettrait de voir qu'il te manque un crochet fermant, ce sont de bonnes habitudes à prendre.

Important: On notera au passage que la méthode est document.getElementsByName.

cette méthode retourne une nodeList d'éléments DOM, comme le s le sous-entend, donc tu ne peux l'utiliser tel que, il te faut boucler sur les éléments pour leur affecter une action sur l'événement onclick.

Code :

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

1
2
3
4
5
6
7
8
var oBtns = document.getElementsByName('a');
for( var i=0, nb = oBtns.length; i<nb; i++){
  oBtns[i].onclick= function (){
    alert("Vous avez choisi d'abandonner ce jeu");
    // Modification ICI pour retour à l'index
    document.location.href= '../index.html';
  };
}

maintenant peut se poser la question de l'utilité de l'utilisation de cette méthode attendu que visiblement tu n'as qu'un élément ayant comme name="a", idem pour name="v", mais bon.

**aertys** · 04/02/2014, 18h49

Oui mais est-ce que getElementById, ça marche, parce que moi je n'utilisais le name que pour dire que j'ai utilisé deux fonctions différentes...

**NoSmoking** · 06/02/2014, 21h56

Oui mais est-ce que getElementById, ça marche,...

je veux mon neveu

cette méthode est un des fers de lance de l’accès au DOM

... parce que moi je n'utilisais le name que pour dire que j'ai utilisé deux fonctions différentes...

j'ai du mal à comprendre ce que tu essaies d'expliquer.

**aertys** · 08/02/2014, 23h30

en fait j"essayais d'expliquer que pour moi en fait le name était utilisé mais inutile j'ai donc remplacé les name par des id et ça marche!
enfin reste un problême; quand j'écris document.load, je voudrais charger une autre page, mais évidemment c'est pas comme ça qu'on fait!
auriez- vous une idée?

**NoSmoking** · 09/02/2014, 08h59

quand j'écris document.load, je voudrais charger une autre page,

la réponse a été apportée dans le code que je t'ai fourni un peu avant.

Code :

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

1
2
3
4
5
6
7
8
var oBtns = document.getElementsByName('a');
for( var i=0, nb = oBtns.length; i<nb; i++){
  oBtns[i].onclick= function (){
    alert("Vous avez choisi d'abandonner ce jeu");
    // Modification ICI pour retour à l'index
    document.location.href= '../index.html';
  };
}

**aertys** · 09/02/2014, 18h43

bonsoir,
donc j'ai eu pas mal de conseils merci,
j'ai donc amélioré mes codes:
html:

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
<!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>
	<script type="text/javascript" src="../scriptJS/jquery.js"></script>
<script src="../scriptJS/questionnaire.js"></script>
<!--définir script-->
</head>
 
<body id="b">  
	<h1>QUESTIONNAIRE - HISTOIRE DE L'ART</h1>
	<form>
	 <div id='QUEST'></div>
	 <input type ="submit" id="v" value="valider"></input>
	 <input type ="submit" id="a" value="abandonner"></input>
	</form>
 
</body> </html>

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
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
var r;
var q; 
 
//var eaigu = '\351';
//var egrave = '\350';
 
var quest;
 
var repOK = "Bonne r\351ponse !";
var repKO = "Mauvaise r\351ponse !";
var score=0;
var i=1;
window.onload= function(){
	q=document.getElementById("QUEST");
	document.getElementById("a").onclick= function () {	
		alert("Vous avez choisi d'abandonner ce jeu");
    document.location.href= '../../vue/php/index.php';
	};                                  
	document.getElementById("v").onclick=function() {
		if (r=="r2") {
			alert(repOK);
			score++;
		}
		else if (r=="r1"||r=="r3") {
			alert(repKO);
			score--;
		}
		else if (r=="r1f"||r=="r3f") {
			alert(repKO);
			score--;
		}
		else {
			alert(repOK);
			score++;
 
		}
	i++;
	affq(i);
	}                     
}; //fin window.onload                                                                
function question ()  {
	q.innerHTML=quest.toString();
	};
 
function reponse(rep)  {
	r=rep;
	};
function affq(i){
	if (i==1) {
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Sur quelle période s'étend l'impressionnisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Seconde moitié du XVIIème</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Première moitié du XIXème</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Début du XXème</li>";
	quest  +=     "</ul>";
	}
	if (i==2){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qui a peint le tableau Guernica ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Henri Salvador</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Pablo Picasso</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Francisco Goya</li>";
	quest  +=     "</ul>";
	}
	if (i==3){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "D'où vient le nom impressionnisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> D'un tableau de Monet</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Du style de la peinture</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Ce nom était joli</li>";
	quest  +=     "</ul>";
	}
	if (i==4){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qu'est-ce que le David de Michel-Ange ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Un ange qui s'appelle David</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Une peinture de David</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Une sculpture de David</li>";
	quest  +=     "</ul>";
	}
	if (i==5){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qu'est-ce que le fauvisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2f' onclick='reponse(this.value)' /> Un courant artistique reposant sur l'utilisation des couleurs</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1f' onclick='reponse(this.value)' /> L'art de manier la faux</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3f' onclick='reponse(this.value)' /> Un film documentaire centré sur la vie des fauves</li>";
	quest  +=     "</ul>";
	}
	if (i>5) {
		document.location.href= '../../vue/php/index.php';
		alert("le jeu est terminé. Votre score est de"+score);
	}				
	question();
};

le problême étant que les questions ne s'affichent pas et si je clique sur un bouton, le alert marche, mais pas la redirection

**aertys** · 15/02/2014, 15h45

Bon alors à l'aide de la console et de nombreux console.log, j' ai déduit que le problême est situé dans affq(i) (jusqu'à i++,ça marche bien) ... et les document.location.href= ne marchent toujours pas.
code 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
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
var r;
var q; 
 
//var eaigu = '\351';
//var egrave = '\350';
 
 
 
var repOK = "Bonne r\351ponse !";
var repKO = "Mauvaise r\351ponse !";
var score;
var i;
window.onload= function(){
	q=document.getElementById("QUEST");
	score=0;
	i=1;
	affq(i);
	document.getElementById("a").onclick= function () {	
		alert("Vous avez choisi d'abandonner ce jeu");
    document.location.href= '../../vue/php/index.php';
	};                                  
	document.getElementById("v").onclick=function() {
		if (r=="r2") {
			alert(repOK);
			score++;
		}
		else if (r=="r1"||r=="r3") {
			alert(repKO);
			score--;
		}
		else if (r=="r1f"||r=="r3f") {
			alert(repKO);
			score--;
		}
		else {
			alert(repOK);
			score++;
 
		}
	i++;
	console.log(i);
	affq(i);
	}                     
}; //fin window.onload                                                                
function reponse(rep)  {
	r=rep;
	};
function affq(i){
	var quest;
	if (i==1) {
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Sur quelle période s'étend l'impressionnisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Seconde moitié du XVIIème</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Première moitié du XIXème</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Début du XXème</li>";
	quest  +=     "</ul>";
	}
	if (i==2){
			quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qui a peint le tableau Guernica ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Henri Salvador</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Pablo Picasso</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Francisco Goya</li>";
	quest  +=     "</ul>";
	}
	if (i==3){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "D'où vient le nom impressionnisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> D'un tableau de Monet</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Du style de la peinture</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Ce nom était joli</li>";
	quest  +=     "</ul>";
	}
	if (i==4){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qu'est-ce que le David de Michel-Ange ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3' onclick='reponse(this.value)' /> Un ange qui s'appelle David</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1' onclick='reponse(this.value)' /> Une peinture de David</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2' onclick='reponse(this.value)' /> Une sculpture de David</li>";
	quest  +=     "</ul>";
	}
	if (i==5){
	quest="<h3 align='center'> QUESTION : ";
	quest  +=   "Qu'est-ce que le fauvisme ?</h3><hr>";
	quest  +=	"<ul style='list-style-type:none'>";
	quest  +=   "<li><input  type='radio' name='rd' value='r2f' onclick='reponse(this.value)' /> Un courant artistique reposant sur l'utilisation des couleurs</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r1f' onclick='reponse(this.value)' /> L'art de manier la faux</li>";
	quest  +=   "<li><input  type='radio' name='rd' value='r3f' onclick='reponse(this.value)' /> Un film documentaire centré sur la vie des fauves</li>";
	quest  +=     "</ul>";
	}
	if (i>5) {
		document.location.href= '../../vue/php/index.php';
		alert("le jeu est terminé. Votre score est de"+score);
	}				
	q.innerHTML=quest.toString();
};

**Watilin** · 15/02/2014, 18h19

Je ne sais pas si ça va résoudre ton problème, mais à toutes fins utiles, j'ai factorisé ton code et remplacé les innerHTML par une construction plus propre avec les méthodes du DOM.

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
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
var r;
var q;
 
//var eaigu = '\xE9';
//var egrave = '\xE8';
 
var repOK = "Bonne r\xE9ponse\xA0!";
var repKO = "Mauvaise r\xE9ponse\xA0!";
var score;
var i;
 
window.onload = function( ){
   q = document.getElementById("QUEST");
   score = 0;
   i = 1;
   afficherQuestion(i);
   document.getElementById("a").onclick = function( ){
      if (confirm("Vous avez choisi d’abandonner ce jeu")) {
         location.href =  '../../vue/php/index.php';
      }
   };
   document.getElementById("v").onclick = function( ){
      switch (r) {
         case "r1":
         case "r3":
         case "r1f":
         case "r3f":
            alert(repKO);
            score--;
            break;
 
         case "r2":
         default:
            alert(repOK);
            score++;
      }
      i++;
      console.log(i);
      afficherQuestion(i);
   }
}; // fin window.onload
 
function reponse( rep ){
   r = rep;
};
 
function afficherQuestion( i ){
   q.innerHTML = "";
 
   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);
      location.href = '../../vue/php/index.php';
   }
};

**aertys** · 25/02/2014, 16h37

Rebonjour,
d'abord merci pour ce code,
ça marche mieux maintenant: la première question s'affiche,et quand on veut passer à la suivante, il change de question pour 1s, et revient à la première. donc j'en déduit qu'à chaque nouvelle question il repasse dans le onload et donc ré-exécute i=1. ma question c'est comment éviter ça?

**NoSmoking** · 25/02/2014, 19h57

il change de question pour 1s, et revient à la première

Peux être devrais tu remettre ton code actuel complet pour que l'on puisse refaire le point.

**aertys** · 25/02/2014, 20h38

oui oui ok j'ai repris le code qu'on m'a fourni presque tel quel:
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
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
var r;
var q;
 
//var eaigu = '\xE9';
//var egrave = '\xE8';
 
var repOK = "Bonne r\xE9ponse\xA0!";
var repKO = "Mauvaise r\xE9ponse\xA0!";
var score;
var i;
 
window.onload = function( ){
   q = document.getElementById("QUEST");
   score = 0;
   i = 1;
   afficherQuestion(i);
   document.getElementById("a").onclick = function( ){
      if (confirm("Vous avez choisi dâ€™abandonner ce jeu")) {
         location.href =  '../php/index.php';
      }
   };
   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(repOK);
            score++;
      }
      i++;
      console.log(i);
      afficherQuestion(i);
   }
}; // fin window.onload
 
function reponse( rep ){
   r = rep;
};
 
function afficherQuestion( i ){
   q.innerHTML = "";
 
   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 = '../php/index.php';
   }
};

html:

Code html :

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
<!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>
	<script type="text/javascript" src="../scriptJS/jquery.js"></script>
<script src="../scriptJS/questionnaire.js"></script>
<!--définir script-->
</head>
 
<body id="b">  
	<h1>QUESTIONNAIRE - HISTOIRE DE L'ART</h1>
	<form>
	 <div id='QUEST'></div>
	 <input type ="submit" id="v" value="valider"></input>
	 <input type ="submit" id="a" value="abandonner"></input>
	</form>
 
</body> </html>

**NoSmoking** · 25/02/2014, 22h13

C'est à cause de ton code HTML avec la FORM et tes INPUTs type submit dont tu n'a que faire.
remplace ton code par

Code html :

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

1
2
3
4
5
6
<body id="b">
    <h1>QUESTIONNAIRE - HISTOIRE DE L'ART</h1>
    <div id='QUEST'></div>
    <button id="v">valider></button>
    <button id="a">abandonner</button>
</body>

cela devrait le faire.

**aertys** · 25/02/2014, 23h15

uN GRAND MERCI À NoSmoking,ça marche parfaitement maintenant !

Un jeu sur le web

JavaScript

Discussions similaires

Partager

Partager