Herzlich Willkommen zum 9. Türchen des AdvenTOOLender! Ich freue mich so, dass du mit dabei bist. Heute geht es nochmal um das Tool H5P. Allerdings sind nicht wieder interaktive Videos das Thema, wie am 1. Tag, sondern ein laut H5P sogenanntes „Drag and Drop Matching Game“. Ich denke, wenn du dir das Beispiel anschaust, verstehst du genauer, was damit gemeint ist. Viel Spaß beim selber Umsetzen. 🙂

Beispiel: Die Teile der Zelle

Als ich die „Drag and Drop“-Möglichkeit von H5P gesehen habe, musste ich direkt an meine Schulzeit und den Biologie-Leistungskurs denken. Ich hatte direkt das Bild einer Körperzelle und ihrer Bestandteile im Kopf, die man zuordnen und benennen muss. Wörter und Sätze wie „Endoplasmatisches Retikulum“ und „Mitochondrien sind die Kraftwerke der Zelle“ sind plötzlich in mir umher geschwirrt. Wenn dir das nichts sagt: Du trägst sie in dir, sie sind Teil deiner Körperzellen. Mit diesem Beispiel kannst du dich genauer damit beschäftigen. Ziehe die Begriffe an die jeweiligen Stellen und überprüfe anschließend, ob du richtig lagst (klicke auf den „Check“-Button).

Kleiner Hinweis: Das Foto der Zelle ist von Pixabay, einer Plattform auf der du kostenlose und lizenzfreie Bilder bekommst. Diese und vier weitere Plattformen habe ich dir als Tipp an Tag 5 des AdvenTOOLender vorgestellt. Schau da gerne mal vorbei, wenn du Fotos für deine Projekte benötigst.

Geeignete Themen

Es funktionieren nur Themen, die du Bebildern kannst und die aus einzelnen Bestandteilen bestehen, die der User zuordnen muss. Weiter unten siehst du noch mehr Beispiele. Hier ein kleiner Einblick in die Ideen und Themen, über die ich noch nachgedacht habe:

• Geschichtlicher Zeitstrahl, an dem nur die Jahreszahlen stehen. Der User muss dann die jeweiligen Events/Dinge, die passiert sind, versuchen in der richtigen Reihenfolge einzuordnen.

• Ein Bild auf dem mehrere Zitate stehen (z.B. von Politikern), aber nicht der Name daneben steht. Der User muss dann mit Text (Name des Politikers) oder mit dem Bild erraten, wer das gesagt hat.

• Mathespiel für jüngere Kinder. Auf dem Bild stehen mathematische Aufgaben, zum Beispiel „3×4 =“ und daneben als Texte mehrere Anwortmöglichkeiten. Die richtigen Ergebnisse müssen in das jeweilige Feld gezogen werden.

Schreibe deine Ideen gerne in die Kommentare – auch mit Link, falls du dein eigenes „Drag and Drop Matching Game“ erstellt hast.

Ungeeignete Themen

Dementsprechend eignen sich bildschwache Themen und diejenigen nicht, die man weniger gut in Einzelteile zerlegen und dann wieder anordnen kann. Zum Beispiel die einfache Nachricht des Fußballspiels.

Die Schritt-für-Schritt-Anleitung

Und so kannst du ein „Drag and Drop Matching Game“ realisieren:

1.) Gehe auf die Homepage von H5P. Logge dich oben rechts ein, falls du von Tag 1 noch einen Account hast oder erstelle dir dort einen.

2.) Klicke auf „My account“. Dort siehst du dann auf der linken Seite den „Try out H5P“-Button. Den nutzen wir auch heute wieder.

Als kleiner Hinweis: Ich habe beim letzten H5P-Artikel den Hinweis bekommen, dass dieser „Try out H5P“-Bereich nur zum Ausprobieren ist und man da nicht tausende Projekte haben sollte, da H5P nicht unendlich viel Speicherplatz hat. Das verstehe ich auf jeden Fall. Ich würde uns aber gerade noch als „in der Testphase“ beschreiben, da wir erst unser zweites Projekt realisieren. Solltest du H5P total regelmäßig nutzen wollen, solltest du das Tool tatsächlich downloaden/das Plugin nutzen.

3.) Nachdem du auf den Button geklickt hast, bekommst du eine Liste mit vielen Umsetzungsmöglichkeiten. Wähle den Punkt „Drag and Drop“ aus. Dadurch öffnet sich eine formularartige Maske (siehe Foto 1), in der du alle weiteren Einstellungen triffst.

