Kanji Draw – Anki Note Template

Interaktives Anki-Template zum Erlernen der japanischen Kanji-Schriftzeichen — mit echter Strich-Erkennung, deutschen Eselsbrücken und vollständiger Plattform-Kompatibilität.

Vorschau

<table align="center"> <tr> <td align="center"><img src="Media/demos/demo-guided.gif" width="200" alt="Geführter Modus – Strich für Strich"><br>_{✍️ Geführter Modus}</td> <td align="center"><img src="Media/demos/demo-freehand.gif" width="200" alt="Freihand-Modus mit Bewertung"><br>_{🖊️ Freihand-Modus}</td> <td align="center"><img src="Media/demos/demo-appearance.gif" width="200" alt="Erscheinungsbild-Optionen"><br>_{🎨 Erscheinungsbild}</td> </tr> <tr> <td align="center"><img src="Media/demos/demo-info.gif" width="200" alt="Info & Merkhilfe Modal"><br>_{📖 Info-Modal}</td> <td align="center"><img src="Media/demos/demo-settings.gif" width="200" alt="Einstellungen"><br>_{⚙️ Einstellungen}</td> <td align="center"><img src="Media/demos/demo-gallery.gif" width="200" alt="Screenshot-Galerie"><br>_{🖼️ Galerie}</td> </tr> </table>

Inhaltsverzeichnis

• Überblick
• Kartentypen
• Zeichenmodi
• Bewertungsalgorithmus
• Einstellungen
• Info-Modal
• Plattform-Kompatibilität
• Notiztyp-Felder
• Installation
• Add-on: Kanji Draw Persistence
• Dateistruktur
• Technische Details
• Datenquellen & Attribution
• Lizenz

Überblick

Kanji Draw ist ein vollständig selbst enthaltenes Anki-Template — kein Build-Schritt, keine externen Dienste, vollständig offline-fähig. Es erzeugt zwei Kartentypen aus einem einzigen Notiztyp und bietet:

• Echte Strich-Erkennung auf Basis mathematischer Kurvenähnlichkeit (diskrete Fréchet-Distanz)
• Zwei Lernmodi: Strich für Strich geführt oder freies Zeichnen des gesamten Kanji
• Anpassbares Erscheinungsbild: 4 Stift-Stile, 6 Akzentfarben, 6 Primärfarbthemen, Dark/Light Mode
• Umfassendes Info-Modal: Radikalbaum, Eselsbrücke, Wortbeispiele, Lesungen, externe Links
• Vollständige Plattformunterstützung: Desktop, Android (inkl. S-Pen), iOS (inkl. Apple Pencil), Web

Kartentypen

Die Kartentypen können unabhängig voneinander konfiguriert werden. Card 1 bietet den vollen Einstellungsumfang (Zeichenmodus, Genauigkeit usw.); Card 2 beschränkt sich auf Darstellungsoptionen für das angezeigte Kanji (Strich-Nummern, Strich-Darstellung) sowie die gemeinsamen Erscheinungsbild-Einstellungen.

Zeichenmodi

✍️ Geführter Modus

Der nächste Strich wird hervorgehoben — sobald er korrekt gezeichnet wurde, erscheint automatisch der folgende. Fehlerhafte Striche werden sofort farblich markiert.

• Nach 3 Fehlversuchen erscheint automatisch ein Zeichenhinweis (abschaltbar)
• Überspringen-Funktion für den aktuellen Strich
• Optionale Abschluss-Animation (Glow + Sparkle)

🖊️ Freihand-Modus

Das gesamte Kanji wird in einem Zug frei gezeichnet — ohne Reihenfolgevorgabe. Nach dem Aufdecken der Rückseite wird jeder Strich automatisch dem passenden Referenzstrich zugeordnet und bewertet.

• Ungarischer Algorithmus (O(n³)) für optimale Strich-Zuordnung
• Jeder zugeordnete Strich wird einzeln bewertet
• Fehlende, überzählige und falsch gezogene Striche werden gesondert gekennzeichnet
• Rückgängig-Funktion für den letzten Strich

