Pardon je viens juste de voir ton message !
Si tu cherches toujours, voici le script pour la face recto (Hanzi -> Pinyin Audio etc.).
mes champs s’appellent
Hanzi (caractère)
Pinyin
Audio
French (traduction)
j’ai aussi d’autres champs ( par exemple Img-Hanzi ) qui sont pas indispensables,
tu peux effacer les commandes qui les utilisent
Après j’ai eu des problèmes sur certaines cartes, je pense que le script « Hanzi Writer »
ne marche pas à 100%, parfois il faut recréer la carte, parfois il ne sait juste pas comment écrire un caractère… Si tu as toujours le même problème, tu peux m’écrire en PM.
Donc pour Recto :
<div id="hanzi" style='font-family: Hoefler Text; font-size: 110px;'>{{Hanzi}}</div>
<center> <div id="target" style='display:none'> </div></center>
<div style='font-family: Hoefler Text; font-size: 40px;'>{{Img-Hanzi}}</div>
<button onclick="showHideStrokeOrder()">Strokes</button>
<div style='font-family: Arial; font-size: 20px;'>{{Img-Hanzi}}</div>
<script type="text/javascript">
var characters = "{{Hanzi}}".split("")
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "https://cdn.jsdelivr.net/npm/hanzi-writer@2.2/dist/hanzi-writer.min.js";
js.onload = function() {
for (x of characters) {
var writer = HanziWriter.create('target', x, {
width: 120,
height: 120,
padding: 5,
showOutline: true,
strokeAnimationSpeed: 1,
delayBetweenStrokes: 150, // milliseconds
radicalColor: '#ff0000' // blue
});
writer.loopCharacterAnimation();
};
};
document.body.appendChild(js);
function showHideStrokeOrder() {
var x = document.getElementById("target");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
var y = document.getElementById("hanzi");
if (x.style.display === "block") {
y.style.display = "none";
} else {
y.style.display = "block";
}
}
</script>
Et pour Verso
(dans ce cas c’est Pinyin + Audio -> Hanzi + French,
mais c’est à peu près la même chose pour French -> Hanzi + Pinyin + Audio )
{{FrontSide}}
<hr id=answer>
<div id="hanzi" style='font-family: Hoefler Text; font-size: 110px;'>{{Hanzi}}</div>
<center> <div id="target" style='display:none'> </div></center>
<button onclick="showHideStrokeOrder()">Strokes</button>
<div style='font-family: Arial; font-size: 20px;'>{{Img-Hanzi}}</div>
<div style='font-family: Hoefler Text font-size: 55px;'>{{French}}</div>
<div style='font-family: Arial; font-size: 20px;'>{{Img-French}}</div>
<div style='font-family: Hoefler Text; font-size: 40px;'>{{Notes}}</div>
<script type="text/javascript">
var characters = "{{Hanzi}}".split("")
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "https://cdn.jsdelivr.net/npm/hanzi-writer@2.2/dist/hanzi-writer.min.js";
js.onload = function() {
for (x of characters) {
var writer = HanziWriter.create('target', x, {
width: 120,
height: 120,
padding: 5,
showOutline: true,
strokeAnimationSpeed: 1,
delayBetweenStrokes: 150, // milliseconds
radicalColor: '#ff0000' // blue
});
writer.loopCharacterAnimation();
};
};
document.body.appendChild(js);
</script>
