Erstellen und Einbetten von interaktiven Videos und Lerninhalten mit H5P

Mit H5P können Sie interaktive Lerninhalte und Videos erstellen. Das webbasierte Open-Source-Tool ist im TeachCenter integriert.

Ein spezieller Lerninhalt ist das interaktive Video, bei dem Sie verschiedene Interaktionen wie Multiple-Choice-Fragen und Links zu einem Video hinzufügen können. Es gibt noch viele weitere H5P-Aktivitäten (externe Seite) , die alle wie hier beschrieben erstellt und eingebettet werden.

Eine H5P-Aktivität zur Selbstüberprüfung hinzufügen

Wann verwende ich diese Variante?

Verwenden Sie diese Variante, wenn das interaktive Video oder die Übung nur der Selbstüberprüfung oder Darstellung von Inhalten dienen und Sie keine Punkte vergeben oder Antworten auslesen möchten. Manche Inhaltstypen sind auch gar nicht dafür vorgesehen, Punkte oder Inhalte zu speichern, sondern dienen nur der Darstellung von Inhalten.

Es ist die schnellste und einfachste Möglichkeit, um eine Übung mit H5P zu erstellen. Das H5P wird nur im sogenannten Inhaltsspeicher des Kurses angelegt und in ein Text- und Medienfeld eingebettet.

Eine Anleitung für H5P-Aktivitäten, bei denen Sie die Antworten und Punkte der Studierenden auslesen können, finden Sie im nächsten Abschnitt.

H5P im Inhaltsspeicher erstellen

  • Klicken Sie in Ihrem TeachCenter-Kurs im Menü auf Mehr > Inhaltsspeicher.
Hauptmenü - Mehr - Inhaltsspeicher ist markiert
  • Klicken Sie oben rechts auf den Button Hinzufügen.

Hinweis: Die weitere Anleitung erklärt die Erstellung eines interaktiven Videos, aber auch andere H5P-Aktivitäten können über den gleichen Weg erstellt werden. Der Editor sieht je nach Inhaltstyp etwas anders aus.

  • Wählen Sie Interactive Video.
Hinzufügen - Interactive Video im Inhaltsspeicher ist markiert
Interaktives Video hinzufügen
Add - Interactive video is selected from the Content bank
  • Vergeben Sie einen Titel für das Video.
  • Klicken Sie im Bereich Videodateien auf das +-Symbol, um eine Videodatei hinzuzufügen. Bitte laden Sie keine MP4-Dateien direkt in das TeachCenter! Verwenden Sie Links zu YouTube oder TUbe. Für TUbe-Videos benötigen Sie einen sogenannten Static Link, den Sie auf Anfrage vom TUbe-Team bekommen.
Screenshot des Videodateien-Bereich, durch Klick auf das Plus oder Eingabe einer URL kann man ein Video hinzufügen
  • Wechseln Sie in den Reiter Schritt 2 – Interaktionen hinzufügen, um interaktive Fragen oder Aufgaben hinzuzufügen (für eine detaillierte Anleitung siehe Abschnitt 2).
  • In Schritt 3 – Zusammenfassende Aufgabe können Sie noch eine abschließende Aufgabe zur Selbstüberprüfung der Lernziele erstellen, die am Ende des Videos angezeigt wird.
  • Speichern Sie das interaktive Video, indem Sie über oder unter dem Video auf Sichern klicken.
  • Sie sehen eine Vorschau. Klicken Sie auf Schließen. Sie können das H5P jederzeit wieder im Inhaltsspeicher finden und bearbeiten.
  • Um das H5P für Studierende in Ihrem TeachCenter-Kurs verfügbar zu machen, müssen Sie es in ein Textfeld einbetten.

H5P in einem Textfeld einbetten

  • Um ein zuvor erstelltes H5P-Video oder eine andere H5P-Übung im TC-Kurs einzubetten, legen Sie zuerst ein Text- und Medienfeld an.
  • Klicken Sie im Textfeld-Editor auf den blauen H5P-Button.
Button namens H5P-Element einbinden im Menü des Texteditors ist hervorgehoben
  • Wählen Sie im Dropdown-Menü das richtige H5P aus der Liste. Hinter dem Namen steht (Inhaltsspeicher).
  • Klicken Sie auf Inhalt einbetten. Sie sehen im Textfeld nun einen Platzhalter im Format {h5pcb:XXXX}