Bewertungsalgorithmus

Jeder Strich wird auf Basis von vier Komponenten bewertet:

Vor der Bewertung durchläuft jeder Strich drei Hard Gates:

• Längenverhältnis: 40–250 % der Referenzlänge (verhindert zu kurze oder zu lange Striche)
• Richtungsprüfung: 4-Sektor-Winkelvergleich (erkennt gespiegelte oder umgekehrte Striche)
• Deckel-Multiplikator: 1,4–1,6× (verhindert Dominanz einzelner Komponenten)

Alle Striche werden auf 64 Abtastpunkte normalisiert (Catmull-Rom-Resampling). Die Fréchet-Distanz wird per iterativem Dynamic Programming (O(n²)) berechnet.

Strich-Genauigkeit

Die drei Stufen skalieren alle Schwellenwerte gleichmäßig:

Fehler-Farbcodierung (Rückseite)

Einstellungen

Alle Optionen sind über das ⚙️ Zahnrad-Menü erreichbar. Einstellungen werden pro Kartentyp (Card 1 / Card 2) unabhängig gespeichert.

Zeichnen & Bewertung

Rückseiten-Darstellung

Hilfslinien-Raster

Erscheinungsbild

Stift-Stile im Detail

Info-Modal

Das Info-Modal (📖-Schaltfläche auf der Rückseite) zeigt alle verfügbaren Informationen zu einem Kanji auf einen Blick:

Plattform-Kompatibilität

Gesten-Hooks (AnkiDroid & AnkiMobile)

Folgende JavaScript-Funktionen können Geräte-Gesten zugewiesen werden:

AnkiDroid: Einstellungen → Gesten → JavaScript-Funktion 1/2/3
AnkiMobile: Einstellungen → Gesten → Eigene Aktion → JavaScript ausführen

Hinweise zu AnkiDroid

• localStorage kann ab AnkiDroid 2.21+ explizit aktiviert werden:
  Einstellungen → Erweitert → localStorage aktivieren
• Im Legacy-Lernmodus kann es zu Konflikten mit Wisch-Gesten kommen. Das Template zeigt in diesem Fall einen Hinweis an. Der neue Lernmodus ist empfohlen.

Notiztyp-Felder

Die Felder Kanji, Bedeutung und SVGPfade sind für die Grundfunktion zwingend erforderlich. Alle anderen Felder sind optional und werden im Info-Modal nur angezeigt, wenn sie befüllt sind.

Installation

1. Notiztyp anlegen

1. In Anki: Werkzeuge → Notiztypen verwalten → Hinzufügen
2. Notiztyp mit den oben genannten Feldern erstellen
3. Kartenvorlagen bearbeiten — zwei Kartentypen anlegen:

2. Inhalt übernehmen

Den Inhalt der jeweiligen Datei vollständig in das entsprechende Eingabefeld des Template-Editors kopieren.

Add-on: Kanji Draw Persistence

Auf Anki Desktop verwendet Qt WebEngine ein Off-The-Record-Profil — Cookies und localStorage werden bei jedem Neustart gelöscht. Das mitgelieferte Add-on löst dieses Problem.

Funktion

• Fängt Einstellungs-Updates aus dem Template ab (pycmd('kdp:{...}'))
• Speichert alle Einstellungen in user_files/settings.json (atomarer Schreibvorgang)
• Stellt die Einstellungen beim nächsten Kartenaufruf automatisch wieder her
• Arbeitet transparent im Hintergrund — keine Benutzeroberfläche notwendig

Installation

Option A – AnkiWeb (empfohlen):
In Anki: Werkzeuge → Erweiterungen → Erweiterungen herunterladen → Code eingeben:

905251277

Option B – Manuell:
Den Ordner Addon/ in das Anki-Add-on-Verzeichnis kopieren und Anki neu starten:

