Proto fonctionnel

Took 3 hours 54 minutes

.gitignore

@@ -0,0 +1,9 @@
+# IDE generated files
+.idea/
+.vscode/
+
+# Dependency directories
+node_modules/
+
+# OS generated files
+DS_Store

README.txt

@@ -1,12 +0,0 @@
-# Liste des easter eggs :
-
-- Joyeux noël écologique ! : Répondez correctement à toutes les questions du quizz une nouvelle page s'ouvre. Nous avons choisi cet easter egg epuré pour suivre la tendance écologique tout en passant un message de joyeuses fêtes eco-friendly.
-
-- Konami code : Il faut saisir le code konami (haut, haut, bas, bas, gauche, droite, gauche, droite, b, a) depuis la page d'accueil pour accéder à une page cachée offrant un jeu de rythme inspiré de Dance Dance Revolution.
-
-
-# Jeu de ryhtme :
-
-Le jeu de rythme que nous avons crée est inspiré de Dance Dance Revolution. La musique utilisée est libre de droit. 
-Voici comment y accéder : https://youtu.be/SPVopUAqIYI
-Il faut effectivement utiliser le Konami Code (haut, haut, bas, bas, gauche, droite, gauche, droite, b, a), depuis la page d'accueil, afin d'y accéder.

back/fonctions.js

@@ -1,174 +0,0 @@
-
-function getTitre (categorie ,indice){// Charger le contenu du fichier JSON
-    fetch(`./resources/${categorie}.json`)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
-            }
-            return response.json();
-        })
-        .then(objetJson => {
-            const questions = objetJson.questions;
-            if (indice >= 0 && indice < questions.length) {
-                const question = questions[indice].question;
-                console.log(`Question à l'indice ${indice}: ${question}`);
-            } else {
-                console.error(`Indice ${indice} hors de portée.`);
-            }
-        })
-        .catch(erreur => {
-            console.error('Erreur lors du chargement du fichier JSON :', erreur.message);
-        });
-}
-function getRep1(categorie, indice){// Charger le contenu du fichier JSON
-    fetch(`./resources/${categorie}.json`)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
-            }
-            return response.json();
-        })
-        .then(objetJson => {
-            const questions = objetJson.questions;
-            if (indice >= 0 && indice < questions.length) {
-                const rep = questions[indice].options[0].text;
-                console.log(`Reponse à l'indice ${indice}: ${rep}`);
-                return rep;
-            } else {
-                console.error(`Indice ${indice} hors de portée.`);
-            }
-        })
-        .catch(erreur => {
-            console.error('Erreur lors du chargement du fichier JSON :', erreur.message);
-        });
-}
-function getRep2(categorie, indice){// Charger le contenu du fichier JSON
-    fetch(`./resources/${categorie}.json`)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
-            }
-            return response.json();
-        })
-        .then(objetJson => {
-            const questions = objetJson.questions;
-            if (indice >= 0 && indice < questions.length) {
-                const rep = questions[indice].options[1].text;
-                console.log(`Reponse à l'indice ${indice}: ${rep}`);
-                return rep;
-            } else {
-                console.error(`Indice ${indice} hors de portée.`);
-            }
-        })
-        .catch(erreur => {
-            console.error('Erreur lors du chargement du fichier JSON :', erreur.message);
-        });
-}
-function getVrai(categorie, indice){
-    fetch(`./resources/${categorie}.json`)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
-            }
-            return response.json();
-        })
-        .then(objetJson => {
-            const questions = objetJson.questions;
-            if (indice >= 0 && indice < questions.length) {
-                const vrai = questions[indice].reponse;
-                console.log(`vraie reponse ${indice}: ${vrai}`);
-                return vrai;
-            } else {
-                console.error(`Indice ${indice} hors de portée.`);
-            }
-        })
-        .catch(erreur => {
-            console.error('Erreur lors du chargement du fichier JSON :', erreur.message);
-        });
-}
-function getDescription(categorie, indice){
-    fetch(`./resources/${categorie}.json`)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
-            }
-            return response.json();
-        })
-        .then(objetJson => {
-            const questions = objetJson.questions;
-            if (indice >= 0 && indice < questions.length) {
-                const description = questions[indice].description;
-                console.log(`description ${indice}: ${description}`);
-                return description;
-            } else {
-                console.error(`Indice ${indice} hors de portée.`);
-            }
-        })
-        .catch(erreur => {
-            console.error('Erreur lors du chargement du fichier JSON :', erreur.message);
-        });
-}
-function getImg1(categorie, indice){
-    fetch(`./resources/${categorie}.json`)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
-            }
-            return response.json();
-        })
-        .then(objetJson => {
-            const questions = objetJson.questions;
-            if (indice >= 0 && indice < questions.length) {
-                const img = questions[indice].options[0].img;
-                console.log(`vraie reponse ${indice}: ${img}`);
-                return img;
-            } else {
-                console.error(`Indice ${indice} hors de portée.`);
-            }
-        })
-        .catch(erreur => {
-            console.error('Erreur lors du chargement du fichier JSON :', erreur.message);
-        });
-}
-function getImg2(categorie, indice){
-    fetch(`./resources/${categorie}.json`)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
-            }
-            return response.json();
-        })
-        .then(objetJson => {
-            const questions = objetJson.questions;
-            if (indice >= 0 && indice < questions.length) {
-                const img = questions[indice].options[1].img;
-                console.log(`vraie reponse ${indice}: ${img}`);
-                return img;
-            } else {
-                console.error(`Indice ${indice} hors de portée.`);
-            }
-        })
-        .catch(erreur => {
-            console.error('Erreur lors du chargement du fichier JSON :', erreur.message);
-        });
-}
-
-// function for random index of a function 
-
-
- function getIndex(tableauDentiers){
-    if (tableauDentiers.length == 0){
-        return -1;
-    }
-     const indiceAleatoire = Math.floor(Math.random() * tableauDentiers.length);
-     tableauDentiers.splice(indiceAleatoire, 1);
-     console.log(tableauDentiers); // Affiche : [1, 2, 4, 5]
-     return indiceAleatoire;
- }
- document.addEventListener('DOMContentLoaded', ()=>
-     {
-         const tableauDentiers = [1, 2, 3, 4, 5];
-     }
- )
-  
-

back/indextest.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-    <script src="fonctions.js"></script>
-</head>
-<body>
-    <button onclick="getIndex()">Salut!</button>
-</body>
-</html>

back/resources/Commerce.json

