STIC Discussion:STIC I - exercice 3 (Zelda)

De EduTech Wiki
Aller à la navigation Aller à la recherche

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

Re: Quizz: passer d'une question à une autre -- Mattia A. Fritz (discussion) 11 novembre 2019 à 10:01 (CET)

Bonjour Rachel,

merci pour la question très détaillée, avec tous les éléments utiles pour comprendre votre problème. Il s'agit en effet d'un contexte compliqué par le fait que vous devez à chaque fois mettre à jour votre interface (i.e. votre DOM), ce qui peut se relever difficile lorsque vous avez plusieurs changements dynamiques.

Votre exercice est déjà très bien tel qu'il est et je vous déconseille de vous immerger davantage dans la problématique, à moins que vous ayez vraiment le temps de le faire. Dans ce cas, il existe en effet des structures plus adaptées pour organiser vos questions et vos réponses, par exemple en utilisant un array d'objects :

var steps = [
  // First step of the quiz
  {
    question: "Question 1",
    answers: [
      {
        label: "Label 1",
        points: 2
      },
      {
        label: "Label 2",
        points: 4
      },
      {
        label: "Label 3",
        points: 0
      }
    ]
  },
  // Second step of the quiz
  {
    question: "Question 2",
    answers: [
      {
        label: "Label 1",
        points: 0
      },
      {
        label: "Label 2",
        points: 2
      },
      {
        label: "Label 3",
        points: 4
      }
    ]
  }
];

//First loop into questions
for (let i = 0; i < steps.length; i++) {
  console.log("Question: ", steps[i].question);

  //Then loop into answers
  for (let j = 0; j < steps[i].answers.length; j++) {
    console.log(
      steps[i].answers[j].label,
      "(",
      steps[i].answers[j].points,
      " points)\n"
    );
  }

  console.log("-------\n");
}

Transformer cette structure en interface graphique est néanmoins compliqué, et on verra dans la prochaine période qu'il existe des bibliothèques JavaScript, comme par exemple Vue.js, qui s'occupent justement d'essayer de faciliter cet aspects.

Dans l'attente, je vous conseille de travailler plutôt sur l'expérience utilisateur de votre dispositif, par exemple en évitant d'utiliser le prompt() initial qui est très invasive, car il bloque l'accès au navigateur. Vous pouvez essayez par exemple de le remplacer par un formulaire (voir par exemple le point 4.3 de Interactivité avec JavaScript.

En tout cas, il s'agit d'une idée très originale et vous avez déjà appliqué plusieurs concepts computationnels assez avancé !

Mattia

Re: Re: Quizz: passer d'une question à une autre -- Rachel E (discussion) 11 novembre 2019 à 18:20 (CET)

Bonsoir,

Merci beaucoup pour votre réponse rapide et claire. Je vais suivre vos conseils et me focaliser sur le remplacement du prompt(). Si j'ai le temps, je me lancerai dans la compréhension du code que vous proposez.

Merci.

Rachel