From 577d0872d79acd762edb3878916702b09c135246 Mon Sep 17 00:00:00 2001
From: "anthony.richard" <anthony.richard@etu.uca.fr>
Date: Sun, 19 Nov 2023 23:08:04 +0100
Subject: [PATCH] le gaming

---
 Project/php/controller/AbsController.php |  2 +-
 Project/php/css/quiz.css                 | 52 +++++++++++++++++++++++
 Project/php/js/quiz.js                   | 41 ++++++++++++++++++
 Project/php/templates/quizView.html      | 54 ++++++++++++++++++++++++
 Project/php/templates/quizzView.html     | 34 ---------------
 5 files changed, 148 insertions(+), 35 deletions(-)
 create mode 100644 Project/php/css/quiz.css
 create mode 100644 Project/php/js/quiz.js
 create mode 100644 Project/php/templates/quizView.html
 delete mode 100755 Project/php/templates/quizzView.html

diff --git a/Project/php/controller/AbsController.php b/Project/php/controller/AbsController.php
index 7742526..3f365c8 100644
--- a/Project/php/controller/AbsController.php
+++ b/Project/php/controller/AbsController.php
@@ -127,7 +127,7 @@ class AbsController
             $answers[] = $tab;
         }
 
-        echo $twig->render('quizzView.html', ['questions' => $questions, 'answers' => $answers, 'goodAnswers' => $goodAnswers]);
+        echo $twig->render('quizView.html', ['questions' => $questions, 'answers' => $answers, 'goodAnswers' => $goodAnswers]);
     }
 
     public function login(): void {
diff --git a/Project/php/css/quiz.css b/Project/php/css/quiz.css
new file mode 100644
index 0000000..ee651c5
--- /dev/null
+++ b/Project/php/css/quiz.css
@@ -0,0 +1,52 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+#quiz {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    width: 800px;
+    height: 400px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+    padding-bottom: 50px;
+}
+
+.question {
+    display: none;
+}
+
+.answers {
+    margin-top: 10px;
+}
+
+button {
+    display: block;
+    width: 100%;
+    margin-top: 10px;
+    background-color: #3498db;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #2980b9;
+}
diff --git a/Project/php/js/quiz.js b/Project/php/js/quiz.js
new file mode 100644
index 0000000..bda0a83
--- /dev/null
+++ b/Project/php/js/quiz.js
@@ -0,0 +1,41 @@
+var currentQuestion = 0;
+var score = 0;
+
+
+function nextQuestion() {
+    var currentQuestionDiv = document.getElementById("question" + currentQuestion);
+    currentQuestionDiv.style.display = "none";
+
+    currentQuestion++;
+    if (currentQuestion < len) {
+        var nextQuestionDiv = document.getElementById("question" + currentQuestion);
+        nextQuestionDiv.style.display = "block";
+    } else {
+        // Toutes les questions ont été posées, afficher le score
+        alert("Quiz terminé. Votre score est de " + score + "/" + len);
+    }
+}
+
+function validateAndNext() {
+
+    var currentForm = document.getElementById("quizForm" + currentQuestion);
+    var selectedAnswer = currentForm.querySelector('input[name="answer' + currentQuestion + '"]:checked');
+
+    if (selectedAnswer) {
+        // L'utilisateur a sélectionné une réponse
+        if (selectedAnswer.classList.contains("correct")) {
+            // C'est la bonne réponse, augmenter le score
+            score++;
+        }
+        // Passer à la question suivante
+        nextQuestion();
+    } else {
+        // Aucune réponse sélectionnée, afficher un message d'erreur
+        alert("Veuillez sélectionner une réponse avant de passer à la question suivante.");
+    }
+}
+
+window.onload = function () {
+    var firstQuestionDiv = document.getElementById("question0");
+    firstQuestionDiv.style.display = "block";
+};
\ No newline at end of file
diff --git a/Project/php/templates/quizView.html b/Project/php/templates/quizView.html
new file mode 100644
index 0000000..6f7db0b
--- /dev/null
+++ b/Project/php/templates/quizView.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+</head>
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+ <meta name="description" content="" />
+ <meta name="author" content="" />
+ <title>Quiz</title>
+ <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
+ <!-- Google fonts-->
+ <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
+ <link
+         href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
+         rel="stylesheet" />
+ <!-- Core theme CSS (includes Bootstrap)-->
+ <link href="{{base}}/css/styles.css" rel="stylesheet" />
+ <link href="{{base}}/css/quiz.css" rel="stylesheet" />
+</head>
+
+<body>
+
+<section id="quiz">
+ <h1>Quiz</h1>
+ <div id="questionContainer">
+  {% if questions is defined %}
+  {% for i in 0..questions|length %}
+  <div class="question" id="question{{ i }}">
+   <h2>{{ questions[i] }}</h2>
+   <div class="answers">
+    <form id="quizForm{{ i }}" method="post">
+     {% for answer in answers[i] %}
+     {% if answer == goodAnswers[i] %}
+     <input type="radio" name="answer{{ i }}" value="{{ answer }}" class="correct"> {{ answer }}<br>
+     {% else %}
+     <input type="radio" name="answer{{ i }}" value="{{ answer }}"> {{ answer }}<br>
+     {% endif %}
+     {% endfor %}
+    </form>
+   </div>
+  </div>
+  {% endfor %}
+  <input type="button" value="Suivant" onclick="validateAndNext()">
+  {% endif %}
+ </div>
+
+ <script>
+  var len = JSON.parse('{{ questions | length }}');
+ </script>
+
+ <script src="{{base}}/js/quiz.js"></script>
+</section>
+</body>
+</html>
diff --git a/Project/php/templates/quizzView.html b/Project/php/templates/quizzView.html
deleted file mode 100755
index 003b035..0000000
--- a/Project/php/templates/quizzView.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Quiz</title>
- <!-- Ajoutez vos liens de styles et de scripts ici -->
-</head>
-<body>
-<section id="quiz">
- <h1>Quiz</h1>
- <div id="questionContainer">
-  {% if questions is defined %}
-  {% for i in 0..questions|length %}
-  <form id="quizForm" method="post">
-   <div class="question">
-    <h2>{{ questions[i] }}</h2>
-    <div class="answers">
-     {% for answer in answers[i] %}
-     {% if answer == goodAnswers[i] %}
-     <input type="radio" name="answer" value="{{ good }}"> {{ answer }}<br>
-     {% else %}
-     <input type="radio" name="wrong" value="{{ wrong }}"> {{ answer }}<br>
-     {% endif %}
-     {% endfor %}
-    </div>
-   </div>
-   <input type="button" value="button">
-  </form>
-  {% endfor %}
-  {% endif %}
- </div>
-</section>
-</body>
-</html>