In diesem Tutorial lernen wir, wie man Anki-Karten effektiv zum Lernen von Mathematik einsetzt. Dafür fügen wir etwas Magie zu unseren Karteikarten hinzu, indem wir MathJax und LaTeX nutzen.

Dieser Ansatz hat die folgenden Vorteile gegenüber Ankis eingebauten LaTeX-Support sowie anderer Lösungen:

  • Auflösungsunabhängige Darstellung (deine Gleichungen werden auf jedem Gerät scharf aussehen, sei es dein Handy oder Laptop)
  • Karten bearbeiten benötigt keine zusätzliche Software neben Anki (sogar AnkiWeb funktioniert)
  • Funktioniert problemlos in Anki-Desktop, AnkiWeb und AnkiDroid (sowie wahrscheinlich auch iOS, aber dort habe ich es nicht getestet)
  • Benötigt keinen JS Booster addon
  • Relative einfach aufzusetzen

Und falls du dich wunderst: es funktioniert auch offline auf AnkiDroid, nachdem du deine Karten einmal mit einer aktiven Internetverbindung synchronisiert und angesehen hast. Der MathJax-Code wird dann von AnkiDroid gecacht.

Voraussetzungen

Dieses Tutorial geht davon aus, dass du bereits mit Anki vertraut bist und schon einmal Kartenvorlagen bearbeitet hast. Falls nicht, schau dir das Anki-Handbuch, insbesonder den Abschnitt Cards and Templates an. Ein wenig Kenntniss von HTML und JavaScript mag hilfreich sein, ist aber nicht erforderlich. Für das letzte bisschen an Finetuning kannst du dir außerdem Anki 2: Styling Cards anschauen. Aber jetzt zum interessanten Teil.

MathJax in Anki integrieren

Um MathJax in unseren Karten nutzen zu können, müssen wir etwas Boilerplate-Code hinzufügen, den ich im Detail erklären werde.

Zuerst fügen wir das Script zur Konfiguration von MathJax hinzu. Füge den Code am Ende der Vorlage der Vorder- und der Rückseite ein. Der Kartentyp ist egal, aber ich persönlich bevorzuge Cloze Cards für Mathematik. Außerdem empfehle ich, eine der Standardkartentypen zu klonen, statt sie direkt zu modifizieren.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<script type="text/x-mathjax-config">
  MathJax.Hub.processSectionDelay = 0;
  MathJax.Hub.Config({
    messageStyle: 'none',
    showProcessingMessages: false,
    tex2jax: {
      inlineMath: [['$', '$']],
      displayMath: [['$$', '$$']],
      processEscapes: true
    }
  });
</script>
Listing 1. Eine MathJax-Konfiguration von Dude_From_Canada, Reddit.

Diese Konfiguration setzt die Verarbeitungsverzögerung auf Null, sodass MathJax direkt nach dem Laden anfängt, deine rohen Eingaben zu übersetzen. Als nächstes sagen wir MathJax, dass es die Fehlermeldungen verstecken soll (optional). Weiterhin ändern wir die Symbol zum Definieren der mathematischen Ausdrücke zu $ für Inline-Gleichungen und $$ für Block-Gleichungen. Für meine eigenen Karten habe ich bisher nur Inline-Gleichungen benutzt, aber am besten experimentierst du selbst, welche am ehesten passen.

Nun laden wir MathJax selbst. Dazu fügen wir folgenden Code am Ende der Vorlage der Vorder- und Rückseite ein.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<script type="text/javascript">
  (function () {
    if (window.MathJax != null) {
      var card = document.querySelector(".card");
      MathJax.Hub.Queue(["Typeset", MathJax.Hub, card]);
      return;
    }
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src =
      "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML";
    document.body.appendChild(script);
  })();
</script>
Listing 2. Eine Anki-Vorlage zum Laden von MathJax.

Zunächst prüft dies, ob MathJax bereits geladen wurde. Das ist notwendig, um zu verhindern, dass MathJax doppelt geladen wird, wenn man mehr als eine Karte hintereinander prüft. Falls MathJax erkannt wurde, sagen wir ihm, die aktuelle Karte zu verarbeiten. Ansonsten würden wir rohen LaTeX-Code beim Prüfen unserer Karten sehen.

Falls MathJax aber noch nicht geladen wurde, erstellen wir ein Script-Tag zum Laden des MathJax-Codes von cdnjs. In diesem Fall wird MathJax automatisch die Karte verarbeiten, sobald es fertig geladen wurde. Der Query-Parameter am Ende der Skriptquelle (?config=TeX-MML-AM_CHTML) gibt an, dass MathJax mit Unterstützung für Eingaben in den Formaten TeX/LateX, MathML und AsciiMath sowie Ausgaben im Common-HTML-Format geladen werden soll. Achtung: Anki-Desktop unterstützt Common-HTML nicht vollständig als Ausgabe. Wer also Anki-Desktop zum Prüfen der Karten nutzt, sollte stattdessen zu ?config=TeX-MML-AM_SVG greifen, um SVG als Ausgabe zu erhalten. Dieser Modus funktioniert auch in AnkiDroid und AnkiWeb, benötigt aber etwas mehr Zeit zum Verarbeiten als CHTML.

Karten schreiben

Jetzt wo der umständliche Teil abgeschlossen ist, können wir mit dem spaßigen Teil beginnen. Für eine echte Vorführung habe ich den gleichen MathJax-Code, den wir für unsere Vorlagen benutzt haben, in diesem Tutorial eingebettet. Wir können einfache Gleichungen wie x2=4x^2 = 4 ($x^2 = 4$) schreiben, aber kompliziertere sind viel interessanter.

Wir können Summenformeln ausdrücken:

∑n=0∞an=5\sum \limits_{n=0}^\infty a_n = 5 (1)

$$\sum \limits_{n=0}^\infty a_n$$
Listing 3. Eine Summenformel in LaTeX.

Und wir können Schlussfolgerungen schreiben:

∀n∈N:n−5≥0→n−4≥0\forall n \in \mathbb{N}: n - 5 \ge 0 \rightarrow n - 4 \ge 0 (2)

$$\forall n \in \mathbb{N}: n - 5 \ge 0 \rightarrow n - 4 \ge 0$$
Listing 4. Eine Schlussfolgerung in LaTeX.

Dazu verpacken wir unsere Gleichungen in $ für Inline-Gleichungen und $$ für Block-Gleichungen. Beim Prüfen der Karten verwandelt MathJax diese rohen Eingaben in wunderschöne Mathematik:

Ein Screenshot, der eine gerenderte Gleichung in Anki zeigt.

Abbildung 1. Ein Screenshot, der eine gerenderte Gleichung in Anki zeigt.

Weiterführende Literatur