Menü "H5P-Element einbinden" zeigt eine Liste an verfügbaren H5P-Elementen und den Button Inhalt einbetten
  • Sie können natürlich vor/nach dem Platzhalter noch Text im Textfeld ergänzen. Klicken Sie auf Sichern und zum Kurs. Das H5P-Video oder die Übung ist nun im Kurs eingebettet.

Hinweis: Wenn Sie ein TUbe-Video verwenden, müssen Studierende auch auf TUbe eingeloggt sein, damit das Video funktioniert.

Eine H5P-Aktivität mit auslesbaren Ergebnissen einfügen

Wann verwende ich diese Variante?

Diese Option muss gewählt werden, wenn die H5P-Aktivität bewertet werden soll und Sie die Ergebnisse und Punkte der Studierenden einsehen möchten.

Diese Variante besteht jedoch aus mehr Schritten als die Variante 1:

  • Das H5P-Video oder die Übung muss zuerst im Inhaltsspeicher erstellt werden
  • In einem zweiten Schritt wird die im Inhaltsspeicher erstellte Aktivität zu einer H5P-TeachCenter-Aktivität hinzugefügt, damit die Antworten und Punkte als Teil der Kursbewertung gespeichert werden können.
  • Als optionalen dritten Schritt kann man das H5P im Kurs einbetten und die eigentliche Aktivität, die die Punkte speichert, verbergen.

Interaktives Video mit Antwortübermittlung im Inhaltsspeicher erstellen

Legen Sie zuerst ein H5P im Inhaltsspeicher an, wie in Variante 1 beschrieben.

Hinweis: Nicht bei allen H5P-Aktivitäten ist das Speichern der Antworten oder eine Bewertung möglich. Manche Aktivitäten dienen nur der Darstellung von Informationen.

Die folgende Anleitung gilt für das interaktive H5P-Video:

Damit die Antworten der Studierenden gespeichert werden, muss im Video eine Antwortübermittlung aktiviert sein und Studierende müssen ihre Antworten aktiv abschicken. Weisen Sie ihre Studierenden darauf hin.

Standardmäßig befindet sich die Antwortübermittlung am Ende des Videos, erkennbar an einem grünen Stern. Sie können die Antwortübermittlung aber auch an jeder anderen Stelle im Video einfügen:

  • Öffnen Sie den Reiter Schritt 2: Interaktionen hinzufügen.
  • Pausieren Sie das Video an der gewünschten Stelle.
  • Klicken Sie auf den grünen Stern am Ende des Videos.
  • Klicken Sie auf + Antwortübermittlung einfügen bei ...
Grüner Stern am Ende des Videos, Pop-up "Submit Screens" mit Option, Antwortübermittlung einzufügen
Antwortübermittlung einfügen

Sie erkennen die Position der Antwortübermittlung im Video an einem vertikalen Strich in der Zeitleiste und können die Liste der Antwortübermittlungen mit Klick auf den grünen Stern einsehen.

Möchten Sie eine Antwortübermittlung wieder entfernen, klicken Sie auf den grünen Stern, auf die gewünschte Antwortübermittlung, und anschließend im Pop-up rechts auf das X.

H5P aus dem Inhaltsspeicher in eine H5P-Aktivität einfügen

Um die Punkte von Studierenden zu speichern und deren Antworten auslesen zu können, muss das H5P aus dem Inhaltsspeicher mit einer TeachCenter-H5P-Aktivität verknüpft werden.

  • Fügen Sie in Ihrem Kurs eine neue H5P-Aktivität hinzu: Klicken Sie auf das Plus > Aktivität oder Material > H5P.
  • Geben Sie der Aktivität einen Namen.
  • Im Abschnitt Paketdatei klicken Sie auf das Plus-Icon. Wählen Sie Inhaltsspeicher als Ordner aus und wählen Sie das zuvor erstellte H5P. Belassen Sie die Einstellung Link zur Datei anlegen.
Auswahlfenster für eine Paketdatei. Verwenden Sie das Plus-Icon, um eine Datei zu wählen.
in der Dateiauswahl kann der Inhaltsspeicher gewählt werden
Link to the file is selected. In this menu, you can also change the author and license. There is a button select this file at the bottom.
  • Nehmen Sie weitere Einstellungen vor, z. B. unter Bewertung die möglichen Maximalpunkte und die Bestehensgrenze.
  • Klicken Sie Speichern und Anzeigen.

Optional: H5P-Aktivität einbetten

