rename & handle several canvas

datas.js

@@ -9,20 +9,21 @@
     { valeur: 7, hanzi: "七", pinyin: "qī" },
     { valeur: 8, hanzi: "八", pinyin: "bā" },
     { valeur: 9, hanzi: "九", pinyin: "jiǔ" },
-        { valeur: 10, hanzi: "十", pinyin: "shí" }
+    { valeur: 10, hanzi: "十", pinyin: "shí" },
+    { valeur: 11, hanzi: "十一", pinyin: "shíyī" }
 ];
 
 const pronomsChinois = [
-        { hanzi: "我", pinyin: "wǒ", valeur: "je / moi" },
-        { hanzi: "你", pinyin: "nǐ", valeur: "tu / toi" },
-        { hanzi: "您", pinyin: "nín", valeur: "vous (politesse)" },
-        { hanzi: "他", pinyin: "tā", valeur: "il / lui" },
-        { hanzi: "她", pinyin: "tā", valeur: "elle" },
-        { hanzi: "它", pinyin: "tā", valeur: "il/elle (objet, animal)" },
-        { hanzi: "我们", pinyin: "wǒmen", valeur: "nous" },
-        { hanzi: "你们", pinyin: "nǐmen", valeur: "vous (pluriel)" },
-        { hanzi: "他们", pinyin: "tāmen", valeur: "ils (masculin ou mixte)" },
-        { hanzi: "她们", pinyin: "tāmen", valeur: "elles (féminin)" },
-        { hanzi: "它们", pinyin: "tāmen", valeur: "ils/elles (objets, animaux)" }
+    { hanzi: "我", pinyin: "wǒ", francais: "je / moi" },
+    { hanzi: "你", pinyin: "nǐ", francais: "tu / toi" },
+    { hanzi: "您", pinyin: "nín", francais: "vous (politesse)" },
+    { hanzi: "他", pinyin: "tā", francais: "il / lui" },
+    { hanzi: "她", pinyin: "tā", francais: "elle" },
+    { hanzi: "它", pinyin: "tā", francais: "il/elle (objet, animal)" },
+    { hanzi: "我们", pinyin: "wǒmen", francais: "nous" },
+    { hanzi: "你们", pinyin: "nǐmen", francais: "vous (pluriel)" },
+    { hanzi: "他们", pinyin: "tāmen", francais: "ils (masculin ou mixte)" },
+    { hanzi: "她们", pinyin: "tāmen", francais: "elles (féminin)" },
+    { hanzi: "它们", pinyin: "tāmen", francais: "ils/elles (objets, animaux)" }
 ];
 </script>

hanzi_1.html

@@ -0,0 +1,19 @@
+<div id="challenge"></div>
+<div id="canvas" class="hanzi-canvas-container"></div>
+<button id="valid">Vérifier</button>
+<p id="feedback"></p>
+<script>
+const module1 = createMyReusableModule();
+
+module1.init({
+    challengeID: "challenge",
+    canvasID: "canvas",
+    feedbackID: "feedback",
+    button_OK_ID: "valid",
+    view_settings: {
+        showCharacter: true,
+        showOutline: true,
+    },
+    datas: nombresChinois
+});
+</script>

hanzi_1.js

@@ -1,19 +0,0 @@
-<div id="challenge"></div>
-<div id="canvas" style="width:200px; height:200px; margin-bottom:10px; border: 2px; border-style: solid;"></div>
-<button id="valid">Vérifier</button>
-<p id="feedback"></p>
-<script>
-    const module1 = createMyReusableModule();
-
-    module1.init({
-        challengeID: "challenge",
-        canvasID: "canvas",
-        feedbackID: "feedback",
-        button_OK_ID: "valid",
-        view_settings: {
-            showCharacter: true,
-            showOutline: true,
-        },
-        datas: nombresChinois
-    });
-</script>

hanzi_2.html

@@ -1,5 +1,5 @@
 <div id="challenge1"></div>
-<div id="canvas1" style="width:200px; height:200px; margin-bottom:10px; border: 2px; border-style: solid;"></div>
+<div id="canvas1" class="hanzi-canvas-container"></div>
 <button id="valid1">Vérifier</button>
 <p id="feedback1"></p>
 <script>

hanzi_3.html

@@ -1,11 +1,11 @@
 <div id="challenge3"></div>
-<div id="canvas3" style="width:200px; height:200px; margin-bottom:10px; border: 2px; border-style: solid;"></div>
+<div id="canvas3"  class="hanzi-canvas-container"></div>
 <button id="valid3">Vérifier</button>
 <p id="feedback3"></p>
 <script>
-    const module1 = createMyReusableModule();
+    const module3 = createMyReusableModule();
 
