¶ Die U27 Gazette · Nachtausgabe · Bogen I Seite 1 · 24.IV.MMXXVI · Archiv-Nr. 7459 EN
Die U27 Gazette
Ausgabe 1 · № INachtausgabe · Gratis

Lange Nacht der Forschung Station U27 Universität Klagenfurt 17 bis 23 Uhr

№ 39 Besucher:innen hatten die Ideen. Die KI half beim Bauen. Heft 39 · Bogen I · Druckschluss 23:45

Ein Abend.Über 90 Webseiten.

Sechs Stunden Mitmach-Station — herausgekommen sind Würfelspiele, Jump-and-Runs, Rennspiele, Zeichenwerkzeuge, Wetterseiten, Quizze und mehr.

4 KI-Werkbänke
9 Aufgabenkarten
39 archivierte Kreationen
37 889 Zeilen Quellcode
64 meistgenutzte Farbe
43 ⭐ meistgenutztes Emoji
21 Leer meistgebundene Taste
kreative Ideen
§ 1 Aus Raum S.2.42 — Klagenfurt, AAU S. 1

Eine Mitmachstation über KI und Code

Bei der Langen Nacht der Forschung 2026 betreute die Software Engineering Research Group die Station U27 in Raum S.2.42 an der Universität Klagenfurt. Clemens Bauer, Johann Glock und Martin Pinzger waren vor Ort — beantworteten Fragen, sortierten Ideen und halfen Besucher:innen dabei, das, was sie im Kopf hatten, in spielbare Webseiten zu verwandeln.

Das Ziel: aktuelle KI-Werkzeuge fürs Programmieren greifbar machen. Auf jedem Rechner lief dieselbe einfache Schleife. Besucher:innen sagten in Alltagssprache, was sie sich vorstellten. Die KI schrieb HTML, CSS und JavaScript, speicherte alles in eine Datei und öffnete sie im Browser. Stimmte etwas nicht, sagte man es ihr — wie in jedem Gespräch.

Manches funktionierte beeindruckend schnell. Manches zeigte die Grenzen genauso deutlich. Im Raum blieb es lebendig und neugierig, besonders wenn Kinder merkten, dass aus einer Idee — einem Würfelspiel, einem Quiz, einem kleinen Werkzeug — innerhalb weniger Minuten eine spielbare Webseite werden konnte. Am Ende des Abends waren über neunzig Seiten entstanden.

§ 2 Was entstanden ist S. 2

Der Index der Kreationen

Über den Abend entstanden 91 Webseiten. Dieser Index zeigt 39 ausgewählte Kreationen: spielbar, gut unterscheidbar und geeignet für den öffentlichen Blick ins Archiv. Enge Duplikate, heikle Themen und Versuche, die keine zuverlässigen Ergebnisse lieferten, wurden nicht aufgenommen.

Probeläufe vor Beginn

4 Checks · vor 17:00

Während der Veranstaltung gebaut

35 Kreationen · ab 17:06
§ 3 Aufgabenkarten S. 6

Ideen zum Mitnehmen

Auf dem Tisch lagen drei Stapel Aufgabenkarten: einfach, mittel und schwer. Jede Karte gab einen Startpunkt und eine kurze Checkliste für das Ergebnis. Wer etwas Eigenes im Kopf hatte, konnte natürlich auch damit loslegen.

PDF herunterladen
Würfelspiel

№ 01 Würfelspiel

Erstelle eine Webseite, auf der man würfeln kann.

  • Zeigt der Würfel Punkte wie ein echter Würfel (nicht nur eine Zahl)?
  • Gibt es eine Animation beim Würfeln?
  • Kann man auswählen, mit wie vielen Würfeln man würfelt?
  • Füge einen Wett-Modus hinzu: Rate ob der nächste Wurf höher oder niedriger wird
  • Konfetti-Explosion wenn man die höchste Zahl würfelt
  • Mach die Würfel dreidimensional mit einer echten Wurf-Animation
Reaktionstest

№ 02 Reaktionstest

Erstelle ein Spiel, das testet, wie schnell du klicken kannst, wenn sich die Farbe ändert.

  • Ändert sich die Farbe zu einem zufälligen Zeitpunkt (nicht vorhersehbar)?
  • Endet das Spiel nach einer festen Rundenanzahl (z.B. 5) mit einem Endergebnis?
  • Erkennt es, wenn du zu früh klickst (Schummeln)?
  • Füge einen Farb-Modus hinzu: Nur bei Grün klicken, bei Rot NICHT klicken
  • Zeige nach jeder Runde einen Tier-Vergleich ("So schnell wie eine Katze!")
  • Zeige nach allen Runden deine Reaktionszeiten als Grafik (wirst du schneller oder langsamer?)
