Übersicht #
Die Puzzle-Komponente ist ein interaktives Lernwerkzeug für Aptigo. Sie ermöglicht es, Wissensinhalte in Puzzleform zu präsentieren, bei denen Schüler verschiedene Teile zu einem logischen Ganzen zusammensetzen müssen.
Funktionsweise #
Die Komponente besteht aus zwei Hauptmodi:
| Modus | Beschreibung |
|---|---|
| Edit-Modus | Lehrer können Puzzle-Teile erstellen, bearbeiten und anordnen |
| Render-Modus | Schüler interagieren mit dem fertigen Puzzle |
Das Grundprinzip #
- Puzzle-Teile werden mit Inhalten (Text), einer Gruppen-ID und einer Position auf dem Spielfeld definiert
- Schüler verschieben die Teile per Drag-and-Drop (Klick) auf das Spielfeld
- Automatische Prüfung stellt fest, ob die Teile korrekt angeordnet sind
- Punktevergabe bei erfolgreicher Lösung (optional)
Edit-Modus (Für Lehrer) #

Bedienelemente im Detail #
| Element | Beschreibung |
|---|---|
| Erklärtext | Textfeld für die Aufgabenstellung (wird den Schülern angezeigt) |
| Tabelle | Übersicht aller Puzzle-Teile mit Bearbeitungsmöglichkeiten |
| Spalten | Gruppe, Inhalt, Farbe, X, Y, Löschen |
| “Teil hinzufügen” | Button zum Anlegen neuer Puzzle-Teile |
Tabelle der Puzzle-Teile #
| Spalte | Funktion | Format |
|---|---|---|
| Set/Gruppe | Gruppenzugehörigkeit (z.B. “Gruppe 1”) | Textfeld |
| Inhalt | Der Text, der auf dem Teil angezeigt wird | Textfeld |
| Farbe | Hintergrundfarbe des Teils | Hex-Code (z.B. #FF8400) |
| X | Spaltenposition auf dem Spielfeld | Zahl (0-basiert) |
| Y | Zeilenposition auf dem Spielfeld | Zahl (0-basiert) |
| 🗑️ | Löschen des Teils | Button |
Schritt-für-Schritt: Puzzle erstellen #
-
Erklärtext eingeben
- Beschreiben Sie die Aufgabe (z.B.: “Ordne die Begriffe den richtigen Kategorien zu”)
-
Puzzle-Teile anlegen
- Klicken Sie auf “Teil hinzufügen”
- Geben Sie für jedes Teil ein:
- Gruppe: Alle Teile mit gleicher Gruppen-ID bilden eine logische Einheit
- Inhalt: Der anzuzeigende Text (max. 2 Zeilen)
- Farbe: Hintergrundfarbe für bessere Übersicht
- X/Y: Position auf dem Spielfeld (von 0 beginnend)
-
Positionierung verstehen Es gibt drei Werte, mit denen Sie die richtige Zuordnung bestimmen:
- Die Gruppe: Nur Puzzlestücke der selben Gruppe gehören überhaupt zusammen. Wenn sie mehrere Gruppen anlegen, bedeutet das, es gibt mehrere einzelne Puzzles. Das eignet sich z.B. für Vokabeltests, wo immer zwei Puzzlestücke eine Zuordnung bilden
- Die Koordinaten: Puzzlestücke der selben Gruppe werden durch ihre Koordinaten (X/Y) genau bestimmt.
- Puzzlestücker, die nebeneinander liegen sollen, erhalten aufsteigende X-Koordinaten
- Puzzlestücke, die untereinander liegen sollen, erhalten aufsteigende Y-Koordinaten
- das Geniale: Sie können zweidimensionale Zuordnungen erstellen, z.B. das Ohmsche Gesetz in der oberen Reihe in Worten und darunter eine zweite Reihe mit den Formelbuchstaben.
| Wert | Funktion | Beispiel |
|---|---|---|
| Gruppe | Erzeugt ein für sich geschlossenes kleines Puzzle | Vokabeltest mit 5 Vokabeln: 5 Gruppen mit je zwei Teilen nebeneinander |
| X-Koordinate | Definiert Teile, die nebeneinander liegen sollen | Im Vokabeltest: Dog->X:0, Hund->X:1; Cat->X:0, Katze->X:1 |
| Y-Koordinate | Definiert Teile, die untereinander liegen sollen | Zwei Reihen für eine Formel der Physik: Y:0 ist die Formel in Worten, Y:1 die Formel mit ihren Formelzeichen |
Verwenden sie Aussagekräftige Gruppennamen wie z.B. Vokabel: Hund. Die Schüler können diese nicht sehen, aber die KI kann sie lesen und dadurch sinnvollere Hilfestellungen geben.
- Speichern
- Die Komponente synchronisiert automatisch mit dem Content-Modell
- Daten werden persistent gespeichert
Beispiel: Historisches Puzzle #
| Gruppe | Inhalt | Farbe | X | Y |
|---|---|---|---|---|
| 1 | 1914 | #FF8400 | 0 | 0 |
| 1 | Beginn | #FF8400 | 1 | 0 |
| 1 | 1. Weltkrieg | #FF8400 | 0 | 1 |
| 2 | 1939 | #00B4FF | 0 | 0 |
| 2 | Beginn | #00B4FF | 1 | 0 |
| 2 | 2. Weltkrieg | #00B4FF | 0 | 1 |
Tipps für die Puzzle-Erstellung #
- Gruppen-ID: Verwenden Sie aussagekräftige Namen (z.B. “Ursachen”, “Folgen”)
- Inhalt: Kurze, prägnante Texte (max. 16 Zeichen pro Zeile)
- Zeilenumbruch: Jedes Puzzlestück hat 2 Zeilen. Aptigo versucht, den Zeilenumbruch bei einem Leerzeichen oder Bindestrich zu setzen. Nutzen sie das um den Zeilenumbruch zu definieren.
- Farben: Nutzen Sie kontrastierende Farben für verschiedene Gruppen
- Gleiche Wörter: Bei Puzzlestücken, die gleich beschriftet sind, müssen sie dem Schüler über die Farbgebung den Hinweis geben, wo das jeweilige Puzzlestück platziert werden soll. Aptigo unterscheidet zwei gleich beschriftete Puzzlestücke intern sehr wohl!
- Positionen: Starten Sie bei (0,0) für jede neue Gruppe
Render-Modus (Für Schüler) #

Ansicht des Puzzles #
Oberer Bereich: Erklärtext und das Spielfeld (Board)
Unterer Bereich: Verfügbare Puzzle-Teile (ungeordnet)

Interaktionsmöglichkeiten #
Das Puzzlestück wird durch anklicken und nochmal klicken platziert. Das mag nicht so cool wirken, wie eine Drag’n’Drop Funktion, ist aber für motorisch eingeschränkte Menschen leichter zu bedienen.
| Aktion | Ergebnis |
|---|---|
| Teil anklicken | Wird ausgewählt (blaue Umrandung) |
| Leeres Feld anklicken | Ausgewähltes Teil wird platziert |
| Platziertes Teil anklicken | Wird wieder entfernt (zurück in die Auswahl) |
| neues Teil auf ein Platziertes legen | Das neue Teil wird Platziert (Teile werden ausgetauscht) |
Das Spielfeld #
- Dynamische Größe basierend auf den Puzzle-Teilen
- Leere Felder sind gestrichelt markiert
- Korrekt platzierte Teile werden am Ende mit grünem Glow hervorgehoben
Die Puzzle-Teile #
- Design: Puzzle-Form mit speziellen Aussparungen (wie echte Puzzleteile)
- Inhalt: Angezeigter Text, automatisch in 2 Zeilen umgebrochen
- Farbe: Vom Lehrer festgelegte Hintergrundfarbe
- Status:
- 🔵 Ausgewählt (blaue Umrandung)
- 🟢 Korrekt platziert (grüner Glow)
Automatische Prüfung #

Wie die Prüfung funktioniert #
Die Komponente prüft automatisch, ob alle Puzzle-Teile korrekt angeordnet sind:
- Alle Teile müssen platziert sein
- Nachbarschaftsprüfung: Jedes Teil muss seine korrekten Nachbarn haben
- Rechts, Links, Oben, Unten
- Basierend auf den X/Y-Koordinaten und der Gruppen-ID
Prüfkriterien im Detail #
| Kriterium | Beschreibung |
|---|---|
| Vollständigkeit | Alle Teile sind auf dem Board platziert |
| Nachbarschaft | Jedes Teil hat seine erwarteten Nachbarn (gleiche Gruppe) |
| Position | Die relative Anordnung der Gruppe stimmt |