H5P-Hacking: Mit der Game Map interaktive Online-Karten gestalten

In diesem Blogbeitrag möchte ich beschreiben, wie sich mit dem H5P-Inhaltstyp Game Map interaktive Karten gestalten lassen. Diese sind z.B. jetzt zu Weihnachten oder zum Jahresabschluss gut nutzbar.

Was ist H5P und was ist die Game Map?

H5P ist eine Open Source Software zur Gestaltung interaktiver Online-Bildungsmaterialien. Ich nutze sie als Plugin direkt hier auf meiner WordPress-Website. Aber auch für Moodle und andere Systeme gibt es entsprechende Plugins.

Die Game Map ist ein relativ neuer Inhaltstyp, programmiert von Oliver, mit dem man Spielkarten gestalten kann, auf denen die Nutzenden Schritt für Schritt Stationen bestehen müssen. Man kann festlegen, wann welche Station freigeschalten wird und z.B. auch wieviel Zeit für die Bewältigung einer Aufgabe ist. Es gibt dazu viele der bereits länger existierenden H5P-Interaktionen z.B. Drag and Drop, Multiple Choice und vieles mehr.

Ein Beispiel für eine Game Map kannst Du Dir auf der H5P-Website anschauen.

Von der Spielkarte zur Weihnachtskarte …

Die Idee zur Weihnachtskarten-Gestaltung kam mir, als ich entdeckte, dass man die Pfade, die man bei der Karte von Station zu Station geht, auch erst Schritt für Schritt freischalten lassen kann. So ist es möglich, die Game Map dafür zu nutzen, dass Schritt für Schritt ein Bild aufgezeichnet wird. Wenn man alle Stationen besucht hat, sind alle Pfade sichtbar.

Die interaktive Karte funktioniert also so, dass man Schritt für Schritt den Inhalt der Karte bekommt (z.B. in Form kleiner Videoclips, als Audio oder auch einfach als Text). Während man sich das ansieht, wird Schritt für Schritt das Bild gezeichnet. Am Ende hat man dann eine fertige Karte mit Bild.

Beispiel: Das ist das Haus vom Nikolaus …

Um das Prinzip zu verdeutlichen, habe ich hier mal eine sehr simple Version mit dem ‚Haus vom Nikolaus‘ gestaltet. Die Karte ist fast ohne Inhalt, aber du kannst eben gut ausprobieren, wie das Kartenbild Schritt für Schritt entsteht. Außerdem kannst Du Dir das Beispiel auch herunterladen und als Einstieg für Deine eigene Karte nutzen.

Grundsätzlich kannst Du Karten mit allen möglichen Bildern gestalten. Du musst eben ein Bild finden, das mit einem Strich gezeichnet werden kann.

CSS-Anpassungen

An sich muss man dann ’nur‘ noch die eigentlichen Inhalte der Karte gestalten und ist dann schon fertig. Vielleicht ist Dir aber aufgefallen, dass bei der Game Map bei H5P ganz oben eine Punkteleiste und eine Fahne zum Beenden ist. Und sie hat einen weißen, nicht einen roten (weihnachtlichen) Rand. Das sind beides Anpassungen im Design, die ich auf meiner Website vorgenommen haben und die es ermöglichen, die fertige Karte recht schick auf einer statischen Website ohne SchnickSchnack drumherum zu präsentieren. Unbedingt nötig ist das nicht. Die Karte funktioniert auch ohne diese Anpassungen. Wenn Du es aber machen willst, dann findest Du in diesem Video der OERCamp SummerSchool eine Anleitung dazu.

Die Kurzfassung (für WordPress) lautet:

1. Lade Dir diesen Code als ZIP-Datei herunter und dann als Plugin bei deiner WordPress-Website wieder hoch und aktiviere es.
2. Gehe zum Plugin-Datei-Editor (unter Plugins) und öffne das H5P Mods Plugin. Öffne dort die Datei general.css (unter styles) und lösche den bisherigen Inhalt.
3. Trage dort dann die folgenden Codeschnipsel ein. (Wenn Du eine andere Farbe als das Weihnachtsrot für die Umrandung haben willst, dann musst Du das nur entsprechend anpassen).

.h5p-game-map-container {
    background-color: #d15d43; /* Roter Farbton #d15d43 */
}


.h5p-game-map-toolbar-tool-bar {
    display: none !important;
}

Fertig ist das Raster für Deine Weihnachtskarte!

Meine so gestaltete Weihnachts- bzw. Jahresabschlusskarte findest Du hier.

Viel Freude beim Ansehen und beim selbst Gestalten!

---

Beitrag merken & teilen

Hier kannst Du dir den Link zum Beitrag kopieren - beispielsweise um ihn für Dich zu speichern oder mit anderen zu teilen. Wenn Du den Link in den Suchschlitz im Fediverse einfügst, kannst Du den Beitrag von dort aus kommentieren. Die Kommentare erscheinen dann nach Freigabe hier auf der Website.

Link kopieren