Move text above images

jeux/assets/camel.js

@@ -1,13 +1,22 @@
 let counter = new Set();
 const MAX_DIFFS = 7;
+const foundDisplay = [];
+
+(function () {
+    const found = document.getElementById("found");
+    for (let i = 0; i < MAX_DIFFS; i++) {
+        const li = document.createElement("li");
+        foundDisplay.push(li);
+        found.appendChild(li);
+    }
+})();
 
 function zone(name) {
     if (!counter.has(name)) {
-        counter.add(name);
-        const li = document.createElement("li");
         const content = document.createTextNode(name);
+        const li = foundDisplay[counter.size];
         li.appendChild(content);
-        document.getElementById("found").appendChild(li);
+        counter.add(name);
     }
     displayCounter();
 }

jeux/assets/style.css

@@ -51,3 +51,9 @@ header h1 {
 a {
     color: rgb(40,53,131);
 }
+
+.img-holder {
+    position: relative;
+    top: 0;
+    left: 0;
+}

jeux/camel.html

@@ -14,10 +14,20 @@
     <p>
         Jouons donc au jeu des 7 différences avec GSE France !
     </p>
-    <p class="side-by-side">
+    <p>
+        Score: <span id="counter">0</span>/7<br>
+        Vous avez déjà trouvé :
+    </p>
+    <ol id="found"></ol>
+    <p class="failure hidden"></p>
+    <p class="success hidden">
+        Félicitations ! Vous avez trouvé toutes les différences ! 🎉
+        (ou bien vous avez frénétiquement cliqué de partout).<br>
+        Vous pouvez revenir au menu précédent en utilisant le bouton retour en haut ☝️
+    </p>
+    <p class="side-by-side img-holder">
         <img src="images/camel-2.jpg" width="548" height="619" alt="Moquette" usemap="#map">
         <img src="images/camel.jpg" width="548" height="619" alt="Moquette" usemap="#map">
-    </p>
         <map id="map" name="map">
             <area shape="rect" coords="180,65,226,97" onclick="zone('Chocolat')">
             <area shape="circle" coords="101,439,25" onclick="zone('Logo Citroën')">
@@ -27,19 +37,10 @@
             <area shape="poly" coords="378,226,378,264,441,264,441,316,467,316,468,226" onclick="zone('Zone grise/beige')">
             <area shape="rect" coords="353,324,443,340" onclick="zone('Ligne bleue')">
         </map>
+    </p>
     <p>
         Couleurs non contractuelles.
     </p>
-    <p>
-        Score: <span id="counter">0</span>/7<br>
-        Vous avez déjà trouvé :
-    </p>
-    <ol id="found"></ol>
-    <p class="failure hidden"></p>
-    <p class="success hidden">
-        Félicitations ! Vous avez trouvé toutes les différences ! 🎉
-        (ou bien vous avez frénétiquement cliqué de partout)
-    </p>
 </main>
 <footer>
     <p>

jeux/nature.html

@@ -17,13 +17,14 @@
         tout est recouvert de feuilles mortes... Vite ! Prenez votre souris et balayez tout
         ça !
     </p>
-    <p class="img-holder">
-        <img src="images/nature.jpg" id="moquette" width="620" height="652" alt="Moquette">
-    </p>
     <p class="failure hidden"></p>
     <p class="success hidden">
         Félicitations ! Le plateau de la certif est maintenant comme neuf ! 🎉
-        Vous pouvez être fier de vous !
+        Vous pouvez être fier de vous !<br>
+        Vous pouvez revenir au menu précédent en utilisant le bouton retour en haut ☝️
+    </p>
+    <p class="img-holder">
+        <img src="images/nature.jpg" id="moquette" width="620" height="652" alt="Moquette">
     </p>
 </main>
 <footer>

jeux/signal.html

@@ -22,19 +22,20 @@
         <li></li>
         <li></li>
     </ol>
-    <p>
-        <img src="images/signal.jpg" width="630" height="646" alt="Moquette" usemap="#map">
-        <map id="map" name="map">
-            <area shape="rect" coords="527,48,585,229" onclick="win()">
-            <area shape="rect" coords="0,0,1260,1292" onclick="lose()">
-        </map>
-    </p>
     <p class="failure hidden">
         Raté ! Les instructions de Peter sont pourtant claires 😉
     </p>
     <p class="success hidden">
         Félicitations ! Vous avez correctement suivi les instructions ! 🎉
-        (ou bien vous avez frénétiquement cliqué de partout)
+        (ou bien vous avez frénétiquement cliqué de partout)<br>
+        Vous pouvez revenir au menu précédent en utilisant le bouton retour en haut ☝️
+    </p>
+    <p class="img-holder">
+        <img src="images/signal.jpg" width="630" height="646" alt="Moquette" usemap="#map">
+        <map id="map" name="map">
+            <area shape="rect" coords="527,48,585,229" onclick="win()">
+            <area shape="rect" coords="0,0,1260,1292" onclick="lose()">
+        </map>
     </p>
 </main>
 <footer>