Afficher possibilités de réponse à un quiz

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Maxiflan06
Messages : 3
Enregistré le : 13 déc. 2022, 10:08

Afficher possibilités de réponse à un quiz

Message par Maxiflan06 » 13 déc. 2022, 10:27

Bonjour,

Je suis autant nouveau sur ce forum qu'en html/javascript.

Noël approchant, je me suis lancé dans un quiz en html. Le principe est (je pense) simple ; une question s'affiche de manière aléatoire et le joueur choisi "duo", "carré" ou "cash" pour afficher respectivement 2, 4 ou aucune possibilité(s) de réponse.

Voici le code (encore en travaux bien entendu) :

Code : Tout sélectionner

<!DOCTYPE html>
<html>
  <head>
    <title>Quiz</title>

    <link rel="stylesheet" media="screen" type="text/css" href="cssform.css"/>

    <SCRIPT LANGUAGE=JavaScript>
// Structure du tableau : 
//          Pour la question i, l'énoncé est en (i-1)*6 , le numéro de la bonne réponse est en (i-1)*6 + 1 et les 4 possibilités sont en (i-1)*6 + 2 ,
//          (i-1)*6 + 3 , (i-1)*6 + 4 et (i-1)*6 + 5
        var cinema = ['Qui est Powhatan pour Pocahontas',1,'A. Son père','B. Son frère','C. Sa mère','D. Sa grand-mère',
                      'De quel film est tiré cet extrait 1 ?',4,'A. Jurassic Parc','B. Godzilla','C. Le Hobbit','D. Le seigneur des anneaux',
                      'De quel film est tiré cet extrait 2 ?',3,'A. Shrek','B. Very Bad Trip','C. Men in Black','D. Mars Attack',
                      'De quel film est tiré cet extrait 3 ?',2,'A. Le corniaud','B. Le diner de cons',"C. Qu'est-ce qu'on a fait au bon dieu",'D. Taxi',
                      'Dans La Petite Sirène, quel animal est Eureka ?',3,'A. Une murène','B. Un crabe','C. Une mouette','D. Un poisson',
                      'Quel est le nom de la planète natale de Dark Vador ?',1,'A. Tatooine','B. Alderaan','C. Coruscant','D. Dagobah',
                      'Qui est le réalisateur du film Titanic ?',2,'A. J.J. Abrams','B. James Cameron','C. Steven Spielberg','D. David Fincher',
                      'Dans le Seigneur des Anneaux, quel est le vrai nom de Gollum ?',4,'A. Bilbon','B. Frodon','C. Deagol','D. Smeagol',
                      "Quel est le véritable nom, complet, d'Indiana Jones dans la saga du même nom ?",4,'A. Indiana Jones','B. Indiana Henri Jones','C. Indiana Henri Jones Junior','D. Henri Jones Junior',
                      'Comment se nomme le personnage principal luttant contre les Aliens dans la saga du même nom ?',1,'A. Ellen Ripley','B. Elyn Ripley','C. Linn Ripley','D. Elyn Ridley',
                      'Quelle titre (extrait 4) est associé aux hélicoptères en vol dans le film Apocalypse Now ?',1,'A. La chevauchee des Walkyries','B. La flute enchantee','C. La danse des chevaliers','D. La grande porte de Kiev',
                      'Combien y a-t-il eu de films Rocky ?',3,'A. 6','B. 7','C. 8','D. 9',
                      'Qui a écrit le livre "La Ligne Verte" qui a inspiré le film sorti en 1999 ?',2,'A. Alfred Hitchcock','B. Stephen King','C. Isaac Asimov','D. George Orwell',
                      "Quel nom porte la planète où vivent les indigènes bleus dans Avatar ?",3,'A. Alderaan','B. Coruscant','C. Pandorra','D. Geonosis',
                      'Dans Drangon Ball, quelle technique est notamment utilisée par Krilin pour aveugler ses adversaires ?',1,'A. Morsure du Soleil','B. Genkidama','C. KameHameHa','D. Senzu'
                    ];

        function Nrand(min,max){
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        function afficher(b){
            var i = Nrand(1,b);
            var Q = cinema[6*(i-1)];
            document.echo.champQ.value = Q;
        }

        function afficherDuo(){
            var j = Nrand(1,4);
            while (j = cinema[6*(i-1) + 1]) {var j = Nrand(1,4);}
            var p = Nrand(1,2);
            if (p = 1){
                var R1 = cinema[6*(i-1) + 1 + i];
                var R2 = cinema[6*(i-1) + 1 + j];
            } else {
                var R1 = cinema[6*(i-1) + 1 + j];
                var R2 = cinema[6*(i-1) + 1 + i];
            }
            document.echo.Rep1.value = R1;
            document.echo.Rep2.value = R2;
        }

        function bascule(elem){
            etat=document.getElementById(elem).style.visibility;
            if(etat=="hidden"){document.getElementById(elem).style.visibility="visible";}
            else{document.getElementById(elem).style.visibility="hidden";}
        }

    </SCRIPT>
  </head>
  <body>
    
    <form name = "echo">
        <input type = "button" value = "Question cinéma :" onclick="afficher(15);bascule('boite');">
        <input id = "champQ" type ="text" name ="champQ">
        <div name="boite" id="boite" style="visibility: hidden">
            <input type="button" name="Duo" value = "Duo" onclick = "afficherDuo();bascule('reponse');">
            <div name = "reponse" id = "reponse" style="visibility:hidden">
                <input id = "Rep1" type ="text" name ="Rep1">
                <input id = "Rep2" type ="text" name ="Rep2">
            </div>
            <input type="button" name="Carré" value = "Carré">
            <input type="button" name="Cash" value = "Cash">
        </div>
    </form>


  </body>
</html>

Lorsqu'un joueur clique sur "Question cinéma", une question s'affiche de manière aléatoire (Le 15 en paramètre de la fonction est le nombre total de questions dans mon table) et le contenu de la div "boite" apparait : Un bouton duo, un bouton carré et un bouton cash. A l'heure actuelle, je coince sur la fonction qui affiche la bonne réponse et une réponse fausse lorsque le joueur clique sur "duo". J'ai deux hypothèses : le chemin d'accès n'est pas correctement décrit dans la fonction afficherDuo, ou alors c'est la manière d'imbriquer des div et des input qui fait planter le bazar.

Si une bonne âme a de l'inspiration sur ce code débutant, je l'en remercie grandement ;)

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Afficher possibilités de réponse à un quiz

