Quizz affichant une note à la fin

Résolu/Fermé

Staerki - Modifié le 10 déc. 2020 à 21:23
Staerki - 10 déc. 2020 à 22:30

Bonjour! :)

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>

A voir également:

Quizz affichant une note à la fin
Comment mettre une note sur 20 ✓ - Forum Bureautique
Ce programme est écrit en python. il construit un mot secret dans une variable mais il ne l'affiche pas. modifiez-le pour qu'il affiche le mot secret. exécutez-le. quel est ce mot secret ? ✓ - Forum Python
Comment transformer une note sur 20 ✓ - Forum Bureautique
Salto fin - Guide
Chambre 1408 explication fin - Forum Cinéma / Télé

2 réponses

Réponse 1 / 2

jordane45 Messages postés 37262 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 mars 2023 4 548
10 déc. 2020 à 21:32

Bonjour,

Déjà, Pour poster ton code sur le forum, tu dois utiliser les BALISES DE CODE.
Explications ( à lire ENTIEREMENT !! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

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és 37262 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 mars 2023 4 548
10 déc. 2020 à 21:40

Pour info, la comparaison se fait avec deux "="

if (score == 5) {

Staerki
Modifié le 10 déc. 2020 à 22:16

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és 37262 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 mars 2023 4 548 > 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és 37262 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 mars 2023 4 548 > jordane45 Messages postés 37262 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 mars 2023
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.

Réponse 2 / 2

Staerki
10 déc. 2020 à 22:30

Merci beaucoup!!! J'ai juste changé les onclick en onchange là où il fallait et ça a marché!
Pas eu besoin des console.log finalement.

Encore merci, j'ai passé une après-midi entière sur ce code pour un problème au final plutôt simple haha :'))

Newsletters