7 Leitfaden zum Einpflegen der Inhalte

Dieses Kapitel beschreibt die Erstellung der verschiedenen Inhaltselemente und Fragenformate des H5P-Plugins. Eine allgemeine Anleitung für das Arbeiten mit WordPress wird hier nicht beschrieben. Im Universitätskolleg wurde dazu eine umfangreiche und anschauliche Dokumentation zur Einrichtung und Verwaltung einer WordPress-Instanz an der Universität Hamburg herausgegeben. In dieser finden Sie eine einfache, detaillierte Anleitung für die ersten Schritte: https://www.universitaetskolleg.uni-hamburg.de/media/prozdok/prozdok-band6-web.pdf

Inhalte mit dem Page Builder gestalten

Das Seiten-Layout des Starterkits ist mit dem Page Builder "Elementor" (https://de.wordpress.org/plugins/elementor/) umgesetzt. Dieses bietet mehr Gestaltungsmöglichkeiten als das theme-abhängige WordPress-Design und hat den Vorteil, dass die Arbeit bedienerfreundlich in der Frontend-Optik stattfindet und nicht rein im Backend-Editor.

Elementauswahl des Page Builders Elementor

Elementor bietet eine große Anzahl von Gestaltungselementen, die intuitiv zu bedienen sind. Auf den im Starterkit bereits angelegten Seiten sind viele dieser Elemente in Verwendung, die je nach Bedarf verändert und auch kopiert werden können. Das Layout lässt sich durch die Nutzung von den sogenannten "Abschnitten" strukturieren, welche auf den Seiten per Drag and Drop nach Bedarf und Wunsch verschoben werden können. Aus dem linksseitigen Menü werden die gewünschten Elemente in die Abschnitte gezogen oder per +-Symbol hinzugefügt.

Backend des Pagebuilders Elementor

Die grundsätzlichen Werkzeuge sind in der Grafik dargestellt. Diese erscheinen, wenn die Maus über den jeweiligen Abschnitt bewegt und gelten für den eingerahmten Bereich.

Backend Werkzeuge Elementor

Backend Werkzeuge Elementor

Backend Werkzeuge Elementor

Interaktive Anwendungen mit H5P erstellen:

Für die Erstellung der interaktiven Anwendungen ist das Plugin H5P notwendig. Dies ist in allen WordPress-Starterkit-Versionen bereits vorinstalliert. Die in H5P angelegten Inhaltselemente lassen sich an jeder Stelle der Internetseite per Shortcode einbinden. Es können auch bereits bestehende Inhalte bspw. von H5P.org importiert und weiterbearbeitet werden.

Ein neues interaktives Inhaltselement anlegen:

1. Im Administrationsbereich Ihrer WordPress-Instanz wechseln Sie in die Plugin-Oberfläche von H5P. Klicken Sie dazu in der linken Spalte auf den Menüpunkt "H5P-Inhalt".

2. Klicken Sie anschließend auf den Button "Neue hinzufügen" um die Konfigurationsseite des neuen Elements zu öffnen.

Backend-Ansicht des Menuepunktes H5P Inhalt

1. Geben Sie nun zunächst einen aussagekräftigen Titel ein.

Backend-Ansicht H5P Inhalt Titel eingeben

1. Sobald Sie auf "Inhaltstyp auswählen" geklickt haben, wählen Sie aus den verfügbaren Elementen ein geeignetes Format aus. Je nach gewähltem Inhaltstyp stehen Ihnen anschließend unterschiedliche Einstellungsmöglichkeiten zur Verfügung. Beachten Sie auch die Tutorials zu den verschiedenen Einstellungsmöglichkeiten.

H5P Auswahl der Tutorials

• Course Presentation (https://h5p.org/tutorial-course-presentation)

• Dialog Cards (https://h5p.org/tutorial-dialog-cards)

• Drag and Drop (https://h5p.org/tutorial-drag-and-drop-question)

• Fill in the Blanks (https://h5p.org/tutorial-fill-in-the-blanks)

• Flashcards (https://h5p.org/tutorial-flashcards)

• Interactive Video (https://h5p.org/tutorial-interactive-video)

• Multiple Choice question tutorial (https://h5p.org/tutorial-multichoice-question)

• Question Set (https://h5p.org/tutorial-question-set)

• Summary (https://h5p.org/tutorial-summary)

• Arithmetic Quiz (https://h5p.org/documentation/content-author-guide/tutorials-for-authors/arithmetic-quiz)

• Audio (https://h5p.org/documentation/content-author-guide/tutorials-for-authors/audio)

• Chart (https://h5p.org/documentation/content-author-guide/tutorials-for-authors/chart)

• Collage (https://h5p.org/documentation/content-author-guide/tutorials-for-authors/collage)

• Drag the Words (https://h5p.org/documentation/content-author-guide/tutorials-for-authors/drag-the-words)

• Facebook Feed (https://h5p.org/documentation/content-author-guide/tutorials-for-authors/facebook-feed)

• Find the Hotspot (https://h5p.org/documentation/content-author-guide/tutorials-for-authors/find-the-hotspot)

• Guess the Answer (https://h5p.org/documentation/content-author-guide/tutorials-for-authors/guess-the-answer)

• Image Hotspots (https://h5p.org/tutorial-image-hotspots)

• Impressive Presentation (https://h5p.org/tutorial-impressive-presentation)

• Mark the Words (https://h5p.org/documentation/content-author-guide/tutorials-for-authors/mark-the-words)

• Memory Game (https://h5p.org/documentation/content-author-guide/tutorials-for-authors/memory-game)

• Single Choice Set (https://h5p.org/documentation/content-author-guide/tutorials-for-authors/single-choice-set)

• Timeline (https://h5p.org/documentation/content-author-guide/tutorials-for-authors/timeline)

• Twitter User Feed (https://h5p.org/documentation/content-author-guide/tutorials-for-authors/twitter-user-feed)

• appear.in (https://h5p.org/documentation/content-author-guide/tutorials-for-authors/appear-in)

• Documentation Tool (https://h5p.org/tutorial-documentation-tool)

1. Wenn Sie mit der Konfiguration des Inhaltselements fertig sind, klicken Sie auf den Button "Erstellen" oben auf der rechten Seite, um die Bearbeitung abzuschließen. Im Kästchen auf der rechten Seite wird direkt der Shortcode zum Einbinden dieses Elementes angezeigt.

Backend-Ansicht H5P Inhalt erstellen

Ein Inhaltselement importieren:

Voraussetzung für den Import ist, dass Sie ein geeignetes Inhaltselement als .h5p Export-Datei vorliegen haben. Derartige Archive lassen sich direkt bei h5p.org beziehen oder aus bestehenden Anwendungen im Frontend herunterladen (sofern die öffentliche Export-Funktion aktiviert wurde gibt es hier einen Download-Button direkt in dem jeweiligen Inhaltselement).

1. Im Administrationsbereich Ihrer WordPress-Instanz wechseln Sie in die Plugin-Oberfläche von H5P. Klicken Sie dazu in der linken Spalte auf den Menüpunkt "H5P-Inhalt".

2. Klicken Sie anschließend auf den Button "Neu hinzufügen" um die Konfigurationsseite des neuen Elements zu öffnen.

Backend-Ansicht Menuepunkt H5P Inhalt

1. Geben Sie nun zunächst einen aussagekräftigen Titel ein.

Backend-Ansicht H5P Titel eingeben

1. Sobald Sie auf "Inhaltstyp auswählen" geklickt haben können Sie in den Bereich "Hochladen" wechseln.

2. Wählen Sie die lokal gespeicherte .h5p-Datei und übertragen Sie diese zu WordPress indem Sie auf "Use" klicken.

Backend-Ansicht H5P Inhaltstyp hochladen

1. Je nach gewähltem Inhaltstyp stehen Ihnen anschließend unterschiedliche Einstellungsmöglichkeiten zur Verfügung. Beachten Sie auch die Tutorials zu den verschiedenen Einstellungsmöglichkeiten.

2. Wenn Sie mit der Konfiguration des Inhaltselements fertig sind, klicken Sie auf den Button "Erstellen" oben auf der rechten Seite, um die Bearbeitung abzuschließen.

Backend-Ansicht H5P erstellen

Ein zuvor erstelltes Inhaltselement in einer WordPress-Seite einbinden:

1. Im Administrationsbereich Ihrer WordPress-Instanz wechseln Sie in die Plugin-Oberfläche von H5P. Klicken Sie dazu in der linken Spalte auf den Menüpunkt "H5P-Inhalt".

2. Klicken Sie auf eines der erstellen Inhaltselemente.

Backend-Ansicht H5P ID suchen

1. Kopieren Sie aus der Box mit dem Titel "Shortcode" oben rechts auf der Seite den Kurzbefehl und fügen Sie diesen an der gewünschten Stelle, üblicherweise auf einer dafür eingerichteten Seite, ein. Im Frontend wird dann anstelle des Kurzbefehls das referenzierte Inhaltselement angezeigt.

Backend-Ansicht H5P ID einfügen