158 lines
4.8 KiB
JavaScript
158 lines
4.8 KiB
JavaScript
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.5/dist/hanzi-writer.min.js"></script>
|
||
<script>
|
||
function createMyReusableModule() {
|
||
|
||
function init(options = {}) {
|
||
|
||
let iNb = 0;
|
||
let datas = options.datas;
|
||
let datas_length = datas.length;
|
||
|
||
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
|
||
};
|
||
}
|
||
</script>
|