Build an AI Quiz Battle from Your iPhone

Build a multiplayer AI quiz app with validated questions and a live leaderboard.

Introduction

30 Second Summary

Trivia games are fun until the answer key is wrong. When an AI is writing the questions, making sure every answer is actually correct becomes the real challenge.

In this project, you will build and deploy an AI-powered quiz battle app entirely from your iPhone. Players type any topic, answer timed multiple-choice questions, and compete for the highest streak.

What You'll Build

Picture texting a friend a link where they type "Marvel movies" and instantly face timed AI trivia questions, racking up a 12-question streak that gets saved for you to beat.

By the end of this project, you'll have:

  • A quiz app where players type any topic and the AI generates timed multiple-choice questions with exactly one correct answer and three plausible distractors.
  • Prompt engineering skills that force the AI to produce validated, structured output instead of freeform text. This is the pattern behind every production AI app.
  • A PostgreSQL database that saves scores and streaks across sessions, plus a live URL you can text to friends so they can play and try to beat your streak.
  • Secret Mission: Add a global leaderboard where players enter a nickname and compete for the top spot.

Are there any prerequisites?

This project picks up where Build an AI App from Your iPhone left off. You need an iPhone with the Replit iOS app installed and an active Replit Core subscription.

Before We Start

Before we dive in, let's lock in what you're about to build and why it matters to you.

Create Your Quiz Project

Your quiz battle app needs its own project in Replit, separate from the adventure game you built in the first project.

Since the Replit iOS app and your Core subscription carry over, creating a new project takes just a few taps.

In this step, get ready to:
  • Create a new web app project in the Replit iOS app.
  • Confirm the Agent and Tools panes are ready for building.
Open the Replit app and create a new project
  • Open the Replit app on your iPhone.
  • Tap the prompt box on the home screen.
  • Create your new project by typing this message and tapping send:
Create a web app

What does this prompt do?

Replit Agent reads your message and creates a new web app project with the starter files and configuration it needs. You describe what you want in plain language and Agent handles the technical setup.

Agent begins setting up your project. You will see its progress in the chat pane as it works.

Confirm your project is ready
  • Wait for Agent to finish setting up the project.
  • Confirm you can see the Agent chat pane displaying your prompt and Agent's response.
  • Swipe left to check the Tools pane is accessible.
  • Swipe back to the right to return to the Agent chat pane.

Your project is ready. You should see the Agent pane open, waiting for your next prompt.

Not seeing a new project?

  • Check your internet connection. Agent needs a network connection to create the project.
  • Make sure your Replit Core subscription is still active. Agent requires an active paid plan to work.
  • Try closing the Replit app completely and reopening it, then send the prompt again.

Still stuck? Help me troubleshoot why my Replit project is not being created.

Your fresh project is set up and ready to go. Next up, you will describe exactly what you want Agent to build and play your first AI-generated quiz.

Build and Play Your First Quiz

Your project is created and Agent is standing by. Now it's time to describe the quiz app you want and watch the AI build it from scratch.

Your adventure game gave the AI total creative freedom. A quiz has strict rules: every question needs exactly one correct answer and a consistent format.

In this step, you'll prompt Agent to build the full quiz app, then play it yourself to see how well the AI follows those rules.

In this step, get ready to:
  • Build a complete quiz app by prompting Agent with a detailed description.
  • Test the quiz in Preview with AI-generated questions, answer choices, a streak counter, and a timer.
  • Discover where the AI's output breaks down on accuracy and format.
Describe your quiz app to Agent

Agent needs a clear description of what to build. The more specific your prompt, the closer the first version will be to what you want.

  • Send this prompt in the Agent chat to describe the quiz app you want to build:
Build an interactive AI quiz app. The home screen should have a text input where the player types any topic (like 'space exploration' or '90s hip-hop'). After submitting a topic, the AI generates a multiple-choice question with 4 answer choices. When the player picks an answer, show if they were right or wrong, then generate the next question. Track a streak counter that resets when the player gets one wrong. Add a 15-second countdown timer per question. Use Anthropic to power the AI. Keep the UI clean and modern with a dark theme.

What does this prompt do?

The prompt gives Agent a complete specification for your app: a topic input screen, AI-generated multiple-choice questions, right/wrong feedback, a streak counter, and a 15-second timer per question.

