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

Un jeu sur le web

JavaScript

Vue hybride

Discussions similaires

Partager

Partager