Digitale Lernlandkarten in ILIAS umsetzen

In dieser Anleitung werden verschiedene Möglichkeiten gezeigt, wie man in ILIAS eine “digitale Lernlandkarte” umsetzen kann, in der verschiedene Inhalte direkt über Klick auf die Karte abgerufen werden können. Mögliche Einsatzszenarien:

• die “Lernlandschaft” einer Lehrveranstaltung grafisch repräsentieren

• einen systematischen Überblick über die Kompetenzen geben, die im Laufe einer bestimmten Lernphase erworben werden sollen

• fachliche Strukturen und Zusammenhänge übersichtlich darstellen

• Lernpfade grafisch darstellen

• einen Projektablaufplan abbilden

Übersicht über die 4 Möglichkeiten

Platzierung im Kurs

Meist bietet es sich aufgrund der Überblicksfunktion von Lernlandkarten an, eine solche direkt auf der Hauptseite eines Kurses (oder einer Gruppe etc.) darzustellen, oder allenfalls in einem Fach eines Akkordeons. Dies bedeutet, dass man sie im Modus “Seite bearbeiten”, also im Seiteneditor, erstellt.

Es ist aber auch möglich, die Lernlandkarte als Ressource in einem ILIAS-Objekt einzubinden, z.B. in einer Inhaltsseite, oder als H5P-Objekt.

Die verschiedenen Möglichkeiten werden im folgenden dargestellt.

1. Lernlandkarte als Grafik mit “image map”

Diese Möglichkeit wird in ILIAS wird mit der HTML-Funktion der “image map” umgesetzt, welche erlaubt, in Bildern klickbare Bereiche zu definieren und mit einem Link zu hinterlegen.

Vorgehen

1. Im Inhaltsbereich bzw. in einem ILIAS-Objekt, wo die Lernlandkarte platziert werden soll, mit Seite gestalten den Seiteneditor aufrufen.

2. Am gewünschten Ort das “+”-Symbol anklicken, und im Drop-down-Menu Bild/Audio/Video einfügen wählen.

3. Nun kannst du über Datei wählen deine vorbereitete Grafik (Format .jpg, .png oder .gif) von deinem Computer auswählen, und mit Einfügen bestätigen.
   

   

4. Nun wird die Grafik in ILIAS hochgeladen und im Seiteneditor angezeigt. Klicke das Bild an, sodass es einen grünen Rahmen erhält und bearbeitet werden kann, und wähle links unten Erweiterte Einstellungen.

   

5. Über den Reiter Standardeinstellungen müssen wir nun eine feste Grösse für das Bild einstellen. Du kannst die Breite eingeben (z.B. 1200 px), die Höhe wird automatisch berechnet, wenn Proportionen erhalten aktiviert ist (was zu empfehlen ist). Anschliessend Speichern klicken.
   

   

6. Wähle nun den Reiter Verlinkte Bereiche. Wähle die gewünschte Form des Bereiches und klicke Bereich hinzufügen. Beispiel im Bild ist für “Rechteck”:
   

   

7. Folge den Anweisungen von ILIAS (blauer Kasten) und definiere so den Bereich im Bild, die beim darauf Klicken zu einem Ziel weiterführen soll.

8. Anschliessend kannst du den Link definieren, entweder Link (extern) für Ressourcen ausserhalb von ILIAS, oder Link (intern) für alle Arten von ILIAS-internen Zielen. Mit Speichern abschliessen.
   

   

9. Schritt 8 wiederholen, bis alle Ziele verlinkt sind.

10. Am Schluss über den Reiter Seite zurück zum Seiteneditor, und dann Seite gestalten beenden.

2. Lernlandkarte mittels “Interaktives Bild”

Diese Möglichkeit wird in ILIAS mittels des Inhaltstyps Interaktives Bild des Seiteneditors umgesetzt. Diese bietet die Möglichkeit, zu jedem klickbaren Punkt ein Popup-Fenster einblenden zu lassen. Darin lässt sich entweder ein Bild anzeigen, oder als “Content popup” alles, was man über den Seiteneditor erstellen kann.
Dies erfordert von den UserInnen aber einen Klick mehr, um dann auf eine verlinkte Zielseite zu gelangen.

Vorgehen

Das Vorgehen ist ähnlich wie bei der “image map”-Methode, nur dass man im letzten Schritt nicht bloss einen Link, sondern einen Popup-Inhaltsbereich definieren muss, in den man dann Freitext und den Link eintragen kann.

1. Im Inhaltsbereich bzw. in einem ILIAS-Objekt, wo die Lernlandkarte platziert werden soll, mit Seite gestalten den Seiteneditor aufrufen.

2. Am gewünschten Ort das “+”-Symbol anklicken, und im Drop-down-Menu Interaktives Bild einfügen wählen.