Das Add-on ist optional. Ohne Add-on werden Einstellungen nur für die aktuelle Sitzung gespeichert und nach einem Neustart auf die Standardwerte zurückgesetzt. Auf AnkiDroid und AnkiMobile ist kein Add-on erforderlich.

Dateistruktur

kanji-draw-anki/
├── Templates/
│   ├── Card-1/
│   │   ├── FrontTemplate.html    ← Zeichenfläche + Strich-Erkennung + Einstellungs-UI
│   │   └── BackTemplate.html     ← Ergebnis + Vergleichsansicht + Info-Modal
│   ├── Card-2/
│   │   ├── FrontTemplate.html    ← Zeichenfläche + Strich-Erkennung + Einstellungs-UI
│   │   └── BackTemplate.html     ← Strichreihenfolge + Ergebnis + Info-Modal
│   └── Styling.css               ← Gemeinsames Stylesheet (Themes, Responsive, Animationen)
│
├── Addon/
│   ├── __init__.py               ← Einstellungspersistenz für Anki Desktop
│   └── manifest.json             ← Add-on-Metadaten
│
├── Tests/
│   ├── js/                       ← JavaScript-Unit-Tests (Node.js, 11 Dateien, 848 Tests)
│   └── anki_addon_stress_helper/ ← Live-Stresstests über AnkiConnect
│
├── Media/
│   └── demos/                    ← Demo-GIFs für README
│
└── README.md

Technische Details

Kein Build-Schritt, keine Abhängigkeiten

Reines HTML/CSS/JavaScript — direkt in Anki einsetzbar, keine CDN-Abhängigkeiten, vollständig offline-fähig.

Algorithmen

Rendering & Animationen

• SVG-basierte Zeichenfläche (109 × 109 Einheiten) mit präzisen <path>-Elementen
• Web Animations API für Abschluss-Animationen (kein permanenter requestAnimationFrame-Loop)
• Anti-Flicker-System: Strichfarben werden per Inline-<style> gerendert, bevor Ankis FrontSide-Injection ausgeführt wird — verhindert das kurze Aufblitzen falscher Farben
• GPU-Beförderung: will-change: transform auf animierten Elementen; separate Lite-SVG-Filter für WebKit/iOS

Einstellungspersistenz (Fallback-Kette)

window._ks (Arbeitsspeicher)
    → Cookie (_k=…, max-age 1 Jahr)
        → localStorage
            → Add-on JSON (Anki Desktop)

Sicherheit

• Kein eval(), keine dynamische Skripterstellung
• JSON-Escaping (</ → <\/) verhindert <script>-Injection über das Add-on
• Keine externen Requests — CSP-freundlich

Datenquellen & Attribution

• Strichpfade (SVG): KanjiVG von Ulrich Apel — lizenziert unter CC BY-SA 3.0
• Kanji-Reihenfolge, Schlüsselwörter & Primitivnamen: Entnommen aus James W. Heisig / Robert Rauther, „Die Kanji lernen und behalten" (Klostermann-Verlag). Lernreihenfolge, deutsche Schlüsselwörter und Primitivbezeichnungen sind geistiges Eigentum der Autoren bzw. des Verlags.
• SVG-Zerlegung nach Primitiven: Extrahiert aus Migaku Kanji God — lizenziert unter GPL v3
• Farbige Strichreihenfolge: Inspiriert von Kanji Colorizer (Code: AGPL v3, SVGs: CC BY-SA 3.0)
• Eselsbrücken & Merkhilfen: Erstellt von PawMethod mit KI-Unterstützung. Konzept, Prompt-Design, Kuration und Redaktion: PawMethod.

Lizenz

Der Quellcode dieses Projekts (Templates, Add-on, Algorithmen) steht unter der MIT-Lizenz.

Drittinhalte und eingebettete Daten behalten ihre jeweilige Lizenz:

Vollständiger Lizenztext: LICENSE