Cas pratique : Type de note “Mon japonais”

Ce tutoriel va être la mise en place d’un cas pratique de type de note “Mon japonais” qui va regrouper toutes les options vues dans tous les précédents tutoriel. Il peut vous servir de base pour mettre en place pas à pas chacune de ces options. Utilisez la table de matière pour vous rendre dans la section qui vous intéresse.

Je vais utiliser un HTML très simple uniquement pour donner un peu de structure. Je vais également essayer de faire chaque option “indépendante” comme quand on fait évoluer son deck de cartes au fur et à mesure des besoins.

Nouveau type de note

On va créer un nouveau de type note base sur un type simple car on va tout paramétrer par nous même.

  • Ouverture de la gestion des types de notes : Menu “Outils > Gérer les types de notes”
  • Bouton “Ajouter”
  • Sélection de “Ajouter: Basique” et validation
  • Saisi du nom et validation

anki-etude-cas-nouveau-type.gif

Les champs de base

On va créer nos champs de base :

  • Expression : qui va contenir l’expression en japonais (mot, phrase, notion de grammaire, etc…)
  • Signification : traduction ou signification de l’expression
  • Audio : champ contenant l’audio de l’expression
  • Image : champ contenant l’image illustrant l’expression
  • Notes : champ dans lequel on mettra différentes informations qui peuvent nous être utiles (particularités, homonymie, notion formelle, etc.)
  • Exemple : phrase d’exemple/d’illustration de l’expression en japonais
  • Exemple (fr) : traduction de la phrase d’exemple
  • Exemple (audio) : audio de la phrase d’exemple

Dans cette phase on ne créé que des champs de base auxquels on rajoute des champ pour augmenter le contexte utile à la mémorisation.

  • Ouverture de la gestion des types de notes : Menu “Outils > Gérer les types de notes”
  • Sélection de “Mon japonais”
  • Cliquer sur le bouton “Champs…”
  • Renommage du champ “Recto” en “Expression”
  • Renommage du champ “Verso” en “Signification”
  • Création de chaque champ dans l’ordre (on peut réorganiser l’ordre des champs avec un glisser/déposer)

anki-etude-cas-champs-base.gif

Les descriptions ne sont pas obligatoires.

Saisie de notes d’exemple

Afin de modifier notre carte avec un exemple de note “réaliste”, on va se créer des notes d’exemple :

  • Une note “くるま” qui aura également une image
  • Une note “学生” qui n’aura pas d’image mais une phrase d’exemple

Les deux auront de l’audio, des notes et des étiquettes.

Cette phase n’est pas nécessaire, mais c’est plus pratique d’avoir des notes d’exemple avec et sans certaines informations pour vérifier le bon fonctionnement de nos type de cartes.

Tout ce qui suit peut être fait depuis le gestionnaire des types de cartes sans note d’exemple.

Design des cartes

Toutes les cartes vont avoir la même structure avec utilisation de <div> imbriqué pour organiser chaque élément que l’on affiche et pouvoir exploiter les styles.

Styles de base

Comme il y a une différence sur les fonte de caractères pour afficher le japonais en fonction de l’appareil utilisé, on va ajouter des styles qui permettent à Anki de sélectionner les polices japonais “standard” pour les balises qui possède la classe “jp”.

Nos styles de base seront :

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

