Studierende, die visuell denken, können sich den dreidimensionalen Aufbau einer typischen…

Problem: Studierende, die visuell denken, können sich den dreidimensionalen Aufbau einer typischen Zelle aus Texten und flachen Abbildungen schlecht vorstellen. Ziel: Eine interaktive 3D-Darstellung einer typischen Zelle mit allen gängigen Zellorganellen sowie ein interaktives Quiz. Erfolgsmessung: Studierende identifizieren die Hauptorganelle per Klick und bestehen das Quiz mit mindestens 80 % (Zielwert, zu bestätigen).

Hauptnutzer: Studierende der Biologie, Medizin und verwandter Fächer (Grundstudium), die visuell lernen.
Rollen: Nur Lernende. Keine Anmeldung nötig.

Kernablauf 1 (Erkunden): Nutzer öffnet die 3D-Zelle, dreht und zoomt sie mit Maus, Touch oder Tastatur. Ein Klick auf ein Organell zeigt Name, Funktion und eine Kurzbeschreibung.

Kernablauf 2 (Quiz): Nutzer startet das Quiz, beantwortet Fragen (z. B. 'Wo findet die Proteinsynthese statt?'), erhält sofort Rückmeldung und am Ende ein Ergebnis mit Auswertung pro Organell.

Kernablauf 3 (Zelltyp wechseln): Nutzer schaltet zwischen tierischer und pflanzlicher Zelle um.

F1 – Quiz-Durchlauf: Zehn Multiple-Choice-Fragen pro Durchlauf, zufällig aus dem festen Pool gezogen und gemischt. Jede Frage kommt in einem Durchlauf höchstens einmal vor. Nach jeder Antwort sofortige Rückmeldung mit Erklärung. Die Weiter-Schaltfläche ist erst nach einer Antwort aktiv. Endauswertung mit Punktzahl in Prozent und falsch beantworteten Organellen.

Muss:

• 3D-Zellmodell einer tierischen Zelle mit Dreh- und Zoomfunktion (Maus, Touch, Tastatur)
• Alle elf Organelle mit Beschriftung und fester Zuordnungsfarbe: Zellkern, Zellmembran, Zytoplasma, rauhes ER, glattes ER, Golgi-Apparat, Mitochondrien, Lysosomen, Ribosomen, Zellskelett, Zentriolen
• Klick auf ein Organell zeigt Name (mit lateinischem Namen), Funktion und Kurzbeschreibung
• Quiz mit zehn Multiple-Choice-Fragen pro Durchlauf, zufällig aus dem Pool, jede Frage höchstens einmal; in einem eigenen Abschnitt 'Quiz' abrufbar; sofortige Rückmeldung, Endauswertung
• Textuelle Organell-Liste synchron zur 3D-Ansicht (Barrierefreiheit)

Später:

• Umschalter tierisch/pflanzlich
• Lehrende können eigene Quizfragen anlegen
• Lernfortschritt speichern
• Weitere Zelltypen

Nie:

• Audio
• Karteikarten
• Eigene Benutzerkonten
• Animierte Zellteilung
• Pflanzenzelle im ersten Schritt
• Serverseitige Speicherung von Ergebnissen

Kopfzeile: Links Titel der App, rechts die Menüpunkte 'Zelle' und 'Quiz'.

Bildschirm 1 – Startseite: Titel, kurze Einleitung, Schaltflächen 'Zelle erkunden' und 'Quiz starten'.
Bildschirm 2 – Zellansicht: 3D-Modell einer tierischen Zelle (links auf breiten Bildschirmen, oben auf schmalen), Organell-Liste daneben bzw. darunter, Infofeld zum gewählten Organell.
Bildschirm 3 – Quiz (eigene Seite über Menüpunkt 'Quiz'): Eine Frage pro Ansicht, vier Antwortmöglichkeiten, sofortige Rückmeldung mit Erklärung, Fortschrittsanzeige.
Bildschirm 4 – Ergebnis: Punktzahl in Prozent, Liste der falsch beantworteten Organelle, Schaltfläche 'Nochmal'.

Stil: schlicht, elegant, übersichtlich.

• Komponenten-Bibliothek: Tailwind CSS mit eigenen einfachen Komponenten (Buttons, Karten, Listen).
• Farben (Hex): Hintergrund #F8FAFC, Fläche #FFFFFF, Text #0F172A, Akzent #0F766E, Hervorhebung #F59E0B, Fehler #B91C1C, Erfolg #15803D.
• Organell-Farben (fest, eine pro Organell, nicht vom Nutzer wählbar): Zellkern #2563EB, Zellmembran #64748B, Zytoplasma #E2E8F0, rauhes ER #7C3AED, glattes ER #A78BFA, Golgi-Apparat #DB2777, Mitochondrien #EA580C, Lysosomen #65A30D, Ribosomen #0891B2, Zellskelett #854D0E, Zentriolen #4B5563.
• Schrift: Inter, Text 16px, Überschriften 24–32px.
• Ecken: 12px Radius für Karten und Buttons.
• Abstände: 8px-Raster, viel Weißraum.
• Licht-/Dunkelmodus: Nur heller Modus im ersten Schritt.
• Layout: Zwei Spalten auf breiten Fenstern (3D-Ansicht links, Organell-Liste rechts); auf schmalen Fenstern untereinander.
• Tonalität: sachlich, klar, ohne Ablenkung; Fachbegriffe mit lateinischem Namen in Klammern.
• Vorbild: ruhige, helle Lernplattformen mit viel Weißraum. Wenn du Screenshots von Apps hast, die dir gefallen, lade sie hoch.

