# 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.* *Veröffentlicht: 3. November 2021 · Aktualisiert: 22. April 2026* 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](https://h5p.org/content-types-and-applications), 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**.  - 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 **Inte****ractive 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](mailto:tube@tugraz.at) *bekommen.*  - 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**.  - 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}  - 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 ..**.  *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übermittlun****g** **wieder** **entfern****en**, 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**.    - 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**.  - Wählen Sie **im Dropdown-Menü das H5P aus der Liste, bei dem NICHT Inhaltsspeicher dabei steht.**  - 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.  - Klicken Sie auf **Bericht anzeigen**, um die abgegebenen Antworten im Detail zu sehen.  ## 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.  - 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.  - Fügen Sie einen **Namen** (nicht für Studierende sichtbar) und die **Frage** ein.  - 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.**  - Unter **Verhaltenseinstellungen** können Sie zum Beispiel festlegen, dass die Frage wiederholt werden darf. Das kann bei Selbstüberprüfungs-Videos hilfreich sein.  - 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**.  - 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.  - 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.  - 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.  - Laden Sie ein **Hintergrund****bild** 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 **Schri****tt 2 Aufgabe** in der oberen rechten Hälfte des Editors.  - Um die **Ablagezonen** zu platzieren, klicken Sie das konzentrische Kreis-Symbol an. Platzieren Sie so viele Ablagezonen, wie nötig.  - Geben Sie eine **Beschriftung** für die Zonen im Textfeld ein und klicken Sie auf **Fertig.**  - 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.  - Klicken Sie nun auf das **Text**-Symbol, um Antwortmöglichkeiten hinzuzufügen.  - 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.  - Das Feld können Sie später auch im **Vorschaufenster** bearbeiten und anpassen.  - 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**.  - Scrollen Sie bis zum Ende des Editors und klicken Sie auf **Fertig.** ## Hilfe & Kontakt Bei Fragen zum TeachCenter / TeachCenter Exam: [tc@tugraz.at](mailto:tc@tugraz.at)