Petit script utile "stroke order"

大家好 !
Dans mes cartes anki j’aime bien ajouter un gif des caractères d’un « mot ». Mais ça prend du temps et pour en trouver qui réunissent les bon critères pour moi c’est pas toujours facile, vu que je suis assez chiant ^^
Mais après pas mal de recherche j’ai trouvé un petit script à collé à l’endroit de votre carte où vous voulez voir apparaître l’animation. Plus besoin de chercher de gifs, l’animation est belle et plus ou moins personnalisable :slight_smile:
Le voici:

<script type="text/javascript">
	var characters = "{{HANZI_FIELD}}".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: 70,
				height: 70,
				padding: 5,   
				showOutline: true,
				strokeAnimationSpeed: 1, 
				delayBetweenStrokes: 150, // milliseconds
				radicalColor: '#337ab7' // blue
			});
			writer.loopCharacterAnimation();
		};
	};
	document.body.appendChild(js);
</script>

Voilà, il suffit de collé ça sur votre carte, en général sur un verso :slight_smile:
Je suis encore un peu dans la démarche de faire LA carte anki optimale, si ça vous voulez en savoir plus dites le moi, je posterai avec plaisir mes cartes avec le pourquoi et le comment :slight_smile:
En espérant que puisse vous être utile :slight_smile:
再見 !

EDIT: Il faut aussi remplacer le HANZI_FIELD par le nom du champs dans lequel vous écrivez votre 漢字

1 J'aime

Pourrais-tu mettre des captures d’écran de ce que tu fais sur les cartes et du rendu final ?

Bien sûr !
Le rendu ça donne ça pour mes cartes « mots », j’en d’autres pour les sons, les radicaux, les caractères puis à termes pour les phrases utiles ou difficiles et pour les règles de grammaires.





(là il faut imaginer que l’animation se joue en boucle)




Pour ce que j’écris « dans » les carte, je pense que ça serait plus simple de partager un paquet ( enfin j’imagine ! ) si ça intéresse quelqu’un :slight_smile:

2 J'aimes

Super utile merci pour le partage !

J’adore ta philosophie de vouloir créer LA carte Anki parfaite donc je serais partant pour tester le script.

Peux-tu nous partager un de tes paquets ou quelques cartes dont tu es fier ?

Si tu veux je peux même te faire un retour détaillé ou mes idées sur comment on pourrait pousser le concept encore plus loin :wink:

Avec plaisir, j’ai quelques problèmes dont je n’ai pas la solution encore. Donc un avis extérieur serait le bienvenu, surtout d’un expert ^^
Voilà, j’ai publié un deck avec une carte « radical », une « caractère » et une « mot ». Comme ça ceux qui souhaite récupérer les types de carte le peuvent :slight_smile:
Du coup je vais vous expliquer comment je procède pour me faire un deck. Je vais prendre l’exemple du deck « radical » pour commencer.

D’abord je me demandes quelles informations j’ai besoin. Ici c’est :
1.L’apparence du radical et donc comment l’écrire
2.La prononciation
3.Le sens ou l’idée du radical

Puis j’en déduis les questions que je dois me poser:
1.Donner le sens à partir du radical et de son audio
2.Ecrire le radical à partir de son sens et de son audio
3.Le prononcer à partir du radical et de son sens

Et enfin j’en déduis les données que j’ai à saisir (les « champs » dans anki):

  1. Le radical
  2. Son audio
  3. Son PinYin (optionnel, c’est pour le mettre en « indice » quand l’audio n’est pas clair à 100%)
  4. Une image qui représente le sens (j’évite autant que possible les traductions, en plus de sa notre mémoire adore les images)
  5. Un gif pour l’ordre des trait

Et petite subtilité pour les radicaux, il y en a qui ont plusieurs formes, donc il faut rajouter des infos et des questions pour chaque graphie supplémentaire comme je l’ai fait dans le deck.

J’ai procédé de la même manière pour les « mots ». Sauf pour les gifs que j’ai remplacé par le script :slight_smile: .
Mais à ce moment là je ressentais le besoin de rentré dans chaque caractères pour mieux les écrire et avoir une meilleure compréhension globale du mots. Les infos qu’il me fallait c’était le sens du caractère et comment l’écrire. Et là où pour les radicaux ça marchait très bien, ici plus trop ^^ Les caractères étant plus complexes graphiquement, juste recopier l’ordre des traits ça ne suffit souvent pas. En plus il y en a pour lesquels trouvé un sens ou une image qui y corresponde c’est pas super clair ( 的 ou 吧 par exemple ).
Alors en ce moment je teste d’écrire une petite histoire avec les radicaux du caractères et leur sens, comme ça j’ai une sorte de « béquille » pour aider ma mémoire ^^
Par exemple pour 賽 ça donne « sous le Toit d’un CONCOURS, le Numéro Un domine les Huit autres et gagne l’Argent » avec une majuscule pour chaque élément graphique et l’idée du caractère tout en majuscule. C’est une super méthode mais j’ai encore des problèmes :disappointed_relieved:
Pour les caractères avec beaucoup de trait « non radical » (棒) ceux qui sont trop abstrait graphiquement ou dans le sens (的,司)ou encore quand je trouve pas d’histoire simplement ^^ (球).
J’ai vu sur internet une méthode qui consiste à « « coder » » le sens, la prononciation et les radicaux avec des histoires (pour le sens) avec des personnages spécifiques ( pour le pinyin final) avec des accessoires (pour les radicaux) dans une pièce (pour le ton) d’un lieu spécifique (pour le pinyin initial) . C’est un peu plus complet que ce que je fait certes mais ça résout pas mes problèmes de caractère abstrait ou avec peu de radicaux.