It specifies Anthropic as the AI model provider. Replit handles all the API credentials automatically through AI Integrations, so you don't need to sign up for anything or paste any API keys.

  • Wait for Agent to finish building the app. This can take a minute or two.
  • Look for Anthropic (Replit managed) in Agent's output. This confirms Replit is handling the AI credentials for you.

Agent seems stuck?

  • Agent can take 1-2 minutes to build a full app. If it's been more than 3 minutes with no progress, try sending "continue" in the chat.
  • If you don't see a mention of Anthropic, your app may still work. Agent sometimes handles AI setup without explicitly stating the provider.
  • Agent isn't building my quiz app. What should I try?
Play your first quiz round

Agent has built your app. Before you try it, what do you expect the quiz to look like based on the prompt you sent?

  • Tap the artifact bar at the bottom of the screen to open Preview.
  • Type a topic you know well into the text input. Pick something you can fact-check, like a school subject or your favorite movie series.
  • Play through at least 5 questions.

What should I see?

Questions appear on your chosen topic with four answer choices. Tapping a choice shows whether you got it right or wrong.

A streak counter tracks your consecutive correct answers. A 15-second countdown timer runs for each question.

Preview not loading?

  • Tap the artifact bar again. It sometimes takes a moment to load after Agent finishes building.
  • If questions don't generate after you enter a topic, the AI integration might need a few seconds to initialize. Wait a moment and try again.
  • My quiz Preview isn't working or questions aren't generating. How do I fix this?
Push the AI and find its limits

The quiz works for basic play. But do you think the AI will keep producing accurate answers with a consistent format across 10 or more questions?

  • Start a new quiz on a topic you know deeply enough to fact-check every answer.
  • Play through at least 10 questions. Pay close attention to whether each "correct" answer is actually right.

After 10 or more questions, you'll start to see the cracks.

Why is the AI struggling?

The AI might mark a wrong answer as correct. You know the real answer, but the app disagrees. The format can break too, giving you 3 choices instead of 4 or leaking the answer in the question text.

In your adventure game, any AI output was valid because the story could go anywhere. A quiz has zero room for creative freedom.

The AI must produce exactly one correct answer and a consistent format every time. When it gets any of these wrong, the whole experience breaks.

The AI is generating questions, but it can't police itself. In the next step, you'll write strict validation rules that force the AI to produce accurate, structured output every time.

Tame the AI with Validation Rules

You've seen the AI generate quiz questions, track your streak, and run a countdown timer. But you've also seen it stumble.

Wrong answers marked as correct, inconsistent formatting, and overly generic questions are all symptoms of giving an AI too much creative freedom. In this step, you'll rewrite the AI's instructions with strict validation rules that force it to produce structured, accurate output.

In this step, get ready to:
  • Read the current system prompt to see why it fails.
  • Rewrite the prompt with strict validation rules and structured JSON output.
  • Test the improved quiz to confirm accuracy and consistency.
Read the current system prompt

Every time a player submits a topic, your app sends it to Anthropic along with a system prompt. The system prompt is the set of instructions that tells the AI how to behave.

Before rewriting anything, you need to see what instructions the AI is currently working with.

  • In the Agent chat, send this prompt to see the current system prompt:
Show me the system prompt we're sending to the Anthropic API for quiz generation. Don't change anything yet, just show me what it says.
  • Read through Agent's response carefully.

What should I notice?

Look at how few rules there are about answer accuracy or output format. The prompt probably tells the AI to generate quiz questions, but it doesn't say anything about how to structure the response or how to guarantee the correct answer is actually correct.

That lack of constraints is exactly why the AI sometimes marks wrong answers as right and produces inconsistent formatting.

Rewrite the prompt with validation rules

Your adventure game in the previous project thrived on creative freedom because any story direction was valid. A quiz is the opposite. The AI must produce exactly one correct answer, exactly four choices, and a consistent format every time.

  • Send this prompt to Agent to replace the system prompt with strict validation rules:
