Wie man mit KI eine Quiz-App erstellt

Bevor du einen Prompt schreibst, definiere die kleinste sinnvolle Version.

Für die meisten Quiz-Apps bedeutet das:

• einen Startbildschirm, der das Quiz erklärt
• einen Fragenbildschirm mit Antwortoptionen
• einen Ergebnisbildschirm mit Punktestand und Feedback
• einen Neustart-Button

Entscheide außerdem ein paar Grundlagen:

• Plattform: Website mit React + Tailwind oder mobile App mit React Native und Expo
• Fragetyp: Multiple Choice ist der einfachste Einstieg
• Punktevergabe: 1 Punkt pro richtiger Antwort, Minuspunkte oder gewichtete Scores
• Inhaltsquelle: zunächst fest codierte Beispiel-Fragen oder später in einer Datenbank gespeichert
• Benutzerkonten: nur nötig, wenn du gespeicherte Fortschritte, Historie oder nutzerspezifische Ergebnisse willst
• Zahlungen: nur nötig, wenn der Zugriff auf Quizze, Pakete oder Premium-Funktionen kostenpflichtig ist

Halte Version eins bewusst klein. Eine getaktete Prüfungs-App mit Konten, Bestenlisten, Zahlungen, Analysen und KI-generierten Fragen sind eigentlich mehrere Projekte. Starte mit einem Quiz, das von Anfang bis Ende durchspielbar ist.

In Moremade beschreibst du die App in natürlicher Sprache und der KI-Agent schreibt den Quellcode. Danach erhältst du eine Live-Vorschau und kannst das Projekt per Chat weiter anpassen.

Dein erster Prompt sollte Folgendes abdecken:

• die Plattform
• die Screens
• das Frageformat
• wie die Punktevergabe funktioniert
• den visuellen Stil
• ob Beispieldaten verwendet werden sollen

Ein guter erster Prompt ist konkret genug, um Rätselraten zu vermeiden, aber nicht so ausführlich, dass du länger mit Prompting als mit dem eigentlichen Bauen verbringst.

Build a mobile quiz app in React Native with Expo for general knowledge practice. Include a home screen, a quiz screen, and a results screen. Use 10 multiple-choice questions with four answers each and show one question at a time. Keep score by adding 1 point for each correct answer. After the last question, show the total score, the correct answers, and a button to restart the quiz. Use simple clean styling, large tap targets, and sample question data hardcoded in the app.

Wenn du stattdessen eine Website möchtest, sag das direkt. Moremade generiert Websites als React + Tailwind Code und mobile Apps als React Native (Expo).

Nach dem ersten Build solltest du die Live-Vorschau wie ein Tester prüfen, nicht wie ein Zuschauer. Klicke dich durch den gesamten Ablauf. Prüfe zuerst, ob die Logik stimmt, bevor du Zeit auf das Design verwendest.

Achte auf Probleme wie:

• die Punktzahl wird nicht korrekt aktualisiert
• der Antwortzustand wird zwischen Fragen nicht zurückgesetzt
• Buttons sind auf dem Handy zu klein
• es gibt keine Fortschrittsanzeige
• der Ergebnisbildschirm wirkt überladen

Dann stellst du kleine, gezielte Anfragen. Drei hilfreiche Beispiele:

• "Add a progress indicator that shows question number out of 10 at the top of the quiz screen."
• "After the user selects an answer, highlight the selected option and disable the other options until they tap Next."
• "Update the results screen to show each question, the user's answer, the correct answer, and whether it was correct."

Das ist meistens schneller als den gesamten Prompt neu zu schreiben. Moremade enthält außerdem einen visuellen Inspector, sodass du auf ein Element zeigen und es ändern kannst, plus eine Code-Ansicht, wenn du den generierten Code direkter prüfen oder bearbeiten möchtest.

Wenn die KI zu viel einbaut, vereinfache das Projekt. Bitte sie, Extras wie Animationen, Kategorien oder Kontobildschirme zu entfernen, die du nicht angefordert hast.

Eine einfache Quiz-App braucht kein Backend. Fest codierte Beispiel-Fragen reichen für eine erste funktionsfähige Version völlig aus.

Füge Supabase nur hinzu, wenn du Dinge brauchst wie:

• das Speichern von Fragensets in einer Datenbank
• Benutzer-Login
• das Speichern von Ergebnissen oder Quiz-Historie
• das Hochladen von Assets oder Dateien

In Moremade kann Supabase Datenbank, Sign-in und Dateispeicher übernehmen. Ein praktischer nächster Schritt wäre zum Beispiel:

