From d23d7d8270b6c601df44ba7edbdc1c2e6c8f2c7f Mon Sep 17 00:00:00 2001
From: "patrick.brugiere" <patrick.brugiere@etu.uca.fr>
Date: Sun, 19 Nov 2023 20:23:12 +0100
Subject: [PATCH] travail sur la vue du quiz

---
 Project/php/controller/AbsController.php |   3 +
 Project/php/templates/quizzView.html     | 100 ++++++++++++++++++++---
 2 files changed, 92 insertions(+), 11 deletions(-)
diff --git a/Project/php/controller/AbsController.php b/Project/php/controller/AbsController.php
index 1ab18d3..72144db 100755
--- a/Project/php/controller/AbsController.php
+++ b/Project/php/controller/AbsController.php
@@ -102,4 +102,7 @@ abstract class AbsController
         shuffle($shuffle);
         echo $twig->render('quizzView.html', ['translations' => $allTranslation, 'randomtranslations' => $shuffle]);
     }
+    public function test(){
+        echo "ça marche";
+    }
 }
\ No newline at end of file
diff --git a/Project/php/templates/quizzView.html b/Project/php/templates/quizzView.html
index e188dd4..f2d75fc 100755
--- a/Project/php/templates/quizzView.html
+++ b/Project/php/templates/quizzView.html
@@ -5,12 +5,12 @@
   <title>Manage groups</title><!-- Vos liens de styles et de scripts -->
 </head>
 <body>
-<section>
+<section id="quiz">
   <h1>Quiz</h1>
-
+ <div id="questionContainer">
   {% if translations is defined %}
   {% for translation in translations %}
-  <h2>{{ translation.word1 }}</h2>
+  <h2 id="question">{{ translation.word1 }}</h2>
   {% set correctAnswer = translation.word2 %}
   {% if randomtranslations is defined %}
   {% set otherTranslations = [correctAnswer] %}
@@ -19,19 +19,37 @@
   {% set otherTranslations = otherTranslations|merge([randomtranslation.word2]) %}
   {% endif %}
   {% endfor %}
-
-
-
-  {# Affichage des réponses sous forme de radio buttons #}
+  <form id="quizForm" method="post">
+    <div id="answers">
   <input type="radio" name="answer" value="{{ correctAnswer }}"> {{ correctAnswer }}<br>
+    </div>
   {% for otherTranslation in otherTranslations %}
-  <input type="radio" name="answer" value="{{ otherTranslation }}"> {{ otherTranslation }}<br>
+  <input type="radio" name="wrong" value="{{ otherTranslation }}"> {{ otherTranslation }}<br>
+
   {% endfor %}
+    <input type="hidden" name="action" value="test">
+  <button value="submit" type="submit" >soumettre</button>
+  </form>
+ </div>
+  <script>
+    $(document).ready(function() {
+      $('#quizForm').submit(function(event) {
+        event.preventDefault();
+        $.ajax({
+          type: 'POST',
+          url: '/../controller/AbsController.php',
+          data: $(this).serialize(),
+          success: function(response) {
+            $('#result').html(response);
+          }
+        });
+      });
+    });
+  </script>
   {% endif %}
   {% endfor %}
   {% endif %}
-    <input type="submit" value="Submit" name="submitForm">
-  </form>
+
   {% if submitted %}
   {% if isCorrect %}
   <p>Correct answer!</p>
@@ -54,4 +72,64 @@
   </form>
 </section>
 </body>
-</html>
\ No newline at end of file
+</html>
+<script>
+  const questions = [
+
+    {
+      question: "Question 2?",
+      answers: ["Answer A", "Answer B", "Answer C"],
+      correctAnswer: "Answer B"
+    },
+    // Ajoutez d'autres questions ici
+  ];
+
+  let currentQuestion = 0;
+  const questionContainer = document.getElementById('questionContainer');
+  const questionElement = document.getElementById('question');
+  const answersElement = document.getElementById('answers');
+  const resultElement = document.getElementById('result');
+
+  function showQuestion() {
+    const question = questions[currentQuestion];
+    questionElement.textContent = question.question;
+
+    answersElement.innerHTML = '';
+    question.answers.forEach(answer => {
+      const label = document.createElement('label');
+      const input = document.createElement('input');
+      input.type = 'radio';
+      input.name = 'answer';
+      input.value = answer;
+      label.appendChild(input);
+      label.appendChild(document.createTextNode(answer));
+      answersElement.appendChild(label);
+      answersElement.appendChild(document.createElement('br'));
+    });
+  }
+
+  function checkAnswer(event) {
+    event.preventDefault();
+    const selectedAnswer = document.querySelector('input[name="answer"]:checked');
+    if (!selectedAnswer) {
+      resultElement.textContent = 'Please select an answer.';
+      return;
+    }
+
+    if (selectedAnswer.value === questions[currentQuestion].correctAnswer) {
+      resultElement.textContent = 'Correct answer!';
+    } else {
+      resultElement.textContent = 'Wrong answer!';
+    }
+
+    currentQuestion++;
+    if (currentQuestion < questions.length) {
+      showQuestion();
+    } else {
+      questionContainer.style.display = 'none';
+    }
+  }
+
+  document.getElementById('quizForm').addEventListener('submit', checkAnswer);
+  showQuestion();
+</script>
\ No newline at end of file
