Bei einem Wiki erstellt Moodle automatisch ein Inhaltsverzeichnis, was didaktisch sehr praktisch ist, um zum einen einen Überblick über die einzelnen Inhalte zu gewinnen, aber auch um diese schnell gesondert anzeigen zu können.
Will man unabhängig von Mebis ein Inhaltsverzeichnis für ein HTML-Dokument anzeigen kann es entweder extra erstellt werden, indem man zu Beginn des Dokuments durch Anchor einen Link auf mit Hashtag beginnende Ids der Überschriften setzt oder z.B mit JavaScript den Vorgang automatisiert.
Will man dabei keine weitere JavaScript-Bibliothek wie JQuery, die Datenbankabfragen ermöglicht, einbinden müssen, bietet sich das Durchsuchen der HTML-Seite nach den unterschiedlichen Überschriften-Tags als Lösung an (Siehe die folgende Vorlage!).
Internet-Forum mit Toc-Lösungen
Beschreibung einer Toc-Lösung
Beispiel bei CodePen einer Toc-Lösung (mit Ausgabe in einer Console)
Damit Umlaute am Ipad richtig angezeigt werden, muss die HTML-Seite die HTML-Version <!DOCTYPE html> und im Head in einem Metha-Tag <meta charset="utf-8"> den Zeichensatz festlegen, der eigentlich durch die Versionsbezeichnung schon festgelegt sein sollte. (ist wohl ein Apple-Problem!)
Zudem enthält die Vorlage im Head als Script den Link zur Übersetzung der Tex-Formeln bei MathJax.
Der Body beginnt mit dem Bereich für das Inhaltsverzeichnis , der mit der Id "toc" versehen ist, und wird gefolgt für einen Bereich mit den Inhalten, der mit der id "contensts" versehen ist.
Die Vorlage basiert auf den Beispiel bei CodePen und sucht nach dem eingefügten Inhalt in dem Script für das Inhaltsverzeichnis im Bereich mit der Id "contents" nach Überschriften und listet diese mit Hilfe eines Arrays (Variable, die aus verschiedenen Variablen besteht) im Bereich mit der Id "toc" als Liste mit Links auf.
Der Kommentar //Inhalt muss durch den Inhalt der HTML-Seite für die das Inhaltsverzeichnis hinzugefügt werden soll, ersetzt werden.
Wird bei replace das Ergebnis der Suche durch eine Funktion ersetzt, werden durch runde Klammern gekennzeichnete Teile der Suche automatisch Variablen zugeordnet.
Die Variable str enthält den gesamten Überschriften-Tag.
Die Variablen openLevel bzw. closeLevel enthalten lediglich die Nummer der Überschriften-Tags.
Die Variable titleText enthält den Text der Überschrift.
In der Funktion von replace werden zu den entsprechenden Überschriften-Tags durch Fallunterscheidungen je nach Ordnung (level) Arrays für verschiedene Listen-Ebenen (ul) bzw. Aufzählungs-Ebenen (ol) aufgefüllt, um damit das Inhaltsverzeichnis mit einer Anweisung am Ende des Scripts mit den entsprechenden Links schreiben zu können.
Anmerkung: Ist bei if die Bedingung lediglich eine Variable, ist die Bedingung erfüllt, wenn die Variable existiert.
Als Kennzeichnung des Ziels für die Links zu den Überschriften bekommen diese eine durch eine Raute gekennzeichneten Namen.
Anmerkung: Das Script für das Inhaltsverzeichnis muss am Ende stehen.