datas.js

@@ -1,5 +1,5 @@
 <script>
-const nombresChinois = [
+    const nombresChinois = [
         { valeur: 1, hanzi: "一", pinyin: "yī" },
         { valeur: 2, hanzi: "二", pinyin: "èr" },
         { valeur: 3, hanzi: "三", pinyin: "sān" },
@@ -9,21 +9,20 @@ const nombresChinois = [
         { 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 = [
+    const pronomsChinois = [
-    { hanzi: "我", pinyin: "wǒ", francais: "je / moi" },
+        { hanzi: "我", pinyin: "wǒ", valeur: "je / moi" },
-    { hanzi: "你", pinyin: "nǐ", francais: "tu / toi" },
+        { hanzi: "你", pinyin: "nǐ", valeur: "tu / toi" },
-    { hanzi: "您", pinyin: "nín", francais: "vous (politesse)" },
+        { hanzi: "您", pinyin: "nín", valeur: "vous (politesse)" },
-    { hanzi: "他", pinyin: "tā", francais: "il / lui" },
+        { hanzi: "他", pinyin: "tā", valeur: "il / lui" },
-    { hanzi: "她", pinyin: "tā", francais: "elle" },
+        { hanzi: "她", pinyin: "tā", valeur: "elle" },
-    { hanzi: "它", pinyin: "tā", francais: "il/elle (objet, animal)" },
+        { hanzi: "它", pinyin: "tā", valeur: "il/elle (objet, animal)" },
-    { hanzi: "我们", pinyin: "wǒmen", francais: "nous" },
+        { hanzi: "我们", pinyin: "wǒmen", valeur: "nous" },
-    { hanzi: "你们", pinyin: "nǐmen", francais: "vous (pluriel)" },
+        { hanzi: "你们", pinyin: "nǐmen", valeur: "vous (pluriel)" },
-    { hanzi: "他们", pinyin: "tāmen", francais: "ils (masculin ou mixte)" },
+        { hanzi: "他们", pinyin: "tāmen", valeur: "ils (masculin ou mixte)" },
-    { hanzi: "她们", pinyin: "tāmen", francais: "elles (féminin)" },
+        { hanzi: "她们", pinyin: "tāmen", valeur: "elles (féminin)" },
-    { hanzi: "它们", pinyin: "tāmen", francais: "ils/elles (objets, animaux)" }
+        { hanzi: "它们", pinyin: "tāmen", valeur: "ils/elles (objets, animaux)" }
-];
+    ];
 </script>

hanzi_1.html

@@ -1,19 +0,0 @@
-<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

@@ -0,0 +1,19 @@
+<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.js

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

hanzi_3.js

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

module_hanzi.js

@@ -1,66 +1,69 @@
 <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.5/dist/hanzi-writer.min.js"></script>
 <script>
-function createMyReusableModule() {
+    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,
-            datas[iNb].valeur,
+                options.datas[iNb].valeur,
-            datas[iNb].pinyin
+                options.datas[iNb].pinyin
             );
 
-        // --- INITIALISATION MULTI‑CANVAS ---
+            // Initialisation du writer
-        let { writers, okArray } = initMultiCanvas(
+            hw = initHW(
                 options.canvasID,
-            datas[iNb].hanzi,
+                options.datas[iNb].hanzi,
-            options.view_settings
+                options.view_settings.showCharacter,
+                options.view_settings.showOutline
             );
 
-        startMultiQuiz(writers, okArray);
+            const callback_ok = () => { ok = true; };
+            const callback_nok = () => { ok = false; };
+
+            // Lancer le premier quiz
+            startQuiz1(hw, callback_ok, callback_nok);
 
             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:
-                    // incorrect → rien
+                        // fail
                         break;
 
                     case 1:
-                    // correct → mot suivant
+                        // success
                         iNb++;
 
-                    if (iNb >= datas_length) {
+                        if (iNb > 9) {
                             document.getElementById(options.feedbackID).textContent = "Fini !";
                             return -1;
                         }
 
+                        callback_nok();
                         displayChallenge(
                             options.challengeID,
-                        datas[iNb].valeur,
+                            options.datas[iNb].valeur,
-                        datas[iNb].pinyin
+                            options.datas[iNb].pinyin
                         );
 
-                    // Réinitialiser les canvas pour le nouveau mot
+                        nextQuiz(
-                    let res = initMultiCanvas(
+                            hw,
-                        options.canvasID,
+                            options.datas[iNb].hanzi,
-                        datas[iNb].hanzi,
+                            callback_ok,
-                        options.view_settings
+                            callback_nok
                         );
 
-                    writers = res.writers;
+                        break;
-                    okArray = res.okArray;
-
-                    startMultiQuiz(writers, okArray);
 
+                    default:
                         break;
                 }
             };
@@ -68,91 +71,56 @@ function createMyReusableModule() {
             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) {
-    // CRÉATION MULTI‑CANVAS
+            return HanziWriter.create(canvasID, currentChar, {
-    // ---------------------------------------------------------
-    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: view_settings.showCharacter,
+                showCharacter: bShowCharacter,
-                showOutline: view_settings.showOutline,
+                showOutline: bShowOutline,
                 showHintAfterMisses: 1,
                 highlightOnComplete: false,
                 padding: 5
             });
-
-            writers.push(hw);
-        });
-
-        return { writers, okArray };
         }
 
-    // ---------------------------------------------------------
+        function startQuiz1(hw, fbok, fbpok) {
-    // LANCER UN QUIZ PAR CANVAS
+            fbpok(); // reset
-    // ---------------------------------------------------------
-    function startMultiQuiz(writers, okArray) {
-
-        writers.forEach((hw, idx) => {
-
-            okArray[idx] = false; // reset
 
             hw.quiz({
-                onMistake: () => { okArray[idx] = false; },
+                onMistake: () => fbpok(),
-                onCorrectStroke: () => {},
+                onCorrectStroke: () => { },
-                onComplete: () => { okArray[idx] = true; }
+                onComplete: () => fbok()
-            });
             });
         }
 
-    // ---------------------------------------------------------
+        // Return >0 if ok; 0: fail; -1 if finish
-    // CHECK GLOBAL
+        function check(ok, feedbackId) {
-    // ---------------------------------------------------------
+            if (ok) {
-    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

@@ -1,17 +0,0 @@
-<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>