Hier am Beispiel von drei Leveln
Bauprinzip
Das Skript mit der Anzeige bzw. Ausblende-Logik liegt innerhalb der inline SVG-Datei.
Von Außen wird das aktuelle Level als Parameter einer in diesem SVG internen Skript liegenden Funktion übergeben.
Wie geht das?
Lies den Seitenquelltext der inline-SVG-Grafik dieser Beispielseite mit Strg+U
Wofür?
Mit dieser Technik ließen sich prinzipiell bspw. Lernlandkarten oder
andere selbst gestaltbare Gamification-Elemente in Moodle-Kurse einbauen.
Schönere und komplexere SVG-Grafik nutzen?
Diese kann z.B. vorher mit Inkscape erstellt werden.
Der Skript-Abschnitt innerhalb der SVG-Grafik
muss dann mit einem Texteditor dort ergänzt werden.
Anschließend muss jedem Zeichnungsobjekt die passende
Klasse class="eins", ...
je nach Anzahl der gewünschten Level
ergänzt werden,
sowie bei allen
von Beginn an auszublendenden das Attribut
visibility="hidden".
Ausprobieren?
Auskommentieren z.B. des dritten
Skript-Schnipsels mit
vorangestelltem <!-- und
angehängtem --> und
Neuladen einer lokal gespeicherten Kopie dieser Seite
sollte nur noch die Level 1+2 anzeigen
In Moodle einsetzen?
An Stelle der hier auf dieser Testseite eingesetzten ready Funktion
den jQuery-Nachlade-Schnipsel von
quizdidaktik.de/indilearning2021-moodle-hacks
Abschnitt "Inhalte oder Skripte verzögert nachladen" einsetzen und
jeden Skript-Schnipsel in ein eigenes Textfeld verpacken.
Über die jeweilige Zeitverzögerung in der setTimeout Funktion kann die Ladereihenfolge nötigenfalls nachjustiert werden.
erster Skript-Schnipsel über bedingte Verfügbarkeit
zweiter Skript-Schnipsel über bedingte Verfügbarkeit
dritter Skript-Schnipsel über bedingte Verfügbarkeit