Anleitung & Tutorial - PromptBaukasten

Schritt 1

Prompt-Vorlage & Variablen anpassen

Wähle in der Bibliothek eine passende Prompt-Vorlage aus. Viele Prompts enthalten Platzhalter-Variablen in eckigen Klammern (z.B. [[THEMA]]). Du musst den Prompt-Text nicht mühsam per Hand bearbeiten! Trage deine Daten einfach direkt in die Eingabefelder über dem Prompt-Text ein. Die Variablen werden im Text automatisch in Echtzeit ersetzt.

Interaktives Beispiel (Probiere es aus!):

[[THEMA]]

Zusammengesetzter Prompt Erstelle ein Hangmanspiel für Photosynthese bei dem die wichtigsten Begriffe in typischer Art erraten werden müssen, falsche Buchstaben fügen beim Hangman ein Bauteil hinzu. Das Spiel soll im Browser laufen und optisch ansprechend gestaltet sein.

Schritt 2

Prompt in den KI-Chatbot kopieren

Klicke in der Prompt-Detailansicht auf "Prompt Kopieren". Der vollständige, fertig ausgefüllte Text befindet sich nun in deiner Zwischenablage. Öffne einen KI-Chatbot deiner Wahl (z. B. ChatGPT, Claude oder Gemini), füge den Prompt mit Strg + V ein und sende ihn ab. Die KI liest deine Vorgaben und generiert die komplette HTML-Anwendung für dich.

Du (Eingefügter Prompt)

Erstelle ein Hangmanspiel für Photosynthese bei dem die wichtigsten Begriffe in typischer Art erraten werden müssen, falsche Buchstaben fügen beim Hangman ein Bauteil hinzu. Das Spiel soll im Browser laufen und optisch ansprechend gestaltet sein.

KI-Assistent

Hier ist der komplette Code für dein Hangman-Spiel zur Photosynthese. Kopiere den folgenden HTML-Code:

                                            hangman.html
                                             Code kopieren
                                        
<!DOCTYPE html>
<html lang="de">
<head>
  <title>Hangman - Photosynthese</title>
  ...

Schritt 3

HTML-Code in die HTML Preview einfügen

Sobald die KI den Code fertig generiert hat, kopierst du den gesamten Codeblock aus dem Chatbot-Fenster. Öffne im PromptBaukasten oben rechts oder über die Sidebar die HTML Vorschau (oder klicke hier: HTML Preview öffnen). Füge den kopierten Code in das linke Textfeld ein. Auf der rechten Seite erscheint sofort die Live-Vorschau deiner App. Du kannst sie dort sofort testen, ausprobieren und prüfen.

Eingabefeld (HTML Code) Code eingefügt

<!DOCTYPE html>
<html><head>
<style>
body { font-family: sans-serif; }
</style>
</head><body>
<h1>Hangman: Photosynthese</h1>

Vorschau-Fenster (Laufzeit)

Hangman: Photosynthese

_ H L O _ O _ H _ L L

Versuche übrig: 4 / 6

A O L X

Schritt 4

Die fertig erstellte Datei herunterladen

Wenn dir das Programm gefällt und alle Funktionen wie gewünscht laufen, kannst du die Datei abspeichern. Klicke dazu in der HTML Vorschau (im linken Editor-Bereich oben rechts) auf das Download-Symbol (). Dein Browser lädt die App als eigenständige HTML-Datei herunter. Die Datei enthält alle Designs und Funktionen und läuft komplett unabhängig vom PromptBaukasten.

Lade die App mit einem Klick auf deine Festplatte:

Schritt 5

HTML-Datei mit Schüler:innen teilen

Jetzt hast du deine fertige Lern-App als einzelne HTML-Datei vorliegen. Du kannst diese Datei ganz unkompliziert an Schüler:innen weitergeben: Die Schüler benötigen keinen Account, keine App und kein Internet zum Ausführen! Ein Klick auf die Datei öffnet sie sofort im Browser des Handys, Tablets oder Computers. Teile die Datei über eure Schulplattform (Moodle, Mebis, MS Teams), versende sie per E-Mail oder lade sie in eine Cloud und erstelle einen QR-Code für die Klasse.

Lade dir die bebilderte Schritt-für-Schritt Anleitung zum Teilen herunter:

PDF-Anleitung zum Teilen öffnen