Wie Lehrpersonen mit KI-Chatbots kinderleicht Lernapps erstellen können

Eine Schritt-für-Schritt-Anleitung für Lehrende ohne Programmiererfahrung

Für wen ist dieser Artikel? Für Lehrpersonen, die eigene Lernapps erstellen möchten, aber keine Programmiererfahrung haben. Ich zeige Ihnen, wie Sie mit KI-Chatbots wie ChatGPT oder Gemini in 10 Minuten ein individuelles Lernspiel für Ihre Klasse erstellen – ohne eine einzige Zeile Code zu schreiben.

Damit Sie gleich ein Bild davon haben, was ich meine, finden Sie unter folgendem Link zu Gemini ein “Ökosystem-Baukasten”-Lernspiel, das ich mit innerhalb von drei Minuten mit zwei einfachen Prompts erstellt habe. Sehen wir uns also an, wie Sie so etwas ganz einfach selbst machen können.

Lernapps

Wenn Sie wie ich in den letzten 10 Jahren ein Lehramtsstudium absolviert haben, mussten Sie sicherlich mal eine Lernapp für Ihre Lernenden erstellen. Oder zumindest einen Prototyp als Hausaufgabe für ein Seminar, auch wenn er nie von Schüler:innen gespielt wurde.

Unter meinen Kommiliton:innen war die Plattform LearningApps sehr beliebt. Dort konnte man bestehende Apps durchstöbern und neue erstellen – relativ einfach, ohne viel technisches Know-how. Diese Apps waren zwar ganz nett, aber wir wissen alle, wovon „nett“ die kleine Schwester ist.

Natürlich ist ein Kahoot-Quiz oder eine Mentimeter-Umfrage eine nette Abwechslung, aber hat es wirklich einen Lerneffekt? Oder ist die Vorbereitung bloße Zeitverschwendung? Während ich grundsätzlich ein Fan von Digitalisierung bin, hatte ich oft das Gefühl, dass viele digitale Tools um ihrer selbst willen eingesetzt wurden – weil sie modern sind, nicht weil sie einen didaktischen Mehrwert bieten.

Enter ChatGPT. Stellen Sie sich vor: Sie haben ein 30-seitiges Prüfungsskript. Sie laden es in ChatGPT hoch und lassen eine lernförderliche App erzeugen – in 10 Minuten. Vielleicht sogar drei Varianten mit unterschiedlichen Komplexitätsstufen: Ein Memory-Spiel, ein Lernkarten-Quiz, ein inhaltsbasierendes Rollenspiel.

In diesem Beitrag zeige ich Lehrpersonen wie mir – die sich mit Programmieren nicht wirklich auskennen – wie Sie mit KI-Chatbots einfache Lernapps und Lernspiele erstellen können. Nicht super komplexe Apps, sondern simple aber effektive Lernspiele, die den Unterricht auflockern und einen Lerneffekt bieten. Möglich ist das Ganze durch „Vibecoding“.

Was ist „Vibe Coding“?

Vibecoding bedeutet: Sie beschreiben in normaler Sprache, was Sie brauchen (z. B. „Erstelle eine interaktive Lernapp, mit der sich Lernende für eine Prüfung zum Thema Zellteilung vorbereiten können.“), und die KI erzeugt den fertigen Programmcode.

Wer nicht programmieren kann (so wie ich), bekommt dadurch Zugang zu Möglichkeiten, die uns vorher verschlossen waren. Wer bereits programmieren kann, nutzt KI, um schneller zu arbeiten oder Routineaufgaben zu delegieren.

Wie bei anderen Einsatzmöglichkeiten von KI-Chatbots kommt es natürlich auch hier zu Halluzinationen und anderen Problemen. Im professionellen Bereich birgt Vibecoding große Gefahren, da wichtige Services durch Fehler ausfallen oder Sicherheitslücken entstehen könnten. Für einfache Lernspiele wie hier – ohne sensible Daten und ohne kritische Systeme – ist das Risiko überschaubar. Das Schlimmste, das passieren kann: Ihr Programm funktioniert nicht, und Sie probieren es noch einmal.

Was Sie benötigen

Um mit KI programmieren zu können, braucht es zwei Dinge:

1. Code-Erstellung: Jedes Sprachmodell – egal ob GPT, Gemini, Claude oder Mistral – kann Code erstellen. Das Einzige, das Sie benötigen, ist ein guter Prompt.

2. Code-Ausführung: Nicht jeder Chatbot kann den Code auch direkt ausführen, als funktionierende App anzeigen und/oder die fertige Lernapp als Datei zum Download anbieten. Manche Chatbots (wie z. B. Copilot, Duck AI oder Le Chat) schreiben Ihnen nur den Code auf – dann müssten Sie diesen selbst in eine Datei kopieren und speichern (was einfach umzusetzen ist, aber einen Extra-Schritt bedeutet). Warum ist das so? Sprachmodelle und Chatbots sind nicht dasselbe. Sprachmodelle sind wie der Motor eines Autos. Und der Chatbot ist das gesamte Auto. Ein Sprachmodell kann Code schreiben, aber nicht ausführen. Dafür braucht es eigene Funktionen und Programme im Chatbot, die aber nicht jeder hat.

Am einfachsten ist es daher mit Chatbots, die eine spezielle Funktion haben: ChatGPT und Gemini haben „Canvas“, Claude hat „Artefakte“. Diese Funktionen erlauben es, dass Sie das Programm direkt im Chatbot sehen und testen können – und am Ende einfach eine fertige Datei herunterladen und/oder die Datei direkt über den Chatbot mit anderen Nutzer:innen teilen können.

Schritt für Schritt zur eigenen Lernapp

Schritt 1: Chatbot und Canvas aktivieren

Wählen Sie einen Chatbot aus. Für den Anfang empfehle ich ChatGPT oder Gemini. Sie müssen sich dort registrieren, ein kostenpflichtiges Abo brauchen Sie aber nicht.

Aktivieren Sie, wenn Sie ChatGPT oder Gemini verwenden, den Canvas-Modus. Diese Funktion ermöglicht es, dass der Chatbot ein Dokument erstellt, das Sie gemeinsam bearbeiten können. Beim Erstellen von Programmen hat diese Funktion den Vorteil, dass Sie den Code direkt im Chatbot ausführen und testen können – ohne Programmiersprachen oder Entwicklungsumgebungen herunterladen zu müssen.

Den Canvas-Modus finden Sie, wenn Sie auf das Plus (ChatGPT) oder „Tools“ (Gemini) klicken.

Es geht natürlich auch ohne Canvas-Funktion. Wie das funktioniert, zeige ich Ihnen im Anschluss noch.

Schritt 2: Prompt erstellen

Formulieren Sie einen Prompt, der der KI sagt, was sie erstellen soll. Wir wollen ein Lernspiel für den Unterricht – dafür gebe ich Ihnen eine Vorlage. Ersetzen Sie einfach alle Informationen in eckigen Klammern durch Ihre eigenen Angaben:

Ich möchte ein interaktives Lernspiel für meine Lernenden erstellen.

Lernkontext:
- Fach/Disziplin: [z. B. „Mathematik“, „Englisch“, „Biologie“, „Geschichte“]
- Schulform: [z. B. „Grundschule“, „Gymnasium“, „Realschule“, „Universität“]
- Schulstufe: [z.B. „3. Schulstufe“, „Sekundarstufe II“, „Bachelor-Studium“]
- Alter der Lernenden: [z. B. „10 – 11 Jahre“, „19 – 24 Jahre“]
- Vorkenntnisse/Level: [z. B. „Anfänger“, „Fortgeschritten“, „CEFR-Level A2“]

- Nutzungskontext: [z. B. „Einzelarbeit am Tablet“, „Partnerarbeit“, „Hausaufgabe“, „Stationenlernen“]
- Zusatzmaterialien: [Falls vorhanden: „Ich lade folgende Datei hoch: [Prüfungsunterlagen/Lehrplan/Curriculum/Wortschatzliste/...]“]
- Lernziel: [Was sollen die Lernenden üben/lernen? z. B. „Multiplikationstabellen 1-10“, „Hauptstädte Europas“, „Englische Vokabeln Thema Essen“]
- Spielmechanik: [Gewünschter Spieltyp, z.B. „Quiz mit Multiple Choice“, „Memory-Spiel“, „Drag-and-Drop-Zuordnung“, „Lückentext“, „Karteikarten-System“]
- Schwierigkeitsgrad: [z.B. „einfach“, „mittel“, „schwer“, „ansteigend“]
- Anzahl der Fragen/Aufgaben: [optional, z. B. „10 Fragen“, „20 Vokabelpaare“, „variabel“]
- Spieldauer: [optional, z. B. „ca. 10 Minuten“, „flexibel“, „mit Zeitlimit“]
- Feedbackart: [z. B. „sofortiges Feedback nach jeder Antwort“, „Auswertung am Ende“, „Erklärungen bei falschen Antworten“]
- Besondere Wünsche (optional): [z.B. „mit Punktesystem“, „mit Timer“, „mit Fortschrittsanzeige“, „farbenfrohe Gestaltung“, „motivierende Erfolgsmeldungen“]

Erstelle das Spiel als einzige HTML-Datei (mit integriertem CSS und JavaScript), die ich direkt im Browser öffnen und nutzen kann.

Sie können diese Vorlage nach Belieben anpassen, kürzen oder ergänzen.

Warum HTML, CSS und JavaScript? Diese drei Sprachen sind auf jedem Computer und Smartphone vorinstalliert. Sie bekommen eine einzige, fertige Datei, die Sie per E-Mail teilen, auf Moodle hochladen oder auf Ihrer Website einbetten können. Python oder andere Sprachen würden zusätzliche Installation erfordern.

Schritt 3: Ausführen und überarbeiten

Wenn Sie den Prompt abschicken, generiert die KI den Code. Ich habe die Vorlage mit fiktiven Informationen für einen Englisch-Unterricht befüllt. Hier der erzeugte Code:

Klicken Sie rechts oben auf „Herunterladen“, um die HTML-Datei zu speichern. Oder klicken Sie auf „Vorschau“, um das Programm direkt im Chatbot auszuprobieren. Dies sieht dann so aus:

