Lerno

Fonctionnalités

• Organisation en groupes, jeux et cartes
• Sessions de révision automatiques et configurables
• Répétition espacée simplifiée (3 niveaux, gestion du retard)
• Cartes enrichies : balisage léger, médias, mathématiques, diagrammes UML, HTML, SVG
• Gestion des contenus : inversion, duplication, fusion, partage…
• Interface intuitive et multilingue (français, espéranto et anglais)

Données

Les données sont stockées dans le navigateur utilisé (via IndexedDB). Elles peuvent être gérées depuis l’application.

Création des jeux et des cartes

Jeu

Un jeu contient des cartes. Lancer une session relative à un jeu permet de réviser aléatoirement les cartes à revoir de ce jeu.

Les jeux peuvent être groupés, grâce au champ « Groupe ». Un groupe permet de catégoriser des jeux et de lancer une session sur tous les jeux du groupe.

Grâce au champ « Style global des cartes », présent lors de la création ou de l’édition d’un jeu, les cartes d’un jeu sont personnalisables avec des règles CSS. Une règle CSS se compose d’un sélecteur (élément devant être stylé) et de paires clé:valeur, comme ceci :

sélecteurA {clé1: valeur1; clé2: valeur2; …}
sélecteurB {clé1: valeur1; clé2: valeur2; …}

/* ceci centre et agrandit le texte du recto et du verso */
.card {text-align: center; font-size: 1.3em;}

Voici les sélecteurs importants présents :

• .card : recto et verso de la carte
• .front : recto de la carte
• .back : verso de la carte

Le balisage léger génère du HTML ayant ces sélecteurs :

• .cloze : contenu à deviner
• strong : gras
• em : italique
• sub : indice
• sup : exposant
• mark : surligné
• code : code
• .big : grand
• a : lien
• img : image
• audio : audio
• video : vidéo
• .katex : mathématiques
• .katex-display : maths en bloc, avec .katex en enfant
• .nomnoml : diagramme UML

Le HTML permet d’ajouter des sélecteurs pour la mise en forme du contenu.

Carte

L’écriture des cartes se fait en utilisant du texte brut, un balisage léger ou du HTML. Tout cela peut être mélangé au sein d’une même face. Malgrè toutes les possibilités offertes, il faut garder à l’esprit que le but est de mémoriser, et non de perdre du temps à mettre en forme plus que nécessaire.

Balisage léger

Le balisage met en forme rapidement sans connaissance du HTML. Lerno le convertit en HTML. C’est le moyen le plus simple et léger de créer des cartes.

• Gras : **texte gras**. Astérisques.
• Italique : //texte en italique//. Barres obliques.
• Indice : ,,indice,,. Virgules.
• Exposant : ^^exposant^^. Accents circonflexes.
• Surligné : ||texte surligné||. Barres verticales.
• Trou : L’humain possède ??? os. 3 points d’interrogation.
• Texte plus grand : ++grand++. 2 plus.
• Lien : ((url)) ou ((url|texte du lien)). Paires de parenthèses, ouvrantes puis fermantes, et barre oblique pour séparer le lien du texte à afficher.
• Média : ((url)) ou ((url|largeur en pixels)). Paires de parenthèses, ouvrantes puis fermantes, et barre oblique pour séparer le média de sa largeur. Exemple : ((https://diatomee.name/code/lerno/welcome.svg|500)). La fin de l’URL doit se terminer par une de ces extensions, pour ne pas considérer le média comme un simple lien :
  • Image : svg, jpg, jpeg, png, gif, webp, avif, tiff, bmp, heic,
  • Audio : mp3, wav, ogg, oga, m4a, aac, flac,
  • Vidéo : mp4, webm, mov, avi, mkv, flv.
• Mathématiques : [[formule]] ou [[[formule]]]. Paires de 2 crochets, ou 3 pour un affichage en bloc. Lerno utilise KaTeX, une superbe bibliothèque de composition de mathématiques. Les formules s’écrivent en LaTeX.
• Diagrammes UML : {{{code}}}. Paires de 3 accolades. Lerno utilise Nomnoml, un très bon outil pour générer des diagrammes UML à partir de texte.

HTML

Comme il est impossible de tout faire avec le balisage léger, le HTML peut parfois servir. Voici les principaux cas d’usage du HTML.

• Tenter d’éviter un retour à la ligne pour des mots en chinois, japonais ou coréen : On peut les mettre entre balises cjk. Exemple : <cjk>水曜日</cjk>.
• Insérer des images vectorielles avec du code SVG.

Pour aller plus loin en HTML, voici un guide rapide et pratique.

Le HTML rendu par Lerno est purifié de tout code potentiellement dangereux, grâce à DOMPurify, qui semble extrêmement fiable. Il enlève notamment le JavaScript et les <iframe>. Cela permet le partage de jeux entre utilisateurs, sans faille de sécurité à l’import.

Révision des cartes

Lerno propose d’évaluer chaque carte.

• Facile : La réponse est venue rapidement.
• Moyen : La réponse a demandé un temps de réflexion.
• Difficile : La bonne réponse n’a pas été trouvée.

Cette évaluation influence l’intervalle de répétition de la carte. Si une carte est revue en retard (après sa date de prochaine revue) et qu’elle est évaluée comme non difficile, alors le nouvel intervalle est un peu plus grand. Pour une meilleure rétention de l’information, les premières revues sont peu espacées. L’intervalle maximal est d’une année.

Installer Lerno

Le code source de Lerno est téléchargeable (code source). En ayant Node.js installé, il faut ouvrir un terminal à la racine du dossier et lancer :

node gen.mjs

Un dossier public sera généré. Il contiendra l’application utilisable. Ce dossier peut être mis n’importe où dans l’ordinateur. Il suffit ensuite d’ouvrir index.html dans un navigateur et de marquer la page (favoris) pour y accéder facilement.

Installer Lerno permet d’utiliser des médias locaux dans les cartes et de ne pas recevoir les éventuelles mises à jour du logiciel, ce qui peut être pratique s’il te convient en l’état.

État du projet

Version de test. Pour toutes suggestions ou problèmes, écris-moi.