@@ -1,70 +0,0 @@
-{
-  "nomcatCategorie": "Commerce",
-  "questions": [
-    {"question": "Quel est l'impact environnemental des sacs réutilisables par rapport aux sacs plastiques jetables?",
-      "options": [
-        {
-        "text": "Les sacs réutilisables ont généralement une empreinte carbone initiale plus élevée que les sacs plastiques jetables en raison de leur production, mais ils deviennent plus écologiques à long terme grâce à leur réutilisation fréquente.",
-        "img": "./img/Commerce/sac_lin.jpg"
-      },
-        {"text": "Les sacs réutilisables ont une empreinte carbone beaucoup plus faible que les sacs plastiques jetables dès le départ, contribuant ainsi immédiatement à la lutte contre le réchauffement climatique.",
-          "img": "./img/Commerce/sac_plastique.jpg"   
-        }
-      ],
-      "reponse": 0,
-      "description": "Pour que le sac de polypropylène tissé ait une moins grande incidence sur l’environnement que le cabas de plastique traditionnel, il doit être utilisé de 16 à 98 fois. Autrement dit, plus on l’utilise souvent, plus il est avantageux sur le plan écologique, et ce, notamment parce que sa conception entraîne une plus grande quantité de gaz à effet de serre (GES) que celle du sac de plastique traditionnel."
-    },
-    {"question": "Quel est l'impact environnemental des batteries de téléphone remplaçables par rapport aux batteries intégrées?",
-      "options": [
-        {
-          "text": "Les batteries intégrées sont plus écologiques car leur conception compacte et intégrée réduit la nécessité de ressources supplémentaires pour la fabrication de boîtiers et de connexions.",
-          "img": "./img/Commerce/iphone_moderne.jpg"
-        },
-        {"text": "Les batteries de téléphone remplaçables ont tendance à être plus favorables à l'environnement à long terme, car elles permettent aux utilisateurs de remplacer uniquement la batterie défectueuse plutôt que l'ensemble du téléphone, réduisant ainsi la production de déchets électroniques.",
-          "img": "./img/Commerce/tel_demonte.jpg"
-        }
-      ],
-      "reponse": 1,
-      "description": "La fabrication d’un smartphone (de l’extraction des minerais à\nl’assemblage final) est responsable d’environ trois quarts de ces\nimpacts, qui sont en grande partie imputables à l’écran et aux\ncomposants électroniques complexes (microprocesseurs, etc.).\nLa distribution et l’utilisation du smartphone ont moins d’impacts.\nIls sont essentiellement liés à l’énergie consommée pour le trans-\nport et la production d’électricité. L’étape de la fin de vie a des\nimpacts variables selon que le smartphone est recyclé ou non"
-    },
-    {"question": " Quel est l'impact environnemental des pailles en papier par rapport aux pailles en plastique?",
-      "options": [
-        {
-          "text": " Les pailles en plastique sont plus respectueuses de l'environnement car leur production nécessite moins de ressources que celle des pailles en papier. Bien que les pailles en plastique posent des problèmes de déchets, les pailles en papier peuvent contribuer à la déforestation.\n",
-          "img": "./img/Commerce/paille_plastique.jpg"
-        },
-        {"text": "Les pailles en papier sont généralement considérées comme plus écologiques que les pailles en plastique, car elles sont biodégradables et se décomposent plus rapidement. Cependant, leur production nécessite également des ressources en eau et en énergie.",
-          "img": "./img/Commerce/paille_papier.jpg"
-        }
-      ],
-      "reponse": 1,
-      "description": "Les pailles en papier sont considérées comme plus écologiques en raison de leur biodégradabilité, se décomposant naturellement sans créer de résidus nocifs. Fabriquées à partir de ressources renouvelables comme le bois, elles réduisent la dépendance aux combustibles fossiles par rapport aux pailles en plastique. Bien que la production de papier ait des impacts, les pailles en papier recyclables ou compostables offrent des options de gestion des déchets plus respectueuses de l'environnement que leurs homologues en plastique."
-    },
-    {"question": "Quel est l'impact environnemental de l'achat local par rapport à l'achat de produits importés?",
-      "options": [
-        {
-          "text": "L'achat local a souvent un impact environnemental moindre en raison de la réduction des émissions de gaz à effet de serre liées au transport. En favorisant les produits locaux, on encourage également le développement de pratiques agricoles durables et la préservation des ressources locales.",
-          "img": "./img/Commerce/achat_local.jpg"
-        },
-        {"text": "L'achat de produits importés est plus écologique car il permet d'accéder à une plus grande variété de produits et de bénéficier des avantages comparatifs des différentes régions du monde. Les produits importés peuvent souvent être produits de manière plus efficace, compensant ainsi les émissions de carbone liées au transport.",
-          "img": "./img/Commerce/achat_importee_avion.jpg"
-        }
-      ],
-      "reponse": 0,
-      "description": "L'importation de biens a un impact significatif sur l'environnement en raison des émissions de gaz à effet de serre associées au transport international. Par exemple, le transport maritime, largement utilisé pour les importations, est responsable d'environ 2 à 3 % des émissions mondiales de CO2. De plus, l'importation de biens peut contribuer à des problèmes tels que la déforestation et l'exploitation non durable des ressources naturelles dans les pays exportateurs."
-    },
-    {"question": "Quel est l'impact environnemental de l'achat de produits reconditionnés par rapport à l'achat de produits neufs?",
-      "options": [
-        {
-          "text": " L'achat de produits neufs est plus respectueux de l'environnement car ils sont fabriqués selon les dernières normes technologiques et environnementales, garantissant une efficacité énergétique supérieure et une durée de vie plus longue. Les produits reconditionnés peuvent être moins fiables et nécessiter des réparations fréquentes, contribuant ainsi à un impact environnemental plus important.",
-          "img": "./img/Commerce/produit_neuf.jpg"
-        },
-        {"text": "L'achat de produits reconditionnés est généralement plus écologique car cela contribue à réduire la production de déchets électroniques. En réutilisant des produits existants, on diminue la demande de nouvelles ressources et d'énergie nécessaires à la fabrication de produits neufs.",
-          "img": "./img/Commerce/reconditionne.jpg"
-        }
-      ],
-      "reponse": 1,
-      "description": "L'achat de produits reconditionnés a un impact environnemental positif en réduisant la production de déchets électroniques. Selon une étude menée par l'Agence de protection de l'environnement des États-Unis (EPA), la production d'un seul ordinateur portable neuf équivaut à environ 160 kg de déchets électroniques, tandis que les produits reconditionnés contribuent à prolonger la durée de vie utile des équipements. De plus, l'achat reconditionné peut aider à réduire la demande de nouvelles ressources et d'énergie nécessaires à la fabrication de produits neufs."
-    }
-  ]
-}

back/resources/Habitat.json

