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, die alle wie hier beschrieben erstellt und eingebettet werden.
Ein H5P-Video zur Selbstüberprüfung hinzufügen
Verwenden Sie diese Variante, wenn die Videos nur der Selbstüberprüfung dienen und Sie keine Punkte vergeben oder Antworten auslesen möchten.
Es ist die schnellste und einfachste Möglichkeit, um ein H5P-Video zu erstellen. Die Aktivität wird nur im sogenannten Inhaltsspeicher des Kurses angelegt und eingebettet.
Eine Anleitung für H5P-Videos, bei denen Sie die Bewertung der Studierenden auch auslesen können, finden Sie in Abschnitt 2.
Hinweis: Diese Anleitung erklärt die Erstellung eines interaktiven Videos, aber auch andere H5P-Aktivitäten können über den gleichen Weg erstellt werden.
- Klicken Sie in Ihrem TeachCenter-Kurs im Menü auf Mehr > Inhaltsspeicher.
zum Inhaltsspeicher gelangen
- 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 Links zu YouTube oder TUbe. 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.
- Um ein zuvor erstelltes H5P-Video im TC-Kurs einzubetten, legen Sie zuerst ein Text- und Medienfeld an.
- Klicken Sie im Textfeld-Editor auf den H5P-Button.
H5P-Button im Editor
- Wählen Sie Repositories durchsuchen > Inhaltsspeicher und dann das gewünschte H5P-Video.
Repositories durchsuchen
- Belassen Sie die Einstellung Link zur Datei anlegen
- 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 
Vorschau der Einbettung
- Sie können natürlich wie gewohnt vor/nach dem Video noch Text im Textfeld ergänzen. 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
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 Video muss zuerst im Inhaltsspeicher erstellt werden
- In einem zweiten Schritt wird das Video zu einer H5P-Aktivität im Kurs hinzugefügt, damit die Punkte für jede:n User:in 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.
Legen Sie zuerst ein H5P im Inhaltsspeicher an, wie in Variante 1 beschrieben.
Damit die Antworten der Studierenden gespeichert werden, muss im Video eine Antwortübermittlung aktiviert sein und Studierende müssen ihre Antworten aktiv abschicken.
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 ...
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.
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 Video. Belassen Sie die Einstellung Link zur Datei anlegen.
Paketdatei hinzufügen Datei aus dem Inhaltsspeicher wählen
- Wenn Sie das Video später auch einbetten möchten, 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.
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 die H5P-Aktivität. Klicken Sie unter dem Video auf Einbetten.
Einbetten-Taste unter dem Video
- Es öffnet sich ein Fenster mit einem Code-Fragment zum Einbetten. Kopieren Sie den entsprechenden Code in die Zwischenablage.
Einbett-Code für das H5P-Video
- Erstellen Sie im Kurs ein Text- und Medienfeld: Plus > Aktivität oder Material > Text- und Medienfeld.
- Wechseln Sie zum HTML-Modus: Werkzeuge > Quellcode.
- Fügen Sie dort den zuvor kopierten Code ein und speichern Sie das Text- und Medienfeld.
Studierende sehen jetzt sowohl das eingebettete Video als auch die H5P-Aktivität. Sollen Studierende nur noch das eingebettete Video sehen, klicken Sie bei der H5P-Aktivität auf die drei Punkte > Verfügbarkeit > Verfügbar, aber auf der Kursseite verborgen.
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 in ein H5P-Video
- Ö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.
Multiple-Choice-Frage in der Werkzeugleiste
- 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.
Einstellungen für die Interaktion
- Fügen Sie einen Namen (nicht für Studierende sichtbar) und die Frage ein.
Mulitple-Choice-Frage erstellen
- 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.
Antworten hinzufügen
- Unter Verhaltenseinstellungen können Sie zum Beispiel festlegen, dass die Frage wiederholt werden darf. Das kann bei Selbstüberprüfungs-Videos hilfreich sein.
Verhaltenseinstellungen
- Klicken Sie am Ende des Editors auf Fertig.
Bei dieser Interaktion wählen die Studierenden die richtige Aussage aus mehreren Optionen.
- Wählen Sie in Schritt 2 das Statements-Icon.
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.
Aussagen hinzufügen
- Scrollen Sie zum Ende des Editors und klicken Sie auf Fertig.
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.
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.
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 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 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.
Einstellungen der Ablagezone
- Scrollen Sie bis zum Ende des Editors und klicken Sie auf Fertig.
Ergebnisse der Studierenden ansehen
Gilt für interaktive Videos: Teilnehmer:innen müssen den kleinen Stern am Ende der Zeitleiste anklicken und dann Antworten absenden, damit ihre Antworten gespeichert werden. Stellen Sie sicher, dass die Teilnehmer:innen darüber informiert sind.
Hinweis: Die Ergebnisse können nur ausgelesen werden, wenn Sie wie in Variante 2 beschrieben eine H5P-Aktivität angelegt haben.
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 (Punkte) sehen Sie wie bei allen bewerteten Aktivitäten im Hauptmenü unter Bewertungen.
Die Detailergebnisse (Antworten) können Sie in der H5P-Aktivität einsehen:
- Klicken Sie auf die H5P-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.
Ergebnisse ansehen
- Klicken Sie auf Bericht anzeigen, um die abgegebenen Antworten im Detail zu sehen.
H5P-Ergebnisse im Detail ansehen
Hilfe & Kontakt
Bei Fragen zum TeachCenter / TeachCenter Exam: tc@tugraz.at
Lizenziert unter der Creative-Commons-Lizenz CC BY 4.0 International
TU Graz Lehr- und Lerntechnologien