Studierende können im Kurs einfach die H5P-Aktivität anklicken und das Video ansehen. Wenn Sie das H5P sichtbarer im Kurs platzieren möchten, können Sie es jedoch auch in ein Textfeld einbetten.

  • Um ein zuvor erstelltes H5P-Video oder eine andere H5P-Übung im TC-Kurs einzubetten, legen Sie zuerst ein Text- und Medienfeld an.
  • Klicken Sie im Textfeld-Editor auf den blauen H5P-Button.
Button namens H5P-Element einbinden im Menü des Texteditors ist hervorgehoben
  • Wählen Sie im Dropdown-Menü das H5P aus der Liste, bei dem NICHT Inhaltsspeicher dabei steht.
Menü "H5P-Element einbinden" zeigt eine Liste an verfügbaren H5P-Elementen und den Button Inhalt einbetten
  • Klicken Sie auf Inhalt einbetten. Sie sehen im Textfeld nun einen Platzhalter im Format {h5pcb:XXXX}
  • Sie können natürlich vor/nach dem Platzhalter noch Text im Textfeld ergänzen. Klicken Sie auf Sichern und zum Kurs. Das H5P-Video oder die Übung ist nun im Kurs eingebettet.

Hinweis: Wenn Sie ein TUbe-Video verwenden, müssen Studierende auch auf TUbe eingeloggt sein, damit das Video funktioniert.

Bewertungen im Detail einsehen

Hinweis: Die Ergebnisse können nur ausgelesen werden, wenn die Studierenden ihre Antworten korrekt abgesendet haben.

Die Gesamtergebnisse (Punkte) sehen Sie wie bei allen bewerteten Aktivitäten im Hauptmenü unter Bewertungen.

Die Detailergebnisse (Antworten) können Sie in der H5P-TeachCenter-Aktivität einsehen:

  • Klicken Sie auf die H5P-TeachCenter-Aktivität, dann auf den Reiter Versuchsüberblick.
  • Sie sehen in der Übersicht die erreichten Prozente.
  • Klicken Sie auf Nutzerversuche ansehen, um eine Übersicht über die einzelnen Versuche zu sehen.
Der Reiter Versuchsüberblick ist gewählt. Es gibt eine Liste der Studierenden mit Punktzahl und einen Button anzeigen für mehr Details.
  • Klicken Sie auf Bericht anzeigen, um die abgegebenen Antworten im Detail zu sehen.
Detailansicht der Ergebnisse mit Datum, Punktzahl, Maximalpunkte, Dauer, ob abgeschlossen und bestanden

Detaillierte Anleitung zum Einfügen von interaktiven Fragen in ein H5P-Video

Multiple-Choice-Frage hinzufügen

  • Öffnen Sie das H5P Interactive Video im Inhaltsspeicher und klicken Sie auf Bearbeiten.
  • Stoppen Sie das Video ca. an der Stelle, wo Sie eine Interaktion einfügen möchten. Die genaue Zeitangabe können Sie später noch anpassen.
  • Wählen Sie in Schritt 2 Multiple Choice aus der Werkzeugleiste.
Screenshot der Werkzeugleiste mit dem Multiple-Choide-Symbol
  • Entscheiden Sie, ob das Video pausieren soll, wenn es bei der Interaktion ankommt.
  • Entscheiden Sie, ob die Interaktion als Button oder Popup angezeigt wird. Wir empfehlen: Video pausieren, Anzeige als Popup, damit keine Frage übersehen wird.
Screenshot der Einstellungen für die Interaktion: Video pausieren ist angehakt sowie Popup
  • Fügen Sie einen Namen (nicht für Studierende sichtbar) und die Frage ein.
Textfelder für das Erstellen einer Mulitple-Choice-Frage
  • Geben Sie die möglichen Antworten (Optionen) an und markieren Sie die richtige(n) Antwort(en) mit Richtig. Um weitere Antwortmöglichkeiten einzugeben, klicken Sie auf Option hinzufügen.
Screenshot der Textfelder um Antworten hinzuzufügen
  • Unter Verhaltenseinstellungen können Sie zum Beispiel festlegen, dass die Frage wiederholt werden darf. Das kann bei Selbstüberprüfungs-Videos hilfreich sein.
Screenshot der Verhaltenseinstellungen und "Wiederholen"-Button anzeigen
  • Klicken Sie am Ende des Editors auf Fertig.

Statements hinzufügen

Bei dieser Interaktion wählen die Studierenden die richtige Aussage aus mehreren Optionen.

  • Wählen Sie in Schritt 2 das Statements-Icon.
