Erstellen von interaktiven Videos im TU Graz TeachCenter mithilfe von H5P

H5P ist ein webbasiertes Open-Source-Tool zur Erstellung von interaktiven Lerninhalten, die Sie in Ihrem TeachCenter-Kurs (TC-Kurs) als H5P-Aktivität anlegen können. Ein interaktiver Lerninhalt im Speziellen ist das H5P Interactive 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, die alle über den unten beschriebenen Weg erstellt werden können.

Auf-/Zuklappen

Ein H5P-Video zur Selbstüberprüfung hinzufügen

Wann verwende ich diese Variante?

Verwenden SIe diese Variante, wenn die Videos nur der Selbstüberprüfung dienen und sie die Ergebnisse der Studierenden nicht nachverfolgen möchten.

Es ist die schnellste und einfachste Möglichkeit, um ein H5P-Video zu erstellen. Die Aktivität wird im sogenannten Inhaltsspeicher des Kurses angelegt.

Allerdings ist es mit dieser Option nicht möglich, Punkte oder Ergebnisse der Studierenden auszulesen, sondern das Video kann nur der Selbstüberprüfung dienen. Eine Anleitung für H5P-Videos, bei denen Sie die Bewertung der Studierenden auch auslesen können, finden sie in Abschnitt 2.

Video im Inhaltsspeicher erstellen

Klicken Sie in Ihrem TeachCenter-Kurs im Menü auf Mehr > Inhaltsspeicher.
zum Inhaltsspeicher gelangen

Fügen Sie nun das Video in den Inhaltsspeicher hinzu: Klicken Sie oben rechts auf den Button Hinzufügen und suchen Sie nach Interactive Video.

Interaktives Video hinzufügen

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 Weblinks wie YouTube. Für TUbe-Videos benötigen Sie einen sogenannten Static Link, den Sie auf Anfrage vom TUbe-Team bekommen.
Videodatei 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 Video jederzeit wieder im Inhaltsspeicher finden und bearbeiten.
Um das Video für Studierende in Ihrem TeachCenter-Kurs verfügbar zu machen, müssen Sie es in ein Textfeld einbetten.

Video in einem Textfeld einbetten

Um ein zuvor erstelltes H5P-Video im TC-Kurs einzubetten, legen Sie zuerst ein Textfeld an: Bearbeiten einschalten > Aktivität oder Material anlegen > Text- und Medienfeld.
Klicken Sie im Textfeld-Editor auf den H5P-Button.
H5P-Button im Texteditor

Wählen Sie Repositories durchsuchen > Inhaltsspeicher und dann das gewünschte H5P-Video.
Repositories durchsuchen

in der Dateiauswahl kann der Inhaltsspeicher gewählt werden — Datei aus dem Inhaltsspeicher wählen

Wählen Sie Alias/Verknüpfung zur Datei anlegen - so werden spätere Änderungen, die Sie an der Datei im Inhaltsspeicher vornehmen, auch in der eingebetteten Datei übernommen.
Ändern Sie wenn nötig Autor:in und Lizenz und klicken Sie auf Datei auswählen, dann auf H5P einfügen. Sie sehen im Textfeld nun einen Platzhalter für die H5P-Aktivität.

Link zur Datei anlegen

Platzhalter für die H5P-Aktivität

Wenn gewünscht, ergänzen Sie noch zusätzlichen Text im Textfeld. Nehmen Sie ggf. noch weitere Einstellungen am Textfeld vor, z. B. Voraussetzungen/Sichtbarkeit.
Klicken Sie auf Sichern und zum Kurs. Das Video ist nun im Kurs eingebettet.

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

Ein H5P-Video 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 Detailergebnisse und Punkte der Studierenden einsehen möchten (siehe Abschnitt 4).

Diese Variante besteht jedoch aus mehr Schritten als die Variante 1. Das Video muss einerseits im Inhaltsspeicher erstellt werden, dann jedoch in einem zweiten Schritt zu einer H5P-Aktivität im Kurs hinzugefügt werden, damit die Punkte für jede:n User:in gespeichert werden können.

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

