Inhaltsverzeichnisse
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)
Vorlage für HTML-Seite mit Formeln und Inhaltsverzeichnis
Die Vorlage enthält zu Beginn als Script den Link zur Übersetzung der Tex-Formeln bei MathJax.
Danach wird der Bereich für das Inhaltsverzeichnis festgelegt und mit der Id "toc" versehen.
Die Vorlage 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.
<div id="toc"> <h3>Inhaltsverzeichnis</h3> </div> <hr/><div id="contents">
Inhalt
</div><script>
var toc = ""; var level = 0;
document.getElementById("contents").innerHTML = document.getElementById("contents").innerHTML.replace( /<h([\d])>([^<]+)<\/h([\d])>/gi, function (str, openLevel, titleText, closeLevel) { if (openLevel != closeLevel) { return str; }
if (openLevel > level) { toc += (new Array(openLevel - level + 1)).join("<ul>"); } else if (openLevel < level) { toc += (new Array(level - openLevel + 1)).join("</ul>"); }
level = parseInt(openLevel);
//Hinzufügen eines Namens in den Überschriften-Tags var anchor = titleText.replace(/ /g, "_"); toc += "<li><a href=\"#" + anchor + "\">" + titleText + "</a></li>";
return "<h" + openLevel + "><a name=\"" + anchor + "\">" + titleText + "</a></h" + closeLevel + ">"; } );
//Ende der Liste if (level) { toc += (new Array(level + 1)).join("</ul>"); }
//Inhaltsverzeichnis wird geschrieben document.getElementById("toc").innerHTML += toc;
</script>