@@ -1,101 +0,0 @@
-{
-  "nomCategorie": "Habitat",
-  "questions": [
-    {
-        "question": "Les appareils en veille ne consomment pas beaucoup d'énergie",
-
-        "options": [
-            {
-                "text": "Vrai",
-                "img": "./Habitat/"
-            },
-
-            {
-                "text": "Faux",
-                "img": "./Habitat/"
-            }
-        ],
-
-      "reponse": 1,
-      "description":"Selon l'ADEME, la veille des appareils électriques consomme 300 à 500 kWh par an, soit 11% de la facture d'électricité d'un foyer moyen. Cette énergie qui vous est facturée est consommée sans vous apporter du confort supplémentaire. Elle ne fait qu'alimenter des appareils qui sont « en pause »."
-    },
-
-    {
-        "question": "Qu'est-ce qui consomme plus d'eau ? ",
-
-        "options": [
-            {
-                "text": "Prendre une douche de 20 minutes",
-                "img": "./Habitat/douche.jpg"
-            },
-
-            {
-                "text": "Prendre un bain",
-                "img": "./Habitat/bain.jpg"
-            }
-        ],
-
-      "reponse": 0,
-      "description": "Prendre un bain consomme en moyenne 150 à 200 litres d'eau et une douche consomme en general entre 15 et 20 litres par minutes. En passant trop de temps sous la douche on consomme plus qu'un bain."
-    },
-
-    {
-        "question": "Même si j'ai des pièces inutilisés il est preferable de chauffer toutes les pièces de la maison plutot",
-
-        "options": [
-            {
-                "text": "Vrai",
-                "img": "./img/Habitat/"
-            },
-
-            {
-                "text": "Faux",
-                "img": "./img/Habitat/"
-            }
-        ],
-
-      "reponse": 1,
-      "description": "Un trop grand écart entre les températures des différentes pièces pourrait engendrer une surconsommation. En effet, l’air frais pourrait refroidir les pièces chauffées, et les radiateurs consommeraient donc davantage pour arriver à la température de consigne."
-    },
-
-    {
-        "question": "Pour faire la vaisselle j'utilise plus d'eau",
-
-        "options": [
-            {
-                "text": "En lavant à la main",
-                "img": "./img/Habitat/laver_vaisselle_alamain.jpg"
-            },
-
-            {
-                "text": "En utilisant un lave-vaisselle",
-                "img": "./img/Habitat/lavevaisselle.jpg"
-            }
-        ],
-
-      "reponse": 0,
-      "description": "Si la consommation d'eau du lave-vaisselle est en moyenne de 10 litres par cycle, celle à la main est de 40 à 60 litres, sans compter la consommation électrique liée au chauffage de l'eau qui est beaucoup plus importante en vue de la durée prolongée du lavage."
-    },
-
-    {
-        "question": "Un chauffage electrique est toujours plus ecologique qu'un chauffage au bois",
-
-        "options": [
-            {
-                "text": "Oui",
-                "img": "./img/Habitat/chauffageelectrique.jpg"
-            },
-
-            {
-                "text": "Non",
-                "img": "./img/Habitat/chauffagebois.jpg"
-            }
-        ],
-
-      "reponse": 1,
-      "description": "Ca dépend de la source d'electricite utilisee (energie renouvelable ou non). Le chauffage au bois reste le moins cher et une bonne isolation vaut mieux que n'importe quel type de chauffage."
-    }
-
-
-  ]
-}

back/resources/Transport.json

@@ -1,82 +0,0 @@
-{
-    "nomCategorie": "transport",
-    "questions": [
-      {
-        "question": "Quel moyen de transport a généralement la plus grande empreinte carbone par passager-kilomètre?",
-        "options": [
-          {
-            "text": "Voiture individuelle",
-            "img": "./img/Transport/voiture.jpg"
-          },
-          {
-            "text": "Avion",
-            "img": "./img/Transport/avion.jpg"
-          }
-        ],
-        "reponse": 1,
-        "description":"Les voitures individuelles, en particulier celles qui fonctionnent aux carburants fossiles, ont souvent une consommation élevée de carburant par kilomètre parcouru, ce qui contribue aux émissions de gaz à effet de serre."
-      },
-      {
-        "question": "Le réseau de trains à grande vitesse (TGV) en France est-il souvent salué pour ses faibles émissions de gaz à effet de serre, principalement grâce à l'utilisation d'énergies renouvelables pour son fonctionnement ?",
-        "options": [
-          {
-            "text": "Vrai",
-            "img": "./img/Transport/faibleEmissionGaz.jpg"
-          },
-          {
-            "text": "Faux",
-            "img": "./img/Transport/forteEmissionGaz.jpg"
-          }
-        ],
-        "reponse": 0,
-        "description":" le réseau de trains à grande vitesse (TGV) en France utilise principalement des énergies renouvelables, réduisant ainsi ses émissions de gaz à effet de serre. Cela favorise un mode de transport respectueux de l'environnement."
-      },
-      
-      {
-        "question": "Comment la France encourage-t-elle l'adoption de véhicules électriques?",
-        "options": [
-          {
-            "text":"Par des incitations fiscales",
-            "img":"./img/Transport/incitation_fiscale.jpg"
-          },
-          {
-            "text":"Par des limitations de circulation pour les véhicules à essence",
-            "img": "./img/Transport/vehiculeEssence.jpg"
-          }
-        ],
-        "reponse":0,
-        "description":" le gouvernement français offre des avantages fiscaux, tels que des réductions d'impôts ou des crédits d'impôt, pour inciter les citoyens à opter pour des véhicules électriques. Ces incitations fiscales visent à stimuler le marché des véhicules électriques en rendant ces alternatives plus attrayantes sur le plan financier, contribuant ainsi à réduire les émissions de gaz à effet de serre liées au secteur des transports."
-      },
-      {
-        "question": "Quelle ville française a mis en œuvre un système de location de vélos très populaire pour promouvoir des modes de transport plus durables?",
-        "options": [
-          {
-            "text": "Paris",
-            "img": "paris.jpg"
-          },
-          {
-            "text": "Lyon",
-            "img": "lyon.jpg"
-          }
-        ],
-        "reponse": 0,
-        "description":"Paris a mis en place un système de location de vélos, connu sous le nom de velib, pour encourager des modes de transport durables. Cette initiative vise à réduire la dépendance aux véhicules individuels motorisés."
-      },
-      {
-        "question": "Le réseau de trains à grande vitesse (TGV) en France utilise-t-il principalement des énergies renouvelables, ce qui contribue à des émissions de gaz à effet de serre plus faibles ?",
-        "options": [
-          {
-            "text": "Vrai",
-            "img": "vrai.jpg"
-          },
-          {
-            "text": "Faux",
-            "img": "faux.jpg"
-          }
-        ],
-        "reponse": 0,
-        "description":"Cette pratique souligne l'engagement en faveur du développement durable dans le domaine des transports en privilégiant des sources d'énergie propres et renouvelables, réduisant ainsi l'impact environnemental du TGV."
-      }
-      
-    ]
-  }

back/resources/phenomene_naturelle.json

