liaison_back_front

2026-05-13 17:21:55 +00:00 · 2023-12-08 07:20:59 +01:00
parent 5bd45d7a6f
commit 4968c7049e
54 changed files with 152 additions and 165 deletions
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
@@ -1,6 +1,6 @@

 function getTitre (categorie ,indice){// Charger le contenu du fichier JSON
-    fetch(`./resources/${categorie}.json`)
+    fetch(`/back/resources/${categorie}.json`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
@@ -12,6 +12,7 @@ function getTitre (categorie ,indice){// Charger le contenu du fichier JSON
            if (indice >= 0 && indice < questions.length) {
                const question = questions[indice].question;
                console.log(`Question à l'indice ${indice}: ${question}`);
+                document.getElementById('qid').innerHTML = question;
            } else {
                console.error(`Indice ${indice} hors de portée.`);
            }
@@ -21,7 +22,7 @@ function getTitre (categorie ,indice){// Charger le contenu du fichier JSON
        });
 }
 function getRep1(categorie, indice){// Charger le contenu du fichier JSON
-    fetch(`./resources/${categorie}.json`)
+    fetch(`/back/resources/${categorie}.json`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
@@ -33,6 +34,7 @@ function getRep1(categorie, indice){// Charger le contenu du fichier JSON
            if (indice >= 0 && indice < questions.length) {
                const rep = questions[indice].options[0].text;
                console.log(`Reponse à l'indice ${indice}: ${rep}`);
+                document.getElementById('lefttext').innerHTML = rep;
                return rep;
            } else {
                console.error(`Indice ${indice} hors de portée.`);
@@ -43,7 +45,7 @@ function getRep1(categorie, indice){// Charger le contenu du fichier JSON
        });
 }
 function getRep2(categorie, indice){// Charger le contenu du fichier JSON
-    fetch(`./resources/${categorie}.json`)
+    fetch(`/back/resources/${categorie}.json`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
@@ -55,6 +57,7 @@ function getRep2(categorie, indice){// Charger le contenu du fichier JSON
            if (indice >= 0 && indice < questions.length) {
                const rep = questions[indice].options[1].text;
                console.log(`Reponse à l'indice ${indice}: ${rep}`);
+                document.getElementById('righttext').innerHTML = rep;
                return rep;
            } else {
                console.error(`Indice ${indice} hors de portée.`);
@@ -64,8 +67,8 @@ function getRep2(categorie, indice){// Charger le contenu du fichier JSON
            console.error('Erreur lors du chargement du fichier JSON :', erreur.message);
        });
 }
-function getVrai(categorie, indice){
-    fetch(`./resources/${categorie}.json`)
+function getVrai(categorie, indice,id){
+    fetch(`/back/resources/${categorie}.json`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
@@ -77,6 +80,7 @@ function getVrai(categorie, indice){
            if (indice >= 0 && indice < questions.length) {
                const vrai = questions[indice].reponse;
                console.log(`vraie reponse ${indice}: ${vrai}`);
+                document.getElementById('qtype').innerHTML = vrai == id ? "Correct" : "Incorrect";
                return vrai;
            } else {
                console.error(`Indice ${indice} hors de portée.`);
@@ -87,7 +91,7 @@ function getVrai(categorie, indice){
        });
 }
 function getDescription(categorie, indice){
-    fetch(`./resources/${categorie}.json`)
+    fetch(`/back/resources/${categorie}.json`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
@@ -99,6 +103,7 @@ function getDescription(categorie, indice){
            if (indice >= 0 && indice < questions.length) {
                const description = questions[indice].description;
                console.log(`description ${indice}: ${description}`);
+                document.getElementById('qid').innerHTML = description;
                return description;
            } else {
                console.error(`Indice ${indice} hors de portée.`);
@@ -109,7 +114,7 @@ function getDescription(categorie, indice){
        });
 }
 function getImg1(categorie, indice){
-    fetch(`./resources/${categorie}.json`)
+    fetch(`/back/resources/${categorie}.json`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
@@ -121,6 +126,8 @@ function getImg1(categorie, indice){
            if (indice >= 0 && indice < questions.length) {
                const img = questions[indice].options[0].img;
                console.log(`vraie reponse ${indice}: ${img}`);
+                document.getElementById('imgleft').src = img;
+
                return img;
            } else {
                console.error(`Indice ${indice} hors de portée.`);
@@ -131,7 +138,7 @@ function getImg1(categorie, indice){
        });
 }
 function getImg2(categorie, indice){
-    fetch(`./resources/${categorie}.json`)
+    fetch(`/back/resources/${categorie}.json`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
@@ -143,6 +150,7 @@ function getImg2(categorie, indice){
            if (indice >= 0 && indice < questions.length) {
                const img = questions[indice].options[1].img;
                console.log(`vraie reponse ${indice}: ${img}`);
+                document.getElementById('imgright').src = img;
                return img;
            } else {
                console.error(`Indice ${indice} hors de portée.`);
@@ -167,8 +175,16 @@ function getImg2(categorie, indice){
 }
 document.addEventListener('DOMContentLoaded', ()=>
     {
-         const tableauDentiers = [1, 2, 3, 4, 5];
+        const tableauIndex = [0, 1, 2, 3, 4];
+        index = getIndex(tableauIndex);
+        
+       
+ // Assuming you want the first question
     }
 )

+ function next(){
+    
+ }
+  

@@ -5,10 +5,10 @@
      "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"
+        "img": "./img/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"   
+          "img": "./img/sac_plastique.jpg"   
        }
      ],
      "reponse": 0,
@@ -18,10 +18,10 @@
      "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"
+          "img": "./img/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"
+          "img": "./img/tel_demonte.jpg"
        }
      ],
      "reponse": 1,
@@ -31,10 +31,10 @@
      "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"
+          "img": "./img/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"
+          "img": "./img/paille_papier.jpg"
        }
      ],
      "reponse": 1,
@@ -44,10 +44,10 @@
      "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"
+          "img": "./img/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"
+          "img": "./img/achat_importee_avion.jpg"
        }
      ],
      "reponse": 0,
@@ -57,10 +57,10 @@
      "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"
+          "img": "./img/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"
+          "img": "./img/reconditionne.jpg"
        }
      ],
      "reponse": 1,
@@ -7,12 +7,12 @@
        "options": [
            {
                "text": "Vrai",
-                "img": "./Habitat/"
+                "img": "./img/vrai.jpg"
            },

            {
                "text": "Faux",
-                "img": "./Habitat/"
+                "img": "./img/faux.jpg"
            }
        ],

@@ -26,12 +26,12 @@
        "options": [
            {
                "text": "Prendre une douche de 20 minutes",
-                "img": "./Habitat/douche.jpg"
+                "img": "./img/douche.jpg"
            },

            {
                "text": "Prendre un bain",
-                "img": "./Habitat/bain.jpg"
+                "img": "./img/bain.jpg"
            }
        ],

@@ -45,12 +45,12 @@
        "options": [
            {
                "text": "Vrai",
-                "img": "./img/Habitat/"
+                "img": "./img/vrai.jpg"
            },

            {
                "text": "Faux",
-                "img": "./img/Habitat/"
+                "img": "./img/faux.jpg"
            }
        ],

@@ -64,12 +64,12 @@
        "options": [
            {
                "text": "En lavant à la main",
-                "img": "./img/Habitat/laver_vaisselle_alamain.jpg"
+                "img": "./img/laver_vaisselle_alamain.jpg"
            },

            {
                "text": "En utilisant un lave-vaisselle",
-                "img": "./img/Habitat/lavevaisselle.jpg"
+                "img": "./img/lavevaisselle.jpg"
            }
        ],

@@ -83,12 +83,12 @@
        "options": [
            {
                "text": "Oui",
-                "img": "./img/Habitat/chauffageelectrique.jpg"
+                "img": "./img/chauffageelectrique.jpg"
            },

            {
                "text": "Non",
-                "img": "./img/Habitat/chauffagebois.jpg"
+                "img": "./img/chauffagebois.jpg"
            }
        ],

@@ -6,11 +6,11 @@
        "options": [
          {
            "text": "Voiture individuelle",
-            "img": "./img/Transport/voiture.jpg"
+            "img": "./img/voiture.jpg"
          },
          {
            "text": "Avion",
-            "img": "./img/Transport/avion.jpg"
+            "img": "./img/avion.jpg"
          }
        ],
        "reponse": 1,
@@ -21,11 +21,11 @@
        "options": [
          {
            "text": "Vrai",
-            "img": "./img/Transport/faibleEmissionGaz.jpg"
+            "img": "./img/faibleEmissionGaz.jpg"
          },
          {
            "text": "Faux",
-            "img": "./img/Transport/forteEmissionGaz.jpg"
+            "img": "./img/forteEmissionGaz.jpg"
          }
        ],
        "reponse": 0,
@@ -37,11 +37,11 @@
        "options": [
          {
            "text":"Par des incitations fiscales",
-            "img":"./img/Transport/incitation_fiscale.jpg"
+            "img":"./img/incitation_fiscale.jpg"
          },
          {
            "text":"Par des limitations de circulation pour les véhicules à essence",
-            "img": "./img/Transport/vehiculeEssence.jpg"
+            "img": "./img/vehiculeEssence.jpg"
          }
        ],
        "reponse":0,
@@ -52,11 +52,11 @@
        "options": [
          {
            "text": "Paris",
-            "img": "paris.jpg"
+            "img": "./img/paris.jpg"
          },
          {
            "text": "Lyon",
-            "img": "lyon.jpg"
+            "img": "./img/lyon.jpg"
          }
        ],
        "reponse": 0,
@@ -67,11 +67,11 @@
        "options": [
          {
            "text": "Vrai",
-            "img": "vrai.jpg"
+            "img": "./img/vrai.jpg"
          },
          {
            "text": "Faux",
-            "img": "faux.jpg"
+            "img": "./img/faux.jpg"
          }
        ],
        "reponse": 0,
@@ -6,11 +6,11 @@
          "options": [
            {
              "text": "Impact significatif",
-              "img": "./img/Phenomenes/impactSignificatif.jpg"
+              "img": "./img/impactSignificatif.jpg"
            },
            {
              "text": "Aucun impact",
-              "img": "./img/Phenomenes/absenceImpact.jpg"
+              "img": "./img/absenceImpact.jpg"
            }
          ],
          "reponse": 0,
@@ -21,11 +21,11 @@
          "options": [
            {
              "text": "Contribuent à la perte de biodiversité",
-              "img": "./img/Phenomenes/inondations.jpg"
+              "img": "./img/inondations.jpg"
            },
            {
              "text": "Aucun impact sur la biodiversité",
-              "img": "./img/Phenomenes/absencePerteBiodiversite.jpg"
+              "img": "./img/absencePerteBiodiversite.jpg"
            }
          ],
          "reponse": 0,
@@ -36,11 +36,11 @@
          "options": [
            {
              "text": "Émissions de gaz à effet de serre",
-              "img": "./img/Phenomenes/incendiesForet.jpg"
+              "img": "./img/incendiesForet.jpg"
            },
            {
              "text": "Érosion des sols",
-              "img": "./img/PhenomenesNaturels/erosionSols.jpg"
+              "img": "./img/erosionSols.jpg"
            }
          ],
          "reponse": 0,
@@ -51,11 +51,11 @@
          "options": [
            {
              "text": "Dommages écologiques",
-              "img": "./img/PhenomenesNaturels/avalanches.jpg"
+              "img": "./img/avalanches.jpg"
            },
            {
              "text": "Mesures de conservation",
-              "img": "./img/PhenomenesNaturels/mesuresConservation.jpg"
+              "img": "./img/mesuresConservation.jpg"
            }
          ],
          "reponse": 0,
@@ -66,11 +66,11 @@
          "options": [
            {
              "text": "Provoquent du stress sur les écosystèmes",
-              "img": "./img/Phenomenes/vaguesChaleur.jpg"
+              "img": "./img/vaguesChaleur.jpg"
            },
            {
              "text": "Aucun effet sur les écosystèmes",
-              "img": "./img/Phenomenes/absenceEffetEcosysteme.jpg"
+              "img": "./img/absenceEffetEcosysteme.jpg"
            }
          ],
          "reponse": 0,
@@ -6,11 +6,11 @@
      "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"
+          "img": "./img/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"
+          "img": "./img/nucleaire_cool.jpg"
        }
      ],
      "reponse": 1,
@@ -21,11 +21,11 @@
      "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"
+          "img": "./img/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"
+          "img": "./img/panneaux_solaires_bof.jpg"
        }
      ],
      "reponse": 0,
@@ -36,11 +36,11 @@
      "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"
+          "img": "./img/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"
+          "img": "./img/eolienne_mal.jpg"
        }
      ],
      "reponse": 1,
@@ -51,11 +51,11 @@
      "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"
+          "img": "./img/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"
+          "img": "./img/photo_basique_transition_energetique2.jpg"
        }
      ],
      "reponse": 1,
@@ -66,11 +66,11 @@
      "options": [
        {
          "text": "Vrai",
-          "img": "./img/energies/image_de_gaz_naturel.jpg"
+          "img": "./img/image_de_gaz_naturel.jpg"
        },
        {
          "text": "Faux",
-          "img": "./img/energies/extraction_petrole.jpg"
+          "img": "./img/extraction_petrole.jpg"
        }
      ],
      "reponse": 1,
@@ -5,6 +5,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon site ecolo | Jeu </title>
+  <script src="../back/fonctions.js"></script>
  <link rel="icon" href="img/logo.svg" type="image/svg">
  <link rel="stylesheet" href="style/init.css">
  <link rel="stylesheet" href="style/navbarVertical.css">
@@ -43,63 +44,50 @@

  <div class="container">
        <div class="choices">
-<<<<<<< HEAD
-      <section id="left">
-        <img class="image" id="imgleft" src="./img/imgleft.png" alt="imgleft">
-      </section>
-||||||| 05f6282
        <section id="left">
            <img class="image" id="imgleft" src="./img/imgleft.png"
                 alt="imgleft">
+            <div id='lefttext' class="text-overlay"></div>
        </section>
-=======
-        <section id="left">
-            <img class="image" id="imgleft" src="./img/imgleft.png"
-                 alt="imgleft">
-            <div class="text-overlay">Votre texte ici</div>
-        </section>
->>>>>>> 0d68aaf3e621087d415377c9f42334f300c50e68

-<<<<<<< HEAD
-      <section id="right">
-        <img class="image" id="imgright" src="./img/imgright.webp" alt="imgright">
-      </section>
-||||||| 05f6282
        <section id="right">
            <img class="image" id="imgright" src="./img/imgright.webp"
                 alt="imgright">
+            <div id='righttext' 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>
->>>>>>> 0d68aaf3e621087d415377c9f42334f300c50e68
    </div>

+
    <div class="question">
-      <h2>Question</h2>
-      <p>Lorem ipsum</p>
-      <button class="hide">Question suivante</button>
+      <h2 id="qtype">Question</h2>
+      <p id="qid">Lorem ipsum</p>
+      <button class="hide" onclick="next()">Question suivante</button>
    </div>

-  </div>
+
    <script>
      const rightSection = document.getElementById('right');
      const leftSection = document.getElementById('left');
      const buttonElement = document.querySelector('button');
+      let questioncount = 0;
+      
+      let categories = ["Transport","Habitat","Commerce","phenomene_naturelle","sources_energetiques"];
+      let catcursor = 0;

      rightSection.addEventListener('click', () => {
        rightSection.classList.remove('hide');
        leftSection.classList.add('hide');
        buttonElement.classList.remove('hide');
+        document.getElementById('qid').innerHTML = getDescription(categories[catcursor],questioncount);
+        document.getElementById('qtype').innerHTML = getVrai(categories[catcursor],questioncount,1);
      });

      leftSection.addEventListener('click', () => {
        leftSection.classList.remove('hide');
        rightSection.classList.add('hide');
        buttonElement.classList.remove('hide');
+        document.getElementById('qid').innerHTML = getDescription(categories[catcursor],questioncount,0);
+        document.getElementById('qtype').innerHTML = getVrai(categories[catcursor],questioncount,0);
      });

      buttonElement.addEventListener('click', () => {
@@ -108,56 +96,18 @@

        rightSection.classList.remove('hide');
        leftSection.classList.remove('hide');
+        document.getElementById('imgleft').src = getImg1(categories[catcursor],questioncount);
+        document.getElementById('imgright').src = getImg2(categories[catcursor],questioncount);
+        document.getElementById('qid').innerHTML = getTitre(categories[catcursor],questioncount);
+        document.getElementById('lefttext').innerHTML = getRep1(categories[catcursor],questioncount);
+        document.getElementById('righttext').innerHTML = getRep2(categories[catcursor],questioncount);
+        document.getElementById('qtype').innerHTML = "Question";
      });

-    let score = 20;
-
-<<<<<<< HEAD
-    function augmenterCompteur() {
-      score += 5;
-||||||| 05f6282
-      let score = 20;
-=======
->>>>>>> 0d68aaf3e621087d415377c9f42334f300c50e68
-
-<<<<<<< HEAD
-      if (score >= 5) {
-        document.getElementById('star1').style.visibility = 'visible';
-      }
-      if (score >= 10) {
-        document.getElementById('star2').style.visibility = 'visible';
-      }
-      if (score >= 15) {
-        document.getElementById('star3').style.visibility = 'visible';
-||||||| 05f6282
-      function augmenterCompteur() {
-        score += 5;
-
-        if (score >= 5) {
-          document.getElementById('star1').style.visibility = 'visible';
-        }
-        if (score >= 10) {
-          document.getElementById('star2').style.visibility = 'visible';
-        }
-        if (score >= 15) {
-          document.getElementById('star3').style.visibility = 'visible';
-        }
-
-        if (score >= 20) {
-          document.getElementById('star4').style.visibility = 'visible';
-        }
-
-        if (score >= 25) {
-          document.getElementById('star5').style.visibility = 'visible';
-        }
-
-        if (score === 25) {
-          window.location.href = './easterEggEtoile.html';
-        }
-=======
      let score = 0;
+
      function augmenterCompteur() {
-        score++;
+        score += 5;

        if (score >= 5) {
          document.getElementById('star1').style.visibility = 'visible';
@@ -180,24 +130,42 @@
        if (score === 25) {
          window.location.href = './easterEggEtoile.html';
        }
->>>>>>> 0d68aaf3e621087d415377c9f42334f300c50e68
      }

-      if (score >= 20) {
-        document.getElementById('star4').style.visibility = 'visible';
+      document.addEventListener('DOMContentLoaded', function () {
+        
+        document.getElementById('imgleft').src = getImg1(categories[catcursor],questioncount);
+        document.getElementById('imgright').src = getImg2(categories[catcursor],questioncount);
+        document.getElementById('qid').innerHTML = getTitre(categories[catcursor],questioncount);
+        document.getElementById('lefttext').innerHTML = getRep1(categories[catcursor],questioncount);
+        document.getElementById('righttext').innerHTML = getRep2(categories[catcursor],questioncount);
+        
+        /*const tableauIndex = [0, 1, 2, 3, 4];
+        index = getIndex(tableauIndex);
+        const indice =  getIndex('Transport');
+        getCategoryQuestion("Transport", indice); // Assuming you want the first question*/
+        
+      });
+
+      function next(){
+        if(questioncount >4){
+          questioncount = 0;
+          catcursor++;
+          
+        }else{
+          questioncount++;
+
        }

-      if (score >= 25) {
-        document.getElementById('star5').style.visibility = 'visible';
+        if(catcursor > 4){
+          catcursor = 0;
+        }
      }

-      if (score === 25) {
-        window.location.href = './easterEggEtoile.html';
-      }
-    }
+
    </script>

-
+  </div>
 </body>