Quiz en Javascript
Tatiana
-
KX Messages postés 16761 Date d'inscription Statut Modérateur Dernière intervention -
KX Messages postés 16761 Date d'inscription Statut Modérateur Dernière intervention -
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];
}
A voir également:
- Quiz en Javascript
- Logo quiz - Télécharger - Jeux vidéo
- Telecharger javascript - Télécharger - Langages
- Net quiz - Télécharger - Divers Web & Internet
- Duel quiz - Télécharger - Société
- Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
1 réponse
Bonjour,
Le problème vient de ces lignes là :
La bonne réponse est Abidjan mais ton code considère que c'est Albany... donc c'est faux.
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.
Peut-être qu'il faudrait plutôt utiliser 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 dossier chez toi ?
Et si je veux ajouter un message et une photo différente pour chaque résultat de 0 à 3 je fais comment?