diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/back/fonctions.js b/back/fonctions.js
index b7fece7..2319e09 100644
--- a/back/fonctions.js
+++ b/back/fonctions.js
@@ -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(){
+    
+ }
   
 
diff --git a/back/resources/Commerce.json b/back/resources/Commerce.json
index 15d626c..e1dc897 100644
--- a/back/resources/Commerce.json
+++ b/back/resources/Commerce.json
@@ -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,
diff --git a/back/resources/Habitat.json b/back/resources/Habitat.json
index 40ca38d..611da88 100644
--- a/back/resources/Habitat.json
+++ b/back/resources/Habitat.json
@@ -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"
             }
         ],
 
diff --git a/back/resources/Transport.json b/back/resources/Transport.json
index 0c3e6c7..02faff0 100644
--- a/back/resources/Transport.json
+++ b/back/resources/Transport.json
@@ -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,
diff --git a/back/resources/phenomene_naturelle.json b/back/resources/phenomene_naturelle.json
index 01080f7..512021f 100644
--- a/back/resources/phenomene_naturelle.json
+++ b/back/resources/phenomene_naturelle.json
@@ -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,
diff --git a/back/resources/sources_energetiques.json b/back/resources/sources_energetiques.json
index 3f97888..a1b5d2e 100644
--- a/back/resources/sources_energetiques.json
+++ b/back/resources/sources_energetiques.json
@@ -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,
diff --git a/front/img/absenceEffetEcosysteme.jpg b/front/img/absenceEffetEcosysteme.jpg
new file mode 100644
index 0000000..0a512b4
Binary files /dev/null and b/front/img/absenceEffetEcosysteme.jpg differ
diff --git a/front/img/absenceImpact.jpg b/front/img/absenceImpact.jpg
new file mode 100644
index 0000000..3523c74
Binary files /dev/null and b/front/img/absenceImpact.jpg differ
diff --git a/front/img/absencePerteBiodiversite.jpg b/front/img/absencePerteBiodiversite.jpg
new file mode 100644
index 0000000..c3093c7
Binary files /dev/null and b/front/img/absencePerteBiodiversite.jpg differ
diff --git a/front/img/achat_importee_avion.jpg b/front/img/achat_importee_avion.jpg
new file mode 100644
index 0000000..6ad046f
Binary files /dev/null and b/front/img/achat_importee_avion.jpg differ
diff --git a/front/img/achat_local.jpg b/front/img/achat_local.jpg
new file mode 100644
index 0000000..2720be8
Binary files /dev/null and b/front/img/achat_local.jpg differ
diff --git a/front/img/avanlanches.jpg b/front/img/avanlanches.jpg
new file mode 100644
index 0000000..9c92ad6
Binary files /dev/null and b/front/img/avanlanches.jpg differ
diff --git a/front/img/avion.jpg b/front/img/avion.jpg
new file mode 100644
index 0000000..02cc3ba
Binary files /dev/null and b/front/img/avion.jpg differ
diff --git a/front/img/bain.jpg b/front/img/bain.jpg
new file mode 100644
index 0000000..620592d
Binary files /dev/null and b/front/img/bain.jpg differ
diff --git a/front/img/chauffage_bois.jpg b/front/img/chauffage_bois.jpg
new file mode 100644
index 0000000..bbf963e
Binary files /dev/null and b/front/img/chauffage_bois.jpg differ
diff --git a/front/img/chauffage_electrique.jpg b/front/img/chauffage_electrique.jpg
new file mode 100644
index 0000000..ef2d94e
Binary files /dev/null and b/front/img/chauffage_electrique.jpg differ
diff --git a/front/img/chernobyl_et_tout.jpg b/front/img/chernobyl_et_tout.jpg
new file mode 100644
index 0000000..9b0af75
Binary files /dev/null and b/front/img/chernobyl_et_tout.jpg differ
diff --git a/front/img/douche.jpg b/front/img/douche.jpg
new file mode 100644
index 0000000..d6b05c2
Binary files /dev/null and b/front/img/douche.jpg differ
diff --git a/front/img/eolienne_bien.jpg b/front/img/eolienne_bien.jpg
new file mode 100644
index 0000000..5e198f1
Binary files /dev/null and b/front/img/eolienne_bien.jpg differ
diff --git a/front/img/eolienne_mal.jpg b/front/img/eolienne_mal.jpg
new file mode 100644
index 0000000..ed29a51
Binary files /dev/null and b/front/img/eolienne_mal.jpg differ
diff --git a/front/img/erosionSol.jpg b/front/img/erosionSol.jpg
new file mode 100644
index 0000000..a83256c
Binary files /dev/null and b/front/img/erosionSol.jpg differ
diff --git a/front/img/extraction_petrole.jpg b/front/img/extraction_petrole.jpg
new file mode 100644
index 0000000..9531d20
Binary files /dev/null and b/front/img/extraction_petrole.jpg differ
diff --git a/front/img/faibleEmissionGaz.jpg b/front/img/faibleEmissionGaz.jpg
new file mode 100644
index 0000000..c94e632
Binary files /dev/null and b/front/img/faibleEmissionGaz.jpg differ
diff --git a/front/img/faux.jpg b/front/img/faux.jpg
new file mode 100644
index 0000000..5f09dc5
Binary files /dev/null and b/front/img/faux.jpg differ
diff --git a/front/img/forteEmissionGaz.jpg b/front/img/forteEmissionGaz.jpg
new file mode 100644
index 0000000..0b4d19c
Binary files /dev/null and b/front/img/forteEmissionGaz.jpg differ
diff --git a/front/img/image_de_gaz_naturel.jpg b/front/img/image_de_gaz_naturel.jpg
new file mode 100644
index 0000000..acbaa25
Binary files /dev/null and b/front/img/image_de_gaz_naturel.jpg differ
diff --git a/front/img/impactSignificatif.jpg b/front/img/impactSignificatif.jpg
new file mode 100644
index 0000000..801e518
Binary files /dev/null and b/front/img/impactSignificatif.jpg differ
diff --git a/front/img/incendiesForet.jpg b/front/img/incendiesForet.jpg
new file mode 100644
index 0000000..998b425
Binary files /dev/null and b/front/img/incendiesForet.jpg differ
diff --git a/front/img/incitation_fiscale.jpg b/front/img/incitation_fiscale.jpg
new file mode 100644
index 0000000..aaae5c5
Binary files /dev/null and b/front/img/incitation_fiscale.jpg differ
diff --git a/front/img/inondation.jpg b/front/img/inondation.jpg
new file mode 100644
index 0000000..2b0aa03
Binary files /dev/null and b/front/img/inondation.jpg differ
diff --git a/front/img/iphone_moderne.jpg b/front/img/iphone_moderne.jpg
new file mode 100644
index 0000000..058a207
Binary files /dev/null and b/front/img/iphone_moderne.jpg differ
diff --git a/front/img/laver_vaisselle_alamain.jpg b/front/img/laver_vaisselle_alamain.jpg
new file mode 100644
index 0000000..36163ff
Binary files /dev/null and b/front/img/laver_vaisselle_alamain.jpg differ
diff --git a/front/img/lavevaisselle.jpg b/front/img/lavevaisselle.jpg
new file mode 100644
index 0000000..580cf4d
Binary files /dev/null and b/front/img/lavevaisselle.jpg differ
diff --git a/front/img/lyon.jpg b/front/img/lyon.jpg
new file mode 100644
index 0000000..3e0f67a
Binary files /dev/null and b/front/img/lyon.jpg differ
diff --git a/front/img/mesuresConservation.jpg b/front/img/mesuresConservation.jpg
new file mode 100644
index 0000000..7c9d715
Binary files /dev/null and b/front/img/mesuresConservation.jpg differ
diff --git a/front/img/nucleaire_cool.jpg b/front/img/nucleaire_cool.jpg
new file mode 100644
index 0000000..f3eed67
Binary files /dev/null and b/front/img/nucleaire_cool.jpg differ
diff --git a/front/img/paille_papier.jpg b/front/img/paille_papier.jpg
new file mode 100644
index 0000000..1d38f80
Binary files /dev/null and b/front/img/paille_papier.jpg differ
diff --git a/front/img/paille_plastique.jpg b/front/img/paille_plastique.jpg
new file mode 100644
index 0000000..ba15546
Binary files /dev/null and b/front/img/paille_plastique.jpg differ
diff --git a/front/img/panneau_solaire_bof.jpg b/front/img/panneau_solaire_bof.jpg
new file mode 100644
index 0000000..2635160
Binary files /dev/null and b/front/img/panneau_solaire_bof.jpg differ
diff --git a/front/img/panneau_solaire_cool.jpg b/front/img/panneau_solaire_cool.jpg
new file mode 100644
index 0000000..d60515d
Binary files /dev/null and b/front/img/panneau_solaire_cool.jpg differ
diff --git a/front/img/paris.jpg b/front/img/paris.jpg
new file mode 100644
index 0000000..6a1ffc5
Binary files /dev/null and b/front/img/paris.jpg differ
diff --git a/front/img/photo_basique_transition_energetique.jpg b/front/img/photo_basique_transition_energetique.jpg
new file mode 100644
index 0000000..1c8352d
Binary files /dev/null and b/front/img/photo_basique_transition_energetique.jpg differ
diff --git a/front/img/photo_basique_transition_energetique2.jpg b/front/img/photo_basique_transition_energetique2.jpg
new file mode 100644
index 0000000..5b980a6
Binary files /dev/null and b/front/img/photo_basique_transition_energetique2.jpg differ
diff --git a/front/img/produit_neuf.jpg b/front/img/produit_neuf.jpg
new file mode 100644
index 0000000..5de9c34
Binary files /dev/null and b/front/img/produit_neuf.jpg differ
diff --git a/front/img/reconditionne.jpg b/front/img/reconditionne.jpg
new file mode 100644
index 0000000..7f9f0ec
Binary files /dev/null and b/front/img/reconditionne.jpg differ
diff --git a/front/img/sac_lin.jpg b/front/img/sac_lin.jpg
new file mode 100644
index 0000000..4b142fa
Binary files /dev/null and b/front/img/sac_lin.jpg differ
diff --git a/front/img/sac_plastique.jpg b/front/img/sac_plastique.jpg
new file mode 100644
index 0000000..d28a9a3
Binary files /dev/null and b/front/img/sac_plastique.jpg differ
diff --git a/front/img/tel_demonte.jpg b/front/img/tel_demonte.jpg
new file mode 100644
index 0000000..22a8b66
Binary files /dev/null and b/front/img/tel_demonte.jpg differ
diff --git a/front/img/vaguesChaleur..jpg b/front/img/vaguesChaleur..jpg
new file mode 100644
index 0000000..2b22afb
Binary files /dev/null and b/front/img/vaguesChaleur..jpg differ
diff --git a/front/img/vehiculeEssence.jpg b/front/img/vehiculeEssence.jpg
new file mode 100644
index 0000000..698af26
Binary files /dev/null and b/front/img/vehiculeEssence.jpg differ
diff --git a/front/img/voiture.jpg b/front/img/voiture.jpg
new file mode 100644
index 0000000..1bcd175
Binary files /dev/null and b/front/img/voiture.jpg differ
diff --git a/front/img/vrai.jpg b/front/img/vrai.jpg
new file mode 100644
index 0000000..09e7902
Binary files /dev/null and b/front/img/vrai.jpg differ
diff --git a/front/jouer.html b/front/jouer.html
index 027c990..c9e56d8 100644
--- a/front/jouer.html
+++ b/front/jouer.html
@@ -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">
@@ -42,94 +43,69 @@
   </div>
 
   <div class="container">
-    <div class="choices">
-<<<<<<< HEAD
-      <section id="left">
-        <img class="image" id="imgleft" src="./img/imgleft.png" alt="imgleft">
-      </section>
-||||||| 05f6282
+        <div class="choices">
         <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');
 
-    rightSection.addEventListener('click', () => {
-      rightSection.classList.remove('hide');
-      leftSection.classList.add('hide');
-      buttonElement.classList.remove('hide');
-    });
+    <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;
 
-    leftSection.addEventListener('click', () => {
-      leftSection.classList.remove('hide');
-      rightSection.classList.add('hide');
-      buttonElement.classList.remove('hide');
-    });
+      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);
+      });
 
-    buttonElement.addEventListener('click', () => {
-      augmenterCompteur();
-      buttonElement.classList.add('hide');
+      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);
+      });
 
-      rightSection.classList.remove('hide');
-      leftSection.classList.remove('hide');
-    });
+      buttonElement.addEventListener('click', () => {
+        augmenterCompteur();
+        buttonElement.classList.add('hide');
 
-    let score = 20;
+        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";
+      });
 
-<<<<<<< HEAD
-    function augmenterCompteur() {
-      score += 5;
-||||||| 05f6282
-      let score = 20;
-=======
->>>>>>> 0d68aaf3e621087d415377c9f42334f300c50e68
+      let score = 0;
 
-<<<<<<< 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;
 
@@ -154,51 +130,43 @@
         if (score === 25) {
           window.location.href = './easterEggEtoile.html';
         }
-=======
-      let score = 0;
-      function augmenterCompteur() {
-        score++;
-
-        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';
-        }
->>>>>>> 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(catcursor > 4){
+          catcursor = 0;
+        }
       }
 
-      if (score >= 25) {
-        document.getElementById('star5').style.visibility = 'visible';
-      }
-
-      if (score === 25) {
-        window.location.href = './easterEggEtoile.html';
-      }
-    }
-  </script>
 
+    </script>
 
+  </div>
 </body>
 
 
-</html>
\ No newline at end of file
+</html>