From 847cb433ee575f7d468133cd1ea73ab626b3a37d Mon Sep 17 00:00:00 2001
From: arnaud <arnaud.vincent.perso@hotmail.fr>
Date: Thu, 12 Mar 2026 09:05:10 +0100
Subject: [PATCH] First code

---
 datas.js        |  28 +++++++++++
 hanzi_1.js      |  19 ++++++++
 hanzi_2.js      |  19 ++++++++
 module_hanzi.js | 126 ++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 192 insertions(+)
 create mode 100644 datas.js
 create mode 100644 hanzi_1.js
 create mode 100644 hanzi_2.js
 create mode 100644 module_hanzi.js

diff --git a/datas.js b/datas.js
new file mode 100644
index 0000000..ae13440
--- /dev/null
+++ b/datas.js
@@ -0,0 +1,28 @@
+<script>
+    const nombresChinois = [
+        { valeur: 1, hanzi: "一", pinyin: "yī" },
+        { valeur: 2, hanzi: "二", pinyin: "èr" },
+        { valeur: 3, hanzi: "三", pinyin: "sān" },
+        { valeur: 4, hanzi: "四", pinyin: "sì" },
+        { valeur: 5, hanzi: "五", pinyin: "wǔ" },
+        { valeur: 6, hanzi: "六", pinyin: "liù" },
+        { valeur: 7, hanzi: "七", pinyin: "qī" },
+        { valeur: 8, hanzi: "八", pinyin: "bā" },
+        { valeur: 9, hanzi: "九", pinyin: "jiǔ" },
+        { valeur: 10, hanzi: "十", pinyin: "shí" }
+    ];
+
+    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)" }
+    ];
+</script>
\ No newline at end of file
diff --git a/hanzi_1.js b/hanzi_1.js
new file mode 100644
index 0000000..af6fef8
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/hanzi_2.js b/hanzi_2.js
new file mode 100644
index 0000000..0a02ae6
--- /dev/null
+++ b/hanzi_2.js
@@ -0,0 +1,19 @@
+<div id="challenge1"></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>
+    const module2 = createMyReusableModule();
+
+    module2.init({
+        challengeID: "challenge1",
+        canvasID: "canvas1",
+        feedbackID: "feedback1",
+        button_OK_ID: "valid1",
+        view_settings: {
+            showCharacter: false,
+            showOutline: false,
+        },
+        datas: nombresChinois
+    });
+</script>
\ No newline at end of file
diff --git a/module_hanzi.js b/module_hanzi.js
new file mode 100644
index 0000000..e78180c
--- /dev/null
+++ b/module_hanzi.js
@@ -0,0 +1,126 @@
+<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.5/dist/hanzi-writer.min.js"></script>
+<script>
+    function createMyReusableModule() {
+
+        // Chaque instance possède son propre état
+        let iNb = 0;
+        let ok = false;
+        let hw = null;
+
+        function init(options = {}) {
+            displayChallenge(
+                options.challengeID,
+                options.datas[iNb].valeur,
+                options.datas[iNb].pinyin
+            );
+
+            // Initialisation du writer
+            hw = initHW(
+                options.canvasID,
+                options.datas[iNb].hanzi,
+                options.view_settings.showCharacter,
+                options.view_settings.showOutline
+            );
+
+            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);
+
+                switch (isOK) {
+                    case 0:
+                        // fail
+                        break;
+
+                    case 1:
+                        // success
+                        iNb++;
+
+                        if (iNb > 9) {
+                            document.getElementById(options.feedbackID).textContent = "Fini !";
+                            return -1;
+                        }
+
+                        callback_nok();
+                        displayChallenge(
+                            options.challengeID,
+                            options.datas[iNb].valeur,
+                            options.datas[iNb].pinyin
+                        );
+
+                        nextQuiz(
+                            hw,
+                            options.datas[iNb].hanzi,
+                            callback_ok,
+                            callback_nok
+                        );
+
+                        break;
+
+                    default:
+                        break;
+                }
+            };
+
+            bouton.addEventListener("click", handleClick);
+        }
+
+
+        function displayChallenge(divName, chineseChar, pinyin) {
+            document.getElementById(divName).textContent =
+                "Écrire : " + chineseChar + " / " + pinyin;
+        }
+
+        function initHW(canvasID, currentChar, bShowCharacter, bShowOutline) {
+            return HanziWriter.create(canvasID, currentChar, {
+                width: 150,
+                height: 150,
+                showCharacter: bShowCharacter,
+                showOutline: bShowOutline,
+                showHintAfterMisses: 1,
+                highlightOnComplete: false,
+                padding: 5
+            });
+        }
+
+        function startQuiz1(hw, fbok, fbpok) {
+            fbpok(); // reset
+
+            hw.quiz({
+                onMistake: () => fbpok(),
+                onCorrectStroke: () => { },
+                onComplete: () => fbok()
+            });
+        }
+
+        // Return >0 if ok; 0: fail; -1 if finish
+        function check(ok, feedbackId) {
+            if (ok) {
+                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()
+        return {
+            init
+        };
+    }
+
+</script>
\ No newline at end of file