Créer des slides pour un QCM

Version imprimable

Bonjour à toutes et à tous,

Je mets en place un QCM pour tester mes élèves.
Pour cela j'ai créé plusieurs flexboxes avec différents calculs ainsi qu'un bouton pour valider la réponde et passer à la slide suivante.
Voici un extrait du code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <div class="quizz_window quizz_window_1">
      <p><u>Question n°1 :</u><br />
        Calculer : <br />
        <span id="alea"></span> <span id="nombre1"></span> <span id="operation1"></span> <span id="nombre2"></span> <span id="operation2"></span> <span id="nombre3"></span> =
      </p>
 
      <button id="quizz_button" onclick="suivant()" onclick="relatifs5()">
        <p>Valider</p>
      </button>
    </div>
    <div class="quizz_window quizz_window_2">
      <p><u>Question n°2 :</u><br />
        Calculer : <br />
        <span id="alea"></span> <span id="nombre1"></span> <span id="operation1"></span> <span id="nombre2"></span> <span id="operation2"></span> <span id="nombre3"></span> =
      </p>
 
      <button id="quizz_button" onclick="suivant()" onclick="relatifs5()">
        <p>Valider</p>
      </button>
    </div>

et ça c'est le javascript que j'essaie de créer (mais qui ne fonctionne pas du tout...)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function suivant() {
  const flexboxes = document.querySelectorAll(".quizz_window_");
 
  let currentFlexboxIndex = 0;
 
  flexboxes[currentFlexboxIndex].classList.add('hidden');
  currentFlexboxIndex++;
  if (currentFlexboxIndex >= flexboxes.length) {
    currentFlexboxIndex = 0;
  }
 
  flexboxes[currentFlexboxIndex].classList.remove('hidden');
}

Si quelqu'un à une solution, je suis preneur !
Merci d'avance !!

13/04/2023, 18h24
javatwister

Bonjour,

Début d'idée: si tu doubles l'attribut onclick, le 2e sera inopérant.

"mais qui ne fonctionne pas du tout..." est tout de même un peu tabou sur ce forum:

1) Que souhaites-tu obtenir comme résultat?
2) Qu'est-ce qui se produit d'inattendu?
13/04/2023, 18h42
Latulipe2

Quand je dis qu'il ne fonctionne pas du tout, c'est simplement qu'il ne se passe rien quand je clique sur mon bouton.

La flexbox suivante n'apparait pas et l'actuelle ne disparaît pas..
Alors que je souhaiterais que sur chaque flexbox il y ait un bouton "Valider" qui permette de passer à la flexbox suivante.
13/04/2023, 20h44
javatwister

Citation:

Envoyé par Latulipe2

je souhaiterais que sur chaque flexbox il y ait un bouton "Valider" qui permette de passer à la flexbox suivante.

Par quel miracle?
13/04/2023, 21h03
Latulipe2

C’est bien la question ^^
Je me demandais justement s’il existait une fonction js me permettant de passer de la diapo1 à la diapo2, de la diapo2 à la diapo3, et ainsi de suite, sans avoir à retaper mon code à chaque fois.
Mais si cela relève du miracle, je vais prendre mon courage à deux mains et écrire toutes les lignes de code une à une…
13/04/2023, 22h14
javatwister

Bah moi ce que je voulais dire c'est que rien dans ton code ne faisait mention d'un bouton "valider".
13/04/2023, 23h36
melka one

jour

il manque la boucle

Tu désires faire un truc comme ça...?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="quizz_window">
        <p><u>Question n°1 :</u><br />
          Calculer : <br />
          <span id="alea"></span> <span id="nombre1"></span> <span id="operation1"></span> <span id="nombre2"></span> <span id="operation2"></span> <span id="nombre3"></span> =
        </p>
 
        <button class="quizz_button">
          <p>Valider</p>
        </button>
      </div>
      <div class="quizz_window">
        <p><u>Question n°2 :</u><br />
          Calculer : <br />
          <span id="alea"></span> <span id="nombre1"></span> <span id="operation1"></span> <span id="nombre2"></span> <span id="operation2"></span> <span id="nombre3"></span> =
        </p>
 
        <button class="quizz_button">
          <p>Valider</p>
        </button>
      </div>
 
      <div class="quizz_window">
        <p><u>Question n°3 :</u><br />
          Calculer : <br />
          <span id="alea"></span> <span id="nombre1"></span> <span id="operation1"></span> <span id="nombre2"></span> <span id="operation2"></span> <span id="nombre3"></span> =
        </p>
 
        <button class="quizz_button">
          <p>Valider</p>
        </button>
      </div>
 
 
      <script>
      let flexboxIndex = 0;
      const flexboxes = document.getElementsByClassName("quizz_window");
      const ListButtons = document.getElementsByClassName("quizz_button");
 
      Array.prototype.forEach.call(ListButtons,elt=>elt.addEventListener('click',suivant));
 
      function suivant(e) {
        if (e.currentTarget==ListButtons[flexboxIndex]){
          flexboxIndex++;
          flexboxes[flexboxIndex-1].style.display='none';
          //ou si tu veux garder l'espace :flexboxes[flexboxIndex-1].style.visibility='hidden';
        }else return;
      }
    </script>
</body>
</html>

Rq: je n'ai pas touché aux span pour reprendre une partie de ton code mais un identifiant est unique à un élément et tu multiplies le même identifiant pour plusieurs span donc utilise plutôt une classe...comme pour les button.

Petite mise à jour,
J'ai réussi mes slides, j'avais juste besoin d'une fonction comme ci-dessous :
Code:

1 2 3 4 5 6 7 8 9 10 11 function openclose(a, b) { let ouvrir = document.getElementById(a); let fermer = document.getElementById(b); if (ouvrir.style.display != "flex") { ouvrir.style.display = "flex"; fermer.style.display = "none"; } else { ouvrir.style.display = "none"; } }
et dans mon HTML, je devais noter :

Code:

openclose('quizz_window_2','quizz_window_1')

au lieu de

Code:

openclose("quizz_window_2","quizz_window_1")