Update the system prompt for quiz generation to include these rules: (1) Every question must be factually verifiable, not opinion-based. (2) The correct answer must be unambiguously right. If the AI is not confident in the answer, generate a different question instead. (3) Each question must have exactly 4 choices: one correct answer and three plausible but clearly wrong distractors. (4) Never include the answer in the question text. (5) Vary difficulty. Mix easy recall questions with harder ones that require reasoning. (6) Format the response as JSON with fields: 'question' (string), 'choices' (array of exactly 4 strings), 'correctIndex' (integer 0-3 indicating which choice is correct), and 'explanation' (a one-sentence explanation of why the correct answer is right). (7) Never acknowledge being an AI or break the quiz format.
  • Watch Agent update the code. Look for Agent confirming it has updated the system prompt and the response parsing logic.

Why is rule 6 the most important?

Rule 6 switches the AI's response from freeform text to structured JSON. Instead of the AI writing "the answer is B" in a sentence (which your app has to parse and can misinterpret), it now returns a correctIndex field. This is a number pointing to the exact correct choice.

This pattern of forcing structured output from an AI is called constrained generation. It's the technique behind every production AI app that needs reliable, machine-readable responses.

Agent didn't seem to change anything?

Make sure you pasted the entire prompt. If it got cut off, Agent may only apply some of the rules.

Try sending a follow-up: "Show me the updated system prompt to confirm the changes." Agent should display the new rules.

If Agent still doesn't update, help me get Agent to update the system prompt with my validation rules.

Test the improved quiz

Before you play, think about what you expect to be different from last time. Do you think every question will have exactly 4 choices now? Will the AI get every answer right?

  • Tap the artifact bar at the bottom to open Preview.
  • Start a fresh quiz on a topic you know well enough to fact-check the answers.
  • Play through at least 10 questions.

The improvement should be immediately obvious. Every question has exactly 4 choices. The answers the AI marks as correct are actually correct. An explanation appears after each answer telling you why the correct choice is right.

What changed from before?

Before, the AI returned freeform text that your app had to interpret. That ambiguity caused wrong answers and inconsistent formatting.

Now the AI returns structured JSON with a correctIndex field that points to the exact right answer. There's no room for misinterpretation. The explanation field gives the player instant feedback on why that answer is correct.

Still seeing wrong answers or broken formatting?

Go back to Agent and send: "Show me the current system prompt." Confirm all 7 rules are present, especially rule 6 about JSON format with correctIndex.

If the rules are there but the output is still inconsistent, send Agent: "Make sure the app parses the AI response as JSON and uses the correctIndex field to determine the right answer." Agent may need to update the parsing logic separately from the prompt.

If issues persist, help me debug why the AI quiz is still returning wrong answers after updating the system prompt.

Your quiz is now generating accurate, well-structured questions every time. Next up, you'll add a database so those hard-earned scores and streaks survive between sessions.

Save Scores with a Database

Your quiz AI now produces accurate, well-formatted questions every time.

But refresh the page after building up a great streak and every score vanishes. Your adventure game from the previous project had the same stateless design, but that worked because each story session was independent.

A quiz without persistent scores has no replay value. You need a database to store results so scores survive page refreshes and accumulate across sessions.

In this step, get ready to:
  • Add a PostgreSQL database to your quiz project through Replit Agent.
  • Verify that scores persist after closing and reopening Preview.
  • View your raw quiz data in the Replit Database tool.
Send the database prompt to Agent

Right now your quiz scores live only in the browser's temporary memory. A PostgreSQL database stores data permanently on the server, so it survives page refreshes, app restarts, and even device changes.

What is PostgreSQL?

PostgreSQL is an open-source relational database that organizes data into tables with rows and columns, similar to a spreadsheet. Replit includes a built-in PostgreSQL database with every app, so Agent can set it up without any external services or API keys.

  • In the Agent chat, send this prompt to describe what the database should store and display:
Add a PostgreSQL database to track quiz results. Store each completed quiz session with: the topic played, the number of questions answered, the number correct, the streak (longest consecutive correct answers), and the timestamp. After each quiz ends (when the player gets a question wrong or chooses to stop), save the result to the database. Show a 'Your Best Scores' section on the home screen displaying the player's top 5 results by streak, with the topic and date.

What does this prompt do?

