STIC Discussion:STIC I - exercice 3 (Zelda)
Quizz: passer d'une question à une autre -- Rachel E (discussion) 10 novembre 2019 à 21:11 (CET)
Bonsoir,
Je travaille depuis plusieurs jours sur l'exercice 3 dans le but de proposer un dispositif pour une séquence pédagogique sur le développement de l'esprit critique et la sensibilisation aux informations données/reçues sur internet. Je suis arrivée à une première version qui semble fonctionner. Aujourd'hui, j'ai essayé d'optimiser mon code javascript car il deviendrait long si les questions se multipliaient. Mon objectif pour cette deuxième version est d'avoir des listes de questions et de réponses qui apparaissent les uns après les autres sur ma page HTML pour ensuite mener à un profil personnalisé selon le score obtenu.
J'ai donc deux versions de mon travail que vous pouvez télécharger et visualiser ici:
Je pense que je peux encore optimiser le code mais je n'arrive actuellement pas à créer une fonction qui me permette de changer facilement d'un élément de ma liste à un autre. De plus, je me demande si je n'ai pas trop de listes et s'il est possible de grouper questions et réponse dans une même liste.
Voici mes deux questions.
1) Dans la version 2, numéro cinq (5), je répète le même code à plusieurs reprise pour changer d'une questions/réponses à une autre. Comment faire autrement? Faut-il utiliser une boucle?
65 <script>
66 // (5) Augmenter le score et changer de question/réponse
67 var score = 0;
68 var currentQ = 0;
69 var currentA1 = 0;
70 var currentA2 = 0;
71 var currentA3 = 0;
72
73 document.getElementById("answer1").addEventListener("click", function (){
74 score = score +1;
75 currentQ = currentQ+1;
76 currentA1 = currentA1+1;
77 currentA2 = currentA2+1;
78 currentA3 = currentA3+1;
79 showQ(question[currentQ]);
80 showA1(answer1[currentA1]);
81 showA2(answer2[currentA2]);
82 showA3(answer3[currentA3]);
83 if (currentQ>=4){
84 quizz.style.display = "none";
85 results.style.display = "block";
86 }
87 });
88
89 document.getElementById("answer2").addEventListener("click", function()
90 {
91 score = score +2;
92 currentQ = currentQ+1;
93 currentA1 = currentA1+1;
94 currentA2 = currentA2+1;
95 currentA3 = currentA3+1;
96 showQ(question[currentQ]);
97 showA1(answer1[currentA1]);
98 showA2(answer2[currentA2]);
99 showA3(answer3[currentA3]);
100 if (currentQ>=4){
101 quizz.style.display = "none";
102 results.style.display = "block";
103 }
104 });
105
106 document.getElementById("answer3").addEventListener("click", function(){
107 score = score +3;
108 currentQ = currentQ+1;
109 currentA1 = currentA1+1;
110 currentA2 = currentA2+1;
111 currentA3 = currentA3+1;
112 showQ(question[currentQ]);
113 showA1(answer1[currentA1]);
114 showA2(answer2[currentA2]);
115 showA3(answer3[currentA3]);
116 if (currentQ>=4){
117 quizz.style.display = "none";
118 results.style.display = "block";
119 }
120 });
121 </script>
2) Est-ce possible d'entrer dans une liste les questions avec les réponses? Comment lier ceci à différents endroit de ma page HTML pour ensuite attribuer des points selon les Id? Voici mon code actuel (version 2, numéros 3 et 4)
27 <script>
28 // (3) variables questions réponses pour le quizz
29 var question = ['Que préfères-tu à l\'école', 'Aimes-tu faire du sport?', 'Quelle couleur préfères-tu?', 'A ton sujet, on peut dire que:'];
30
31 var answer1 = ['Français', 'Je ne fais pas de sport', 'Rouge', 'Tu as de l\'asmthe'];
32
33 var answer2 = ['Gymnastique', 'J\'adore le sport et j\'aime la compétition', 'Bleu', 'Tu vas (ou tu as déjà été) chez un logopédiste'];
34
35 var answer3 = ['Mathématique', 'Je fais du sport pour le plaisir', 'Vert', 'Aucune des deux précédentes réponses'];
36
37 var job = ['Futur.e enseignant.e, journaliste ou libraire!', 'Futur.e sportif.ve, paysagiste ou charpentier.ère', 'Futur.e astronaute, chimiste ou informaticien.ne']
38
39
40 //(4) fonctions pour faire apparaitre les questions/réponses
41 function showQ(x){
42 document.getElementById("question").textContent = x;
43 }
44
45 function showA1(x) {
46 document.getElementById("answer1").textContent = x;
47 }
48
49 function showA2(x) {
50 document.getElementById("answer2").textContent = x;
51 }
52
53 function showA3(x) {
54 document.getElementById("answer3").textContent = x;
55 }
56
57 function showJ(x) {
58 document.getElementById("job").textContent = x;
59 }
60
61 showQ(question[0])
62 showA1(answer1[0])
63 showA2(answer2[0])
64 showA3(answer3[0])
65 </script>
Je vous remercie pour votre réponse et vous souhaite une belle semaine.
Rachel E