refactoring Claude
This commit is contained in:
parent
97359d172b
commit
13d65f8995
6 changed files with 150 additions and 229 deletions
23
datas.js
23
datas.js
|
|
@ -14,16 +14,17 @@ const nombresChinois = [
|
|||
];
|
||||
|
||||
const pronomsChinois = [
|
||||
{ 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)" }
|
||||
{ hanzi: "它们", pinyin: "tāmen", valeur: "ils/elles (objets, animaux)" },
|
||||
{ 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>
|
||||
23
hanzi_1.html
23
hanzi_1.html
|
|
@ -1,19 +1,10 @@
|
|||
<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();
|
||||
<div id="hanzi_nbr_help_widget"></div>
|
||||
|
||||
module1.init({
|
||||
challengeID: "challenge",
|
||||
canvasID: "canvas",
|
||||
feedbackID: "feedback",
|
||||
button_OK_ID: "valid",
|
||||
view_settings: {
|
||||
showCharacter: true,
|
||||
showOutline: true,
|
||||
},
|
||||
<script>
|
||||
const id1s = hanziApp.newWidget("hanzi_nbr_help_widget");
|
||||
hanziApp.init({
|
||||
...id1s,
|
||||
view_settings: { showCharacter: true, showOutline: true },
|
||||
datas: nombresChinois
|
||||
});
|
||||
});
|
||||
</script>
|
||||
25
hanzi_2.html
25
hanzi_2.html
|
|
@ -1,19 +1,10 @@
|
|||
<div id="challenge1"></div>
|
||||
<div id="canvas1" class="hanzi-canvas-container"></div>
|
||||
<button id="valid1">Vérifier</button>
|
||||
<p id="feedback1"></p>
|
||||
<script>
|
||||
const module2 = createMyReusableModule();
|
||||
<div id="hanzi_nbr_wohelp_widget"></div>
|
||||
|
||||
module2.init({
|
||||
challengeID: "challenge1",
|
||||
canvasID: "canvas1",
|
||||
feedbackID: "feedback1",
|
||||
button_OK_ID: "valid1",
|
||||
view_settings: {
|
||||
showCharacter: false,
|
||||
showOutline: false,
|
||||
},
|
||||
datas: nombresChinois
|
||||
});
|
||||
<script>
|
||||
const id2s = hanziApp.newWidget("hanzi_nbr_wohelp_widget");
|
||||
hanziApp.init({
|
||||
...id2s,
|
||||
view_settings: { showCharacter: false, showOutline: false },
|
||||
datas: nombresChinois
|
||||
});
|
||||
</script>
|
||||
25
hanzi_3.html
25
hanzi_3.html
|
|
@ -1,19 +1,10 @@
|
|||
<div id="challenge3"></div>
|
||||
<div id="canvas3" class="hanzi-canvas-container"></div>
|
||||
<button id="valid3">Vérifier</button>
|
||||
<p id="feedback3"></p>
|
||||
<script>
|
||||
const module3 = createMyReusableModule();
|
||||
<div id="hanzi_pronom_help_widget"></div>
|
||||
|
||||
module3.init({
|
||||
challengeID: "challenge3",
|
||||
canvasID: "canvas3",
|
||||
feedbackID: "feedback3",
|
||||
button_OK_ID: "valid3",
|
||||
view_settings: {
|
||||
showCharacter: true,
|
||||
showOutline: true,
|
||||
},
|
||||
datas: pronomsChinois
|
||||
});
|
||||
<script>
|
||||
const id3s = hanziApp.newWidget("hanzi_pronom_help_widget");
|
||||
hanziApp.init({
|
||||
...id3s,
|
||||
view_settings: { showCharacter: true, showOutline: true },
|
||||
datas: pronomsChinois
|
||||
});
|
||||
</script>
|
||||
266
module_hanzi.js
266
module_hanzi.js
|
|
@ -1,158 +1,122 @@
|
|||
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.5/dist/hanzi-writer.min.js"></script>
|
||||
<script>
|
||||
function createMyReusableModule() {
|
||||
const hanziApp = (() => {
|
||||
|
||||
function init(options = {}) {
|
||||
// ---------------------------------------------------------
|
||||
// CRÉE LE HTML D'UN WIDGET et retourne les IDs
|
||||
// ---------------------------------------------------------
|
||||
function newWidget(rootID) {
|
||||
const root = document.getElementById(rootID);
|
||||
const uid = rootID;
|
||||
|
||||
let iNb = 0;
|
||||
let datas = options.datas;
|
||||
let datas_length = datas.length;
|
||||
root.innerHTML = `
|
||||
<div id="challenge_${uid}"></div>
|
||||
<div id="canvas_${uid}"></div>
|
||||
<button id="valid_${uid}">Vérifier</button>
|
||||
<p id="feedback_${uid}"></p>
|
||||
`;
|
||||
|
||||
displayChallenge(
|
||||
options.challengeID,
|
||||
datas[iNb].valeur,
|
||||
datas[iNb].pinyin
|
||||
);
|
||||
|
||||
// --- INITIALISATION MULTI‑CANVAS ---
|
||||
let { writers, okArray } = initMultiCanvas(
|
||||
options.canvasID,
|
||||
datas[iNb].hanzi,
|
||||
options.view_settings
|
||||
);
|
||||
|
||||
startMultiQuiz(writers, okArray);
|
||||
|
||||
const bouton = document.querySelector("#" + options.button_OK_ID);
|
||||
|
||||
const handleClick = () => {
|
||||
|
||||
let isOK = checkAll(okArray, options.feedbackID);
|
||||
|
||||
switch (isOK) {
|
||||
case 0:
|
||||
// incorrect → rien
|
||||
break;
|
||||
|
||||
case 1:
|
||||
// correct → mot suivant
|
||||
iNb++;
|
||||
|
||||
if (iNb >= datas_length) {
|
||||
document.getElementById(options.feedbackID).textContent = "Fini !";
|
||||
return -1;
|
||||
}
|
||||
|
||||
displayChallenge(
|
||||
options.challengeID,
|
||||
datas[iNb].valeur,
|
||||
datas[iNb].pinyin
|
||||
);
|
||||
|
||||
// Réinitialiser les canvas pour le nouveau mot
|
||||
let res = initMultiCanvas(
|
||||
options.canvasID,
|
||||
datas[iNb].hanzi,
|
||||
options.view_settings
|
||||
);
|
||||
|
||||
writers = res.writers;
|
||||
okArray = res.okArray;
|
||||
|
||||
startMultiQuiz(writers, okArray);
|
||||
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
bouton.addEventListener("click", handleClick);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// AFFICHAGE DU CHALLENGE
|
||||
// ---------------------------------------------------------
|
||||
function displayChallenge(divName, chineseChar, pinyin) {
|
||||
document.getElementById(divName).textContent =
|
||||
"Écrire : " + chineseChar + " / " + pinyin;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// 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: view_settings.showCharacter,
|
||||
showOutline: view_settings.showOutline,
|
||||
showHintAfterMisses: 1,
|
||||
highlightOnComplete: false,
|
||||
padding: 5
|
||||
});
|
||||
|
||||
writers.push(hw);
|
||||
});
|
||||
|
||||
return { writers, okArray };
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// LANCER UN QUIZ PAR CANVAS
|
||||
// ---------------------------------------------------------
|
||||
function startMultiQuiz(writers, okArray) {
|
||||
|
||||
writers.forEach((hw, idx) => {
|
||||
|
||||
okArray[idx] = false; // reset
|
||||
|
||||
hw.quiz({
|
||||
onMistake: () => { okArray[idx] = false; },
|
||||
onCorrectStroke: () => {},
|
||||
onComplete: () => { okArray[idx] = true; }
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// EXPORT
|
||||
// ---------------------------------------------------------
|
||||
return {
|
||||
init
|
||||
challengeID: `challenge_${uid}`,
|
||||
canvasID: `canvas_${uid}`,
|
||||
feedbackID: `feedback_${uid}`,
|
||||
button_OK_ID: `valid_${uid}`
|
||||
};
|
||||
}
|
||||
</script>
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// INITIALISE UN WIDGET
|
||||
// ---------------------------------------------------------
|
||||
function init(options = {}) {
|
||||
let iNb = 0;
|
||||
const datas = options.datas;
|
||||
let writers = [], okArray = [];
|
||||
|
||||
function loadNext() {
|
||||
displayChallenge(options.challengeID, datas[iNb]);
|
||||
const res = initMultiCanvas(options.canvasID, datas[iNb].hanzi, options.view_settings);
|
||||
writers = res.writers;
|
||||
okArray = res.okArray;
|
||||
startMultiQuiz(writers, okArray);
|
||||
}
|
||||
|
||||
function handleClick() {
|
||||
const allOK = checkAll(okArray, options.feedbackID);
|
||||
if (!allOK) return;
|
||||
iNb++;
|
||||
if (iNb >= datas.length) {
|
||||
document.getElementById(options.feedbackID).textContent = "Fini !";
|
||||
document.getElementById(options.button_OK_ID).removeEventListener("click", handleClick);
|
||||
return;
|
||||
}
|
||||
loadNext();
|
||||
}
|
||||
|
||||
loadNext();
|
||||
document.getElementById(options.button_OK_ID).addEventListener("click", handleClick);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// AFFICHAGE DU CHALLENGE
|
||||
// ---------------------------------------------------------
|
||||
function displayChallenge(divID, item) {
|
||||
document.getElementById(divID).textContent =
|
||||
"Écrire : " + item.valeur + " / " + item.pinyin;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// CRÉATION MULTI-CANVAS
|
||||
// ---------------------------------------------------------
|
||||
function initMultiCanvas(containerID, hanzi, view_settings) {
|
||||
const CHAR_SIZE = 150;
|
||||
const chars = [...hanzi];
|
||||
const container = document.getElementById(containerID);
|
||||
container.innerHTML = "";
|
||||
container.style.cssText = "display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:12px";
|
||||
|
||||
const okArray = new Array(chars.length).fill(false);
|
||||
const writers = chars.map((char, index) => {
|
||||
const div = document.createElement("div");
|
||||
div.id = `${containerID}_${index}`;
|
||||
container.appendChild(div);
|
||||
const hw = HanziWriter.create(div.id, char, {
|
||||
width: CHAR_SIZE, height: CHAR_SIZE,
|
||||
showCharacter: view_settings?.showCharacter ?? true,
|
||||
showOutline: view_settings?.showOutline ?? true,
|
||||
showHintAfterMisses: 1, highlightOnComplete: false, padding: 5
|
||||
});
|
||||
div.style.cssText = `display:inline-block;width:${CHAR_SIZE}px;height:${CHAR_SIZE}px;flex-shrink:0`;
|
||||
return hw;
|
||||
});
|
||||
return { writers, okArray };
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// LANCER UN QUIZ PAR CANVAS
|
||||
// ---------------------------------------------------------
|
||||
function startMultiQuiz(writers, okArray) {
|
||||
writers.forEach((hw, idx) => {
|
||||
hw.quiz({
|
||||
onMistake: () => { okArray[idx] = false; },
|
||||
onComplete: () => { okArray[idx] = true; }
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// CHECK GLOBAL
|
||||
// ---------------------------------------------------------
|
||||
function checkAll(okArray, feedbackId) {
|
||||
const el = document.getElementById(feedbackId);
|
||||
const allOK = okArray.every(Boolean);
|
||||
el.textContent = allOK ? "✔️ Bravo !" : "❌ Incorrect, continuez !";
|
||||
el.style.color = allOK ? "green" : "red";
|
||||
return allOK;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// EXPORT
|
||||
// ---------------------------------------------------------
|
||||
return { newWidget, init };
|
||||
})();
|
||||
</script>
|
||||
17
styles.html
17
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>
|
||||
Loading…
Reference in a new issue