Affichage résultat d'un Quiz
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:
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:
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:
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];
} |
