Sujet Précédent Sujet Suivant

Quiz en Javascript

Fermé
Tatiana - Modifié le 17 juil. 2018 à 19:31
KX Messages postés 16753 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 25 novembre 2024 - 17 juil. 2018 à 20:27
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 

<!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:

1 réponse

Réponse 1 / 1
KX Messages postés 16753 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 25 novembre 2024 3 019
17 juil. 2018 à 19:40
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.
0
Tatiana
17 juil. 2018 à 19:44
Merci beaucoup pour la réponse et pour les photos et les messages ?
0
KX Messages postés 16753 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 25 novembre 2024 3 019 > Tatiana
17 juil. 2018 à 20:06
Pour la réponse tu fais 
innerHTML = messages[score]
mais 
score
n'a aucune valeur...
Peut-être qu'il faudrait plutôt utiliser 
range
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 
img
chez toi ?
0
Tatiana
17 juil. 2018 à 20:23
Encore Merci pour tes réponses.
Et si je veux ajouter un message et une photo différente pour chaque résultat de 0 à 3 je fais comment?
0
KX Messages postés 16753 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 25 novembre 2024 3 019 > Tatiana
17 juil. 2018 à 20:27
Tu enlèves tout ce qui concerne le 
range
et tu fait directement 
messages[correct]
et 
pictures[correct]
après avoir bien sûr ajouté une case dans tes tableaux (il t'en faut 4, contre 3 actuellement)
0

Discussions similaires

Sticker Instagram Quizz
Camcam26___ -
camcam26__ -

7 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Je n’ai toujours pas le sticker « question » insta
Jesuisendetresse -
Ali -

33 réponses
afficher un tableau JS en HTML
jibouz12 -
jibouz12 -

3 réponses