A trivia quiz in Bubble uses Data Types for questions and answers, a game engine driven by custom states, and timed rounds controlled by scheduled workflows. You randomize questions from a pool, display multiple-choice options, give instant correct/incorrect feedback, track scores per session, and show a leaderboard at the end. This tutorial covers the full trivia game from data setup to score display.
Overview: Building a Trivia Quiz in Bubble
This tutorial walks you through building a complete trivia quiz game. You will create the question database, build the quiz interface with a timer, implement answer validation with instant feedback, track scores, and display a leaderboard. The game supports multiple categories, timed rounds, and randomized question order.
Prerequisites
- A Bubble app with user authentication
- Understanding of custom states and workflows
- Familiarity with Repeating Groups and conditional formatting
Step-by-step guide
Create the question and game Data Types
Create the question and game Data Types
In the Data tab, create 'Question' with fields: 'text' (text), 'option_a' (text), 'option_b' (text), 'option_c' (text), 'option_d' (text), 'correct_answer' (text — stores 'a', 'b', 'c', or 'd'), 'category' (text), 'difficulty' (text). Create 'GameSession' with: 'player' (User), 'score' (number, default 0), 'total_questions' (number), 'questions_answered' (number, default 0), 'start_time' (date), 'end_time' (date), 'is_complete' (yes/no). Add 10-20 questions manually in the Data tab → App data to start.
Expected result: Data Types exist for questions with multiple-choice options and game sessions for score tracking.
Build the quiz interface with question display
Build the quiz interface with question display
Create a 'quiz' page. Add custom states to the page: 'current_question' (type Question), 'current_index' (number, default 1), 'game_session' (type GameSession), 'timer_seconds' (number, default 15). Display the question text in a large Text element sourced from 'page's current_question's text'. Add four Button elements for options A-D, each showing the respective option text. Add a progress bar showing current_index / total_questions. Add a timer display showing timer_seconds.
Expected result: A quiz interface shows the current question, four answer buttons, a progress indicator, and a countdown timer.
Implement the game start workflow
Implement the game start workflow
Add a 'Start Quiz' button on a pre-quiz page. Its workflow: Step 1 — Create a new GameSession with player = Current User, total_questions = 10, start_time = Current date/time. Step 2 — Do a search for Questions (:random items, count 10) to select random questions. Store this list in a custom state 'question_list' on the quiz page. Step 3 — Set current_question to question_list:item #1. Step 4 — Set current_index to 1. Step 5 — Start the timer by scheduling a countdown.
Pro tip: Use ':shuffled' on your question list to randomize order, ensuring each game feels different even with the same question pool.
Expected result: Clicking Start Quiz creates a session, selects random questions, and displays the first question with the timer running.
Create answer validation with instant feedback
Create answer validation with instant feedback
On each answer button click, create a workflow. Step 1: Check if the clicked answer matches current_question's correct_answer. If correct, increment the GameSession's score by 1. Step 2: Show visual feedback — change the correct button's background to green and the wrong selection (if applicable) to red using custom states and conditionals. Step 3: Pause 1.5 seconds to let the user see the feedback. Step 4: Increment current_index and set current_question to question_list:item #(new index). Step 5: Reset the timer to 15 seconds.
Expected result: Clicking an answer shows green for correct or red for wrong, updates the score, then advances to the next question.
Add a countdown timer with auto-advance
Add a countdown timer with auto-advance
Use a 'Do every 1 second' workflow to decrement timer_seconds by 1 each second. Add a condition: 'Only when timer_seconds is greater than 0 and GameSession's is_complete is no'. When timer_seconds reaches 0, trigger the same advance logic as an answer (but with no score increment — treat it as a wrong answer). This forces the quiz to keep moving even if the user does not answer.
Expected result: A countdown timer ticks from 15 to 0 each round, automatically advancing to the next question on timeout.
Display the game-over screen with leaderboard
Display the game-over screen with leaderboard
When current_index exceeds total_questions, set GameSession's is_complete to yes and end_time to Current date/time. Show a results popup or navigate to a results page. Display the final score out of total, percentage, and time taken. Below the results, add a Repeating Group showing the all-time leaderboard: search GameSessions where is_complete is yes, sorted by score descending (tiebreak by time ascending). Show rank, player name, score, and date.
Expected result: After the last question, users see their final score and an all-time leaderboard showing top performers.
Complete working example
1TRIVIA QUIZ — WORKFLOW SUMMARY2=================================34DATA TYPES:5 Question: text, option_a/b/c/d, correct_answer,6 category, difficulty7 GameSession: player (User), score (number),8 total_questions, questions_answered,9 start_time, end_time, is_complete (yes/no)1011PAGE CUSTOM STATES:12 current_question (Question), current_index (number)13 game_session (GameSession), timer_seconds (number)14 question_list (list of Questions)1516START GAME:17 Create GameSession → Search random Questions18 Set question_list, current_question = item #119 Start timer countdown2021ANSWER BUTTON CLICK:22 Step 1: Check answer vs correct_answer23 Step 2: If correct → score + 1, show green24 If wrong → show red + show correct green25 Step 3: Pause 1.5 seconds26 Step 4: current_index + 127 Step 5: Set current_question = list:item #new_index28 Step 6: Reset timer to 152930TIMER:31 Do every 1 second → timer_seconds - 132 When timer = 0 → auto-advance (no score)3334GAME OVER:35 When current_index > total_questions:36 Set is_complete = yes, end_time = now37 Show score, percentage, time taken38 Leaderboard: GameSessions sorted by score descCommon mistakes when building a Trivia Quiz App in Bubble
Why it's a problem: Not randomizing question order between games
How to avoid: Use ':shuffled' on the question list when starting each game to randomize the order
Why it's a problem: Allowing multiple clicks on answer buttons before advancing
How to avoid: Disable answer buttons immediately after a click using a custom state 'is_answering' set to yes, re-enabled when the next question loads
Why it's a problem: Not handling the timer when the user switches browser tabs
How to avoid: Compare timestamps instead of decrementing a counter — calculate remaining time from (start_time + 15 seconds) minus Current date/time
Best practices
- Use ':shuffled' for question randomization instead of manual random index generation
- Disable answer buttons between questions to prevent double-scoring
- Store the full question list in a custom state at game start rather than searching per question
- Use timestamp-based timer calculation for accuracy across tab switches
- Add categories so users can choose their preferred topic
- Seed your question database with at least 50-100 questions for variety
- Track statistics per user (games played, average score, best score) for engagement
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a trivia quiz game in Bubble.io with timed multiple-choice questions, instant feedback, score tracking, and a leaderboard. What Data Types, custom states, and workflows do I need?
Build a trivia quiz game. Create Question and GameSession data types. Display one question at a time with 4 answer buttons and a 15-second timer. Show green/red feedback on answers. Track score and show a leaderboard at the end.
Frequently asked questions
How many questions should I have for a good trivia game?
Start with at least 50-100 questions per category. Each game draws 10-20 random questions, so you need a large enough pool to prevent repetition.
Can I add different question types like true/false or fill-in-the-blank?
Yes. Add a 'question_type' field to your Question Data Type and conditionally show different answer layouts based on the type — two buttons for true/false, an input for fill-in-the-blank.
How do I prevent cheating by inspecting the page source?
Use Privacy Rules to only allow access to the current question, not all questions at once. Load questions one at a time via backend workflow to prevent users from seeing answers in the browser.
Can I add multiplayer real-time trivia?
Yes, but it requires more complexity. Create a shared GameSession for both players, sync question progression via live data, and compare scores at the end.
Can RapidDev help build a complete quiz or trivia platform in Bubble?
Yes. RapidDev can build full quiz platforms with question management, multiple game modes, multiplayer support, analytics, and monetization features.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation