amélioration graphique + corrections bug

frontend/Front.html

@@ -10,25 +10,29 @@
             display: block;
             margin-left: auto;
             margin-right: auto;
-            width: 800px;
+            width: 750px;
+            height:350px;
             border: 8px solid white;
             border-radius: 15px;
+            flex-shrink: 1;
 
         }
         .rectangle-arrondi {
-            width: 700px;
-            height: 85px;
+            width: 500px;
+            height: 65px;
             background-color: white;
             border-radius: 50px;
             color: black;
             text-align: center;
-            line-height: 100px;
+            line-height: 65px;
             font-family: sans-serif;
-            font-size: 18px;
+            font-size: 35px;
             margin-left: auto;
             margin-right: auto;
             margin-bottom: 30px;
             box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);
+            font-family: 'Chewy', cursive;
+
         }
     </style>
     <link href="https://fonts.googleapis.com/css2?family=Chewy&display=swap" rel="stylesheet">
@@ -64,7 +68,7 @@
 
     document.querySelectorAll(".rectangle-arrondi").forEach(div => {
         div.addEventListener("click", async function () {
-            const index = this.getAttribute("data-index");
+            const index = this.getAttribute("data-index")-1;
             const jsonData2 = {
                 "uuid": uuid,
                 "answer":index
@@ -87,7 +91,7 @@
                 const resp = JSON.stringify(responsejson2)
                 const vrairesp= JSON.parse(resp);
                 if (vrairesp.answer==false){
-                    document.getElementById("resultat").innerText = "Faux c'était " + vrairesp.correctAnswer + "score : "+ vrairesp.score;
+                    document.getElementById("resultat").innerText = "Faux c'était " + vrairesp.correctAnswer + " score : "+ vrairesp.score;
                     next();
                 }
                 if (vrairesp.answer==true){
@@ -119,6 +123,7 @@
             if (!response3.ok) {
                 throw new Error(`Erreur HTTP : ${response3.status}`);
             }
+
             const responsejson3 = await response3.json();
             const newresp = JSON.stringify(responsejson3)
             const newquestions= JSON.parse(newresp);

frontend/css.css

@@ -19,3 +19,18 @@ h1 {
     font-size: 80px;
 
 }
+
+h3 {
+    width: 550px;
+    margin-left: 700px;
+    font-family: 'Chewy', cursive;
+    font-size: 40px;
+
+}
+h4 {
+    width: 550px;
+    margin-left: 700px;
+    font-family: 'Chewy', cursive;
+    font-size: 30px;
+
+}
\ No newline at end of file

frontend/home.html

@@ -17,7 +17,7 @@
       cursor: pointer;
       width : 175px;
       height: 70px;
-      font-size: 15px;
+      font-size: 15;
       margin-left: 260px;
 
     }
@@ -57,10 +57,10 @@
 </form></h3>
 <div class="image-slider">
   <div class="images">
-    <img src="paris.jpg" alt="Image 1">
-    <img src="marseille.jpg" alt="Image 2">
-    <img src="tokyo.jpg" alt="Image 3">
-    <img src="perpignan.jpg" alt="Image 4">
+    <img src="1.jpg" >
+    <img src="3.jpg">
+    <img src="2.jpg">
+    <img src="1.jpg">
   </div>
 </div>
 

src/main/resources/questions.json

@@ -7,7 +7,7 @@
       "Bordeaux",
       "Montpellier"
     ],
-    "correctAnswer": 4
+    "correctAnswer": 3
   },
   {
     "imageIndex": 2,
@@ -17,7 +17,7 @@
       "Shangai",
       "Nagasaki"
     ],
-    "correctAnswer": 2
+    "correctAnswer": 1
   },
   {
     "imageIndex": 3,
@@ -27,6 +27,6 @@
       "Montreal",
       "Nice"
     ],
-    "correctAnswer": 3
+    "correctAnswer": 2
   }
 ]
\ No newline at end of file