• eine quizzes-Tabelle anlegen
• eine questions-Tabelle anlegen, die mit einem Quiz verknüpft ist
• eine results-Tabelle anlegen, die mit einem Benutzer verknüpft ist

Formuliere die Änderung dann in natürlicher Sprache, zum Beispiel: "Connect this app to Supabase. Store quizzes and questions in the database, add email sign-in, and save each completed score to a results table."

Füge Stripe nur hinzu, wenn das Produkt tatsächlich für den Zugriff berechnet, etwa für Premium-Quizpakete oder bezahlte Zertifizierungen. Moremade enthält einen Stripe-Connector für Checkout mit den von dir festgelegten Preisen. Wenn deine App kostenlos ist, verschiebe Zahlungen am besten auf später. Frühe Versionen lassen sich leichter validieren, wenn es weniger bewegliche Teile gibt.

Auch wenn du eine Website baust, solltest du sie auf einem Bildschirm in Handygröße testen. Quiz-Produkte werden oft mobil genutzt, und kleine Probleme bei der Bedienung zeigen sich schnell.

Prüfe diese Punkte:

• Text ist ohne Zoomen lesbar
• Antwortbuttons sind leicht antippbar
• die nächste Aktion ist klar erkennbar
• lange Fragen zerstören das Layout nicht
• Ergebnisbildschirme gehen sauber mit niedrigen und hohen Punktzahlen um
• ein Neustart des Quiz setzt den Zustand vollständig zurück

Teste auch ungewöhnliche Inhalte:

• sehr kurze Fragen
• sehr lange Antworten
• alle Antworten falsch
• alle Antworten richtig
• leere oder fehlende Fragedaten bei Verwendung einer Datenbank

Wenn etwas fehlschlägt, bitte um eine konkrete Lösung. Zum Beispiel: "On small screens, make answer cards full width and keep the Next button pinned near the bottom with safe spacing."

Die Versionshistorie ist hier hilfreich. Wenn eine Änderung die App verschlechtert, kannst du zurückgehen, statt alles per Prompt rückgängig machen zu müssen.

Sobald der Kernablauf funktioniert, veröffentliche die App. Moremade kann mit einem Klick auf einer kostenlosen yourname.moremade.ai-Subdomain veröffentlichen. Das reicht für interne Reviews, Nutzertests oder das Teilen eines Prototyps.

Wenn du einen kostenpflichtigen Plan hast, kannst du eine eigene Domain verbinden. Domains können auch direkt in Moremade gekauft werden.

Vor der Veröffentlichung solltest du eine kurze Release-Prüfung machen:

• Titel und Einleitung passen zum Quiz-Thema
• die Punktevergabe ist korrekt
• Buttons und Links funktionieren
• kein Platzhaltertext ist mehr vorhanden
• Login- oder Zahlungsfluss funktioniert, falls enthalten

Du kannst den vollständigen Quellcode jederzeit als ZIP exportieren oder zu GitHub pushen. Das ist wichtig, wenn du das Projekt später außerhalb der Plattform weiterentwickeln, den Code mit deinem Team prüfen oder es an eine andere Entwicklerin oder einen anderen Entwickler übergeben willst.

Einige Muster verursachen unnötige Nacharbeit.

• Mit zu vielen Funktionen starten. Bringe zuerst einen Quiz-Ablauf zum Laufen, bevor du Konten, Abos oder Analysen hinzufügst.
• Zu vage prompten. "Make me a quiz app" lässt zu viel offen. Nenne Screens, Punktevergabe und Plattform.
• Alles auf einmal ändern. Kleine Folge-Prompts sind leichter zu steuern und zu testen.
• Zu früh eine Datenbank hinzufügen. Statische Beispiel-Fragen reichen für Version eins meistens aus.
• Das mobile Layout ignorieren. Quiz-Oberflächen sind stark interaktionsbasiert, und kleine Bildschirme entlarven Schwächen schnell.
• Randfälle nicht prüfen. Logik am Ende des Quiz, Neustart-Verhalten und lange Antworttexte brechen oft zuerst.
• Die Vorschau als fertig betrachten. Die erste Generierung ist ein Entwurf. Rechne mit mehreren Iterationen.

Eine gute Faustregel ist, auf einen vollständigen, aber einfachen Kreislauf hinzuarbeiten: Quiz starten, Fragen beantworten, Punktestand sehen, neu starten, veröffentlichen. Sobald das funktioniert, füge Persistenz, Login oder bezahlten Zugriff nur hinzu, wenn es einen echten Bedarf gibt.