3. Nun kannst du über Datei wählen deine vorbereitete Grafik (Format .jpg, .png oder .gif) von deinem Computer auswählen, und mit Speichern bestätigen.
   ACHTUNG: Die Bildgrösse kann nachträglich nicht mehr geändert werden! Für die Anzeige auf Tablets und Laptops sind Grössen zwischen 800 und 1200 px zu empfehlen.

4. Wir befinden uns nun direkt im Reiter Auslöser. Aber es ist vom Ablauf her einfacher, wenn du nun zuerst in den Reiter Content-Popups wählst, und dort für jeden klickbaren Bereich, den du auf der Karte haben willst, ein Content-Popop erzeugst.
   Bitte beachten: mit Bild für Overlay ist es nicht möglich, auf eine weiterführende Seite zu verlinken.
   Das heisst, für jeden Bereich Popup hinzufügen klicken, seinen Titel eingeben, und Titel abspeichern klicken.
   

   

5. Nun gehen wir zurück zum Reiter Auslöser. Wähle die gewünschte Form des ersten Bereiches. Dann Hinzufügen, und gemäss der Anleitung im blauen Kasten den Bereich definieren, und dem Bereich einen Namen geben. Im Beispiel nun ein kreisrunder Bereich mit dem Titel “Kriegsende”.

6. Dann bei bei “Content-Popup” den passenden der eben erstellten, noch leeren Einträge auswählen. Damit legen wir fest, welches Popup erscheinen soll, wenn man auf den Auslösebereich klickt.

7. Des weiteren kannst du schon definieren, wo das Popup erscheinen soll, und wie gross es sein soll. Dies kann später aber einfach verändert werden, deshalb ist es meist am Einfachsten, die Einstellung zu lassen, so zu Speichern, und die Position und Grösse gleich anschliessend zu definieren.

   

8. Über den jeweiligen Link Position des Popups bearbeiten kann man das Popup nun umherschieben, und dessen Grösse im Eingabefeld Breite, Höhe in Pixel verändern. Am Schluss immer Speichern.

9. Die Schritte 5-8 für alle Auslösebereiche wiederholen.

10. Abschliessend verlassen wir diesen Modus, indem wir auf den Reiter Seite klicken. Nun wird unser Bild im Seiteneditor dargestellt, und darunter je eine Box für jedes Popup. Dort drin kann man mit allen gewohnten Funktionen definieren, was im Popup erscheinen soll. Für unsere Anwendung reicht ein Link (externe URL oder innerhalb von ILIAS) und allenfalls ein kurzer Text. Siehe auch Lerninhalte gestalten: Der Seiteneditor

    

11. Nachdem wir dies für alle Popups getan haben, kehren wir mit Seite gestalten beenden zurück auf die Seite und können uns das Resultat ansehen.
    Mit Klick auf einen Auslösebereich erscheint das Popup, und darin der Link, mit dem wir auf eine beliebige Ressource innerhalb oder ausserhalb von ILIAS verweisen können.

3. Lernlandkarte mit H5P Image Hotspots

Die Erweiterung H5P in ILIAS ermöglichst das Erstellen von interaktiven, multimedialen Lernobjekten. Mindestens zwei der H5P-Objekte eignen sich dafür, Lernlandkarten oder Lernpfade zu realisieren. Das eine heisst Image Hotspots und ist dem eben eingeführten “Interaktiven Bild” des ILIAS-Seiteneditors vergleichbar.

Unterschiede: Das Erstellen erfolgt in H5P auf intuitivere Weise, und die Anzeige wirkt dank Animation moderner. Die Anzeige ist auch bezüglich der Grösse flexibler (“responsive”) und weitgehend unabhängig von der Bildschirmgrösse.

Über diesen Link: H5P Image Hotspots findest du ein Beispiel, wie dies aussehen kann. In unserem Fall würde man in den Popups eben Links darstellen.

Vorgehen

1. Im Inhaltsbereich bzw. in einem ILIAS-Objekt, wo die Lernlandkarte platziert werden soll, mit Seite gestalten den Seiteneditor aufrufen.

2. Am gewünschten Ort das “+”-Symbol anklicken, und im Drop-down-Menu H5P einfügen wählen.

3. Im folgenden Dialog den Eintrag Image Hotspots wählen.
   

   

4. Für die weitere Konfiguration verweisen wir auf die Anleitung H5P-Inhaltstyp: Image Hotspots.

4. Lernlandkarte mit H5P Timeline

Das H5P-Objekt “Timeline” eignet sich in manchen Fällen ebenfalls dafür, eine - in diesem Fall zeitlich geordnete - Lernlandkarte zu erstellen.

Vorgehen

1. Im Inhaltsbereich bzw. in einem ILIAS-Objekt, wo die Lernlandkarte platziert werden soll, mit Seite gestalten den Seiteneditor aufrufen.

2. Am gewünschten Ort das “+”-Symbol anklicken, und im Drop-down-Menu H5P einfügen wählen.

3. Im folgenden Dialog den Eintrag Timeline wählen.

4. Für die weitere Konfiguration verweisen wir auf unsere Anleitung H5P-Inhaltstyp: Timeline.