J'essaie de faire un quizz sous html en javascript depuis cet après-midi et j'ai un problème. Le code fonctionne mais lorsque vient le moment d'afficher la note: la note est de 5/5 même si j'ai tout faux ou je n'ai rien rempli. Je suppose qu'il y a un problème au niveau de désigner quelle est la réponse juste ou quelque chose comme ça mais je ne trouve pas le problème. Quelqu'un peut m'aider?
(Je précise que pour le script JS j'ai repris un code que j'ai trouvé sur internet et je l'ai adapté à mon quizz)
Voilà le code:
<html>
<head>
<title>CO2 et utilisation d'énergie-Quizz</title>
<head>
<script type="text/JavaScript">
/* GameQuiz v1.0 by Wizzz.
Copyright (c) of Wizzz, 1997.
Permission to use, edit, etc. granted as long as the head section is intact!
Modifications et ajouts par Didier Anselm, puis Isabelle Gautier
Modifications par Noha Seddik
/
// initialisation des variables/ : les réponses sont un tableau "rep" de 10 valeurs, les questions faites un tableau "faite"
// le score est mis à zéro au départ
var rep = new Array;
var faite = new Array;
var score = 0;
// rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
// initialisation des bonnes réponses
// valeurs à modifier (a b c ou d : sont les réponses justes, une par question rep[1] est la réponse à la question 1, etc..)
rep[1] = "a";
rep[2] = "b";
rep[3] = "b";
rep[4] = "d";
rep[5] = "a";
// rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
// les parties en bleu apparaissent en commentaire, elles peuvent être modifiées
// la fonction "engine" vérifie si la réponse est bonne ("question" est le numéro de la question,
// "reponse" est la réponse de l'utilisateur, il a un point de plus si elle est bonne, - 1 s'il a déjà répondu.
function Engine(question, reponse) {
if (reponse != rep[question]) {
if (!faite[question]) {
faite[question] = 0;
}
}
else {
if (!faite[question]) {
faite[question] = 0;
score++;
}
}
}
// commentaires pour le résultat final
function NextLevel (){
if (score = 5) {
alert(score + "/5. " +"Bravo, trop fort! :)");
}
if (score > 1 && score <= 2) {
alert(score + "/5. " + "Pas ouf :/");
}
if (score >= 0 && score <= 1) {
alert(score + "/5. " + "Il faut recommencer là...");
}
// ligne qui suit pour vider le formulaire :
faite = new Array;
score = 0;
//ligne suivante à désactiver si IE3 ou -
document.quizz.reset();
}
</script>
</head>
<body>
<h1>CO2 et utilisation d'énergie</h1>
<h2>Quizzzzz</h2>
<p><i>Voici un petit quizz pour tester vos connaissances.</i></p>
<FORM NAME="Quizz">
L'augmentation de CO2 dans l'atmosphère est-elle un phénomène récent au niveau de la période planétaire ?<br>
<INPUT TYPE=RADIO NAME="1" VALUE="a" onclick="Engine(1, this.value)">Oui</input>
<INPUT TYPE=RADIO NAME="1" VALUE="b" onclick="Engine(1, this.value)">Non</input><br>
<p>
Si oui, les principaux responsables de cette augmentation sont <SELECT NAME=OPINION1>
<OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="a">-
<OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="b">les humains
<OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="c">les animaux
<OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="d">les plantes
<OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="e">les océans
</SELECT>, qui a développé
depuis plusieurs siècles de nombreuses énergies productrices de gaz à effet de serre.
</p>
<p>Tous les pays possèdent des données sur leur émission de CO2 et leur consommation d'énergie entre 2008 et 2014<br>
<INPUT TYPE=RADIO NAME="3" VALUE="a" onclick="Engine(3, this.value)">Vrai
<INPUT TYPE=RADIO NAME="3" VALUE="b" onclick="Engine(3, this.value)">Faux</p>
<p>
Quel est le principal gaz à effet de serre dégagé
dans l'atmosphère rejeté par notre civilisation responsable du réchauffement climatique ?<br>
<SELECT NAME=OPINION1>
<OPTION NAME="4" onclick="Engine(4, this.value)" VALUE="a">-
<OPTION NAME="4" onclick="Engine(4, this.value)" VALUE="b">Le méthane (CH4)
<OPTION NAME="4" onclick="Engine(4, this.value)" VALUE="c">Le protoxyde d'azote (N20)
<OPTION NAME="4" onclick="Engine(4, this.value)" VALUE="d">Le dioxyde de carbone (CO2)
</SELECT>
</p>
<p>
Quels sont les principales conséquences de l'augmentation de l'émission de CO2 ?<br>
<INPUT TYPE=CHECKBOX NAME="5" VALUE="a" onclick="Engine(5, this.value)"> Réchauffement climatique<br>
<INPUT TYPE=CHECKBOX NAME="5" VALUE="b" onclick="Engine(5, this.value)"> Fragilisation des immeubles <br>
<INPUT TYPE=CHECKBOX NAME="5" VALUE="a" onclick="Engine(5, this.value)"> Destruction de la couche d'ozone <br>
<INPUT TYPE=CHECKBOX NAME="5" VALUE="a" onclick="Engine(5, this.value)"> Acidification des océans <br>
<INPUT TYPE=CHECKBOX NAME="5" VALUE="e" onclick="Engine(5, this.value)"> Refroidissement du noyau terrestre
</p>
<p><input type="button" name="Resultats" value="Résultats" onclick="NextLevel()">
<br>
</FORM>
<a href="index.html">Index</a> ● <a href="hyp.html">Hypothèse</a> ● <a href="res.html">Ressources</a>
</br>
</body>
</html>
Ensuite, as tu essayé de placer des console.log dans ton code pour essayer de voir ce qui se passe ?
NB: Un quizz en javascript ne sera pas sécurisé. N'importe qui peut regarder le code source de la page et connaitre les bonne réponses... Seule l'utilisation d'un langage serveur (comme du php) sera sécurisé.
Donc, sauf si c'est juste pour le fun, attention....
jordane45
Messages postés38379Date d'inscriptionmercredi 22 octobre 2003StatutModérateurDernière intervention12 janvier 20254 727 10 déc. 2020 à 21:40
Merci beaucoup pour votre réponse!
Et c'est juste pour le fun donc pas de soucis si l'on peut voir les réponses.
J'ai résolu mon problème mais j'en ai un nouveau: les 2 menus déroulants que j'ai intégré ne sont pas pris en compte dans la note. Par cela je veux dire que même si je choisis la bonne réponse, la note n'augmente pas comme elle le fait lorsque je choisis les bonnes réponses des autres questions...
Voici le nouveau code:
<html>
<head>
<title>CO2 et utilisation d'énergie-Quizz</title>
<head>
<script type="text/JavaScript">
/* GameQuiz v1.0 by Wizzz.
Copyright (c) of Wizzz, 1997.
Permission to use, edit, etc. granted as long as the head section is intact!
Modifications et ajouts par Didier Anselm, puis Isabelle Gautier
Modifications par Noha Seddik pour adapter le code
*/
// initialisation des variables/ : les réponses sont un tableau "rep" de 10 valeurs, les questions faites un tableau "faite"
// le score est mis à zéro au départ
var rep = new Array;
var faite = new Array;
var score = 0;
// rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
// initialisation des bonnes réponses
// valeurs à modifier (a b c ou d : sont les réponses justes, une par question rep[1] est la réponse à la question 1, etc..)
rep[1] = "a";
rep[2] = "b";
rep[3] = "b";
rep[4] = "d";
rep[5] = "a";
// rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
// les parties en bleu apparaissent en commentaire, elles peuvent être modifiées
// la fonction "engine" vérifie si la réponse est bonne ("question" est le numéro de la question,
// "reponse" est la réponse de l'utilisateur, il a un point de plus si elle est bonne, - 1 s'il a déjà répondu.
function Engine(question, reponse) {
if (reponse != rep[question]) {
if (!faite[question]) {
faite[question] = 0;
}
}
else {
if (!faite[question]) {
faite[question] = 0;
score++;
}
}
}
// commentaires pour le résultat final
function NextLevel (){
if (score > 4) {
alert(score + "/7. " +"Bravo, trop fort! :)");
}
if (score > 2 && score <= 4) {
alert(score + "/7. " + "Pas ouf :/");
}
if (score >= 0 && score <= 2) {
alert(score + "/7. " + "Il faut recommencer là...");
}
// ligne qui suit pour vider le formulaire :
faite = new Array;
score = 0;
//ligne suivante à désactiver si IE3 ou -
document.quest.reset();
}
</script>
</head>
<body>
<h1>CO2 et utilisation d'énergie</h1>
<h2>Quizzzzz</h2>
<p><i>Voici un petit quizz pour tester vos connaissances.</i></p>
<FORM NAME="Quizz">
L'augmentation de CO2 dans l'atmosphère est-elle un phénomène récent au niveau de la période planétaire ?<br>
<INPUT TYPE=RADIO NAME="1" VALUE="a" onclick="Engine(1, this.value)">Oui</input>
<INPUT TYPE=RADIO NAME="1" VALUE="b" onclick="Engine(1, this.value)">Non</input><br>
<p>
Si oui, les principaux responsables de cette augmentation sont
<SELECT NAME=Resp>
<OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="a">-
<OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="b">les humains
<OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="c">les animaux
<OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="d">les plantes
<OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="e">les océans
</SELECT>, qui a développé
depuis plusieurs siècles de nombreuses énergies productrices de gaz à effet de serre.
</p>
<p>Tous les pays possèdent des données sur leur émission de CO2 et leur consommation d'énergie entre 2008 et 2014<br>
<INPUT TYPE=RADIO NAME="3" VALUE="a" onclick="Engine(3, this.value)">Vrai
<INPUT TYPE=RADIO NAME="3" VALUE="b" onclick="Engine(3, this.value)">Faux</p>
<p>
Quel est le principal gaz à effet de serre dégagé
dans l'atmosphère rejeté par notre civilisation responsable du réchauffement climatique ?<br>
<SELECT NAME=Rech>
<OPTION NAME="4" onclick="Engine(4, this.value)" VALUE="a">-
<OPTION NAME="4" onclick="Engine(4, this.value)" VALUE="b">Le méthane (CH4)
<OPTION NAME="4" onclick="Engine(4, this.value)" VALUE="c">Le protoxyde d'azote (N20)
<OPTION NAME="4" onclick="Engine(4, this.value)" VALUE="d">Le dioxyde de carbone (CO2)
</SELECT>
</p>
<p>
Quels sont les principales conséquences de l'augmentation de l'émission de CO2 ?<br>
<INPUT TYPE=CHECKBOX NAME="5" VALUE="a" onclick="Engine(5, this.value)"> Réchauffement climatique<br>
<INPUT TYPE=CHECKBOX NAME="5" VALUE="b" onclick="Engine(5, this.value)"> Fragilisation des immeubles <br>
<INPUT TYPE=CHECKBOX NAME="5" VALUE="a" onclick="Engine(5, this.value)"> Destruction de la couche d'ozone <br>
<INPUT TYPE=CHECKBOX NAME="5" VALUE="a" onclick="Engine(5, this.value)"> Acidification des océans <br>
<INPUT TYPE=CHECKBOX NAME="5" VALUE="e" onclick="Engine(5, this.value)"> Refroidissement du noyau terrestre
</p>
<p><input type="button" name="Resultats" value="Résultats" onclick="NextLevel()">
<br>
</FORM>
<a href="index.html">Index</a> ● <a href="hyp.html">Hypothèse</a> ● <a href="res.html">Ressources</a>
</br>
</body>
</html>
jordane45
Messages postés38379Date d'inscriptionmercredi 22 octobre 2003StatutModérateurDernière intervention12 janvier 20254 727
>
Staerki
10 déc. 2020 à 22:19
Comme je te l'ai expliqué.. utilise des console.log dans ton code pour voir ce qui se passe ( en regardant, dans l'onglet CONSOLE de ton navigateur...)
par exemple
function Engine(question, reponse) {
console.log({question});
console.log({reponse})
console.log('rep',rep[question]);
console.log('faite',faite[question]);
if (reponse != rep[question]) {
if (!faite[question]) {
faite[question] = 0;
}
} else {
if (!faite[question]) {
faite[question] = 0;
score++;
console.log("on augmente le score ");
}
}
console.log('SCORE',score);
}
Au passage, il faut éviter les onclick sur les <option> et utiliser, à la place, le onchange sur le select
<select onchange="Engine(4, this.value);" >
jordane45
Messages postés38379Date d'inscriptionmercredi 22 octobre 2003StatutModérateurDernière intervention12 janvier 20254 727
>
jordane45
Messages postés38379Date d'inscriptionmercredi 22 octobre 2003StatutModérateurDernière intervention12 janvier 2025 10 déc. 2020 à 22:20
Tu remarqueras dans ton code, que si l'utilisateur veut changer sa réponse.. ben ça lui augmente le score automatiquement... Tu as un souci dans la "logique" de ton code.
10 déc. 2020 à 21:40
if (score == 5) {Modifié le 10 déc. 2020 à 22:16
Et c'est juste pour le fun donc pas de soucis si l'on peut voir les réponses.
J'ai résolu mon problème mais j'en ai un nouveau: les 2 menus déroulants que j'ai intégré ne sont pas pris en compte dans la note. Par cela je veux dire que même si je choisis la bonne réponse, la note n'augmente pas comme elle le fait lorsque je choisis les bonnes réponses des autres questions...
Voici le nouveau code:
<html> <head> <title>CO2 et utilisation d'énergie-Quizz</title> <head> <script type="text/JavaScript"> /* GameQuiz v1.0 by Wizzz. Copyright (c) of Wizzz, 1997. Permission to use, edit, etc. granted as long as the head section is intact! Modifications et ajouts par Didier Anselm, puis Isabelle Gautier Modifications par Noha Seddik pour adapter le code */ // initialisation des variables/ : les réponses sont un tableau "rep" de 10 valeurs, les questions faites un tableau "faite" // le score est mis à zéro au départ var rep = new Array; var faite = new Array; var score = 0; // rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr // initialisation des bonnes réponses // valeurs à modifier (a b c ou d : sont les réponses justes, une par question rep[1] est la réponse à la question 1, etc..) rep[1] = "a"; rep[2] = "b"; rep[3] = "b"; rep[4] = "d"; rep[5] = "a"; // rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr // les parties en bleu apparaissent en commentaire, elles peuvent être modifiées // la fonction "engine" vérifie si la réponse est bonne ("question" est le numéro de la question, // "reponse" est la réponse de l'utilisateur, il a un point de plus si elle est bonne, - 1 s'il a déjà répondu. function Engine(question, reponse) { if (reponse != rep[question]) { if (!faite[question]) { faite[question] = 0; } } else { if (!faite[question]) { faite[question] = 0; score++; } } } // commentaires pour le résultat final function NextLevel (){ if (score > 4) { alert(score + "/7. " +"Bravo, trop fort! :)"); } if (score > 2 && score <= 4) { alert(score + "/7. " + "Pas ouf :/"); } if (score >= 0 && score <= 2) { alert(score + "/7. " + "Il faut recommencer là..."); } // ligne qui suit pour vider le formulaire : faite = new Array; score = 0; //ligne suivante à désactiver si IE3 ou - document.quest.reset(); } </script> </head> <body> <h1>CO2 et utilisation d'énergie</h1> <h2>Quizzzzz</h2> <p><i>Voici un petit quizz pour tester vos connaissances.</i></p> <FORM NAME="Quizz"> L'augmentation de CO2 dans l'atmosphère est-elle un phénomène récent au niveau de la période planétaire ?<br> <INPUT TYPE=RADIO NAME="1" VALUE="a" onclick="Engine(1, this.value)">Oui</input> <INPUT TYPE=RADIO NAME="1" VALUE="b" onclick="Engine(1, this.value)">Non</input><br> <p> Si oui, les principaux responsables de cette augmentation sont <SELECT NAME=Resp> <OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="a">- <OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="b">les humains <OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="c">les animaux <OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="d">les plantes <OPTION NAME="2" onclick="Engine(2, this.value)" VALUE="e">les océans </SELECT>, qui a développé depuis plusieurs siècles de nombreuses énergies productrices de gaz à effet de serre. </p> <p>Tous les pays possèdent des données sur leur émission de CO2 et leur consommation d'énergie entre 2008 et 2014<br> <INPUT TYPE=RADIO NAME="3" VALUE="a" onclick="Engine(3, this.value)">Vrai <INPUT TYPE=RADIO NAME="3" VALUE="b" onclick="Engine(3, this.value)">Faux</p> <p> Quel est le principal gaz à effet de serre dégagé dans l'atmosphère rejeté par notre civilisation responsable du réchauffement climatique ?<br> <SELECT NAME=Rech> <OPTION NAME="4" onclick="Engine(4, this.value)" VALUE="a">- <OPTION NAME="4" onclick="Engine(4, this.value)" VALUE="b">Le méthane (CH4) <OPTION NAME="4" onclick="Engine(4, this.value)" VALUE="c">Le protoxyde d'azote (N20) <OPTION NAME="4" onclick="Engine(4, this.value)" VALUE="d">Le dioxyde de carbone (CO2) </SELECT> </p> <p> Quels sont les principales conséquences de l'augmentation de l'émission de CO2 ?<br> <INPUT TYPE=CHECKBOX NAME="5" VALUE="a" onclick="Engine(5, this.value)"> Réchauffement climatique<br> <INPUT TYPE=CHECKBOX NAME="5" VALUE="b" onclick="Engine(5, this.value)"> Fragilisation des immeubles <br> <INPUT TYPE=CHECKBOX NAME="5" VALUE="a" onclick="Engine(5, this.value)"> Destruction de la couche d'ozone <br> <INPUT TYPE=CHECKBOX NAME="5" VALUE="a" onclick="Engine(5, this.value)"> Acidification des océans <br> <INPUT TYPE=CHECKBOX NAME="5" VALUE="e" onclick="Engine(5, this.value)"> Refroidissement du noyau terrestre </p> <p><input type="button" name="Resultats" value="Résultats" onclick="NextLevel()"> <br> </FORM> <a href="index.html">Index</a> ● <a href="hyp.html">Hypothèse</a> ● <a href="res.html">Ressources</a> </br> </body> </html>10 déc. 2020 à 22:19
par exemple
function Engine(question, reponse) { console.log({question}); console.log({reponse}) console.log('rep',rep[question]); console.log('faite',faite[question]); if (reponse != rep[question]) { if (!faite[question]) { faite[question] = 0; } } else { if (!faite[question]) { faite[question] = 0; score++; console.log("on augmente le score "); } } console.log('SCORE',score); }Au passage, il faut éviter les onclick sur les <option> et utiliser, à la place, le onchange sur le select
10 déc. 2020 à 22:20