@@ -1,82 +0,0 @@
-{
-    "nomCategorie":"Phenomene_naturel",
-    "questions": [
-        {
-          "question": "Comment les tempêtes hivernales de l'océan Atlantique affectent-elles annuellement certaines régions de la France?",
-          "options": [
-            {
-              "text": "Impact significatif",
-              "img": "./img/Phenomenes/impactSignificatif.jpg"
-            },
-            {
-              "text": "Aucun impact",
-              "img": "./img/Phenomenes/absenceImpact.jpg"
-            }
-          ],
-          "reponse": 0,
-          "description": "Les tempêtes hivernales de l'océan Atlantique ont un impact significatif sur la biodiversité, les forêts et les infrastructures en France, causant des conséquences environnementales importantes."
-        },
-        {
-          "question": "Les inondations fréquentes dans les régions méditerranéennes, comme les Cévennes, contribuent-elles à la perte annuelle de biodiversité?",
-          "options": [
-            {
-              "text": "Contribuent à la perte de biodiversité",
-              "img": "./img/Phenomenes/inondations.jpg"
-            },
-            {
-              "text": "Aucun impact sur la biodiversité",
-              "img": "./img/Phenomenes/absencePerteBiodiversite.jpg"
-            }
-          ],
-          "reponse": 0,
-          "description": "Les inondations récurrentes dans les régions méditerranéennes, telles que les Cévennes, ont un impact sur l'écosystème local, entraînant la perte de biodiversité et des changements environnementaux."
-        },
-        {
-          "question": "Quel est l'impact environnemental annuel des incendies de forêt en France, et comment cela contribue-t-il aux changements climatiques?",
-          "options": [
-            {
-              "text": "Émissions de gaz à effet de serre",
-              "img": "./img/Phenomenes/incendiesForet.jpg"
-            },
-            {
-              "text": "Érosion des sols",
-              "img": "./img/PhenomenesNaturels/erosionSols.jpg"
-            }
-          ],
-          "reponse": 0,
-          "description": "Les incendies de forêt ont des impacts environnementaux graves, contribuant principalement aux émissions de gaz à effet de serre et amplifiant les changements climatiques."
-        },
-        {
-          "question": "Comment les avalanches récurrentes dans les régions montagneuses de la France affectent-elles la stabilité des écosystèmes alpins et des habitats naturels?",
-          "options": [
-            {
-              "text": "Dommages écologiques",
-              "img": "./img/PhenomenesNaturels/avalanches.jpg"
-            },
-            {
-              "text": "Mesures de conservation",
-              "img": "./img/PhenomenesNaturels/mesuresConservation.jpg"
-            }
-          ],
-          "reponse": 0,
-          "description": "Les avalanches peuvent causer des dommages écologiques importants, nécessitant des mesures de conservation pour restaurer la stabilité des écosystèmes alpins."
-        },
-        {
-          "question": "Les vagues de chaleur annuelles provoquent-elles du stress sur les écosystèmes, des sécheresses et une détérioration de la qualité de l'air en France?",
-          "options": [
-            {
-              "text": "Provoquent du stress sur les écosystèmes",
-              "img": "./img/Phenomenes/vaguesChaleur.jpg"
-            },
-            {
-              "text": "Aucun effet sur les écosystèmes",
-              "img": "./img/Phenomenes/absenceEffetEcosysteme.jpg"
-            }
-          ],
-          "reponse": 0,
-          "description": "Les vagues de chaleur ont des conséquences écologiques, induisant un stress sur les écosystèmes, des sécheresses et une détérioration de la qualité de l'air en France."
-        }
-      ]
-      
-}
-

back/resources/sources_energetiques.json

@@ -1,80 +0,0 @@
-{
-  "nomcat": "Sources Énergetiques",
-  "questions": [
-    {
-      "question": "Quel est l'impact environnemental de l'énergie nucléaire par rapport aux énergies fossiles?",
-      "options": [
-        {
-          "text": "L'énergie nucléaire est plus néfaste pour l'environnement que les énergies fossiles, car elle génère des déchets radioactifs dangereux et pose des risques significatifs en cas d'accidents nucléaires, comme l'a montré l'accident de Tchernobyl.",
-          "img": "./img/energies/chernobyl_et_tout.jpg"
-      },
-        {
-          "text": "L'énergie nucléaire produit une quantité d'énergie considérable tout en émettant très peu de gaz à effet de serre, réduisant ainsi son impact sur le changement climatique par rapport aux énergies fossiles comme le charbon et le pétrole.",
-          "img": "./img/energies/nucleaire_cool.jpg"
-        }
-      ],
-      "reponse": 1,
-      "description": "L'énergie nucléaire est souvent considérée comme ayant un impact environnemental relativement faible en raison de sa faible émission de gaz à effet de serre lors de la production d'électricité, contribuant ainsi à atténuer le changement climatique. Les centrales nucléaires génèrent une quantité importante d'électricité avec une émission de CO2 environ 10 à 20 fois inférieure à celle des centrales au charbon. De plus, les déchets radioactifs produits par l'énergie nucléaire sont gérés de manière sûre et sécurisée, avec des taux de confinement et de stockage élevés pour minimiser les risques pour la santé et l'environnement. Cependant, les préoccupations subsistent quant à la gestion à long terme des déchets radioactifs et aux risques associés à d'éventuels accidents nucléaires."
-    },
-    {
-      "question": "Quelle est l'efficacité des panneaux solaires par rapport à d'autres sources d'énergie?",
-      "options": [
-        {
-          "text": "Les panneaux solaires ont une efficacité croissante et peuvent atteindre jusqu'à 20-25%, ce qui en fait une source d'énergie renouvelable de plus en plus compétitive par rapport aux sources traditionnelles telles que le charbon ou le gaz.",
-          "img": "./img/energies/panneaux_solaires_cool.jpg"
-        },
-        {
-          "text": "Les panneaux solaires sont moins efficaces que d'autres sources d'énergie, car leur rendement est limité et dépend fortement des conditions météorologiques. En outre, la production des panneaux solaires génère des déchets toxiques qui affectent l'environnement.",
-          "img": "./img/energies/panneaux_solaires_bof.jpg"
-        }
-      ],
-      "reponse": 0,
-      "description": "Les avancées technologiques ont contribué à l'efficacité croissante des panneaux solaires. L'utilisation de matériaux semi-conducteurs plus performants, tels que le silicium monocristallin et le silicium polycristallin, a amélioré le rendement énergétique. Les innovations dans la conception des cellules solaires, telles que les cellules bifaciales et les cellules à hétérojonction, ont également optimisé la capture de l'énergie solaire, augmentant ainsi l'efficacité des panneaux solaires au fil du temps. De plus, la recherche continue sur les matériaux et les techniques de fabrication vise à accroître davantage l'efficacité tout en réduisant les coûts."
-    },
-    {
-      "question": "Quels sont les dangers potentiels associés aux éoliennes?",
-      "options": [
-        {
-          "text": "Les éoliennes ne présentent aucun danger pour l'environnement ou la santé humaine. Les préoccupations concernant les impacts sur la faune sont souvent exagérées, et les avantages en termes d'énergie renouvelable surpassent largement les inconvénients potentiels.",
-          "img": "./img/energies/eolienne_bien.jpg"
-        },
-        {
-          "text": "Certains des dangers potentiels des éoliennes comprennent le risque de collisions d'oiseaux et de chauves-souris avec les pales, ainsi que des préoccupations liées à la modification du paysage visuel dans certaines zones. Des études sont en cours pour évaluer ces impacts.",
-          "img": "./img/energies/eolienne_mal.jpg"
-        }
-      ],
-      "reponse": 1,
-      "description": "Les éoliennes peuvent présenter des dangers potentiels pour la vie locale, notamment le risque de collisions entre les pales et la faune aviaire, en particulier les oiseaux et les chauves-souris. Des études indiquent que certaines espèces peuvent être impactées, bien que la portée de cet impact varie selon les emplacements et les conditions environnementales spécifiques. De plus, des préoccupations ont été soulevées quant aux perturbations du paysage visuel, ce qui peut affecter la qualité de vie des habitants des zones où les éoliennes sont implantées."
-    },
-    {
-      "question": "Question : Quel est le pourcentage approximatif mondial actuel d'utilisation des énergies renouvelables dans le mix énergétique?",
-      "options": [
-        {
-          "text": "Environ 8% des besoins énergétiques mondiaux sont actuellement couverts par des sources d'énergie renouvelable, indiquant un progrès plus lent que prévu dans la transition vers ces sources d'énergie.",
-          "img": ".img/energies/photo_basique_transition_energetique.jpg"
-        },
-        {
-          "text": "Environ 26% des besoins énergétiques mondiaux sont actuellement couverts par des sources d'énergie renouvelable, montrant une tendance à la hausse au fil des années.",
-          "img": ".img/energies/photo_basique_transition_energetique2.jpg"
-        }
-      ],
-      "reponse": 1,
-      "description": "Actuellement, environ 26% des besoins énergétiques mondiaux proviennent de sources d'énergie renouvelable, reflétant une augmentation constante de l'adoption de ces technologies. Cette croissance est stimulée par les efforts accrus de nombreux pays pour atteindre leurs objectifs en matière de climat et réduire leur dépendance aux combustibles fossiles. Les secteurs solaire et éolien ont été particulièrement dynamiques dans cette transition, contribuant de manière significative à la part croissante des énergies renouvelables dans le mix énergétique mondial."
-    },
-    {
-      "question": "Le forage hydraulique est plus propre que l'éxtraction naturelle de gaz",
-      "options": [
-        {
-          "text": "Vrai",
-          "img": "./img/energies/image_de_gaz_naturel.jpg"
-        },
-        {
-          "text": "Faux",
-          "img": "./img/energies/extraction_petrole.jpg"
-        }
-      ],
-      "reponse": 1,
-      "description": "Le fracking peut avoir un impact environnemental plus important que l'extraction normale de pétrole en raison de la pollution potentielle des eaux souterraines, des émissions de gaz à effet de serre lors de la libération de méthane et des risques sismiques associés à cette technique."
-    }
-  ]
-}

