Webdesign: Schnupper-Challenge
Wie fühlt sich ein Tag als Interactive Media Designer an? Mit der Schnupper-Challenge habe ich eine Antwort gebaut, die Schüler selbst ausprobieren können. Das Spiel heisst «Agentur-Challenge» und läuft direkt im Browser, auf dem Handy oder am Computer. In 8 Levels bauen die Jugendlichen eine Website für Lara und ihre Velowerkstatt: Sie führen das Kundengespräch, wählen Farben, schreiben Texte, prüfen den Code und bringen die Seite online. Ohne Login, ohne Datenbank, und am Ende gibt es ein Ergebnis zum Ausdrucken.
Eigenentwicklung ohne WordPress: Die Challenge ist eine statische Website aus HTML, CSS und JavaScript, ohne WordPress, ohne Baukasten und ohne fertige Vorlage. Ein eigenes Build-Skript setzt alle Seiten zusammen und prüft dabei die Sprache. Über 400 automatische Tests klicken sich vor jeder Änderung durch alle Levels, auf dem Handy und am Computer.
8 Levels, 8 Abzeichen: Jedes Level steht für eine echte Aufgabe aus dem Beruf, vom Zuhörer im Kundengespräch über Farbprofi, Architekt, Texter, Fotograf, Tempomacher und Coder bis zum KI-Detektiv, der erfundene Angaben einer KI aufdeckt. Wer ein Level schafft, bekommt das passende Abzeichen und bis zu drei Sterne. Drei kurze Quizfragen pro Level festigen den Fachbegriff, um den es geht.
Ränge und Highscore: Mit jeder Aufgabe sammeln die Spieler Punkte und steigen vom Praktikanten über Junior und Designer bis zum Web-Profi auf. Der Highscore bleibt gespeichert, auch wenn man die Challenge nochmals spielt, um ihn zu knacken. Zum Teilen im Klassenchat entsteht direkt im Browser eine Resultat-Karte mit Name, Rang und Sternen.
Laras Website wächst mit: Neben jeder Aufgabe zeigt eine Vorschau, wie Laras Website gerade aussieht. Gewählte Farben, Texte und Bilder erscheinen sofort darin. So sehen die Jugendlichen nach jedem Schritt, was ihre Entscheidungen bewirken.
Zum Schluss ein Ergebnis auf Papier: Nach dem achten Level wartet die Auswertung mit Rang, Punkten, Highscore und Sternen. Die Urkunde mit dem eigenen Namen lässt sich ausdrucken oder als PDF speichern. Die Challenge dauert rund 30 bis 45 Minuten, ist kostenlos und eignet sich für zu Hause wie für eine Lektion Berufswahl.
Der Fortschritt bleibt im Browser: Es gibt kein Konto, keine Datenbank, keine Cookies und kein Tracking. Name, Antworten und Spielstand bleiben auf dem eigenen Gerät. Wer das Gerät wechseln will, sichert den Spielstand als Datei. Für geteilte Geräte im Schulzimmer gibt es eine Anleitung, damit nichts zurückbleibt.
Ziel war eine Berufserkundung, die Schüler ohne Anmeldung sofort ausprobieren können. Sie soll mit echten Aufgaben statt mit Beschreibungen zeigen, was ein Interactive Media Designer EFZ macht, auf jedem Gerät funktionieren und dabei keine Daten sammeln. Am Ende steht ein Ergebnis, das die Jugendlichen ausdrucken und mitnehmen können.
Lösungen
- Umfang: 8 Levels mit Aufgaben, Quiz, Abzeichen, Rängen, Highscore und Urkunde
- Zielgruppe: Schüler ab etwa 13 Jahren, zu Hause oder in einer Lektion Berufswahl
- Datenschutz: Kein Login, keine Datenbank, keine Cookies und kein Tracking, der Spielstand bleibt im Browser
- Abschluss: Auswertung mit Rang und Punkten, Urkunde zum Ausdrucken oder als PDF
Ereignisse
- Go Live: 26. September 2026
- Qualität: Über 400 automatische Tests, auf dem Handy und am Computer
Technologien
- Technik: Statische Website mit HTML, CSS und JavaScript, ohne WordPress und ohne Baukasten
- Build: Eigenes Build-Skript, das beim Zusammensetzen auch die Sprache prüft
- Speicher: Spielstand im Browser, sichern und laden als Datei
- Tests: Automatische Tests für jedes Level, auf dem Handy und am Computer
- Schriften: Eigene Schriften vom eigenen Server, ohne externe Dienste
- Barrierefreiheit: Bedienbar mit der Tastatur, Bildbeschreibungen und genug Kontrast
- Druck: Urkunde und Auswertung zum Ausdrucken oder als PDF
Die Schnupper-Challenge ist ein eigenes Projekt von Swiss Media Design. Es war mir eine Freude, den Beruf Interactive Media Designer EFZ für Jugendliche greifbar zu machen. Lehrpersonen und Eltern finden auf der Website alle Infos zum Einsatz im Schulzimmer und zu Hause.