Keine Datenbank. Alle Inhalte liegen in Dateien im Projekt.

Organell (je Eintrag):

Quizfrage (je Eintrag):

Not needed: Keine externen APIs oder Dienste. Alle Daten (Organelle, Quizfragen) liegen fest im Projekt.

Not needed: Keine Konten, keine Anmeldung, keine Benutzerrollen. Alle Inhalte sind öffentlich im Browser verfügbar.

Performance:

• Zellansicht lädt in unter 3 Sekunden auf einem durchschnittlichen Laptop.
• Mindestens 30 Bilder pro Sekunde beim Drehen und Zoomen.

Datenschutz: Keine Speicherung personenbezogener Daten, keine Cookies, kein Tracking.

Barrierefreiheit:

• Textliste aller Organelle synchron zur 3D-Auswahl.
• Tastaturbedienung für Drehen, Zoomen und Auswahl der Organelle (Pfeiltasten, Plus/Minus, Tab, Enter).

Offline: Nicht nötig, die App braucht eine Internetverbindung zum Laden.

Fehlende 3D-Unterstützung (kein WebGL): Hinweistext statt 3D-Ansicht, Organell-Liste bleibt voll nutzbar.

Gerät mit schwacher Leistung: Zellansicht läuft trotzdem; Drehen darf nicht unter 30 Bilder pro Sekunde fallen, sonst wird die Detailstufe reduziert.

Quiz ohne Antwort: Weiter-Schaltfläche ist erst aktiv, wenn eine Antwort gewählt wurde.

Browser-Neustart während des Quiz: Kein Fortschritt gespeichert, Quiz startet neu.

Fehlende Quizdaten oder Organell-Daten: Hinweis statt leerer Ansicht, damit fehlende Inhalte sofort auffallen.

Frontend: Vite + React + TypeScript, Three.js über @react-three/fiber und @react-three/drei, Tailwind CSS für das Layout.
Ausführung: Reine Browser-App, lokal gestartet über den Entwicklungsserver (npm run dev). Kein Backend, keine Server-Logik.
Speicherung: Keine Datenbank, keine Speicherung von Ergebnissen; alle Daten liegen als Dateien im Projekt. Kein localStorage.
Hosting: Keines, die App läuft nur lokal. Kosten: 0 €.
Einschränkung: Keine Konten, keine Benutzerverwaltung.

Not needed: Neues Projekt ohne bestehenden Code; es gibt nichts, das unverändert bleiben muss.

Schritt 1 – 3D-Zelle: Tierische Zelle als 3D-Modell mit Drehen und Zoomen (Maus, Touch, Tastatur), farbige Organelle mit Beschriftung, Klick zeigt Infofeld. Lauffähig allein.
Schritt 2 – Organell-Liste: Textliste aller Organelle mit Zuordnungsfarbe, synchron zur 3D-Auswahl, per Tastatur bedienbar. Lauffähig allein.
Schritt 3 – Quiz: Eigene Seite über den Menüpunkt 'Quiz', zehn Multiple-Choice-Fragen aus festem Pool, zufällig gemischt, jede Frage höchstens einmal, sofortige Rückmeldung mit Erklärung, Endauswertung mit Prozent und falsch beantworteten Organellen. Lauffähig allein.

• Ein Quiz-Durchlauf enthält genau zehn Fragen, keine Frage kommt doppelt vor.
• Die Fragen werden bei jedem Start zufällig gemischt.
• Die Weiter-Schaltfläche ist erst nach einer Antwort aktiv.
• Das Ergebnis zeigt Punktzahl in Prozent und falsch beantwortete Organelle.
• Die 3D-Zellansicht lädt in unter 3 Sekunden, Drehen und Zoomen laufen mit mindestens 30 Bildern pro Sekunde.
• Jedes Organell ist anklickbar und zeigt Name mit lateinischem Namen, Funktion und Kurzbeschreibung.
• Pfeiltasten drehen das Modell, Plus/Minus zoomen, Tab wählt Organelle, Enter öffnet das Infofeld.
• Ohne WebGL erscheint der Hinweistext, die Organell-Liste bleibt nutzbar.

Umgebung: Nur lokal auf dem Rechner des Nutzers, kein Staging, keine Produktion im Netz.
Start: Lokal über den Vite-Entwicklungsserver (npm run dev), Aufruf im Browser unter localhost.
Hosting: Keines, die App wird nicht veröffentlicht. Kosten: 0 €.
Geheimnisse: Keine nötig, es gibt keine Zugangsdaten oder API-Schlüssel.
Veröffentlichung: Nicht vorgesehen.

• Offen: Anzahl der Quizfragen pro Durchlauf (Vorschlag: zehn).
• Default: Deutsche Sprache, Fachbegriffe mit lateinischem Namen in Klammern.
• Default: Zielwert 80 % Trefferquote im Quiz.
• Default: Keine Speicherung von Ergebnissen, alles läuft lokal im Browser.
• Default: Organell-Daten und Quizfragen fest im Code.