fichierplaceholder

@@ -1 +0,0 @@
-p

front/defis.md

@@ -1,15 +0,0 @@
-# Easter egg :
-
-- Faire une liste (README) des easter egg et de la façon d'y accéder
-- Evaluer sur la quantité et la qualité
-
-A la conquete de l'oeuf de paque :
-
-- Evaluer sur la complexité de la combinaison pour le trouver
-- Evaluer sur la nature de l'EE
-- Evaluation sur l'adequation avec le reste du site
-- Faire un README avec la description de la démarche, les choix techniques, le
-  choix de l'EE
-
-Accessibilité :
-- 

front/easterEggEtoile.html

@@ -1,90 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Noël Écologique</title>
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            height: 100vh;
-            background-color: #A3BBAD;
-        }
-
-        h1 {
-            font-family: 'Manrope', sans-serif;
-            font-weight: 400;
-            font-size: 64px;
-            color: #0E3B43;
-        }
-
-        p {
-            font-family: 'Manrope', sans-serif;
-            font-weight: 300;
-            font-size: 20px;
-            color: #0E3B43;
-        }
-
-        #santa {
-            font-size: 72px;
-            cursor: pointer;
-            color: darkred;
-        }
-
-        .arrow-container {
-            display: flex;
-        }
-
-        .arrow_right {
-            font-size: 36px;
-            animation: swing_arrow_right 1s infinite alternate;
-        }
-
-        .arrow_left {
-            font-size: 36px;
-            animation: swing_arrow_left 1s infinite alternate;
-        }
-
-        @keyframes swing_arrow_right {
-            0% {
-                transform: translateX(0);
-            }
-            100% {
-                transform: translateX(10px);
-            }
-        }
-
-        @keyframes swing_arrow_left {
-            0% {
-                transform: translateX(0);
-            }
-            100% {
-                transform: translateX(-10px);
-            }
-        }
-    </style>
-</head>
-<body>
-
-<h1>Joyeux Noël Écologique !</h1>
-<p>En cette période festive, pensons à la nature et à la durabilité.</p>
-<p>Faites un geste écologique pendant les fêtes ! 🌲</p>
-
-<div class="arrow-container">
-    <p class="arrow_right">→</p>
-    <div id="santa" onclick="showEasterEgg()">🎅</div>
-    <p class="arrow_left">←</p>
-</div>
-<script>
-  const showEasterEgg = () => {
-    alert("Easter Egg : C'est le moment de penser à des cadeaux éco-friendly !");
-  }
-</script>
-
-</body>
-</html>

front/easter_eggs.md

@@ -1,4 +0,0 @@
-# Liste des easter eggs :
-
-- Joyeux noël écologique ! : Répondez juste à toutes les questions du quizz une
-  nouvelle page s'ouvre.

front/img/arrow.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="21" viewBox="0 0 14 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.371318 9.6839L10.6381 0.338062C11.1333 -0.11268 11.9361 -0.11268 12.4312 0.338062L13.6286 1.4281C14.123 1.87808 14.1239 2.60735 13.6308 3.05838L5.49411 10.5L13.6308 17.9416C14.1239 18.3927 14.123 19.1219 13.6286 19.5719L12.4312 20.6619C11.936 21.1127 11.1333 21.1127 10.6381 20.6619L0.371372 11.3161C-0.123786 10.8654 -0.123787 10.1346 0.371318 9.6839Z" fill="white"/>
-</svg>

front/img/logo.svg

@@ -1,3 +0,0 @@
-<svg width="86" height="76" viewBox="0 0 86 76" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M81.5503 1.44316C80.7141 -0.412059 78.325 -0.486268 77.3245 1.26506C72.6956 9.26477 64.4084 14.2516 54.9415 14.2516H42.9959C27.168 14.2516 14.3265 27.0155 14.3265 42.7478C14.3265 43.7867 14.446 44.7811 14.5505 45.7903C24.0771 39.0077 37.8295 33.2491 57.3306 33.2491C58.6446 33.2491 59.7197 34.3177 59.7197 35.6237C59.7197 36.9298 58.6446 37.9984 57.3306 37.9984C19.7916 37.9984 3.87414 60.8696 0.350198 69.4629C-0.635313 71.8821 0.529381 74.6427 2.96329 75.6371C5.41214 76.6464 8.18948 75.4739 9.20486 73.0695C9.42884 72.5352 12.3256 65.9603 19.9409 59.6229C24.7789 66.1384 33.977 72.3571 46.057 71.0807C69.5002 69.3887 86 48.4915 86 22.9043C86 15.4538 84.3874 7.73607 81.5503 1.44316Z" fill="white"/>
-</svg>

front/index.html

@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mon site ecolo</title>
-    <link rel="icon" href="img/logo.svg" type="image/svg">
-    <link rel="stylesheet" href="style/init.css">
-    <link rel="stylesheet" href="style/navbarHorizontal.css">
-    <link rel="stylesheet" href="style/main.css">
-
-    <script src="./src/konami.js" type="module" defer></script>
-</head>
-<body id="accueil">
-
-<header>
-    <div id="logo">
-        <a href="./index.html"></a><img src="./img/logo.svg" alt="Logo">
-    </div>
-
-    <nav>
-        <ul>
-            <li><a href="./jouer.html">Jouer</a></li>
-            <li><a href="./savoir.html">En Savoir +</a></li>
-            <li><a href="./propos.html">A propos</a></li>
-        </ul>
-    </nav>
-</header>
-
-<main>
-    <h1>Sauvons la planète,</h1>
-    <h2>distinguons la réalité<br>des idées reçues.</h2>
-    <p id="sous-pres">
-        Défiez les idées reçues sur l'écologie avec notre quiz captivant !
-        </br>
-        Testez-vous dès maintenant pour une expérience éducative et
-        amusante.
-    </p>
-    <button id="btnjouer"><a href="./jouer.html">Essayer ce jeu</a></button>
-</main>
-
-
-</body>
-</html>

front/jouer.html

@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mon site ecolo | Jeu </title>
-    <link rel="icon" href="img/logo.svg" type="image/svg">
-    <link rel="stylesheet" href="style/init.css">
-    <link rel="stylesheet" href="style/navbarVertical.css">
-    <link rel="stylesheet" href="style/jeu.css">
-    <script src="./src/score.js" defer></script>
-</head>
-
-<body>
-<nav class="navbar" id="navbar">
-    <div class="nav-links">
-        <div class="logo">
-            <img src="./img/logo.svg" alt="Logo" width="40">
-        </div>
-
-        <a href="#" class="nav-link">Commerces</a>
-        <a href="#" class="nav-link">Habitats</a>
-        <a href="#" class="nav-link">Phénomènes</a>
-        <a href="#" class="nav-link">Energies</a>
-        <a href="#" class="nav-link">Transports</a>
-    </div>
-
-    <div class="arrow">
-        <label for="toggleNavbar">
-            <img src="./img/arrow.svg" alt="arrow" width="10">
-        </label>
-        <input id="toggleNavbar" type="checkbox">
-    </div>
-</nav>
-
-<div id="starContainer">
-    <div class="star" id="star5"></div>
-    <div class="star" id="star4"></div>
-    <div class="star" id="star3"></div>
-    <div class="star" id="star2"></div>
-    <div class="star" id="star1"></div>
-</div>
-
-<div class="container">
-    <div class="choices">
-        <section id="left">
-            <img class="image" id="imgleft" src="./img/imgleft.png"
-                 alt="imgleft">
-            <div class="text-overlay">Votre texte ici</div>
-        </section>
-
-        <section id="right">
-            <img class="image" id="imgright" src="./img/imgright.webp"
-                 alt="imgright">
-            <div class="text-overlay">Votre texte ici</div>
-        </section>
-    </div>
-
-    <div class="question">
-        <h2>Question</h2>
-        <p>Lorem ipsum</p>
-        <button class="hide">Question suivante</button>
-    </div>
-</div>
-
-<script>
-  const rightSection = document.getElementById('right');
-  const leftSection = document.getElementById('left');
-  const buttonElement = document.querySelector('button');
-
-  rightSection.addEventListener('click', () => {
-    rightSection.classList.remove('hide');
-    leftSection.classList.add('hide');
-    buttonElement.classList.remove('hide');
-  });
-
-  leftSection.addEventListener('click', () => {
-    leftSection.classList.remove('hide');
-    rightSection.classList.add('hide');
-    buttonElement.classList.remove('hide');
-  });
-
-  buttonElement.addEventListener('click', () => {
-    augmenterCompteur();
-    buttonElement.classList.add('hide');
-
-    rightSection.classList.remove('hide');
-    leftSection.classList.remove('hide');
-  });
-</script>
-
-</body>
-</html>

front/propos.html

@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <link rel="stylesheet" href="./style/init.css">
-    <link rel="stylesheet" href="./style/navbarHorizontal.css">
-    <link rel="stylesheet" href="./style/propos.css">
-    <meta charset="UTF-8">
-    <title>Nuit de l'info | A Propos</title>
-</head>
-<body>
-
-<header>
-    <div id="logo">
-        <a href="./index.html"></a><img src="./img/logo.svg" alt="Logo">
-    </div>
-
-    <nav>
-        <ul>
-            <li><a href="./jouer.html">Jouer</a></li>
-            <li><a href="./savoir.html">En Savoir +</a></li>
-            <li><a href="./propos.html">A propos</a></li>
-        </ul>
-    </nav>
-</header>
-
-<main>
-    <h1>A propos</h1>
-
-    <section>
-        <h2>Qui sommes-nous</h2>
-        <p>
-            Nous sommes une équipe de 6 étudiants en informatique à l'Université
-            de Pau et des Pays de l'Adour.
-            Ce site a été créé dans le cadre de la nuit de l'info 2023 qui
-            essaie de répondre à la problématique suivante : Faire face au
-            changement climatique: Le vrai du faux.
-        </p>
-    </section>
-
-    <section>
-        <h2>Inspirations</h2>
-        <p>
-            Le concept de ce site est fortement inspiré du jeu "Plus ou moins".
-            Nous avons voulu créer un jeu qui permet de sensibiliser les
-            utilisateurs sur les problématiques écologiques.
-        </p>
-    </section>
-</main>
-
-</body>
-</html>

front/savoir.html