Ich habe das Spiel gleich getestet. Während es grundsätzlich funktioniert, gibt es Dinge, die mich stören: So ist z. B. das Feedback zu kurz. Ich möchte nicht nur wissen, ob meine Antwort richtig/falsch war, sondern eine ausführliche Erklärung. Und der „Next Question“-Button wirkt altmodisch.

Das ist überhaupt kein Problem. Ein solches Spiel wird in den seltensten Fällen beim ersten Mal großartig sein. Mit KI zusammenzuarbeiten ist immer ein iterativer Prozess – Prompt schreiben, Feedback geben, selbst etwas beitragen.

Sagen Sie der KI, was Ihnen gefällt und was nicht. Nach ein paar Mal hin und her – ich nenne das gern „KI-Ping-Pong“ – ist das Ergebnis meistens sehr brauchbar.

Schritt 4: Einsetzen und teilen

Nutzen Sie das Lernspiel für sich selbst oder teilen Sie es mit Ihren Lernenden. HTML-Dateien sind universell einsetzbar: per E-Mail oder WhatsApp teilen, auf Moodle hochladen, auf Ihrer Website einbetten.

Wenn Sie das Ganze in Gemini erstellt haben, dann brauchen Sie nicht einmal die Datei herunterladen, um das Spiel zu teilen, sondern Sie können das in Gemini erstellte Spiel teilen. Klicken Sie dazu auf den „Teilen“-Button rechts oben. Dann können Sie den Link zum Spiel (direkt im Gemini-Chatbot) mit anderen Personen teilen.

Alternative: Ohne Canvas-Funktion

Falls Ihr Chatbot keine Canvas-Funktion hat (z. B. Copilot), können Sie die Datei manuell erstellen. Das ist fast so einfach wie ein Word-Dokument erstellen:

1. Lassen Sie den Chatbot den Code generieren. Hier ein Beispiel aus Copilot:

   

2. Öffnen Sie den Standard-Texteditor (Windows: „Editor“ in der Suche):

   

   

3. Kopieren Sie den gesamten Code (meist gibt es einen Kopier-Button).

4. Fügen Sie ihn im Texteditor ein.

   

5. Speichern Sie als „spiel.html“ oder „quiz.html“ (wichtig: mit .html-Endung, Dateityp: „Alle Dateien“)

Fertig! Die Datei können Sie nun ausführen (Doppelklick) oder teilen.

Hilfe bei Problemen

Eine großartige Eigenschaft von Chatbots: Sie helfen uns, wenn Probleme auftreten. Hier ein paar typische Probleme und mögliche Lösungen:

• Das Modell erzeugt einen Code, aber keine Datei:

  • Stellen Sie sicher, dass Sie einen Chatbot verwenden, der Dateien erzeugen kann (z. B. ChatGPT).

  • Aktivieren Sie Canvas und nutzen Sie den Download-Button (wenn verfügbar).

  • Sagen Sie: „Erstelle einen Download-Link für die HTML-Datei“.

  • Ermutigen Sie die KI. Hin und wieder hilft auch ein simples „Du schaffst das! Ich glaube an dich!“ (Ja, das hilft tatsächlich häufig, so blöd es auch klingen mag.)

  • Probieren Sie es in einem neuen Chat noch einmal. Manchmal verfährt sich die KI – dann hilft nur mehr ein Neustart.

• Die Datei kann nicht heruntergeladen werden: Sagen Sie dem Modell, dass es nicht funktioniert hat. Es soll es noch einmal probieren.

• Das Programm funktioniert nicht: Sagen Sie dem Modell, dass das Programm nicht ausführbar ist. Es soll es noch einmal probieren.

• Das Modell nutzt nicht HTML: Weisen Sie es an: „Verwende nur HTML, CSS und JavaScript.“

• Sonstiges: Schreiben Sie: „Ich kenne mich nicht aus. Ich habe keine Programmiererfahrung. Tu so, als ob ich ein fünfjähriges Kind wäre. Nimm mich bei der Hand und führe mich Schritt für Schritt durch den Prozess.“

Wichtige Hinweise

Datenschutz: Laden Sie keine personenbezogenen Daten in Chatbots hoch. Wenn Sie Prüfungsmaterialien verwenden, entfernen Sie vorher alle Namen, E-Mail-Adressen oder andere schützenswerte Informationen. Die meisten Chatbots speichern hochgeladene Daten oder nutzen sie gar für das Modelltraining.

Qualitätssicherung: KI macht Fehler. Überprüfen Sie die Inhalte immer selbst, bevor Sie sie im Unterricht einsetzen. Besonders bei Faktenwissen, Formeln und grammatikalischen Erklärungen.

Barrierefreiheit: KI-generierte Apps sind oft nicht barrierefrei. Wenn Sie Lernende mit Sehbehinderung oder motorischen Einschränkungen haben, müssen Sie die Apps möglicherweise anpassen.

Damit wünsche ich Ihnen nun viel Freude mit einem ganz neuen Bereich. Probieren Sie es aus!