Message par webmaster » 13 déc. 2022, 10:58

Bonjour

Dans afficherDuo(), il y a la variable i qui n'est pas définie ici :
while (j = cinema[6*(i-1) + 1]) {var j = Nrand(1,4);}

Je ne comprends pas trop le principe de la fonction d'ailleurs
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Maxiflan06
Messages : 3
Enregistré le : 13 déc. 2022, 10:08

Re: Afficher possibilités de réponse à un quiz

Message par Maxiflan06 » 13 déc. 2022, 11:07

Bonjour,

Merci pour ta réponse :)

Le chiffre qui apparait dans mon tableau après l'énoncé indique le numéro de la bonne réponse. AfficherDuo va donc aller chercher la bonne réponse plus une autre réponse de manière aléatoire. Le while permet de vérifier que je n'ai pas pris la bonne réponse dans ma sélection aléatoire. Une fois fait, afficherDuo va proposer les deux réponses (la dernière partie aléatoire de la fonction permet de placer la bonne réponse en 1er ou en 2ème) dans des cadres qui apparaitraient après le click sur le bonton "Duo".

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Afficher possibilités de réponse à un quiz

Message par webmaster » 13 déc. 2022, 12:13

J'ai du mal à m'y retrouver.
Il faudrait nommer les variables de manière a comprendre à quoi elles servent
par exemple, i est en fait numQuestion

Il y a aussi les tests qu'il faut bien ecrire avec == et pas l'affectation simple du =
Ca génère sinon des boucles infinies
while (j == cinema[6*(numQuestion-1) + 1]) {
if (p == 1){

Pour moi,il faut aussi définir une variable qui recoit la question en cours pour pouvoir la traiter dans les autres fonctions

Code : Tout sélectionner

        var numQuestion=-1;
        function afficher(b){
            var i = Nrand(1,b);
            numQuestion=i;
            var Q = cinema[6*(i-1)];
            document.echo.champQ.value = Q;
        }
Enfin, le tableau est compliqué pour stocker des données
Ca serait bien plus lisible avec un tableau d'objets :
https://www.toutjavascript.com/savoir/savoir09.php3
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Maxiflan06
Messages : 3
Enregistré le : 13 déc. 2022, 10:08

Re: Afficher possibilités de réponse à un quiz

Message par Maxiflan06 » 13 déc. 2022, 13:32

Webmaster, tes bons conseils ont été très éclairants. J'ai reparcouru mon code en gardant en tête ce que tu as dit et, après quelques corrections mineures, ça fait ce que je souhaitais ! Un grand merci à toi ;)

drebotti4
Messages : 2
Enregistré le : 12 mars 2024, 23:26

Re: Afficher possibilités de réponse à un quiz

Message par drebotti4 » 12 mars 2024, 23:40

webmaster a écrit :
13 déc. 2022, 12:13
J'ai du mal à m'y retrouver.
Il faudrait nommer les variables de manière a comprendre à quoi elles servent
par exemple, i est en fait numQuestion

Il y a aussi les tests qu'il faut bien ecrire avec == et pas l'affectation simple du =
Ca génère sinon des boucles infinies
while (j == cinema[6*(numQuestion-1) + 1]) {
if (p == 1){

Pour moi,il faut aussi définir une variable qui recoit la question en cours pour pouvoir la traiter dans les autres fonctions

Code : Tout sélectionner

        var numQuestion=-1;
        function afficher(b){
            var i = Nrand(1,b);
            numQuestion=i;
            var Q = cinema[6*(i-1)];
            document.echo.champQ.value = Q;
        }
Enfin, le tableau est compliqué pour stocker des données
Ca serait bien plus lisible avec un tableau d'objets : dreadhead parkour
https://www.toutjavascript.com/savoir/savoir09.php3
Merci pour le conseil. Il m'a également beaucoup aidé.

Répondre