Voilà le fruit de mes réflexions, si vous avez des suggestions je vous écoute :slight_smile: Je suis vraiment ouvert donc n’hésitez pas !

EDIT: J’avais oublié le lien du paquet :sweat_smile:
https://ankiweb.net/shared/info/1706605533

Merci +++ pour le script @Bentoh !
Sauf erreur de ma part, il manque juste la ligne qui crée l’emplacement pour « target » avant le script :

Sinon, ça marche super bien sur ordi et sur mobile et ça évite d’aller chercher ça dans le dico ou sur le web !

Bravo Bentoh pour ta contribution et la mise à disposition du script
Pour ma part, j’ai suivi la méthode d’Alex pour créer des cartes chinois-3 sens.
J’ai rajouté un champ calligraphie, mais je ne sais à quel endroit coller le script.
Peux-tu me donner des conseils?

Il ne faut pas ajouter de champ pour cela mais modifier le type de carte pour passer de quelque chose comme :

A quelque chose comme :

1 J'aime

Bonsoir Geoffroy,

Merci pour ton aide.

J’y suis presque !

Mais j’ai encore besoin de tes lumières.

Tu écris « changer pour le champ dans ta définition de carte"
J’ai rajouté le script, mais je n’arrive pas à remplacer Hanzi par le bon nom de champ. Aucun des noms comme « Caractère » ou « Pinyin » marche.


Merci pour tes clarifications.

Il semble que le champ qui contient les caractères chinois (hanzi, pour moi) est ‹ Caractères ›.
Cela devrait être pour toi :

var characters = "{{Caractères}}".split("")

1 J'aime

C’est ce que j’ai fait, et voilà ce que j’ai obtenu:


Est-ce que tu identifies le problème?

Le code a l’air bon. Si tu as toujours le champ ‹ calligraphie ›, essaie de l’utiliser en y mettant également les hanzi dedans.
Si ça fonctionne, c’est qu’il n’aime pas l’accent dans le nom du champ dans l’évaluation du javascript.

J’ai mis le hanzi dans caligraphie, je le vois sur la carte, mais il n’y a pas d’animation.

Ça marche magnifiquement pour moi, avec le tag « Caractère », que ce soit sur l’ordi, sur iPhone ou sur iPad. C’est génial…

Je dois encore faire quelques tests, mais a priori je vais mettre la balise « target » plutôt tout en bas,
en dessous de mes notes, car c’est pas toujours utile d’avoir l’ordre des traits

Ce qui serait géniallissime, c’est un bouton supplémentaire pour révéler le GIF seulement quand on en a besoin, peut-être en touchant-cliquant sur le texte du champ Caractère (le hanzi non animé),
Peut-être quelqu’un avec des notions de javascript pourrait nous aider? :joy:

Ok je me réponds à moi-même : j’ai trouvé l’astuce pour cacher le GIF avec l’ordre des traits.

Il faut rajouter ce bout de code dans le script à la fin et surtout changer l’emplacement de la balise, qui est maintenant inclue dans un autre objet + bouton.

Ça marche aussi sur iPad / iPhone, je viens de tester !

Maintenant je dois réfléchir si je donne cette possibilité seulement pour les réponses ou aussi en « Front » quand le caractère est donné comme question…

J’espère que ça pourra vous être utile :slight_smile:

{{FrontSide}}

<hr id=answer>

<div style='font-family: Hoefler Text; font-size: 70px;'>{{Pinyin}}</div>
<div style='font-family: Hoefler Text; font-size: 110px;'>{{Caractère}}</div>

<div style='font-family: Hoefler Text; font-size: 20px;'>{{Audio}}</div>
<div style='font-family: Hoefler Text; font-size: 40px;'>{{Exemple}}</div>


<button onclick="showHideStrokeOrder()">Ordre des traits</button>

<center><div id="target" style='display:none'> </div></center>


<script type="text/javascript">

	var characters = "{{Caractère}}".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: 110,
				height: 110,
				padding: 5,   
				showOutline: true,
				strokeAnimationSpeed: 1, 
				delayBetweenStrokes: 150, // milliseconds
				radicalColor: '#337ab7' // 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";
			
    
        }
    }

</script>
1 J'aime

Si ça intéresse quelqu’un j’ai trouvé encore mieux :
en cliquant le bouton, on peut remplacer carrément le champ Hanzi d’origine par le GIF, easy peasy… :slight_smile:
button-stroke-replace

1 J'aime

Bonjour Vince,

Peux tu partager le code sur le recto et le verso de chacune de tes cartes.
Je n’y arrive toujours pas, j’ai toujours le message d’erreur « Invalid or unexpected tokenat eval () ».
Merci.

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>