Sie möchten ihr Lernangebot mit Visualisierungen ergänzen und dafür H5P Inhaltstypen nutzen? Im Folgenden finden Sie eine Beschreibung aller H5P Inhaltstypen, bei denen mit Visualisierungen gearbeitet wird.
Diese unterscheiden sich bezüglich ihrer Komplexität und ihrer didaktischen Einsatzmöglichkeiten. Weitere Unterscheidungsmerkmale sind:
- Der Inhaltstyp funktioniert präsentierend (d.h. es werden Inhalte lediglich dargestellt) oder interaktiv (d.h. die Inhalte werden in irgendeiner Weise von den Lernenden bearbeitet)
- Der Inhaltstyp bietet Feedback in Form von Punkten oder Text
- Der Inhaltstyp bietet Text-Bild-Kombination oder keine Text-Bild-Kombination (oder nur mittels der Instruktion)
Hier zunächst eine Übersicht der visuellen Inhaltstypen und ihre Funktionen/Einsatzmöglichkeiten in alphabetischer Reihenfolge:
Inhaltstyp | Funktion | Präsentierend oder interaktiv | Text-Bild Kombination möglich | Feedback in Form von Punkten oder Text | |
Agamotto | Stufenloses Überblenden von zwei oder mehr Bildern | Präsentierend | ja | – | |
Collage | Collage aus mehreren Bildern | Präsentierend | – | – | |
Chart | Darstellung von Daten und Fakten als Diagramm | Präsentierend | ja | – | |
Drag and Drop | Einem Hintergrundbild Beschriftungen oder Bebilderungen zuordnen | Interaktiv | ja | Punkte | |
Find multiple Hotspots | Mehrere Hotspots in einem Bild finden | Interaktiv | – | Punkte | |
Find the Hotspot | Einen Hotspot in einem Bild finden | Interaktiv | – | 1 Punkt | |
Image Choice | Bilder zu einer vorgegebenen Kategorien zuordnen | Interaktiv | ja | Punkte | |
Image Hotspots | Darstellung von Text- oder Multimedia-Elementen auf einem Bild | Präsentierend | ja, auch andere Medien (Audio, Video) | – | |
Image juxtaposition | Überblendung zweier Bilder durch eine verschiebbare Trennlinie | Präsentierend | – | – | |
Image pairing | Bildpaare aus einem Set an Bildern auswählen | Interaktiv | – | Punkte | |
Image sequencing | Bilder in eine Reihenfolge bringen | Interaktiv | – | Punkte | |
Image slider | Darstellung von Bildern als Slideshow | Präsentierend | – | – | |
Memory Game | Verdeckte Bildpaare finden | Interaktiv | – | – |
Lernen Sie nun die einzelnen visuellen Inhaltstypen genauer kennen – lesen Sie, wie der Inhaltstyp jeweils funktioniert und für welche (didaktischen) Einsatzzwecke er geeignet ist. Sehen Sie sich dann die Good Practice Beispiele an – die meisten davon sind CC lizenziert und können von Ihnen heruntergeladen und für Ihre Zwecke bearbeitet werden!
Eine genaue Beschreibung der Inhaltstypen und Anleitungen finden Sie auf H5P.org!
Collage: Anordnung mehrerer Bilder
- Einordnung: Präsentierend, keine Text-Bild-Kombination, kein Feedback
- Wie funktioniert es: Mehrere Bilder können als Collage gestaltet und dann präsentiert werden.
- Einsatzmöglichkeiten: Zur Präsentation von mehreren Bildern z.B. zur Integration auf einer Website. Eine Collage kann auch als Anstoß zum kreativen Schreiben verwendet werden.
- Good Practice Beispiele:
- Bergansichten: https://h5p.org/tutorial-collage
- Verschiedene Ansichten von bemoosten Ästen:
https://moodle.karelia.fi/mod/page/view.php?id=26885
Chart: Darstellung von Daten und Fakten als Diagramm
- Einordnung: Präsentierend, Text-Bild-Kombination möglich, kein Feedback
- Wie funktioniert es: In einem Balken- oder Kreisdiagramm können Mengen/Verteilungen/Daten visualisiert werden.
- Einsatzmöglichkeiten: Umfrageergebnisse, andere empirische Ergebnisse, wissenschaftsbasierte Daten, Werte und Zahlen übersichtlich und mit geringem Aufwand auf einer Webseite darstellen.
- Good Practice Beispiele:
- Verteilung der Studierenden auf die Fakultäten einer Uni in Prozent:
https://www.fernuni-hagen.de/zli/blog/e-koo-tipps-tricks-h5p-inhaltstypen-die-sie-vielleicht-noch-nicht-kannten/ - Todesursachen in USA:
https://moodle.nibis.de/openelec/course/view.php?id=17§ion=19
- Verteilung der Studierenden auf die Fakultäten einer Uni in Prozent:
Image juxtaposition, Agamotto, Image slider: Abbildungen in Folge präsentieren
Image juxtaposition: Überblendung zweier Bilder durch eine verschiebbare Trennlinie
- Einordnung: Präsentierend, keine Text-Bild-Kombination, kein Feedback
- Wie funktioniert es: Zwei Bilder mit gleichen Größen werden übereinander gelegt. Unterschiede können mithilfe einer Trennlinie erkundet werden. Der Vergleich und die Analyse können also von den Lernenden selbst gesteuert werden.
- Einsatzmöglichkeiten: Hier können zwei Zustände im Überblick oder im Detail miteinander verglichen werden, z.B. ein Vorher-Nachher-Zustand oder ein Ist-Soll-Zustand.
- Good Practice Beispiele:
- Zwei Fotos von identischen Himmelsarealen als Normal- und Infrarotlicht-Aufnahme:
https://h5p.org/image-juxtaposition#example=64416 - Darstellung eines rasterbasierten vs. vektorbasierten Bildes: https://h5pstudio.ecampusontario.ca/content/5498
- Effekte guter Fotoretouche:
https://moodle.nibis.de/openelec/course/view.php?id=17§ion=22 - Zwei identische Areale vor und nach einer Überflutung. Die Unterschiede und der Schaden können im Überblick und im Detail visuell exploriert werden. https://h5p.org/image-juxtaposition#example=64158
Agamotto: Stufenloses Überblenden von zwei oder mehr Bildern
- Einordnung: Präsentierend, Text-Bild-Kombination möglich, kein Feedback
- Wie funktioniert es: Mehrere Bilder werden übereinander gelegt und können mit Hilfe eines Schiebereglers erkundet werden. Zu jedem Bild kann ein Text hinzugefügt werden. Dadurch lassen sich zwei oder mehrere Bilder im Gesamten miteinander vergleichen und durch Text-Informationen ergänzen. Die Analyse kann von den Lernenden selbst gesteuert werden. Während es bei Image Juxtaposition eher um Details innerhalb des Bildes geht, liegt der Fokus bei Agamotto auf eine Serie von ganzheitlichen Veränderungen.
- Einsatzmöglichkeiten: z.B. Veränderung eines Zustands, chronologische Abfolge visueller und textbasierter Informationen. Denkbar wäre auch einen Zoom zu erstellen – also mehrere Aufnahmen eines Bildes in verschiedener Detailgenauigkeit übereinander zu legen.
- Good Practice Beispiele:
- Geographieunterricht: Erde im Jahreslauf, Entstehung der Jahreszeiten: https://fdagner.de/wpress/h5p-juxtaposition-agamotto-im-geographieunterricht/
- Map Layers – Eine Landkarte zeigt dreimal dasselbe Areal Europas, einmal jedoch nur die Umrisse des Kontinents, dann mit Flüssen und schließlich mit Flüssen und Ländergrenzen: https://h5p.org/content-types/agamotto#example=79243
Image Slider: Darstellung von Bildern als Slideshow
- Einordnung: Präsentierend, keine Text-Bild-Kombination, kein Feedback
- Wie funktioniert es: Mit dem Image Slider können mehrere Bilder präsentiert werden. Anders als bei Agamotto funktioniert die Steuerung der Darstellung mit Pfeilen auf den Bildern oder Navigation unter den Bildern.
- Einsatzmöglichkeiten: z.B. chronologische Abfolge visueller Informationen, wie beim Agamotto, nur ohne Text
- Good Practice Beispiele:
- Verschiedene Pilzsorten:
https://mon.uvic.cat/udute/h5p-image-slider/
- Verschiedene Pilzsorten:
Find the Hotspot, Find Multiple Hotspots, Image Hotspots: Informationen und andere Elemente auf Abbildungen finden oder darstellen
Find the Hotspot: Einen Hotspots in einem Bild finden
- Einordnung: Interaktiv, keine Text-Bild-Kombination, Feedback möglich
- Wie funktioniert es: Auf einem Bild soll eine bestimmte Stelle gefunden und markiert werden. Find the Hotspot stellt eine Frage, die mit richtig und falsch beantwortet werden muss. Wenn „Wiederholen“ ausgeschaltet ist, dann heißt es für Lernende „hopp oder drop“ (richtig = 1 Punkt, nicht richtig 0 Punkte).
- Einsatzmöglichkeiten: Find the Hotspot hilft beim genauen Hinsehen und bei der Wahrnehmung von (auch feinen) Details, beim Verknüpfen von textbasierten Lerninhalten (über die Aufgabeninstruktion) mit visuellen Lerninhalten, beim Abrufen von (visuell/textlich) verknüpftem Wissen.
- Good Practice Beispiele:
- Architektur/Geschichte: Finde im folgenden Bild des Forum Romanum die Basilica Julia:
https://herrmess.de/2020/01/27/h5p-ole-teil-4-find-the-hotspot/ - Biologie: Find the Sebastopol goose’s lower mandible: https://html5.is.ed.ac.uk/find-the-hotspot/
- Obst und Gemüse: Which one of these berries is named after a town in Turkey?
https://peter.baumgartner.name/2020/09/22/h5p-hotspot-inhaltstypen/#Find_the_Hotspot
- Architektur/Geschichte: Finde im folgenden Bild des Forum Romanum die Basilica Julia:
Find multiple Hotspots: Mehrere Hotspots in einem Bild finden
- Einordnung: Interaktiv, keine Text-Bild-Kombination, Feedback möglich
- Wie funktioniert es: Auf einem Bild müssen mehrere Bereiche von den Lernenden markiert werden. Sie haben so viele Versuche zur Verfügung bis sie alle korrekten Bildmotive entdeckt haben. Sie erhalten nach Ende der Übung immer die maximal vorgesehen Punktezahl. Find Multiple Hotspots ist also eine Entdeckungsaufgabe, wo solange gesucht werden muss, bis alle Punkte eingesammelt wurden und die Aufgabe zu Ende ist.
- Einsatzmöglichkeiten: Find multiple Hotspot hilft beim genauen Hinsehen und bei der Wahrnehmung und Unterscheidung von Details, beim Verknüpfen von textbasierten Lerninhalten (über die Aufgabeninstruktion) mit visuellen Lerninhalten, beim Abrufen von (visuell/textlich) verknüpftem Wissen
- Good Practice Beispiele:
- Obst und Gemüse: Find all the vegetables in this picture https://h5p.org/find-multiple-hotspots
- Fachbereich Biologie, Chemie, Pharmazie – Abfrage zum Versuch „Dekontamination“:
https://blogs.fu-berlin.de/h5pblog/fachbereich-biologie-chemie-pharmazie-ag-prof-dr-ulrich-abrams/
Image Hotspots: Darstellung von Text- oder Multimedia-Elementen auf einem Bild
- Einordnung: präsentierend, Text-Bild-Kombination möglich, kein Feedback
- Wie funktioniert es: Auf einem Bild werden mehrere Stellen markiert, zu denen sich Lernende Informationen anzeigen lassen können. Dies können Text-, Bild- oder Videoelemente sein. Ob die Lernenden sie auch tatsächlich nutzen bleibt ihnen überlassen. Es gibt kein definiertes Ende der Übung und es können auch keine Punkte gemacht werden.
- Einsatzmöglichkeiten: Vertiefte Informationsvermittlung zu verschiedenen Bildinhalten. Explorative, intuitive Auseinandersetzung mit Wissensinhalten möglich. Verknüpfung von visuellen Ankern mit Lerninhalten.
- Good Practice Beispiele:
- Blockbasierte Programmierumgebung Snap!
https://gigers.com/blog/interaktive-erklaerungen-mit-h5p-image-hotspots/ - Obst und Gemüse:
https://peter.baumgartner.name/2020/09/22/h5p-hotspot-inhaltstypen/#Find_the_Hotspot - Interaktive campuskarte
https://elabd8.muhosting.com.au/elab/node/41 - Gebäude der FernUniversität in Hagen:
https://www.fernuni-hagen.de/zli/blog/e-koo-tipps-tricks-h5p-inhaltstypen-die-sie-vielleicht-noch-nicht-kannten/
- Blockbasierte Programmierumgebung Snap!
Image Choice, Memory Game, Drag and Drop, Image Pairing, Image Sequencing: interaktives Auswählen und Anordnen von Abbildungen
Image Choice: Bilder einer vorgegebenen Kategorien zuordnen
- Einordnung: Interaktiv, Text-Bild-Kombination möglich, Feedback
- Wie funktioniert es: Zuordnung von Bildern zu einer vorgegebenen Kategorie. Es können beliebig viele Bilder für die Frage verwendet werden. Die Eingabe von Text, der erscheint, wenn sich die Maus über den Bild befindet („hover text“), ist ebenfalls möglich, jedoch nicht verpflichtend. Das ist allerdings eine praktische Möglichkeit für die Übermittlung zusätzlicher Informationen.
- Einsatzmöglichkeiten: Mit diesem Inhaltstyp können Fragen durch eine Bilderauswahl beantwortet werden. Weitere Möglichkeiten: visualisierte chronologische Abläufe, Visualisierungsaufgaben, (psycho)logische Experimente
- Good Practice Beispiele:
- Psycho(logische) Übungen / Experimente
https://peter.baumgartner.name/2021/12/09/h5p-image-choice/ - Which of these animals can be found in the forest? https://h5p.org/content-types/image-choice
- Psycho(logische) Übungen / Experimente
Memory Game: Verdeckte Bildpaare finden
- Einordnung: Interaktiv, keine Text-Bild-Kombination möglich, kein Feedback
- Wie funktioniert es: Memory zum Online-Spielen – mit selbst gewählten Bildern. Bildpaare müssen von den Lernenden gefunden werden. Es werden beliebig viele Bildpaare in den Inhaltstyp hochgeladen und den Lernenden präsentiert.
- Einsatzmöglichkeiten: Memory kann genutzt werden zur Auflockerung zwischendurch und auch für Konzentrationsübungen. Spannend wird das Spiel, wenn die Audio-Upload-Möglichkeit genutzt wird (Geräusche-Memory) oder nicht identische Bilder, sondern zueinander passende Bilder gefunden werden müssen.
Image Pairing: Bildpaare aus einem Set an Bildern auswählen
- Einordnung: Interaktiv, keine Text-Bild-Kombination möglich, Feedback
- Wie funktioniert es: Aus einem Set von Bildern müssen Paare gebildet werden: Welches Bild passt zu welchem?
- Einsatzmöglichkeiten: Visuelle Bildpaare können eingesetzt werden, einen Inhalt zu festigen oder auch zu üben. Kann auch als Abwechslung, Pause oder Auflockerung eingesetzt werden oder als Übung, in der Lerndene selbst aktiv werden, indem sie das H5P erstellen.
- Good Practice Beispiele:
- Sustainable Developmental Gaols zuordnen: https://learnful.ca/h5p/340
- Tieroberflächen zuordnen: https://h5p.org/image-pairing
Image Sequencing: Bilder in eine Reihenfolge bringen
- Einordnung: Interaktiv, Text-Bild-Kombination möglich, Feedback
- Wie funktioniert es: Ein Set von Bildern muss in die richtige Reihenfolge gebracht werden
- Einsatzmöglichkeiten: Reihenfolgen können auf sehr unterschiedliche Arten und Weisen gebildet werden – und entsprechend vielfältig kann der Inhaltstyp genutzt werden. Eine Geschichte oder ein Vorgang können in eine richtige Reihenfolge gebracht werden, Gegenstände können nach Funktiones- oder Einsatzbereich sortiert werden usw.
- Good Practice Beispiele:
- Sustainable Developmental Gaols anordnen: https://learnful.ca/h5p/335
- Planeten der Größe nach anordnen:
https://h5p.org/content-types/image-sequencing - Wissenschaftliche Arbeitstechniken How to: Erstellen einer Hausarbeit:
https://testim.wp.hs-hannover.de/wissenschaftliche-arbeitstechniken/4/
Drag and Drop: Einem Hintergrundbild Beschriftungen oder Bebilderungen zuordnen
- Einordnung: Interaktiv, Text-Bild-Kombination möglich, Feedback
- Wie funktioniert es: Es wird ein Hintergrundbild hochgeladen und passender Text oder Bilder zur Verfügung gestellt. Lernende sollen die Elemente auf die richtigen Stellen des Hintergrundbildes ziehen.
- Einsatzmöglichkeiten: Auch hier kann die Verknüpfung von Text- und Bildinformation geübt und damit ein Vertiefen von Lerninhalten erreicht werden.
- Good Practice Beispiele:
- Obst und Gemüse: https://h5p.org/drag-and-drop#example=63159
- Wissenschaftliche Arbeitstechniken/Forschungskreislauf:
https://testim.wp.hs-hannover.de/wissenschaftliche-arbeitstechniken/2/ - § 60a UrhG Quiz: Materialien in der Lehre (Drag & Drop):
https://blogs.hoou.de/lehredigital/was-darf-ich-im-rahmen-meiner-lehre-nutzen/
Lizenz, Quellen und weiterführende Links:
Teile der Texte stammen von
- Han-TanWey für HAW Hamburg: H5P-Inhaltstypen – Übersicht und Kurzbeschreibung, https://emil.haw-hamburg.de/mod/book/view.php?id=1029623&chapterid=39200, nicht lizenziert
- Nele Hirsch, H5P IM ÜBERBLICK,
https://ebildungslabor.github.io/H5P/index.html, Public Domain - Peter Baumgartner, Didaktisches Design mit H5P,
https://peter.baumgartner.name/sammlungen/didaktisches-design-mit-h5p/, CC-BY SA 4.0 - Peter Baumgartner, Selbstbestimmtes Lernen mit H5P,
https://peter.baumgartner.name/sammlungen/h5p-module/, CC-BY SA 4.0
Weiterführende Links:
- Jakob Kopczynski für HOOU@HAW: H5P für eLearning Autorinnen und Autoren, https://www.hoou.de/materials/h5p-fur-elearning-autorinnen-und-autoren, CC-BY SA 4.0
- Martina Schradi für HOOU@HAW: Einstieg in H5P – Impulse und wertvolle Links, https://blogs.hoou.de/lehredigital/einstieg-in-h5p-impulse-und-wertvolle-links/, CC-BY SA 4.0
Diese Inhalte sind, wenn nicht anders vermerkt, lizenziert unter einer Creative Commons Namensnennung 4.0 International Lizenz.
Lizenzhinweis: Visualisierungen erstellen mit H5P, Martina Schradi | HOOU@HAW, CC BY 4.0.