Think Tank Medien und Informatik

So einfach entwirfst du dein eigenes Lernspiel mit KI

In den meisten Kantonen der Schweiz haben die Sommerferien begonnen. Dies bedeutet für viele Menschen Ferienzeit und die alltäglichen Dinge dürfen etwas leichter und lockerer sein. Deshalb haben wir uns gedacht, dass passend zu den Sommerferien auch der Inhalt des Blogposts etwas leichter und spielerischer sein darf.

Wusstest du zum Beispiel, dass du mit KI-Anwendungen deine eigenen Spiele entwerfen kannst? Klar, wenn du einen entsprechenden Prompt in ChatGPT eingibst, hilft dir ChatGPT gerne dabei, ein Spiel zu entwickeln. Allerdings sprechen wir hier nicht von analogen Spielen, sondern von webbasierten Spielen.

Und das beste daran: Du brauchst keine Vorkenntnisse im Code schreiben.

Letztens sind wir über folgenden Blogpost von Manuel Flick gestossen: «10 Ideen & Prompts für interaktive Lernspiele mit Claude 3.5 Sonnet». Manuel Flick ist Lehrperson, Fortbildner und teilt regelmässig in seinem Blog Beiträge aus seinem Lehrerleben in Zusammenhang mit Inhalten zu KI, ChatGPT und digitalem Unterricht. Im Blogbeitrag berichtet er darüber, wie er leicht und unkompliziert eigene webbasierte Spiele mithilfe von Claude 3.5 Sonnet entwickelt. Claude ist ein von Anthropic entwickeltes KI-Sprachmodell das ähnlich funktioniert wie ChatGPT aber mit dem Feature «Artifacts» unglaubliches leisten kann. Das wollten wir selber ausprobieren.

Das folgende Videos führt in das KI-Tool ein und liefert alle wichtigen Informationen zum Einstieg:

Ein eigenes Spiel erstellen

Für das Erstellen der interaktiven Lernspiele müsst ihr zuvor aber noch die experimentelle Funktion Artifacts aktivieren.

Damit bekommt ihr euer KI-Ergebnis direkt neben eurem Gesprächsverlauf angezeigt. Wenn ihr weitere Prompts eingebt, wird das KI-Ergebnis dann entsprechend angepasst und ihr könnt zwischen den verschiedenen Versionen eurer Ergebnisse wechseln.

Gehe zu: https://claude.ai/new
Erstelle einen Account
Log dich mit deinem Account ein
Artifacts aktivieren: Klicke auf das Logo «Claude», dann klicke auf deinen Account. Unter «Feature Preview» kannst du Artifacts aktivieren.
Starte eine neue Unterhaltung und gib deine eigenen Prompts ein.

Im nächsten Abschnitt zeigen wir dir, welche Prompts wird benutzten und wie wir vorgegangen sind, um das eigene Spiel weiter zu optimieren.

Ein eigenes Fussball-Quiz erstellen

In Erinnerung an die eigene Schulzeit, überlegte ich mir, das beliebte Wandtafel-Fussballspiel in die digitale Welt zu übertragen. Falls du das Spiel nicht kennst oder nicht mehr weisst, wie es funktioniert, kannst du es hier nachlesen.

Wandtafel-Fussball hat uns Schüler*innen immer sehr motiviert und Freude bereitet, insbesondere mit der ganzen Klasse konnte sich die Stimmung schnell aufheizen. Warum also dieses Spiel nicht auch auf dem Weg in die Sommerferien zu zweit spielen?

Mit den folgenden Prompts haben wir versucht, das Spiel im Browser zum Laufen zu bringen. Es war wirklich erstaunlich, wie gut Claude 3.5 Sonnet mit den aktivierten «Artifacts» funktioniert. Auch ohne Programmiererfahrung kann man ein Spiel entwickeln und optimieren. Allerdings braucht die Entwicklung Zeit und einige Optimierungsschritte, und diese sind für die kostenlose Nutzung begrenzt. Wir haben schliesslich den Pro-Account aktiviert, damit wir das Spiel ohne Einschränkungen weiter bearbeiten können. Hier sind die Prompts, welche wir verwendeten:

PROMPT 1:
«Mache ein digitales Wandtafel-Fussball. Es spielen zwei Spieler abwechselnd gegeneinander. Jede korrekt beantwortete Quizfragen bringt den Ball näher ans eigene Tor. Jede Quizfage hat drei Antwortmöglichkeiten. Erstelle ein Spiel das ohne Installation im Browser läuft.»

Wichtig im ersten Prompt ist es zu sagen, dass das Spiel ohne Installation im Browser laufen soll. Das Spiel funktioniert allerdings noch nicht wie gewünscht, deswegen folgt der nächste Prompt:

PROMPT 2: «Jede richtige Quizfrage bringt den Ball näher zum Tor, jede falsche Quizfrage bringt dich weiter weg vom Tor. Nach drei korrekt beantworteten Fragen landet der Ball im Tor. Eine falsch beantwortete Frage des Gegners, bringt den Ball näher an das eigene Tor.»

Das Spielt läuft nun mehr oder weniger wie gewünscht. Allerdings ist die Darstellung des Fussballfeldes noch nicht zufriedenstellend. Das geht noch besser.

PROMPT 3: «Super. Nun muss die Spieloberfläche noch verbessert werden. Gestalte das Fussballfeld realitätsnah. Wechsle die Hintergrundfarbe mit dem Spielerwechsel. Spielt Spieler 1, ist der Hintergrund rot, spielt Spieler 2, ist der Hintergrund blau.»

Das Fussballfeld ist immer noch nicht zufriedenstellend und soll noch realistischer sein. Deswegen folgend weitere Prompts. Zudem ist die gesamte Darstellung des Spieles auch noch nicht optimal. Auch werden teilweise dieselben Fragen erneut gestellt. Mit den nachfolgenden Prompts wird das Spiel weiter verbessert.

PROMPT 4: «Das Fussballfeld soll noch realistischer sein.»

PROMPT 5: «Verkleinere die gesamte Spieloberfläche.»

PROMPT 6: «Super. Teilweise erscheinen die Fragen doppelt. Bitte stelle jede Frage nur einmal.»

Das Resultat: Quiz-Fussball

Das Spiel müsste noch weiter optimiert werden, aber es zeigt sich, dass Verbesserungen auch schnell zu Verschlechterungen führen können. Das Spiel funktioniert noch nicht ganz so, wie wir es uns vorgestellt haben, aber vorerst sind wir zufrieden mit unseren ersten Versuchen. Hier kommst du zu unserem Spiel: Quiz-Fussball.

Wie findet ihr unser Spiel?

Um das Spiel im Browser anzuzeigen und anderen zur Verfügung zu stellen, kannst du es veröffentlichen, indem du auf den Button «Publish» klickst. Anschliessend kannst du einen Link generieren, mit dem du dein Spielergebnis mit anderen teilen kannst.