@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <link rel="stylesheet" href="./style/init.css">
-    <link rel="stylesheet" href="./style/navbarHorizontal.css">
-    <link rel="stylesheet" href="./style/savoir.css">
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-
-<header>
-    <div id="logo">
-        <a href="./index.html"></a><img src="./img/logo.svg" alt="Logo">
-    </div>
-
-    <nav>
-        <ul>
-            <li><a href="./jouer.html">Jouer</a></li>
-            <li><a href="./savoir.html">En Savoir +</a></li>
-            <li><a href="./propos.html">A propos</a></li>
-        </ul>
-    </nav>
-</header>
-
-<main>
-    <h1>En savoir +</h1>
-
-    <section>
-        <h2>Commerce</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda
-            debitis dolores eligendi, eum explicabo facilis fugit illum impedit
-            in inventore natus nisi obcaecati odio quae, sequi. Modi quaerat
-            reprehenderit rerum.</p>
-    </section>
-
-    <section>
-        <h2>Habitat</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam
-            blanditiis deleniti impedit maxime perferendis quaerat quis.
-            Assumenda beatae blanditiis deserunt ducimus explicabo illo, impedit
-            ipsum iusto nemo reiciendis sunt?</p>
-    </section>
-
-    <section>
-        <h2>Phénomènes naturels</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis
-            quisquam repellendus totam veritatis voluptatum. Debitis ea esse
-            harum hic iure molestiae, officiis quam ut. Consectetur deserunt
-            itaque neque omnis sed!</p>
-    </section>
-
-    <section>
-        <h2>Sources d’énergies</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad
-            architecto dignissimos dolor dolorem doloribus, dolorum eum eveniet
-            inventore ipsum, labore laboriosam modi molestias mollitia nulla
-            quia quo ratione tempore unde?</p>
-    </section>
-
-    <section>
-        <h2>Transport</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium
-            aliquam aperiam culpa delectus dignissimos iure iusto, nulla numquam
-            sit. Adipisci aspernatur beatae cupiditate ipsa iste odio pariatur,
-            perspiciatis praesentium reiciendis.</p>
-    </section>
-</main>
-
-</body>
-</html>

front/src/konami.js

@@ -1,42 +0,0 @@
-const allowedKeys = {
-  37: 'left',
-  38: 'up',
-  39: 'right',
-  40: 'down',
-  65: 'a',
-  66: 'b',
-};
-
-const konamiCode = [
-  'up',
-  'up',
-  'down',
-  'down',
-  'left',
-  'right',
-  'left',
-  'right',
-  'b',
-  'a',
-];
-
-let konamiCodePosition = 0;
-
-document.addEventListener('keydown', function(e) {
-  let key = allowedKeys[e.keyCode];
-  let requiredKey = konamiCode[konamiCodePosition];
-
-  if (key === requiredKey) {
-    konamiCodePosition++;
-
-    if (konamiCodePosition === konamiCode.length) {
-      activateCheats();
-      konamiCodePosition = 0;
-    }
-  } else konamiCodePosition = 0;
-});
-
-const activateCheats = () => {
-  alert('cheats activated');
-  // TODO redirect to easter egg page
-};

front/src/score.js

@@ -1,27 +0,0 @@
-let score = 0;
-
-function augmenterCompteur() {
-  score++;
-  handleScore()
-}
-
-function handleScore() {
-  const total = 25;
-  const categories_step = 5;
-  const starsId = [
-    "star1",
-    "star2",
-    "star3",
-    "star4",
-    "star5",
-  ]
-
-  let starElements = starsId.map(id => document.getElementById(id));
-  for(let i = 0; i < starElements.length; i++) {
-    if (score >= (i + 1) * categories_step) {
-      starElements[i].style.visibility = 'visible';
-    }
-  }
-
-  if (score === total) window.location.href = './easterEggEtoile.html';
-}

front/style/init.css

@@ -1,96 +0,0 @@
-@font-face {
-    font-family: 'Manrope';
-    src: url('../font/manrope/Manrope-ExtraBold.ttf');
-    font-weight: 800;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Manrope';
-    src: url('../font/manrope/Manrope-Bold.ttf');
-    font-weight: 700;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Manrope';
-    src: url('../font/manrope/Manrope-Medium.ttf');
-    font-weight: 500;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Manrope';
-    src: url('../font/manrope/Manrope-Regular.ttf');
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Manrope';
-    src: url('../font/manrope/Manrope-Light.ttf');
-    font-weight: 300;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Manrope';
-    src: url('../font/manrope/Manrope-ExtraLight.ttf');
-    font-weight: 200;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Inter';
-    src: url('../font/inter/Inter-Black.ttf');
-    font-weight: 700;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Inter';
-    src: url('../font/inter/Inter-Bold.ttf');
-    font-weight: 600;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Inter';
-    src: url('../font/inter/Inter-Medium.ttf');
-    font-weight: 500;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Inter';
-    src: url('../font/inter/Inter-Regular.ttf');
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Inter';
-    src: url('../font/inter/Inter-Light.ttf');
-    font-weight: 300;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Inter';
-    src: url('../font/inter/Inter-ExtraLight.ttf');
-    font-weight: 200;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Inter';
-    src: url('../font/inter/Inter-Thin.ttf');
-    font-weight: 100;
-    font-style: normal;
-}
-
-
-body {
-    margin: 0;
-    padding: 0;
-}

front/style/jeu.css

@@ -1,137 +0,0 @@
-#starContainer {
-    position: fixed;
-    top: 10px;
-    right: 10px;
-    display: flex;
-    align-items: center;
-    visibility: hidden;
-    z-index: 2;
-}
-
-.star {
-    width: 20px;
-    height: 20px;
-    margin: 0 2px;
-    background-image: url('../img/star.png');
-    background-size: cover;
-}
-
-body {
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-}
-
-.container {
-    width: 100%;
-    height: 100vh;
-}
-
-section {
-    flex: 1;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: transform 0.3s ease;
-}
-
-.hide {
-    display: none;
-}
-
-.image {
-    width: 100%;
-    height: 100%;
-}
-
-#imgleft.expanded, #imgright.expanded {
-    transform: scale(1.5);
-    z-index: 1;
-}
-
-.image {
-    object-fit: cover;
-}
-
-section a {
-    display: block;
-    height: 100%;
-    width: 100%;
-    background-size: cover;
-    background-position: center;
-    text-decoration: none;
-}
-
-#left {
-    background-color: blue;
-}
-
-#right {
-    background-color: red;
-}
-
-.text-overlay {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 24px;
-    font-family: 'inter', sans-serif;
-    font-weight: 400;
-    text-align: center;
-    padding: 10px;
-    color: white;
-
-}
-
-.question {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #FFF1DD;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
-    border-radius: 10px;
-    margin-top: 150px;
-    padding: 30px;
-    width: 400px;
-    height: auto;
-}
-
-.question h2 {
-    font-family: 'inter', sans-serif;
-    font-weight: 400;
-    font-size: 35px;
-    color: black;
-    margin: 0;
-}
-
-.question p {
-    font-family: 'Manrope', sans-serif;
-    font-size: 25px;
-    color: black;
-}
-
-.choices {
-    display: flex;
-}
-
-.choices > section {
-    flex: 1;
-}
-
-button {
-    background-color: #357266;
-    color: white;
-    width: 214px;
-    height: 59px;
-    padding: 10px 20px;
-    margin-top: 90px;
-    font-family: 'Manrope', sans-serif;
-    font-size: 20px;
-    border: none;
-    border-radius: 10px;
-    cursor: pointer;
-}

