First code
This commit is contained in:
commit
847cb433ee
4 changed files with 192 additions and 0 deletions
28
datas.js
Normal file
28
datas.js
Normal file
|
|
@ -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>
|
||||
19
hanzi_1.js
Normal file
19
hanzi_1.js
Normal file
|
|
@ -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>
|
||||
19
hanzi_2.js
Normal file
19
hanzi_2.js
Normal file
|
|
@ -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>
|
||||
126
module_hanzi.js
Normal file
126
module_hanzi.js
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue