Affichage résultat d'un Quiz

**Titina** · 17/07/2018, 19h06

Bonjour tout le monde,
Ci-joint mon code Javascript pour un petit Quiz.
Le but est de voir afficher: Vous avez eu 0 ou 1 avec le message "Vous pouvez mieux faire" et l'image de lose.gif qui est bien placée dans le dossier img.
Vous avez eu 2 avec le message "Pas mal" et l'image de meh.jpeg qui est bien placée dans le dossier img.
Et au troisième cas vous avez eu 3 avec le message "Bravo!" et l'image win.gif.
Je ne sais pas où se trouve l'erreur jamais les trois réponses ne sont correctes. Le message ne s'affiche que pour "pas mal" et pareil pour l'image aussi.
Vous trouverez en dessous le HTML, le CSS et le javascript.
S'il vous plait aidez-moi c'est urgent.
Cordialement.
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
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
<!DOCTYPE html>
<html>
<head>
 
<title>Jouez et gagnez un voyage !</title>
<link href ="style.css" rel ="stylesheet">
<script src = "main.js"></script>
 
</head>
 
 
<body>
<h1>Notre agence vous offre l'opportunité de gagner le tour du monde ! </h1>
 
 
<form id = "quiz" name = "quiz">
 
 
<p class = "questions">Quel est la capitale de l'Island? </p>
<input id = "textbox" type = "text" name = "question1">
 
<p class = "questions">Quelle est la capitale de l'Autriche? </p>
<input type = "radio" id = "mc" name = "question2" value = "Vienne"> Vienne <br>
<input type = "radio" id = "mc" name = "question2" value = "Alger"> Alger <br>
 
<p class = "questions">Quelle est la capitale du Côte d'Ivoire?</p>
 
<input type = "radio" id = "mc" name = "question3" value = "Albany"> Abidjan<br>
<input type = "radio" id = "mc" name = "question3" value = "All Benny's"> Bamako<br>
 
 
<input id = "button" type = "button" value = "Validez!" onclick = "check();">
 
 
</form>
 
<div id = "after_submit">
<p id = "number_correct"></p>
<p id = "message"></p>
<img id = "picture">
</div>
</html>
 
</body>

Css

Code CSS :

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
body {
	font-family: 'Arial', sans-serif;
}
 
 
 
#quiz {
	margin-left: 10px;
	background: #18f2e0;
	padding: 10px 20px 10px 20px;
	width: 400px;
	border-radius: 20px;
	float: left;
 
}
 
input {
	margin-bottom: 20px;
	display: block;
}
 
#textbox {
	height: 25px;
	font-size: 16px;
	border-radius: 5px;
	border: none;
	padding-left: 5px;
}
 
 
#button {
	background: green;
	border: none;
	border-radius: 5px;
	padding: 10px;
	color: white;
	font-size: 16px;
	transition-duration: .5s;
	margin-top: 15px;
        display: block;
        margin: auto;	
}
 
 
 
#button:hover {
	background: white;
	border: 1px solid green;
	color: black;
	cursor: pointer;
 
}
 
#after_submit {
	visibility: hidden;
	background: #e83cdc;
	padding: 10px 20px 10px 20px;
        height: 370px;
	width: 400px;
	border-radius: 20px;
	float: left;
	margin-left: 20px;
	font-size: 30px;
 
 
}
 
#picture {
	width: 395px;
	height: 170px;
}
 
 
 
#mc {
	display: inline;
}

Javascript

Code JS :

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
function check(){
 
	var question1 = document.quiz.question1.value;
	var question2 = document.quiz.question2.value;
	var question3 = document.quiz.question3.value;
	var correct = 0;
 
 
	if (question1 == "Reykjavik") {
		correct++;
}
	if (question2 == "Vienne") {
		correct++;
}	
	if (question3 == "Abidjan") {
		correct++;
	}
 
	var pictures = ["img/win.gif", "img/meh.jpeg", "img/lose.gif"];
	var messages = ["Bravo!", "Pas mal !", "Vous pouvez faire mieux!"];
	var score;
 
	if (correct < 1) {
		range = 2;
	}
 
	if (correct > 0 && correct < 3) {
		range = 1;
	}
 
	if (correct == 3) {
		range = 0;
	}
 
	document.getElementById("after_submit").style.visibility = "visible";
 
	document.getElementById("message").innerHTML = messages[score];
	document.getElementById("number_correct").innerHTML = "Vous avez eu " + correct + " correct.";
	document.getElementById("picture").src = pictures[range];
	}

**danielhagnoul** · 17/07/2018, 21h58

dvjhUtilities-1.8.2.js:505 Il existe 4 exemplaires de l'ID mc. Il n'est pas unique !

**NoSmoking** · 18/07/2018, 10h12

Bonjour,

• effectivement les ID doivent être UNIQUE, mais qui plus est elles ne te servent à rien attendu que tu ne les utilises pas sauf pour affecter un style, que tes éléments ont d'ailleurs par défaut, donc autant passer par des classes.

• Regarde bien ces 2 lignes

Code html :

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

1
2
<input type = "radio" name = "question3" value = "Albany"> Abidjan<br>
<input type = "radio" name = "question3" value = "All Benny's"> Bamako<br>

maintenant compare les values et les textes.

• Un petit dernier pour la route, tu déclares une variable score et tu utilises en plus une variable range, il va te falloir choisir.

Affichage résultat d'un Quiz

JavaScript

Discussions similaires

Partager

Partager