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,22 +14,6 @@
     <p>
         Jouons donc au jeu des 7 différences avec GSE France !
     </p>
-    <p class="side-by-side">
-        <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')">
-        <area shape="poly" coords="323,473,318,478,340,503,346,497" onclick="zone('Tuile rose')">
-        <area shape="poly" coords="192,473,23,566,63,566" onclick="zone('Triangle rose')">
-        <area shape="poly" coords="274,352,252,375,259,381,280,358" onclick="zone('Tuile bleue/grise')">
-        <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>
-        Couleurs non contractuelles.
-    </p>
     <p>
         Score: <span id="counter">0</span>/7<br>
         Vous avez déjà trouvé :
@@ -38,7 +22,24 @@
     <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)
+        (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">
+        <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')">
+            <area shape="poly" coords="323,473,318,478,340,503,346,497" onclick="zone('Tuile rose')">
+            <area shape="poly" coords="192,473,23,566,63,566" onclick="zone('Triangle rose')">
+            <area shape="poly" coords="274,352,252,375,259,381,280,358" onclick="zone('Tuile bleue/grise')">
+            <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>
 </main>
 <footer>

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>