-    module1.init({
+    module3.init({
         challengeID: "challenge3",
         canvasID: "canvas3",
         feedbackID: "feedback3",

module_hanzi.js

@@ -2,68 +2,65 @@
 <script>
 function createMyReusableModule() {
 
-        // Chaque instance possède son propre état
-        let iNb = 0;
-        let ok = false;
-        let hw = null;
-
     function init(options = {}) {
+
+        let iNb = 0;
+        let datas = options.datas;
+        let datas_length = datas.length;
+
         displayChallenge(
             options.challengeID,
-                options.datas[iNb].valeur,
-                options.datas[iNb].pinyin
+            datas[iNb].valeur,
+            datas[iNb].pinyin
         );
 
-            // Initialisation du writer
-            hw = initHW(
+        // --- INITIALISATION MULTI‑CANVAS ---
+        let { writers, okArray } = initMultiCanvas(
             options.canvasID,
-                options.datas[iNb].hanzi,
-                options.view_settings.showCharacter,
-                options.view_settings.showOutline
+            datas[iNb].hanzi,
+            options.view_settings
         );
 
-            const callback_ok = () => { ok = true; };
-            const callback_nok = () => { ok = false; };
-
-            // Lancer le premier quiz
-            startQuiz1(hw, callback_ok, callback_nok);
+        startMultiQuiz(writers, okArray);
 
         const bouton = document.querySelector("#" + options.button_OK_ID);
 
         const handleClick = () => {
-                let isOK = check(ok, options.feedbackID, options.challengeID);
+
+            let isOK = checkAll(okArray, options.feedbackID);
 
             switch (isOK) {
                 case 0:
-                        // fail
+                    // incorrect → rien
                     break;
 
                 case 1:
-                        // success
+                    // correct → mot suivant
                     iNb++;
 
-                        if (iNb > 9) {
+                    if (iNb >= datas_length) {
                         document.getElementById(options.feedbackID).textContent = "Fini !";
                         return -1;
                     }
 
-                        callback_nok();
                     displayChallenge(
                         options.challengeID,
-                            options.datas[iNb].valeur,
-                            options.datas[iNb].pinyin
+                        datas[iNb].valeur,
+                        datas[iNb].pinyin
                     );
 
-                        nextQuiz(
-                            hw,
-                            options.datas[iNb].hanzi,
-                            callback_ok,
-                            callback_nok
+                    // Réinitialiser les canvas pour le nouveau mot
+                    let res = initMultiCanvas(
+                        options.canvasID,
+                        datas[iNb].hanzi,
+                        options.view_settings
                     );
 
-                        break;
+                    writers = res.writers;
+                    okArray = res.okArray;
+
+                    startMultiQuiz(writers, okArray);
 
-                    default:
                     break;
             }
         };
@@ -71,56 +68,91 @@
         bouton.addEventListener("click", handleClick);
     }
 
-
+    // ---------------------------------------------------------
+    // AFFICHAGE DU CHALLENGE
+    // ---------------------------------------------------------
     function displayChallenge(divName, chineseChar, pinyin) {
         document.getElementById(divName).textContent =
             "Écrire : " + chineseChar + " / " + pinyin;
     }
 
-        function initHW(canvasID, currentChar, bShowCharacter, bShowOutline) {
-            return HanziWriter.create(canvasID, currentChar, {
+    // ---------------------------------------------------------
+    // CRÉATION MULTI‑CANVAS
+    // ---------------------------------------------------------
+    function initMultiCanvas(containerID, hanzi, view_settings) {
+
+        const chars = [...hanzi]; // "十一" → ["十","一"]
+
+        const container = document.getElementById(containerID);
+        container.innerHTML = ""; // reset
+
+        let writers = [];
+        let okArray = new Array(chars.length).fill(false);
+
+        chars.forEach((char, index) => {
+
+            const c = document.createElement("div");
+            c.id = `${containerID}_${index}`;
+            c.style.display = "inline-block";
+            c.style.marginRight = "10px";
+            container.appendChild(c);
+
+            const hw = HanziWriter.create(c.id, char, {
                 width: 150,
                 height: 150,
-                showCharacter: bShowCharacter,
-                showOutline: bShowOutline,
+                showCharacter: view_settings.showCharacter,
+                showOutline: view_settings.showOutline,
                 showHintAfterMisses: 1,
                 highlightOnComplete: false,
                 padding: 5
             });
+
+            writers.push(hw);
+        });
+
+        return { writers, okArray };
     }
 
-        function startQuiz1(hw, fbok, fbpok) {
-            fbpok(); // reset
+    // ---------------------------------------------------------
+    // LANCER UN QUIZ PAR CANVAS
+    // ---------------------------------------------------------
+    function startMultiQuiz(writers, okArray) {
+
+        writers.forEach((hw, idx) => {
+
+            okArray[idx] = false; // reset
 
             hw.quiz({
-                onMistake: () => fbpok(),
+                onMistake: () => { okArray[idx] = false; },
                 onCorrectStroke: () => {},
-                onComplete: () => fbok()
+                onComplete: () => { okArray[idx] = true; }
+            });
         });
     }
 
-        // Return >0 if ok; 0: fail; -1 if finish
-        function check(ok, feedbackId) {
-            if (ok) {
+    // ---------------------------------------------------------
+    // CHECK GLOBAL
+    // ---------------------------------------------------------
+    function checkAll(okArray, feedbackId) {
+
+        const allOK = okArray.every(v => v === true);
+
+        if (allOK) {
             document.getElementById(feedbackId).textContent = "✔️ Bravo !";
             document.getElementById(feedbackId).style.color = "green";
             return 1;
         } else {
             document.getElementById(feedbackId).textContent = "❌ Incorrect, continue !";
             document.getElementById(feedbackId).style.color = "red";
-            }
             return 0;
         }
-
-        function nextQuiz(hw, hanzi, fbok, fbpok) {
-            hw.setCharacter(hanzi);
-            startQuiz1(hw, fbok, fbpok);
     }
 
-        // On expose uniquement init()
+    // ---------------------------------------------------------
+    // EXPORT
+    // ---------------------------------------------------------
     return {
         init
     };
 }
-
 </script>

styles.html

@@ -0,0 +1,17 @@
+<style>
+    .hanzi-canvas-container {
+        display: flex !important;
+        flex-direction: row !important;
+        gap: 12px;
+        align-items: flex-start;
+        flex-wrap: nowrap !important;
+        margin-bottom: 10px;
+        border: 2px solid #000;
+        padding: 10px;
+    }
+
+    .hanzi-canvas-container > div {
+        display: inline-flex !important;
+        flex: 0 0 auto !important;
+    }
+</style>