Quiz en Javascript
Tatiana
-
KX Messages postés 19031 Statut Modérateur -
KX Messages postés 19031 Statut Modérateur -
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
Css
Javascript
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
<!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
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
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];
}
1 réponse
-
Bonjour,
Le problème vient de ces lignes là :
<input type = "radio" id = "mc" name = "question3" value = "Albany"> Abidjan<br> <input type = "radio" id = "mc" name = "question3" value = "All Benny's"> Bamako<br>
La bonne réponse est Abidjan mais ton code considère que c'est Albany... donc c'est faux.-
- Pour la réponse tu fais
innerHTML = messages[score]
maisscore
n'a aucune valeur...
Peut-être qu'il faudrait plutôt utiliserrange
ici ?
document.getElementById("message").innerHTML = messages[range];
Quant aux photos, elles s'affichent bien chez moi... Est-ce que tu les as mis dans le bon dossierimg
chez toi ?
-
-
