H5P-Inhaltstyp: Drag and Drop

Übersicht

“Drag and Drop”-Aufgaben sind Zuordnungsaufgaben, in denen Texte oder Bilder zu definierbaren Bereichen eines Hintergrundbildes zugeordnet werden müssen.

Anwendungsbeispiele:

Elemente gruppieren, die zusammengehören oder etwas gemeinsam haben - wie hier im Beispiel der Jahreszeiten
Ein Objekt einem anderen Objekt zuordnen - z.B. visuelles Vokabellernen
Elemente in die richtige Reihenfolge legen - z.B. Ordnen nach Jahreszahlen oder Schwierigkeitsgrad
Elemente an die richtige Position legen - z.B. Erlernen der Bestandteile von Lebewesen oder Gegenständen (Skelett, Fahrrad etc.)

Beispiel: Welche Jahreszeit herrscht auf den folgenden Bildern?
(aufs Bild klicken, um das Objekt “live” auszuprobieren)

Das “Drag-and-Drop”-Inhaltsobjekt konfigurieren

Die Konfiguration der H5P-Inhaltsobjekte ist recht intuitiv umgesetzt, und in den Eingabefenstern sind die Funktionen der verschiedenen Einstellungen gut erläutert. Zudem sind die Einstellungen z.T. sehr zahlreich, daher werden hier nicht alle im Detail beschrieben.

Detailliertere Anleitung (englisch): Drag and Drop Tutorial auf H5P.org

Ausgangspunkt: Objekt erzeugen

Die Konfiguration des Inhalts beginnt, nachdem es gemäss der Anleitung Erstellen von H5P-Lernobjekten in ILIAS kreiert wurde. D.h.

Du hast im Seiteneditor H5P einfügen gewählt und im drop-down-Menü Drag and Drop gewählt, und befindest dich nun auf der Konfigurationsseite für dieses Inhaltsobjekt.

ODER

Du hast mit der Funktion Neues Objekt hinzufügen ein ILIAS-H5P-Objekt erzeugt und mit Titel und Beschreibung versehen.
Über den Reiter Inhalt bearbeiten und die Schaltfläche Inhalt hinzufügen hast du Drag and Drop gewählt.

Nun befindest du dich auf der Einstellungsseite des Objektes.

Grundeinstellungen und Hintergrundbild

Hier auf der Einstellungsseite kannst du der Aufgabe einen passenden Titel geben.
Eine Drag-and-Drop-Aufgabe besteht jeweils aus einem Hintergrundbild, auf dem die Lernenden dann Bilder oder Texte an den richigen Stellen ablegen sollen. Im Fall des obigen Beispiels also ein Bild, auf dem kleinere Szenen aus allen vier Jahreszeiten zu sehen sind. Achte je nach Aufgabenstellung darauf, ausreichend leeren Platz für die zu bewegenden Items freizulassen!
Wähle das Bild von deinem Computer über den Button Hinzufügen aus.
Gibt nun die gewünschte Größe des Hintergrundbildes ein. Achte darauf, dass die Angaben im korrekten Seitenverhältnis stehen, damit das Bild nicht verzerrt dargestellt wird.
Klicke dann auf den Reiter Aufgabe für die Aufgabeneinstellungen bzw. auf den Button Nächster Schritt: Aufgabe.

Aufgabeneinstellungen

In diesem Fenster können die Ablagezonen sowie die abzulegenden Items - Bilder oder Texte - erzeugt und einander zugeordnet werden.

Es ist wichtig, die Reihenfolge einzuhalten: zuerst alle Ablagezonen definieren, dann die abzulegenden Items. Andernfalls kann es sein, dass man die Zuordnung nicht wie gewünscht vornehmen kann.

Ablagezonen hinzufügen:
- Eine Beschriftung eingeben, diese wird gebraucht, um diese nachher bei der Zuordnung der abzulegenden Items zu identifizieren.
- Hintergrunddeckkraft: macht die Ablagezone sichtbar. Meist auf 0 setzen.
- Tipps und Rückmeldung: optional können solche gesetzt werden, um die Aufgabe interaktiver zu machen.
- Eingaben mit Fertig speichern.
- Nun erscheint die Ablagezone auf dem Hintergrundbild und kann in Grösse und Position angepasst werden.
- Diese Schritte wiederholen, bis alle Ablagezonen definiert sind.
  Tipp: Copy/Paste - Es ist auch möglich, eine schon definierte Zone zu kopieren und dann wieder einzufügen, so hat man rasch die weiteren Zonen definiert.
Abzulegende Items definieren:
- Für ein Text-Item: Auf den Text-Button klicken, dann anzuzeigenden Text eingeben.
- Für ein Bild-Item: Auf den Image-Button klicken, das abzulegende Bild hochladen, und Alternativ- und Mouseover-Text eingeben.
- Die möglichen Ziel-Ablagezonen aus der Liste mit den vorher definierten Ablagezonen auswählen. Achtung: damit wird nicht angegeben, was die richtige Lösung ist, sondern wo überall das Element abgelegt werden kann. Meist wird man hier Alles auswählen nehmen.
- Eingaben mit Fertig speichern.
- Das Item am gewünschten Ort auf dem Hintergrund positionieren - in unserem Beispiel im leeren Bereich unten.
- Diese Schritte wiederholen, bis alle Items definiert sind.
Items zu Ablagezonen zuordnen:
- Nun muss man nochmals jede Ablagezone bearbeiten: Doppelklick oder übers Bearbeitungsmenu>Stiftsymbol, das nach einmal anklicken erscheint.
- Aus der Liste der Elemente das/die korrekten Item/s auswählen.
- Eingaben mit Fertig speichern.

Bewertung / Rückmeldung

Als letztes können wir noch einige Einstellungen zum Verhalten der Aufgabe machen.

Allgemeine Rückmeldung: Wenn du dieses Feld leer lässt, wird keine allgemeine Rückmeldung gegeben. Als Rückmeldung wird den Lernenden bei jedem Item angegeben, ob es richtig oder falsch platziert wurde.

Oder du kannst hier Punktebereiche mit Klartext-Rückmeldungen definieren, wie im Bild gezeigt.
Klicke mehrmals Bereich hinzufügen, entsprechend der Anzahl Bereiche, die du möchtest. Du kannst die Abstufungen von Hand eingeben oder einfach Gleichmässig verteilen klicken.

Verhaltenseinstellungen: In diesem Abschnitt gibt es weitere Einstellmöglichkeiten, die gut beschrieben sind und daher hier nicht weiter erläutert werden.

Am Schluss oben rechts Speichern klicken nicht vergessen.

Quellennachweis: Für diese Anleitung wurden Public-Domain-Inhalte von Nele Hirsch/eBildungslabor übernommen. Siehe Interaktive Bildungsmaterialien mit H5P.