Screenshot der Toolleiste mit Statements-Icon
  • Entscheiden Sie, ob das Video pausieren soll, wenn es bei der Frage ankommt, und ob die Frage als Button oder Popup angezeigt wird. Wir empfehlen: Anzeige als Popup, pausieren.
  • Fügen Sie einen Namen und eine Aufgabenbeschreibung in die entsprechenden Textfelder ein.
  • Fügen Sie die Aussagen hinzu. Die erste ist immer die richtige. Es kann bei diesem Fragetyp nur eine richtige Aussage geben.
  • Klicken Sie auf Aussage oder Aussagen hinzufügen, um mehr falsche Optionen zu hinterlegen.
Screenshot der Textfelder um Aussagen hinzuzufügen
  • Scrollen Sie zum Ende des Editors und klicken Sie auf Fertig.

Drag and Drop hinzufügen

Für Drag and Drop fügen Sie zuerst den Hintergrund, die Ablagezonen und die Antworten hinzu und ergänzen erst im letzten Schritt, welche Antworten in welche Ablagezone gehören.

  • Wählen Sie Drag–and–Drop aus der Werkzeugleiste.
Screenshot der Werkzeugleiste mit Drag-and-Drop-Symbol
  • Entscheiden Sie, ob das Video pausiert, wenn es bei der Übung ankommt, und ob die Übung als Button oder Popup angezeigt wird. Wir empfehlen: Anzeige als Popup, pausieren.
  • Fügen Sie einen Namen hinzu (wird später angezeigt). Hier können Sie also z. B. die Aufgabenstellung hineinschreiben.
  • Wählen Sie den Reiter Schritt 1 – Einstellungen in der oberen linken Hälfte des Editors.
Screenshot des Reiters Schritt 1 - Einstellungen
  • Laden Sie ein Hintergrundbild hoch, indem Sie auf Hinzufügen klicken. Falls Sie das Bild bearbeiten möchten (zuschneiden, rotieren etc.), klicken Sie auf Bild bearbeiten. Geben Sie unter Aufgabengröße an, wie groß (in Pixeln) das Hintergrundbild sein soll.
  • Wählen Sie den Reiter Schritt 2 Aufgabe in der oberen rechten Hälfte des Editors.
Screenshot des Reiters Schritt 2 - Aufgabe
  • Um die Ablagezonen zu platzieren, klicken Sie das konzentrische Kreis-Symbol an. Platzieren Sie so viele Ablagezonen, wie nötig.
Screenshot des Buttons zum Anlegen von Ablagezonen
  • Geben Sie eine Beschriftung für die Zonen im Textfeld ein und klicken Sie auf Fertig.
Screenshot vom Anlegen einer Zone
  • Klicken Sie auf das im Video eingefügte Ablagefeld, um die Größe und Position anzupassen. Mit einem Doppelklick kann die Interaktion wieder bearbeitet werden.
Screenshot eines Ablagefelds
  • Klicken Sie nun auf das Text-Symbol, um Antwortmöglichkeiten hinzuzufügen.
Screenshot des Aufgabe-Menüs, der Button für das Einfügen von Text ist markiert
  • Fügen Sie einen Text (so erscheint das Element dann für die Studierenden) in das entsprechende Textfeld ein und wählen Sie die Ablagezonen, in die das Element gezogen werden kann – auch die falschen.
Screenshot des Anlegen einer Antwort, die Ablagezonen, in die das Element gezogen werden kann (inkl. Distraktoren) müssen gewählt werden
  • Das Feld können Sie später auch im Vorschaufenster bearbeiten und anpassen.
Screenshot einer hinzugefügten Antwort in die Drag-and-Drop-Aufgabe
  • Um zu definieren, welche Ablagezone die richtige für bestimmte Elemente ist, klicken Sie doppelt auf die Ablagezone. Wählen Sie das richtige Element und haken Sie Diese Ablagezone kann nur ein Element beinhalten und Automatisches Ausrichten aktivieren an. Klicken Sie auf Fertig.
Screenshot der Einstellungen der Ablagezone, die korrekte Ablagezone ist markiert, sowie die Häkchen bei "Diese Ablagezone kann nur ein Element beinhalten" und "Automatisches Ausrichten aktiveren" sind aktiv
  • Scrollen Sie bis zum Ende des Editors und klicken Sie auf Fertig.

Hilfe & Kontakt

Wenn etwas nicht so funktioniert wie beschrieben, melden Sie sich – wir sehen es uns an.