This prompt asks Agent to handle three things at once:

  • Create a database table for quiz sessions with columns for the topic, number of questions answered, number correct, streak, and timestamp.
  • Wire up the app to save results automatically when a quiz round ends.
  • Add a Your Best Scores section on the home screen showing the top 5 results ranked by streak.
  • Watch Agent set up the database. Look for Agent confirming it created the PostgreSQL database and updated the app code.

Agent didn't mention a database?

  • Make sure you sent the full prompt, including the part about storing "each completed quiz session." If you only sent part of it, send the rest as a follow-up message.
  • If Agent set up a different type of storage (like a JSON file), send a follow-up: "Use a PostgreSQL database instead of a JSON file for storing quiz results."

Agent didn't set up a PostgreSQL database for my Replit quiz app. How do I get it to use the built-in Replit Database?

Test that scores persist
  • Tap the artifact bar at the bottom to open Preview.
  • Type a topic and play a full quiz round until the round ends.
  • Check the home screen for your score in the Your Best Scores section.

Before the next step, predict: if you close Preview entirely and reopen it, will your score still be there?

  • Close Preview completely, then reopen it by tapping the artifact bar again.

Your score is still there. The database stored it on the server, not in your browser's temporary memory.

  • Play another round on a different topic.
  • Confirm both scores appear in the Your Best Scores section, ranked by streak.

Scores disappear after reopening Preview?

  • If the Your Best Scores section is missing entirely, the app might not be reading from the database on load. Send Agent: "The home screen should load and display saved scores from the database when the page first opens."
  • If scores appear during the round but vanish after reopening, the save might not be triggering. Send Agent: "Make sure quiz results are saved to the PostgreSQL database when the round ends, not just stored in browser state."

My quiz scores aren't persisting after I close and reopen Preview. How do I debug this?

View your data in the Replit Database tool

Your app reads and writes quiz data through code. You can also inspect the raw database directly using Replit's built-in Database tool.

  • Swipe left to the Tools pane in your Replit project.
  • Select Database under Replit Cloud.
  • Select your Development Database and open the My Data tab.

You should see a table with your quiz results, including topics, scores, streaks, and timestamps. This is the same data your app displays, but now you can see it as raw database rows.

Why does it say Development Database?

Every Replit app works with two databases: a development database for building and testing, and a production database for the live published app. Right now you're testing in Preview, so your data lives in the development database.

When you publish in the next step, Replit creates the production database automatically.

Your quiz scores are safe in a real database that survives page refreshes and accumulates results over time. Next up, you'll publish the app so your friends can play and compete for the highest streak.

Deploy and Challenge Your Friends

Your quiz app saves every result to a PostgreSQL database, and those scores survive even when you close and reopen Preview.

There is one problem. Right now, only you can play. The app lives inside Replit's Preview, which is temporary and locked to your device. Publishing gives it a permanent URL on the internet that anyone can visit from any browser.

In this step, get ready to:
  • Publish your quiz app to a live URL ending in .replit.app.
  • Test the live deployment in Safari on your iPhone.
  • Share the link with a friend so they can play and save their own scores.
Publish your app with Replit Agent

Your app is fully built and tested. Replit Agent can handle the entire publishing process with a single message.

  • In the Agent chat, send this message:
Publish this app.
  • Agent will walk you through the publishing flow. It may ask you to confirm a domain name and access settings. Accept the suggested .replit.app domain and set access to Public so anyone with the link can play.
  • Wait for Agent to finish. Publishing usually takes a minute or two. Replit provisions cloud resources, runs security checks, builds your app, and promotes it to a live URL.

What happens when you publish?

Publishing creates a production deployment. This is a stable, shareable version of your app that runs at its own URL, separate from the Preview you used during development.

Replit also creates a production database for the live app. This is separate from your development database. Replit handles hosting, SSL, and infrastructure automatically.

  • Once Agent confirms publishing is complete, look for the live URL ending in .replit.app in Agent's response.
  • Copy that URL. Record it here so you can easily find it later: your-app-name.replit.app

Agent not publishing?

If Agent asks clarifying questions instead of publishing, try sending a follow-up like "Yes, publish it as a public web app." If publishing fails, check Agent's output for error details and try again.

Still stuck? Help me troubleshoot publishing my Replit app. Agent started the publish flow but it failed or got stuck.

Test your live quiz in Safari

