129 lines
No EOL
3.9 KiB
JavaScript
129 lines
No EOL
3.9 KiB
JavaScript
<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;
|
|
let datas_length = 0;
|
|
|
|
function init(options = {}) {
|
|
displayChallenge(
|
|
options.challengeID,
|
|
options.datas[iNb].valeur,
|
|
options.datas[iNb].pinyin
|
|
);
|
|
|
|
datas_length = options.datas.length;
|
|
|
|
// 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 >= datas_length) {
|
|
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> |