front/style/main.css

@@ -1,60 +0,0 @@
-body {
-    background: url('../img/heroBanner.jpg') fixed;
-    background-size: cover;
-}
-
-main {
-    display: inline-block;
-    margin: auto auto auto 191px;
-    padding: 20px;
-}
-
-@media screen and (max-width: 768px) {
-    main {
-        margin: 30px;
-    }
-}
-
-h1 {
-    font-family: 'Manrope', sans-serif;
-    font-weight: 400;
-    font-size: 64px;
-    color: white;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    padding-bottom: 0;
-}
-
-h2 {
-    font-family: 'Manrope', sans-serif;
-    font-weight: 400;
-    font-size: 48px;
-    color: white;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-}
-
-#sous-pres {
-    font-family: 'Manrope', sans-serif;
-    font-weight: 300;
-    font-size: 20px;
-    color: white;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-}
-
-#btnjouer {
-    background-color: #357266;
-    color: white;
-    width: 214px;
-    height: 59px;
-    padding: 10px 20px;
-    margin-top: 90px;
-    font-family: 'Manrope', sans-serif;
-    font-size: 20px;
-    border: none;
-    border-radius: 10px;
-    cursor: pointer;
-}
-
-a {
-    text-decoration: none;
-    color: white;
-}

front/style/navbarHorizontal.css

@@ -1,30 +0,0 @@
-#logo {
-    width: 50px;
-    height: 50px;
-}
-
-header {
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0.60) 0.52%, rgba(0, 0, 0, 0.22) 53.65%, rgba(0, 0, 0, 0.00) 100%);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px;
-}
-
-ul {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-li {
-    list-style: none;
-    margin-left: 20px;
-}
-
-li a {
-    text-decoration: none;
-    color: white;
-    font-family: 'Manrope', sans-serif;
-    font-size: 20px;
-}

front/style/navbarVertical.css

@@ -1,66 +0,0 @@
-body {
-    /*//overflow-x: hidden;*/
-}
-
-.navbar {
-    z-index: 1;
-    height: 100vh;
-    /*width: 60px;*/
-    background-color: #333;
-    position: fixed;
-    display: flex;
-    /*flex-direction: column;*/
-    align-items: center;
-    justify-content: space-between;
-    transition: width 0.3s ease;
-}
-
-.logo {
-    margin-top: 40px;
-    margin-bottom: 20px;
-}
-
-.nav-links {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-}
-
-.nav-link {
-    padding: 20px;
-    margin-top: 20px;
-    text-align: center;
-    font-family: 'Manrope', sans-serif;
-    font-size: 20px;
-    color: #FFF1DD;
-    text-underline-offset: 8px;
-    transition: background-color 0.3s ease;
-}
-
-.nav-link:hover {
-    background-color: #555;
-}
-
-label {
-    padding: 10px 20px 10px 10px;
-    cursor: pointer;
-}
-
-.arrow-icon {
-    cursor: pointer;
-    margin-bottom: 20px;
-    padding: 10px;
-}
-
-#toggleNavbar {
-    cursor: pointer;
-    font-size: 30px;
-    color: #FFF1DD;
-    margin-bottom: 20px;
-    display: none;
-}
-
-.nav-links:has(+ .arrow > #toggleNavbar:checked){
-    display: none;
-}

front/style/propos.css

@@ -1,27 +0,0 @@
-body {
-    background-color: #457168;
-    font-family: 'Manrope', sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 1.5;
-    color: white;
-}
-
-main {
-    padding: 0 40px;
-}
-
-h1 {
-    margin: 0;
-    padding: 0;
-}
-
-section h2 {
-    color: #FFF;
-    font-family: "Manrope", sans-serif;
-    font-size: 40px;
-    font-style: normal;
-    font-weight: 300;
-    line-height: normal;
-    padding-bottom: 0;
-}

front/style/savoir.css

@@ -1,27 +0,0 @@
-body {
-    background-color: #457168;
-    font-family: 'Manrope', sans-serif;
-    font-size: 16px;
-    font-weight: 400;|
-    line-height: 1.5;
-    color: white;
-}
-
-main {
-    padding: 0 40px;
-}
-
-h1 {
-    margin: 0;
-    padding: 0;
-}
-
-section h2 {
-    color: #FFF;
-    font-family: "Manrope", sans-serif;
-    font-size: 40px;
-    font-style: normal;
-    font-weight: 300;
-    line-height: normal;
-    padding-bottom: 0;
-}

main.js

@@ -0,0 +1,54 @@
+import express from 'express';
+import {createServer} from 'http';
+import {Server} from 'socket.io';
+import routes from './src/routes/index.js';
+import GameState from './src/GameState.mjs';
+
+const app = express();
+const httpServer = createServer(app);
+const io = new Server(httpServer);
+
+// Set up views engine
+app.set('view engine', 'pug');
+app.set('views', './views');
+
+// Set up static files
+app.use(express.static('public'));
+app.use(express.static('node_modules/bulma/css/'));
+
+// Set up routes
+for (const {slug, route} of routes) app.get(slug, route);
+
+// Start server
+httpServer.listen(3000,
+  () => console.log('Server is running: http://localhost:3000'));
+
+// Socket.io
+io.on('connection', (socket) => {
+  const gameState = new GameState();
+
+  // Connection
+  const connectionMessage = `User connected as ${socket.id}`;
+  console.info(connectionMessage);
+  socket.emit('connected', connectionMessage);
+
+  // Game Start
+  socket.emit('init_game', gameState.init());
+  socket.emit('question', gameState.getCurrentQuestion());
+
+  // Answer Question -> Correct or Incorrect
+  socket.on('answer_question', (optionId) => {
+    const result = gameState.answerQuestion(optionId);
+    socket.emit('result', result);
+  });
+
+  // Next Question -> Question
+  socket.on('next_question', () => {
+    const nextQuestion = gameState.nextQuestion();
+    if (nextQuestion) socket.emit('question', nextQuestion);
+    else socket.emit('game_end', gameState.score);
+  });
+
+  // Disconnect
+  socket.on('disconnect', () => console.error('user disconnected', socket.id));
+});