ajout page quiz

includes/components/quizz.php

@@ -15,7 +15,12 @@
         </div>
         <div class="quizz__content-readmore js-quizz-answer">
             <p class="quizz__content-readmore-summary"><?= $quizz->read_more_summary ?></p>
-            <a href="<?= $quizz->read_more ?>" class=" btn">En savoir plus</a>
+            <div class="quizz__content-readmore-buttons">
+                <a href="<?= $quizz->read_more ?>" class=" btn">En savoir plus</a>
+                <?php if (isset($_next_qst_btn) && $_next_qst_btn): ?>
+                    <button class="btn btn--iconright js-next-qst">Question suivante <i class="material-icons-sharp">arrow_forward</i></button>
+                <?php endif; ?>
+            </div>
         </div>
     </div>
     <img src="/image.php?url=<?= $quizz->image ?>&size=small" alt="" class="quizz__image">

pages/quiz.php

@@ -0,0 +1,77 @@
+<?php include "../includes/head.php"; ?>
+<?php include "../includes/components/navbar.php"; ?>
+
+<style>
+.quiz-box {
+    display: flex;
+    overflow-x: hidden;
+    scroll-snap-type: x mandatory;
+    margin-bottom: 64px;
+}
+
+.quiz-box__section {
+    min-width: 100%;
+    display: grid;
+    place-items: center;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+}
+</style>
+
+<main class="quiz-box js-quiz-box">
+    <?php
+
+    $_next_qst_btn = true;
+
+    // récupérer les questions du json
+    $json = file_get_contents("../src/scripts/quiz.json");
+
+    // selectionner 2 questions pour chaque catégorie
+    $data = json_decode($json);
+    $questions = [];
+    foreach ($data as $key => $array) {
+        shuffle($array);
+        array_push($questions, $array[0], $array[1]);
+    }
+
+    foreach ($questions as $key => $value) {
+        $answers = $value->o;
+        array_push($answers, $value->a);
+        shuffle($answers);
+
+        $quizz = (object) [
+            "question" => $value->q,
+            "answers" => $answers,
+            "correct_answer" => $value->a,
+            "read_more" => "https://fr.wikipedia.org/wiki/Mont-Saint-Michel",
+            "read_more_summary" => "La flèche de Mont-Saint-Michel est une flèche de la ville de Mont-Saint-Michel, en France. Elle a été posée par le préfet de la région de l'Aquitaine, Philippe de la Rochefoucauld, en 1891.",
+            "image" => "quizz/fleche.jpg"
+        ];
+
+        ?>
+
+        <div class="quiz-box__section">
+            <?php include "../includes/components/quizz.php"; ?>
+        </div>
+
+        <?php
+    }
+    ?>
+</main>
+
+<script>
+    const quizBox = document.querySelector(".js-quiz-box");
+    const nextBtns = document.querySelectorAll(".js-next-qst");
+
+    nextBtns.forEach(function(btn) {
+        btn.addEventListener("click", function() {
+            quizBox.scrollBy({
+                top: 0,
+                left: window.innerWidth,
+                behavior: "smooth"
+            });
+        });
+    });
+</script>
+
+<?php include "../includes/components/footer.php"; ?>

src/scripts/quiz.json

@@ -0,0 +1,19 @@
+{
+    "histoire": [
+        {
+            "q": "Quel homme d'épée a habité au Mont-Saint-Michel ?",
+            "a": "Le Chevalier Du Guesclin",
+            "o": ["Lancelot du lac", "Zoro", "Jeanne d’Arc"]
+        },
+        {
+            "q": "Comment appelle-t-on le métier qui consiste à récolter les algues avec des chevaux ?",
+            "a": "Goémonier",
+            "o": ["Chevalier", "Paludier", "C’est un métier qui n’existe pas"]
+        },
+        {
+            "q": "Le Mont est une presqu'île ?",
+            "a": "Vrai",
+            "o": ["Faux"]
+        }
+    ]
+}

src/styles/app.css

@@ -112,6 +112,14 @@ body, html {
     box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1);
 }
 
+.btn--iconleft i {
+    margin-right: 8px;
+}
+
+.btn--iconright i {
+    margin-left: 8px;
+}
+
 /* cartes activités */
 .activity-card {
     display: block;
@@ -486,11 +494,14 @@ body, html {
 
 /* quizz */
 .quizz {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    display: flex;
     gap: 32px;
 }
 
+.quizz__content {
+    max-width: 560px;
+}
+
 .quizz__content-question {
     font: 400 24px Ibarra Real Nova, serif;
 }
@@ -530,6 +541,14 @@ body, html {
     transition: opacity .2s ease;
 }
 
+.quizz__content-readmore-buttons {
+    margin-top: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 16px;
+}
+
 .quizz__content-readmore.open {
     opacity: 1;
 }