What You'll Build
- A multiple choice quiz game with:
- 10 questions across customizable topics
- Four answer choices per question with instant feedback
- Animated progress bar showing how far you are
- Score tracking with a final results screen
- Play again functionality with shuffled questions
- Mobile-friendly responsive layout
Tool: Lovable (no coding needed) Difficulty: Beginner Time: ~20 minutes Coding required: None
Everyone loves a good quiz. In this guide, you'll build a polished multiple choice quiz game that shows one question at a time, gives instant right/wrong feedback, tracks your score, and displays a final results screen. The questions are easy to customize — swap in any topic you want.
This is a perfect first game for vibe coding beginners. The logic is straightforward (pick an answer, check if it's correct, move on), and you'll learn how to iterate with follow-up prompts to add polish like animations, sound effects, and difficulty levels.
What You Need
The Founding Prompt
Go to lovable.dev and start a new project. Paste this prompt:
Build a multiple choice quiz game with the following features: GAME STRUCTURE: - 10 questions, each with 4 answer choices (only 1 correct) - Questions are about general knowledge (mix of science, geography, history, pop culture) - Show one question at a time, full screen centered - Shuffle question order each time the game starts GAMEPLAY: - Player clicks one of the 4 answer buttons to select their answer - Immediately highlight the selected answer green if correct, red if wrong - If wrong, also highlight the correct answer in green so the player learns - Wait 1.5 seconds after answering, then auto-advance to the next question - Track the number of correct answers UI DESIGN: - Clean minimal design with a white card on a light gradient background - Question number displayed as "Question 3 of 10" at the top - Animated progress bar below the question number that fills as you advance - Answer buttons are large, rounded, full-width, with hover effects - Use a modern sans-serif font RESULTS SCREEN: - After question 10, show a results screen with the final score (e.g., "You got 7 out of 10!") - Show a message based on score: 10 = "Perfect!", 8-9 = "Great job!", 5-7 = "Not bad!", below 5 = "Keep practicing!" - Big "Play Again" button that reshuffles questions and resets score - The whole app must be responsive and work on mobile
Click Generate and wait for Lovable to build your game.
Step 1: Play Through the Quiz
Once Lovable generates the app, click the preview to play through all 10 questions. Check that each answer highlights correctly (green for right, red for wrong), the progress bar advances, and the results screen shows your final score. If anything looks off, note it for the next step.
Step 2: Add More Questions and Categories
Ten questions gets old fast. Let's expand the question bank and organize by category so the game has replay value.
Expand the quiz to 30 total questions organized into 3 categories: Science, History, and Pop Culture (10 questions each). Add a category selection screen before the game starts where the player can pick one category or "All Categories" (which picks 10 random questions from the full pool). Show the selected category name at the top during gameplay.
Step 3: Improve Visual Feedback and Animations
The game works, but it feels static. Let's add animations to make it feel polished.
Add these animations: fade-in transition when each new question appears, answer buttons should have a subtle scale-up on hover, the progress bar should animate smoothly (not jump), and the results screen should have a confetti animation when the player scores 8 or higher. Add a brief shake animation on the selected button when the answer is wrong.
Step 4: Add a Timer Per Question
Adding time pressure makes the quiz more exciting and replayable.
Add a 15-second countdown timer for each question. Show the timer as an animated circular countdown in the top right corner. If time runs out, mark the question as wrong, highlight the correct answer in green, and auto-advance after 1.5 seconds. On the results screen, show "X questions timed out" as a separate stat. The timer resets for each new question.
Step 5: Add Sound Effects
Sound makes the game feel like a real game instead of a form.
Add sound effects using the Web Audio API (no external files needed). Play a short positive chime when the player answers correctly, a low buzz when they answer wrong, a ticking sound in the last 5 seconds of the timer, and a celebration sound on the results screen if the player scores 8 or higher. Add a mute/unmute button in the top left corner. Sounds should be muted by default.
Step 6: Make It Mobile-Friendly
The quiz should feel native on phones — not like a shrunken desktop page.
Optimize the layout for mobile screens under 768px: make answer buttons taller (at least 56px) with larger tap targets, stack the timer and question counter vertically, increase font size for questions to 20px on mobile, and add 16px padding on all sides. Make sure the category selection screen buttons are full-width on mobile. Ensure nothing scrolls horizontally.
Step 7: Deploy and Share
Your quiz game is ready to share. Click the Publish button in Lovable to deploy your app to a live URL. Share it with friends or embed it on your website. Lovable gives you a free subdomain, or you can connect a custom domain from your project settings.
Level Up Your Game
Try these follow-up prompts to make your game even better:
Add difficulty levels:
Add difficulty selection (Easy, Medium, Hard) on the start screen. Easy gives 20 seconds per question and shows a hint button. Medium gives 15 seconds with no hints. Hard gives 10 seconds, no hints, and shuffles answer order for every question. Show the selected difficulty on the results screen.
Add a streak counter:
Add a streak counter that shows how many questions the player has answered correctly in a row. Display it below the score with a fire emoji. If the player hits a 5-streak, flash a "On Fire!" banner across the screen. Reset the streak to 0 on a wrong answer.
Add answer explanations:
After each question is answered (or times out), show a one-sentence explanation below the answer choices explaining why the correct answer is right. The explanation should fade in after the answer is revealed. Include this for all 30 questions.
Add high score saving:
Save the player's best score to localStorage. On the results screen, show "Your Best: 9/10" below the current score. If the player beats their best score, show a "New High Score!" banner with a gold star animation.
Add a review screen:
On the results screen, add a "Review Answers" button that shows a list of all 10 questions with the player's answer and the correct answer. Highlight wrong answers in red and correct ones in green. Add a "Back to Results" button at the bottom.
Want persistent high scores? Follow our leaderboard guide to connect your game to a database.
Common Errors
Blank screen after prompt If Lovable generates a blank screen, add to your prompt: "Make sure the game renders immediately on page load with no user setup required."
Game not responding to keyboard Add to your prompt: "Ensure keyboard event listeners are attached to the document, not a specific element. Auto-focus the game container on load."
Mobile touch controls not working Add to your prompt: "Add touch event handlers for mobile. Include visible on-screen buttons for all controls on screens under 768px wide."