Erstellen Sie zunächst ein interaktives Video im Inhaltsspeicher wie in der Variante "zur Selbstüberprüfung" beschrieben.
Fügen Sie in Ihrem Kurs eine neue H5P-Aktivität hinzu: Aktivität oder Material anlegen > H5P.
Geben Sie der Aktivität einen Namen.
Im Abschnitt Paketdatei klicken Sie auf das Dateisymbol. Wählen Sie das interaktive Video aus dem Inhaltsspeicher aus. Belassen Sie die Auswahl Alias/Verknüpfung erzeugen - ansonsten werden spätere Änderungen am Video im Inhaltsspeicher nicht in der Aktivität übernommen.
Paketdatei aus dem Inhaltsspeicher hinzufügen

Datei aus dem Inhaltsspeicher wählen

Link zur Datei anlegen

Wenn Sie das Video im Kurs einbetten möchten (siehe Abschnitt 2.3), setzen Sie unter H5P-Optionen das Häkchen Einbetten-Taste.
Einbetten-Taste

Nehmen Sie weitere Einstellungen vor, z. B. unter Bewertung die möglichen Maximalpunkte und die Bestehensgrenze.
Klicken Sie Speichern und Anzeigen.

Video einbetten

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

Öffnen Sie dazu das H5P. Klicken Sie links unter dem Video auf Einbetten.
Einbetten-Taste unter dem Video

Es öffnet sich ein Fenster mit einem Code-Fragment zum Einbetten. Wählen Sie die gewünschte Videogröße oder das dynamische Format aus und kopieren Sie den entsprechenden Code in die Zwischenablage.
Code-Fragment zum Einbetten

Erstellen Sie ein Textfeld: Bearbeiten einschalten > Aktivität oder Material anlegen > Text- und Medienfeld.
Wechseln Sie zum HTML-Modus, indem Sie in der Menüleiste auf </> klicken.
Fügen Sie dort den zuvor kopierten Code ein.
Schließen Sie den HTML-Modus durch erneuten Klick auf </>. Klicken Sie auf Speichern und zum Kurs.
Studierende würden jetzt sowohl das eingebettete Video als auch die H5P-Aktivität sehen. Sollen Studierende nur noch das eingebettete Video sehen, gehen Sie zu den Einstellungen der H5P-Aktivität und wählen Sie im Abschnitt Weitere Einstellungen > Verfügbar, aber auf der Kursseite verborgen.

H5P verfügbar machen, aber nicht anzeigen

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

Detaillierte Anleitung zum Einfügen von interaktiven Fragen

Multiple-Choice-Frage hinzufügen

Öffnen Sie das Video im Inhaltsspeicher und klicken Sie auf Bearbeiten.
Stoppen Sie das Video an der Stelle, wo Sie eine Frage oder Aktivität einfügen möchten. Die genaue Startzeit kann aber auch innerhalb einer Frage angepasst werden
Wählen Sie in Schritt 2 das Multiple-Choice-Symbol aus der Werkzeugleiste.

Multiple-Choice-Frage in der Werkzeugleiste

Haken Sie am besten Video pausieren, wenn es bei der Startzeit ankommt an. Unter Anzeigen als wählen Sie am besten Popup, damit die Aktivität nicht übersehen wird.
Einstellungen für die Interaktion

Fügen Sie einen Namen und eine Frage in die entsprechenden Textfelder ein.
Mulitple-Choice-Frage erstellen

Geben Sie die verfügbaren Antworten (Optionen) in die Textfelder ein und haken Sie Richtig! an, wenn es sich um eine richtige Antwort handelt - es kann mehrere richtige Antworten geben. Um weitere Antwortmöglichkeiten einzugeben, klicken Sie auf OPTION HINZUFÜGEN.

Antworten hinzufügen

Wenn gewünscht, haken Sie unter Verhaltenseinstellungen “Wiederholen”-Button anzeigen an. Damit dürfen die Lernenden die Aufgabe mehrmals wiederholen.
Verhaltenseinstellungen

Scrollen Sie bis zum Ende des Editors und klicken Sie auf Fertig.

Statements hinzufügen

Bei dieser Interaktion sollen die Studierenden die richtige Aussage aus mehreren auswählen, ähnlich einer Single-Choice-Frage.

Nachdem das Video im Schritt 1 hochgeladen wurde, wählen Sie in Schritt 2 das Statements-Icon.
Toolleiste mit Statements-Icon

Haken Sie am besten Video pausieren, wenn es bei der Startzeit ankommt an. Unter Anzeige als wählen Sie Popup.
Fügen Sie einen Namen und eine klare Aufgabenbeschreibung in die entsprechenden Textfelder ein.
Fügen Sie mehrere Aussagen hinzu. Berücksichtigen Sie, dass die erste Aussage immer die richtige ist.
Klicken Sie auf das dunkelgraue Feld Aussage hinzufügen, um eine einzelne weitere Aussage hinzuzufügen.
Um eine neue Menge von Aussagen hinzuzufügen, klicken Sie auf das blaue Feld AUSSAGEN HINZUFÜGEN.

Aussagen hinzufügen

Scrollen Sie zum Ende des Editors und klicken Sie auf Fertig.

Drag and Drop hinzufügen

Der Inhaltstyp Drag and Drop (Ziehen und Ablegen) ermöglicht es den Lernenden, einen Text oder ein Bild auf eine oder mehrere entsprechende Ablagezonen zu verschieben. Sie fügen dafür 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 das Drag-and-Drop-Symbol aus der Werkzeugleiste.
Werkzeugleiste mit Drag-and-Drop-Symbol

Haken Sie Video pausieren, wenn es bei der Startzeit ankommt an. Unter Anzeige als wählen Sie Popup, damit die Aufgabe später nicht übersehen wird.
Fügen Sie einen Namen in das entsprechende Textfeld ein. Der Name wird später auch 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.

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.
Schritt 2 - Aufgabe

Um die Ablagezonen zu platzieren, klicken Sie das konzentrische Kreis-Symbol an. Platzieren Sie so viele Ablagezonen wie nötig.
Button zum Anlegen von Ablagezonen

Geben Sie eine Beschriftung für die Zonen im Textfeld ein (für Studierende später nicht sichtbar) und klicken Sie auf Fertig.

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.
Bearbeiten des Ablagefelds

Klicken Sie nun auf das Text-Symbol, um Antwortmöglichkeiten hinzuzufügen.
Einfügen von Text

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.
Anlegen einer Antwort

Das Feld können Sie später auch im Vorschaufenster bearbeiten und anpassen.
Hinzugefügte Antwort

Um zu definieren, welche Ablagezone die richtige für bestimmte Elemente ist, klicken Sie zweimal 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.
Einstellungen der Ablagezone

Scrollen Sie bis zum Ende des Editors und klicken Sie auf Fertig.

Ergebnisse der Studierenden ansehen

Studierendenansicht: Bewertungen absenden

Bewertungen im Detail ansehen

Hinweis: Die Ergebnisse können nur ausgelesen werden, wenn Sie wie in Abschnitt 2 beschrieben eine H5P-Aktivität angelegt haben, und wenn die Studierenden ihre Antworten korrekt abgesendet haben.

Die Gesamtergebnisse sehen Sie wie bei allen bewerteten Aktivitäten im Hauptmenü unter Bewertungen in der Tabelle.

Die Detailergebnisse können Sie direkt in der H5P-Aktivität einsehen:

Klicken Sie auf die H5P-Aktivität, dann auf den Reiter Versuchsüberblick.
Antworten einsehen im Versuchsüberblick

Sie sehen in der Übersicht die erreichten Prozente.
Klicken Sie auf Nutzerversuche ansehen, um eine Übersicht über die einzelnen Versuche zu sehen.
Antworten einsehen: Nutzerversuche