.win .jp { font-family: "MS Mincho", "ＭＳ 明朝"; }
.mac .jp { font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro"; }
.linux .jp { font-family: "Kochi Mincho", "東風明朝"; }
.mobile .jp { font-family: "Hiragino Mincho ProN"; }

Structure générale

Le contenu de la face “Recto” sera englobé dans un <div class="recto"></div> .

Le contenu de la face “Verso” sera englobé (après le <hr/>) dans un <div class="verso"></div> .

Chaque élément affiché sera dans un <div> avec une classe correspondant à l’élément par “expression” pour l’expression.

De cette manière on peut décider du design de la même information en fonction de la face de la carte affichée.

La carte de base

Notre première carte sera la carte “Reconnaitre” qui va afficher notre expression et on va devoir trouver la signification : nous devons reconnaitre l’expression japonaise.

Pour nous aider nous allons ajouter du contexte, c’est à dire l’image et la phrase d’exemple si on en a.

  • Ouvrir l’explorateur
  • Rechercher et sélectionner la note “くるま”
  • Cliquer sur le boutons “Cartes”

Renommer le type de carte

On renommer notre type de carte par défaut en “Reconnaitre”, ainsi le nom du type s’affichera dans la recherche.

  • Depuis le gestionnaire des types de cartes
  • Sélectionner le premier type de carte (normalement il n’y en a qu’un) dans la liste déroulante “Type de carte”
  • Cliquer sur le bouton “Options > Renommer le type de carte…”
  • Saisir “Reconnaitre” et valider
  • Le nom de la carte à changé dans la liste déroulante

anki-etude-cas-renommer-carte.gif

Face recto

Pour ce modèle nous allons:

  • créer un <div> pour englober le contenu du recto (comme indiqué plus haut)
  • ajouter un <div> pour l’expression avec la classe “jp” car elle contient du japonais
  • ajouter un <div> pour l’image
  • ajouter un <div> pour l’exemple avec un <div> pour la partie japonaise avec une classe “jp”.

Par sécurité on va générer le bloc Image et Exemple uniquement si on a une valeur dans le champ, on obtient un modèle:

<div class="recto">
 <div class="expression jp">{{Expression}}</div>

 {{#Image}}
 <div class="image">{{Image}}</div>
 {{/Image}}

 {{#Exemple}}
 <div class="exemple">
        <div class="jp">{{Exemple}}</div>
 </exemple>
 {{/Exemple}}

</div>

Untitled

Avec la note qui n’a qu’une phrase d’exemple :

Untitled

Face verso

Pour ce modèle nous n’allons pas récupérer le champ “{{FrontSide}}” car nous voudrions insérer des informations entre l’expression et l’image (notamment la signification).

  • On va remplacer le “{{FrontSide}}” par un <div class="recto"> avec l’expression pour refaire le même élément que dans le recto
  • Création d’un <div> pour y placer l’audio (pas obligatoire mais on reste dans le même logique pour l’ensemble du design)
  • Après le <hr/>
  • Création d’un <div> pour englober le verso
  • Création d’un <div> pour la signification
  • Création d’un <div> pour l’image
  • Création d’un <div> pour l’exemple avec un <div> pour le japonais et un <div> pour le français et ajout de l’audio. de l’exemple
  • Création d’un <div> pour les notes (avec un libellé)
  • Création d’un <div> pour afficher les étiquettes (avec un libellé). Pour les étiquettes on utilise <span> pour les avoir sur une même ligne le libellé et le contenu

Ca nous donne le code suivant :

<div class="recto">
 <div class="expression jp">{{Expression}}</div>
</div>
{{#Audio}}
<div class="audio">{{Audio}}</div>
{{/Audio}}

<hr id=answer>

<div class="verso">
 <div class="signification">{{Signification}}</div>

 {{#Image}}
 <div class="image">{{Image}}</div>
 {{/Image}}

 {{#Exemple}}
 <div class="exemple">
    <div class="jp">{{Exemple}}</div>
    <div class="fr">{{Exemple (fr)}}</div>
    {{Exemple (audio)}}
 </div>
 {{/Exemple}}

 {{#Notes}}
 <div class="notes">
    <div class="libelle">Notes :</div>
    <div class="contenu">{{Notes}}</div>
 </div>
 {{/Notes}}

 {{#Tags}}
 <div class="tags">
    <span class="libelle">Etiquettes :</span>
    <span class="contenu">{{Tags}}</span>
 </div>
 {{/Tags}}

</div>

Ce qui nous donne pour くるま

Untitled

Et pour 学生

Untitled

Les styles

Par défaut l’image s’agrandi autant qu’elle peut, ce qui fait parfois on a un rendu peu agréable. Je défini donc un style qui indique que la hauteur maximale d’une image c’est 420 pixels (valeur totalement arbitraire), si le redimensionnement dépasse cette limite l’image ne grandi plus elle reste au maximum à 420 pixels de hauteur

img {
 max-height: 420px;
}

L’expression dans le recto n’est pas assez visible, on va donc agrandir la taille de la police de caractère et mettre un fond gris léger. De plus on va ajouter un “padding” de 6 pixels c’est à dire un espace dans le div pour que le texte ne “colle” pas les bordures du bloc.

.recto .expression {
  background-color : #EEEEEE;
  padding: 6px;
  font-size: 32px;
}

Le bloc de note à une taille de caractères trop grosse (ce texte n’est pas aussi important que l’expression ou la signification), donc on va réduire, ensuite je ne veut pas que le texte soit centré (on va aligner le texte à gauche). Même chose que précédemment on va mettre un padding mais cette fois uniquement en haut est en bas.

.notes {
  text-align: left;
  font-size: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
}

On fait la même choses pour les étiquettes.

.tags {
  text-align: left;
  font-size: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
}

On veut mettre en gras le libellé des étiquettes et des notes.

.libelle {
  font-weight: bold;
}

Pour finir la phrase d’exemple est également écrite trop grosse, on veut l’aligner a gauche également. On ajoute un de couleur “aqua” on ajoute également un padding, mais aussi un “margin”. Le margin est un espace en dehors du bloc. 

.exemple {
  background-color : aqua;
  text-align: left;
  font-size: 16px;
  margin: 4px 0px ;
  padding-top: 6px;
  padding-bottom: 6px;
}

La manière d’écrire le magin indique “4 pixel en haut et en bas et 0 pixels a droite et à gauche”, c’est une autre manière d’écrire ce que l’on fait pour le padding. On aurait également pu écrire 

  margin-top: 4px;
  margin-bottom: 4px;

Au final nous avons les styles suivants:

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

.win .jp { font-family: "MS Mincho", "ＭＳ 明朝"; }
.mac .jp { font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro"; }
.linux .jp { font-family: "Kochi Mincho", "東風明朝"; }
.mobile .jp { font-family: "Hiragino Mincho ProN"; }

img {
 max-height: 420px;
}

.recto .expression {
  background-color : #EEEEEE;
  padding: 6px;
  font-size: 32px;
}

.notes {
  text-align: left;
  font-size: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.tags {
  text-align: left;
  font-size: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.libelle {
  font-weight: bold;
}

.exemple {
  background-color : aqua;
  text-align: left;
  font-size: 16px;
  margin: 4px 0px ;
  padding-top: 6px;
  padding-bottom: 6px;
}

Ce qui nous fait le rendu pour くるま

Untitled

Et pour 学生

Untitled

La carte Rappeler

Maintenant que nous avons notre carte principale, nous aimerions une seconde carte qui affiche la signification et il faut qu’on se rappelle de l’expression japonaise. Cette carte sera plus simple au niveau du recto car elle n’affiche que la signification, on pourra donc utiliser le “{{FontSide}}”.

Toutefois on ne voudra pas toujours de cette carte, on va la rendre optionnelle, mais par défaut elle existera toujours, on fera donc une option pour “Masquer” la carte.

Création du champ d’option

Dans le type de carte on créé un nouveau champ “Masquer Rappeler”.

Untitled

Création du type de carte

Depuis le gestionnaire de cartes:

  • “Options > Ajouter un type de carte.”. Anki vous prévient que cela va générer de nouvelles cartes (en l’occurrence 2 pour ma part)
  • Assurez vous que le type “Carte 2” est bien sélectionné et renommer le en “Rappeler”

Ce nouveau type de carte est une copie du premier.

Modification du recto

Comme on ne veut afficher que la signification, il suffit d’effacer le contenu du <div class=”recto”> pour le remplacer par un div avec la signification. A cela nous devons rajouter l’option, donc une instruction conditionnelle qui n’affiche la carte QUE si “Masquer Rappeler” est VIDE.

{{^Masquer Rappeler}}
<div class="recto">
 <div class="signification">{{Signification}}</div>
</div>
{{/Masquer Rappeler}}

Ce qui nous donne

Untitled

et

Untitled

Modification du verso

Pour le verso on va réafficher le “{{FrontSide}}” (car il ne contient que la signification), et on remplace la partie “signification” existante par l’expression et son audio. On obtient:

{{FrontSide}}

<hr id=answer>

<div class="verso">
 <div class="expression jp">{{Expression}}</div>
 {{#Audio}}
 <div class="audio">{{Audio}}</div>
 {{/Audio}}

 {{#Image}}
 <div class="image">{{Image}}</div>
 {{/Image}}

 {{#Exemple}}
 <div class="exemple">
    <div class="jp">{{Exemple}}</div>
    <div class="fr">{{Exemple (fr)}}</div>
    {{Exemple (audio)}}
 </div>
 {{/Exemple}}

 {{#Notes}}
 <div class="notes">
    <div class="libelle">Notes :</div>
    <div class="contenu">{{Notes}}</div>
 </div>
 {{/Notes}}

 {{#Tags}}
 <div class="tags">
    <span class="libelle">Etiquettes :</span>
    <span class="contenu">{{Tags}}</span>
 </div>
 {{/Tags}}

</div>

Ajout de styles

Il nous manque juste un style identique pour la partie signification dans “recto”, on utilise le même style que pour l’expression :

.recto .signification {
  background-color : #EEEEEE;
  padding: 6px;
  font-size: 32px;
}

Ce qui nous les styles finaux :

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

.win .jp { font-family: "MS Mincho", "ＭＳ 明朝"; }
.mac .jp { font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro"; }
.linux .jp { font-family: "Kochi Mincho", "東風明朝"; }
.mobile .jp { font-family: "Hiragino Mincho ProN"; }

img {
 max-height: 420px;
}

.recto .expression {
  background-color : #EEEEEE;
  padding: 6px;
  font-size: 32px;
}

.recto .signification {
  background-color : #EEEEEE;
  padding: 6px;
  font-size: 32px;
}

.notes {
  text-align: left;
  font-size: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.tags {
  text-align: left;
  font-size: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.libelle {
  font-weight: bold;
}

.exemple {
  background-color : aqua;
  text-align: left;
  font-size: 16px;
  margin: 4px 0px ;
  padding-top: 6px;
  padding-bottom: 6px;
}

Et on obtient le rendu

Untitled

et

Untitled

Affichage des furigana

Avant toute choses nous devons créer les champs de lecture pour écrire les furiganas de l’expression mais également de la phrase d’exemple.

On va ajouter également une option pour masquer les furigana dans la question (pour les mots dont on est sensé connaitre les kanji). Pour ca on ajoute un champ “Masquer Furigana”.

De plus on va ajouter des styles pour afficher les furiganas au survol de la souris.

Création des champs

On créé les champs

  • Lecture : pour la lecture de l’expression
  • Exemple (furigana) : pour la lecture de la phrase d’exemple
  • Masquer furigana : pour ne pas afficher les furigana dans la question

anki-etude-cas-champs-furigana.gif

Modification de la carte Reconnaitre

Modèle recto

Dans le recto on va modifier la manière d’afficher l’expression, ca va être un peu compliqué:

  • Si on a rien dans “Lecture” on affiche “Expression” (au cas où on ne rempli pas ce champ il faut que quelque chose s’affiche)
  • Si on a quelque chose dans “Lecture”
    • Si on a quelque chose dans “Masquer furigana” on affiche uniquement les kanji
    • Si on a rien dans “Masquer furigana” on affiche les furigana

Le code correspondant est :

{{^Lecture}}
 <div class="expression jp">{{Expression}}</div>
 {{/Lecture}}
 {{#Lecture}}
  {{#Masquer furigana}}
  <div class="expression jp">{{kanji:Lecture}}</div>
  {{/Masquer furigana}}
  {{^Masquer furigana}}
  <div class="expression hover-furigana jp">{{furigana:Lecture}}</div>
  {{/Masquer furigana}}
 {{/Lecture}}

J’ai ajouté une classe “hover-furigana” pour pouvoir les afficher les furigana au survol de la souris.

On fera la même chose pour la phrase d’exemple, on obtient un modèle de recto :

<div class="recto">
 {{^Lecture}}
 <div class="expression jp">{{Expression}}</div>
 {{/Lecture}}
 {{#Lecture}}
  {{#Masquer furigana}}
  <div class="expression jp">{{kanji:Lecture}}</div>
  {{/Masquer furigana}}
  {{^Masquer furigana}}
  <div class="expression hover-furigana jp">{{furigana:Lecture}}</div>
  {{/Masquer furigana}}
 {{/Lecture}}

 {{#Image}}
 <div class="image">{{Image}}</div>
 {{/Image}}

 {{#Exemple}}
 <div class="exemple">
 {{^Exemple (furigana)}}
 <div class="jp">{{Exemple}}</div>
 {{/Exemple (furigana)}}
 {{#Exemple (furigana)}}
  {{#Masquer furigana}}
  <div class="jp">{{kanji:Exemple (furigana)}}</div>
  {{/Masquer furigana}}
  {{^Masquer furigana}}
  <div class="hover-furigana jp">{{furigana:Exemple (furigana)}}</div>
  {{/Masquer furigana}}
 {{/Exemple (furigana)}}
 </exemple>
 {{/Exemple}}

</div>

Modèle verso

Dans le verso on ne prend pas en compte l’option, donc le code est plus simple. De plus on n’active pas l’affichage des furiganas au survol, donc pas de classe “hover-furigana”. On obtient le code :

<div class="recto">
 {{^Lecture}}
 <div class="expression jp">{{Expression}}</div>
 {{/Lecture}}
 {{#Lecture}}
  <div class="expression jp">{{furigana:Lecture}}</div>
 {{/Lecture}}

</div>
{{#Audio}}
<div class="audio">{{Audio}}</div>
{{/Audio}}

<hr id=answer>

<div class="verso">
 <div class="signification">{{Signification}}</div>

 {{#Image}}
 <div class="image">{{Image}}</div>
 {{/Image}}

 {{#Exemple}}
 <div class="exemple">
    {{^Exemple (furigana)}}
    <div class="jp">{{Exemple}}</div>
    {{/Exemple (furigana)}}
    {{#Exemple (furigana)}}
    <div class="jp">{{furigana:Exemple (furigana)}}</div>
    {{/Exemple (furigana)}}
    <div class="fr">{{Exemple (fr)}}</div>
    {{Exemple (audio)}}
 </div>
 {{/Exemple}}

 {{#Notes}}
 <div class="notes">
    <div class="libelle">Notes :</div>
    <div class="contenu">{{Notes}}</div>
 </div>
 {{/Notes}}

 {{#Tags}}
 <div class="tags">
    <span class="libelle">Etiquettes :</span>
    <span class="contenu">{{Tags}}</span>
 </div>
 {{/Tags}}

</div>

Modification de la carte Rappeler

La carte “Rappeler” n’est impactée que sur le verso :

{{FrontSide}}

<hr id=answer>

<div class="verso">
 {{^Lecture}}
 <div class="expression jp">{{Expression}}</div>
 {{/Lecture}}
 {{#Lecture}}
  <div class="expression jp">{{furigana:Lecture}}</div>
 {{/Lecture}}
 {{#Audio}}
 <div class="audio">{{Audio}}</div>
 {{/Audio}}

 {{#Image}}
 <div class="image">{{Image}}</div>
 {{/Image}}

 {{#Exemple}}
 <div class="exemple">
    {{^Exemple (furigana)}}
    <div class="jp">{{Exemple}}</div>
    {{/Exemple (furigana)}}
    {{#Exemple (furigana)}}
    <div class="jp">{{furigana:Exemple (furigana)}}</div>
    {{/Exemple (furigana)}}
    <div class="fr">{{Exemple (fr)}}</div>
    {{Exemple (audio)}}
 </div>
 {{/Exemple}}

 {{#Notes}}
 <div class="notes">
    <div class="libelle">Notes :</div>
    <div class="contenu">{{Notes}}</div>
 </div>
 {{/Notes}}

 {{#Tags}}
 <div class="tags">
    <span class="libelle">Etiquettes :</span>
    <span class="contenu">{{Tags}}</span>
 </div>
 {{/Tags}}

</div>

Modification des styles

Pour afficher les furigana uniquement au survol, il suffit d’ajouter les styles 

.hover-furigana ruby rt {
    opacity: 0;
}
.hover-furigana ruby:hover rt {
    opacity: 1;
}

Le survol ne fonctionne que pour les furigana qui se trouvent dans un élément avec une classe “hover-furigana”, comme nous avons appliquée cette classe uniquement dans le recto, ce mode est désactivé dans le verso.

Les styles complets deviennent :

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

.win .jp { font-family: "MS Mincho", "ＭＳ 明朝"; }
.mac .jp { font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro"; }
.linux .jp { font-family: "Kochi Mincho", "東風明朝"; }
.mobile .jp { font-family: "Hiragino Mincho ProN"; }

img {
 max-height: 420px;
}

.recto .expression {
  background-color : #EEEEEE;
  padding: 6px;
  font-size: 32px;
}

.recto .signification {
  background-color : #EEEEEE;
  padding: 6px;
  font-size: 32px;
}

.notes {
  text-align: left;
  font-size: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.tags {
  text-align: left;
  font-size: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.libelle {
  font-weight: bold;
}

.exemple {
  background-color : aqua;
  text-align: left;
  font-size: 16px;
  margin: 4px 0px ;
  padding-top: 6px;
  padding-bottom: 6px;
}

.hover-furigana ruby rt {
    opacity: 0;
}
.hover-furigana ruby:hover rt {
    opacity: 1;
}

Carte Ecouter

Une des cartes optionnelles intéressantes a faire, c’est la carte “Ecouter” où la question sera l’audio. On va créer un champ “Afficher Ecouter” pour la rendre optionnelle, pour les modèles ils seront très proches de la carte “Rappeler” en affichant uniquement l’audio en recto, et affichant le reste au verso.

Ajout du champ

Untitled

Création du type de carte

Comme le type de carte est proche de la carte “Rappeler” on va “cloner” cette dernière :

  • Depuis le gestionnaire de type de carte
  • Sélectionner la carte “Rappeler” dans la liste déroulante
  • Cliquer sur “Options > Ajouter un type de carte”
  • Cliquer sur “Options > Renommer le type de carte”
  • Changer le nom en “Rappeler”

Modification du recto

On va changer la condition (on affiche la carte si on a quelque chose dans “Afficher Ecouter” et si on a de l’audio), et on affiche le bloc audio.

{{#Afficher Ecouter}}
{{#Audio}}
<div class="recto">
 <div class="audio">{{Audio}}</div>
</div>
{{/Audio}}
{{/Afficher Ecouter}}

Modification du verso

Pour le verso on va supprimer l’audio du verso et afficher la signification.

{{FrontSide}}

<hr id=answer>

<div class="verso">
 {{^Lecture}}
 <div class="expression jp">{{Expression}}</div>
 {{/Lecture}}
 {{#Lecture}}
  <div class="expression jp">{{furigana:Lecture}}</div>
 {{/Lecture}}
 <div class="signification">{{Signification}}</div>

 {{#Image}}
 <div class="image">{{Image}}</div>
 {{/Image}}

 {{#Exemple}}
 <div class="exemple">
    {{^Exemple (furigana)}}
    <div class="jp">{{Exemple}}</div>
    {{/Exemple (furigana)}}
    {{#Exemple (furigana)}}
    <div class="jp">{{furigana:Exemple (furigana)}}</div>
    {{/Exemple (furigana)}}
    <div class="fr">{{Exemple (fr)}}</div>
    {{Exemple (audio)}}
 </div>
 {{/Exemple}}

 {{#Notes}}
 <div class="notes">
    <div class="libelle">Notes :</div>
    <div class="contenu">{{Notes}}</div>
 </div>
 {{/Notes}}

 {{#Tags}}
 <div class="tags">
    <span class="libelle">Etiquettes :</span>
    <span class="contenu">{{Tags}}</span>
 </div>
 {{/Tags}}

</div>

Résultat

anki-etude-cas-carte-ecouter.gif

Carte Image

On peut faire la même chose que précédemment, mais cette fois l’image avec une carte “Image”.

Champ

Untitled

Recto

{{#Afficher Image}}
{{#Image}}
<div class="recto">
 <div class="image">{{Image}}</div>
</div>
{{/Image}}
{{/Afficher Image}}

Verso

{{FrontSide}}

<hr id=answer>

<div class="verso">
 {{^Lecture}}
 <div class="expression jp">{{Expression}}</div>
 {{/Lecture}}
 {{#Lecture}}
  <div class="expression jp">{{furigana:Lecture}}</div>
 {{/Lecture}}
 {{#Audio}}
 <div class="audio">{{Audio}}</div>
 {{/Audio}}
 <div class="signification">{{Signification}}</div>
 {{#Audio}}
 <div class="audio">{{Audio}}</div>
 {{/Audio}}

 {{#Exemple}}
 <div class="exemple">
    {{^Exemple (furigana)}}
    <div class="jp">{{Exemple}}</div>
    {{/Exemple (furigana)}}
    {{#Exemple (furigana)}}
    <div class="jp">{{furigana:Exemple (furigana)}}</div>
    {{/Exemple (furigana)}}
    <div class="fr">{{Exemple (fr)}}</div>
    {{Exemple (audio)}}
 </div>
 {{/Exemple}}

 {{#Notes}}
 <div class="notes">
    <div class="libelle">Notes :</div>
    <div class="contenu">{{Notes}}</div>
 </div>
 {{/Notes}}

 {{#Tags}}
 <div class="tags">
    <span class="libelle">Etiquettes :</span>
    <span class="contenu">{{Tags}}</span>
 </div>
 {{/Tags}}

</div>

Résultat

anki-etude-cas-carte-image.gif

Carte Exemple

Une autre carte optionnelle intéressante et la carte affichant l’exemple en japonais. Toutefois ce qui nous intéresse avec la phrase d’exemple c’est de la comprendre, donc dans le verso on va se contenter de la traduction et de l’audio, quand au recto on va afficher le contenu de l’exemple comme l’expression.

Champ

Untitled

Modèle recto

{{#Afficher Exemple}}
{{#Exemple}}
<div class="recto">
    {{^Exemple (furigana)}}
    <div class="expression jp">{{Exemple}}</div>
    {{/Exemple (furigana)}}
    {{#Exemple (furigana)}}
    <div class="expression hover-furigana jp">{{furigana:Exemple (furigana)}}</div>
    {{/Exemple (furigana)}}

</div>
{{/Exemple}}
{{/Afficher Exemple}}

Modèle verso

<div class="recto">
    {{^Exemple (furigana)}}
    <div class="expression jp">{{Exemple}}</div>
    {{/Exemple (furigana)}}
    {{#Exemple (furigana)}}
    <div class="expression jp">{{furigana:Exemple (furigana)}}</div>
    {{/Exemple (furigana)}}

</div>

<hr id=answer>

<div class="verso">
    <div class="fr">{{Exemple (fr)}}</div>
    {{Exemple (audio)}}
</div>

Résultat

anki-etude-cas-carte-exemple.gif

Saisie de la réponse

Une option intéressante est de pouvoir saisir la réponse au clavier plutôt que de deviner le mot depuis la carte “Rappeler”. Pour cela on va créer un champ “Saisir Rappeler” qui activera cette option. Ensuite on va modifier légèrement les modèles de la carte “Rappeler” pour activer le mode saisie.

Champ

Untitled

Recto

Dans le recto on ajoute un <div> pour inclure la réponse :

{{^Masquer Rappeler}}
<div class="recto">
 <div class="signification">{{Signification}}</div>

{{#Saisir Rappeler}}
 <div class="type-response">
 {{type:Expression}}
 </div>
{{/Saisir Rappeler}}

</div>
{{/Masquer Rappeler}}

Verso

Le modèle Verso n’a pas besoin d’être modifié.

Styles

On va ajouter une petite marge en haut et en bas de la zone de saisie, ainsi que du résultat.

.type-response {
 margin: 8px 0px; 
}

code#typeans { 
 display: block;
 margin: 12px 0px; 
}

Résultat

anki-etude-cas-saisir-rappeler.gif

Récapitulatif des modèles

Carte Reconnaitre

Recto

<div class="recto">
 {{^Lecture}}
 <div class="expression jp">{{Expression}}</div>
 {{/Lecture}}
 {{#Lecture}}
  {{#Masquer furigana}}
  <div class="expression jp">{{kanji:Lecture}}</div>
  {{/Masquer furigana}}
  {{^Masquer furigana}}
  <div class="expression hover-furigana jp">{{furigana:Lecture}}</div>
  {{/Masquer furigana}}
 {{/Lecture}}

 {{#Image}}
 <div class="image">{{Image}}</div>
 {{/Image}}

 {{#Exemple}}
 <div class="exemple">
 {{^Exemple (furigana)}}
 <div class="jp">{{Exemple}}</div>
 {{/Exemple (furigana)}}
 {{#Exemple (furigana)}}
  {{#Masquer furigana}}
  <div class="jp">{{kanji:Exemple (furigana)}}</div>
  {{/Masquer furigana}}
  {{^Masquer furigana}}
  <div class="hover-furigana jp">{{furigana:Exemple (furigana)}}</div>
  {{/Masquer furigana}}
 {{/Exemple (furigana)}}
 </exemple>
 {{/Exemple}}

</div>

Verso

<div class="recto">
 {{^Lecture}}
 <div class="expression jp">{{Expression}}</div>
 {{/Lecture}}
 {{#Lecture}}
  <div class="expression jp">{{furigana:Lecture}}</div>
 {{/Lecture}}

</div>
{{#Audio}}
<div class="audio">{{Audio}}</div>
{{/Audio}}

<hr id=answer>

<div class="verso">
 <div class="signification">{{Signification}}</div>

 {{#Image}}
 <div class="image">{{Image}}</div>
 {{/Image}}

 {{#Exemple}}
 <div class="exemple">
    {{^Exemple (furigana)}}
    <div class="jp">{{Exemple}}</div>
    {{/Exemple (furigana)}}
    {{#Exemple (furigana)}}
    <div class="jp">{{furigana:Exemple (furigana)}}</div>
    {{/Exemple (furigana)}}
    <div class="fr">{{Exemple (fr)}}</div>
    {{Exemple (audio)}}
 </div>
 {{/Exemple}}

 {{#Notes}}
 <div class="notes">
    <div class="libelle">Notes :</div>
    <div class="contenu">{{Notes}}</div>
 </div>
 {{/Notes}}

 {{#Tags}}
 <div class="tags">
    <span class="libelle">Etiquettes :</span>
    <span class="contenu">{{Tags}}</span>
 </div>
 {{/Tags}}

</div>

Carte Rappeler

Recto

{{^Masquer Rappeler}}
<div class="recto">
 <div class="signification">{{Signification}}</div>

{{#Saisir Rappeler}}
 <div class="type-response">
 {{type:Expression}}
 </div>
{{/Saisir Rappeler}}

</div>
{{/Masquer Rappeler}}

Verso

{{FrontSide}}

<hr id=answer>

<div class="verso">
 {{^Lecture}}
 <div class="expression jp">{{Expression}}</div>
 {{/Lecture}}
 {{#Lecture}}
  <div class="expression jp">{{furigana:Lecture}}</div>
 {{/Lecture}}
 {{#Audio}}
 <div class="audio">{{Audio}}</div>
 {{/Audio}}

 {{#Image}}
 <div class="image">{{Image}}</div>
 {{/Image}}

 {{#Exemple}}
 <div class="exemple">
    {{^Exemple (furigana)}}
    <div class="jp">{{Exemple}}</div>
    {{/Exemple (furigana)}}
    {{#Exemple (furigana)}}
    <div class="jp">{{furigana:Exemple (furigana)}}</div>
    {{/Exemple (furigana)}}
    <div class="fr">{{Exemple (fr)}}</div>
    {{Exemple (audio)}}
 </div>
 {{/Exemple}}

 {{#Notes}}
 <div class="notes">
    <div class="libelle">Notes :</div>
    <div class="contenu">{{Notes}}</div>
 </div>
 {{/Notes}}

 {{#Tags}}
 <div class="tags">
    <span class="libelle">Etiquettes :</span>
    <span class="contenu">{{Tags}}</span>
 </div>
 {{/Tags}}

</div>

Carte Ecouter

Recto

{{#Afficher Ecouter}}
{{#Audio}}
<div class="recto">
 <div class="audio">{{Audio}}</div>
</div>
{{/Audio}}
{{/Afficher Ecouter}}

Verso

{{FrontSide}}

<hr id=answer>

<div class="verso">
 {{^Lecture}}
 <div class="expression jp">{{Expression}}</div>
 {{/Lecture}}
 {{#Lecture}}
  <div class="expression jp">{{furigana:Lecture}}</div>
 {{/Lecture}}
 <div class="signification">{{Signification}}</div>

 {{#Image}}
 <div class="image">{{Image}}</div>
 {{/Image}}

 {{#Exemple}}
 <div class="exemple">
    {{^Exemple (furigana)}}
    <div class="jp">{{Exemple}}</div>
    {{/Exemple (furigana)}}
    {{#Exemple (furigana)}}
    <div class="jp">{{furigana:Exemple (furigana)}}</div>
    {{/Exemple (furigana)}}
    <div class="fr">{{Exemple (fr)}}</div>
    {{Exemple (audio)}}
 </div>
 {{/Exemple}}

 {{#Notes}}
 <div class="notes">
    <div class="libelle">Notes :</div>
    <div class="contenu">{{Notes}}</div>
 </div>
 {{/Notes}}

 {{#Tags}}
 <div class="tags">
    <span class="libelle">Etiquettes :</span>
    <span class="contenu">{{Tags}}</span>
 </div>
 {{/Tags}}

</div>

Carte Image

Recto

{{#Afficher Image}}
{{#Image}}
<div class="recto">
 <div class="image">{{Image}}</div>
</div>
{{/Image}}
{{/Afficher Image}}

Verso

{{FrontSide}}

<hr id=answer>

<div class="verso">
 {{^Lecture}}
 <div class="expression jp">{{Expression}}</div>
 {{/Lecture}}
 {{#Lecture}}
  <div class="expression jp">{{furigana:Lecture}}</div>
 {{/Lecture}}
 {{#Audio}}
 <div class="audio">{{Audio}}</div>
 {{/Audio}}
 <div class="signification">{{Signification}}</div>
 {{#Audio}}
 <div class="audio">{{Audio}}</div>
 {{/Audio}}

 {{#Exemple}}
 <div class="exemple">
    {{^Exemple (furigana)}}
    <div class="jp">{{Exemple}}</div>
    {{/Exemple (furigana)}}
    {{#Exemple (furigana)}}
    <div class="jp">{{furigana:Exemple (furigana)}}</div>
    {{/Exemple (furigana)}}
    <div class="fr">{{Exemple (fr)}}</div>
    {{Exemple (audio)}}
 </div>
 {{/Exemple}}

 {{#Notes}}
 <div class="notes">
    <div class="libelle">Notes :</div>
    <div class="contenu">{{Notes}}</div>
 </div>
 {{/Notes}}

 {{#Tags}}
 <div class="tags">
    <span class="libelle">Etiquettes :</span>
    <span class="contenu">{{Tags}}</span>
 </div>
 {{/Tags}}

</div>

Carte Exemple

Recto

{{#Afficher Exemple}}
{{#Exemple}}
<div class="recto">
    {{^Exemple (furigana)}}
    <div class="expression jp">{{Exemple}}</div>
    {{/Exemple (furigana)}}
    {{#Exemple (furigana)}}
    <div class="expression hover-furigana jp">{{furigana:Exemple (furigana)}}</div>
    {{/Exemple (furigana)}}

</div>
{{/Exemple}}
{{/Afficher Exemple}}

Verso

<div class="recto">
    {{^Exemple (furigana)}}
    <div class="expression jp">{{Exemple}}</div>
    {{/Exemple (furigana)}}
    {{#Exemple (furigana)}}
    <div class="expression jp">{{furigana:Exemple (furigana)}}</div>
    {{/Exemple (furigana)}}

</div>

<hr id=answer>

<div class="verso">
    <div class="fr">{{Exemple (fr)}}</div>
    {{Exemple (audio)}}
</div>

Styles

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

.win .jp { font-family: "MS Mincho", "ＭＳ 明朝"; }
.mac .jp { font-family: "Hiragino Mincho Pro", "ヒラギノ明朝 Pro"; }
.linux .jp { font-family: "Kochi Mincho", "東風明朝"; }
.mobile .jp { font-family: "Hiragino Mincho ProN"; }

img {
 max-height: 420px;
}

.recto .expression {
  background-color : #EEEEEE;
  padding: 6px;
  font-size: 32px;
}

.recto .signification {
  background-color : #EEEEEE;
  padding: 6px;
  font-size: 32px;
}

.notes {
  text-align: left;
  font-size: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.tags {
  text-align: left;
  font-size: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.libelle {
  font-weight: bold;
}

.exemple {
  background-color : aqua;
  text-align: left;
  font-size: 16px;
  margin: 4px 0px ;
  padding-top: 6px;
  padding-bottom: 6px;
}

.hover-furigana ruby rt {
    opacity: 0;
}
.hover-furigana ruby:hover rt {
    opacity: 1;
}

.type-response {
 margin: 8px 0px; 
}

code#typeans { 
 display: block;
 margin: 12px 0px; 
}

Article précédent Article suivant