4.) Klicke oben neben „Title“ auf „Metadata“ um deinem Projekt einen Titel zu geben. Bei mir ist das einfach „Die Teile einer Zelle“. Du könntest dort auch noch weitere Angaben zu den Rechten und Lizenzen machen. Bei mir gibt es da nichts Besonderes einzutragen. Klicke auf den „Save metadata“-Button, um wieder zurück in die Einstellungs-Übersicht von Foto 1 zu kommen.

5.) Klicke dort auf den „Add“-Button mit dem Pluszeichen und lade das Foto, auf dem dein „Drag and Drop Matching Game“ stattfindet. Im Beispiel ist es die Zelle. Darunter kannst du noch die Größe des Spielfeldes in Pixeln angeben. Ich habe es auf 820px x 510px eingestellt. Das ist natürlich auch von deinem Bild abhängig.

6.) Gehe dann auf „Step 2 Task“. Dort erstellst du jetzt diese Bereiche, in die die Texte gezogen werden (sogenannte „Drop Zones“) und die Texte selbst (siehe Foto 2). Klicke dort auf den Kreis-Button, um so eine Drop Zone zu erstellen. Dadurch öffnet sich das zu ihr gehörende Fenster. Gib bei „Label“ dann den Namen ein, zum Beispiel „Mitochondrium“. Keine Sorge, das steht da dann nicht. Du benötigst das Ganze nur für die Zuordnung der richtigen Lösung, die gleich noch kommt. Setze außerdem einen Haken bei „This drop zone can only contain one element“, da ja nur eine Antwort passen soll. Sobald du fertig bist, klicke unten rechts auf „Done“.

7.) Jetzt befindet sich die Drop Zone, also der gestrichelte Kasten, auf deinem Bild. Du kannst ihn verschieben und größer und kleiner ziehen. Platziere in dort auf dem Foto, wo sich beispielsweise das Mitochondrium befindet. Aber pass auf: Der Kasten ist nicht durchsichtig und überdeckt deshalb die Teile des Bildes. Deshalb musst du ihn so anordnen, dass das Wichtigste noch zu sehen ist. Weitere Tipp: Mache alle Texte und Drop Zones gleich groß, auch wenn manche kürzere Texte haben. Sonst wird vorher schon anhand der Größe deutlich, wo was hinkommt. Klicke dafür auf das jeweilige Element und nutze die „Transform“-Funktion. Orientiere dich bei der Wahl der Größte an dem längsten Text.

8.) Klicke dann auf den Text-Button. Auch hier öffnet sich ein entsprechendes Fenster. Schreibe bei „Text“ das Wort, das dann auf dem Element stehen soll, das in die Drop Zone gezogen wird. In diesem Fall „Mitochondrium“. Jetzt musst du dem Text noch sagen, zu welcher Drop Zone er gehört. In diesem Fall wählst du „Deselect all“ aus. Denn: Es soll möglich sein, dass der Text in alle Drop-Zones gezogen werden kann. Wenn du beim Mitochodrien-Text nur das Mitochondrium als Drop Zone auswählst, würde es nur dort reinpassen. Du würdest die richtige Lösung also direkt mitbekommen. Klicke auf „Done“, sobald du fertig bist. Du kannst auch den Text größer und kleiner ziehen und verschieben (am besten dahin, wo nicht seine passende Drop Zone ist).

9.) Jetzt gibt es eine Drop Zone und den dazugehörigen Text. Der Text kennt die Drop Zone schon. Allerdings kennt die Drop Zone den Text noch nicht, weil du den gerade eben erst erstellt hast. Deshalb klicke erneut auf deine Drop Zone und dann auf das Stift-Icon zum Bearbeiten. In dem Fenster kannst du jetzt bei „Select correct elements“ den richtigen Text auswählen. Klicke dann wieder auf „Done“.

10.) Verfahre jetzt mit allen Drop Zones und Texten so. Neben Texten könntest du auch mit Bildern arbeiten. Das ist der Button neben dem Text-Button. Sobald du fertig bist, klicke auf „Save“. Das befindet sich ganz am Ende der Seite. Dann könntest du bei „Embed“ den Embed-Code für deine Homepage generieren und jederzeit dein „Drag and Drop Matching Game“ wieder bearbeiten.

Weitere Beispiele und Impulse

H5P hat auf seiner Homepage weitere Beispiele veröffentlicht, die dich ja vielleicht für eigene „Drag and Drop Matching Games“ inspirieren:

---

Du hast noch Fragen zu H5P, Feedback zum AdvenTOOLender oder ein bestimmtes Tool, das ich neben der Adventskalender-Aktion Schritt-für-Schritt erklären soll? Immer her damit! Entweder als Kommentar unter diesen Blog-Eintrag, per E-Mail (johanna.daher@gmx.de), via Kontaktformular oder über die sozialen Kanäle.

Quelle Beitragsbild: Screenshot