Quizspiel

№ 03 Quizspiel

Erstelle ein Quiz zu einem Thema deiner Wahl (Österreich, Tiere, Sport, Filme...).

  • Stimmen die Fragen tatsächlich? (Schau nach!)
  • Gibt es einen Countdown-Timer pro Frage?
  • Wird die richtige Antwort angezeigt, wenn man falsch liegt?
  • Füge einen 50:50-Joker hinzu, der zwei falsche Antworten entfernt (einmal pro Spiel)
  • Zeige am Ende eine Übersicht aller Fragen mit deinen und den richtigen Antworten
  • Die Fragen werden immer schwieriger — leichte am Anfang, schwere am Ende
§ 4 Ablauf S. 7

Alltagssprache rein, Webseite raus

Auf jedem Rechner lief WebStorm1 mit dem Claude-Code-Plugin2. Besucher:innen beschrieben in Alltagssprache, was sie wollten. Claude3 schrieb HTML, CSS und JavaScript, speicherte alles in eine Datei und öffnete sie im Browser. Wenn etwas nicht passte, wurden Änderungswünsche wieder in Alltagssprache mit Claude diskutiert — oder ein Blick hinter die Kulissen auf den Quellcode gewagt.

1 · Beschreiben Eine Person beschreibt ihre Idee.
2 · Generieren Claude erstellt eine Webseite.
3 · Öffnen Das Ergebnis gibt’s im Browser.
4 · Ändern Änderungen werden diskutiert.
Eine Entwicklungsumgebung mit WebStorm und Claude Code links und einer Live-Vorschau einer Wetter-Webseite rechts.
Der Stationsaufbau im Kleinen: Quellcode, Claude-Code-Gespräch und Browser-Vorschau nebeneinander.

Bevor Besucher:innen kamen, bekam Claude einen kleinen Spickzettel: Was für eine Veranstaltung das war, wie Dateien heißen sollten und wie die Arbeit für Menschen ohne Programmiererfahrung angenehm bleibt. Technisch war das eine CLAUDE.md-Datei. An der Station waren es einfach die Hausregeln für den Assistenten.

Dokument — Hausregeln, an den Assistenten ausgehändigt Vertraulich · Intern
# LNF 2026 — Station U27

You are helping a visitor at a science outreach event. They have NO programming background.
They will describe what they want in natural language (German or English). Your job: build it.

## Rules

- ALWAYS produce a single standalone HTML file (all CSS and JS inline, no external dependencies)
- ALWAYS name files with the timestamp first, then a descriptive name (e.g., `20260524-1823-dice-roller.html`)
- ALWAYS open the HTML file in the default browser after creating it
- When the visitor asks for changes, modify the file you already created — do not start a new one
- Ignore any other HTML files in the directory — they belong to previous visitors
- Respond in the same language the visitor uses
- Keep your explanations to 1-2 sentences max — the visitor wants to SEE the result, not read about it
- Do NOT explain the code unless the visitor asks
- Do NOT use npm, pip, or any package manager
- Do NOT create a server (no Flask, no Express, no http-server)
- Do NOT use external CDN links or API keys
- For weather/data tasks: use the Open-Meteo API (https://api.open-meteo.com) — free, no key needed
¶ Seite 1 von 1 · Hausregeln, ungekürzt Gegenzeichnung JG ✓ Druckfreigabe · 24. IV. MMXXVI · 12:55 Uhr
§ 5 Kreuzworträtsel S. 8

Eine Pause zum Knobeln

Zehn Wörter, inspiriert von Klagenfurt und der Langen Nacht der Forschung. Umlaute werden als AE, OE, UE geschrieben. Die rot markierten Felder ergeben in der angezeigten Reihenfolge ein Lösungswort.

Lösungswort

Senkrecht

Waagrecht

§ 6 Wer wir sind S. 9

Das Team an der Station

Wir gehören zur Software Engineering Research Group (SERG) an der Universität Klagenfurt.

Diese Gazette sammelt, was an Station U27 zwischen 17 und 23 Uhr ausprobiert, verworfen, repariert und gespeichert wurde.