Your app is live on the internet. Time to verify it works outside of Replit's Preview by testing it in a real browser.

  • Open Safari on your iPhone.
  • Paste your live .replit.app URL into the address bar and navigate to it.
  • Play a full quiz round on a topic you know well.

Before you check the home screen after your round ends, think about this: do you expect to see your scores from Preview testing here on the live version?

  • When the round ends, check the home screen for your score in the "Your Best Scores" section.

Your live app uses a separate production database. Scores you saved during Preview testing were stored in the development database, so they may not appear here. The score you just earned on the live site is your first entry in the production database.

  • Verify these three things during your quiz round:

Live app not loading?

Double-check the URL you pasted. It should end in .replit.app. If the page loads but the quiz doesn't start, give it a moment. The first request after publishing may take a few seconds while the deployment warms up.

If the app loads but something is broken (timer not working, answers not grading), help me debug my published Replit quiz app. The app loads but something is not working correctly.

Share the link with a friend

Your quiz app works on the open internet. Now comes the fun part.

  • Open iMessage, WhatsApp, or any messaging app on your iPhone.
  • Send your live .replit.app URL to a friend.
  • Ask them to open the link and play a quiz on any topic.

When your friend finishes a round, their score is saved to the same production database. You can both see your own best scores on the home screen.

How does this work with multiple players?

Right now, the app saves every quiz result to the same database table. Anyone who visits the URL and plays a quiz gets their score recorded. The "Your Best Scores" section shows all scores, not just one player's. In the Secret Mission, you'll add nicknames and a leaderboard to make this truly competitive.

Secret mission

Add a Global Leaderboard

Your quiz tracks each player's best scores, but there's no way to see who has the highest streak across everyone. Add a nickname prompt so players can identify themselves, then build a global leaderboard page that ranks the top 10 scores by highest streak.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. Your Replit Core subscription costs $20/month and continues running until canceled.

Cost warning

Your Replit Core subscription runs at $20/month whether or not you use this project. AI API usage through Replit AI Integrations is billed at the provider's public API rate and deducted from your Replit credits.

If you no longer need the Core plan, consider canceling it from your Replit account settings to stop charges.

Resources you used:

  • Replit project (web app with AI integration and PostgreSQL database).
  • Published Autoscale deployment on Replit (live URL ending in .replit.app).
  • PostgreSQL database storing quiz scores and leaderboard entries.

Keep everything running

No action needed. Choose this if you're still actively playing or sharing the app with friends.

  • Your app stays live at its .replit.app URL.
  • Autoscale deployments scale to zero when there's no traffic, so deployment costs are minimal when nobody is playing.
  • Your database stores up to 20GB for free per app.
  • Your Replit Core subscription ($20/month) continues running until you cancel it from your account settings.

Pause - I'll come back to this later

Shut down your live deployment to stop deployment charges while keeping your project files, code, and database intact.

  • In your Replit project, open Publishing and select the option to shut down your deployment.
  • Confirm the shutdown when prompted.
  • Your project files, code, and database are not deleted.
  • To bring the app back later, open Publishing and select Publish again.

Delete - I don't want to use this again

Remove your quiz project and all associated resources permanently.

  • First, shut down the deployment. In your Replit project, open Publishing and select the option to shut down your deployment.
  • Confirm the shutdown when prompted.
  • Go to the Replit home screen and find your quiz project card.
  • Tap the overflow menu (three dots) on the project card and select Delete.
  • Deleting the project also removes both the development and production PostgreSQL databases, including all stored quiz scores and leaderboard entries.

That's a Wrap!

That's a Wrap!

Nice work! You just built and deployed an AI quiz battle app entirely from your iPhone, adding two major new skills on top of what you learned in the adventure game project.

You've learned how to:

  • Built an AI quiz app with constrained JSON output that generates validated multiple-choice questions on any topic, guaranteeing exactly one correct answer per question through strict prompt engineering and validation rules.
  • Added a PostgreSQL database to persist scores and streaks across sessions, using Replit's built-in Database tool and Agent to set up the schema automatically.
  • Deployed the app to a live URL and shared it with friends for competitive play, proving you can ship a full-stack AI app from your phone.
  • Completed an optional Secret Mission to add a global leaderboard ranking all players by their highest streak.

Ready to quiz yourself?