Créer des slides pour un QCM

**Latulipe2** · 13/04/2023, 18h03

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !!

**javatwister** · 13/04/2023, 18h24

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?

**Latulipe2** · 13/04/2023, 18h42

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.

**javatwister** · 13/04/2023, 20h44

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?

**Latulipe2** · 13/04/2023, 21h03

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…

**javatwister** · 13/04/2023, 22h14

Bah moi ce que je voulais dire c'est que rien dans ton code ne faisait mention d'un bouton "valider".

**melka one** · 13/04/2023, 23h36

jour

il manque la boucle

**Archimède** · 14/04/2023, 11h31

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Latulipe2** · 23/04/2023, 18h56

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

openclose('quizz_window_2','quizz_window_1')

au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

openclose("quizz_window_2","quizz_window_1")

Créer des slides pour un QCM

JavaScript

Discussions similaires

Partager

Partager