# How to Build a Trivia Quiz App in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- A Bubble app with user authentication
- Understanding of custom states and workflows
- Familiarity with Repeating Groups and conditional formatting

## Step-by-step guide

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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.

### 6. 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 code example

File: `Workflow summary`

```text
TRIVIA QUIZ — WORKFLOW SUMMARY
=================================

DATA TYPES:
  Question: text, option_a/b/c/d, correct_answer,
    category, difficulty
  GameSession: player (User), score (number),
    total_questions, questions_answered,
    start_time, end_time, is_complete (yes/no)

PAGE CUSTOM STATES:
  current_question (Question), current_index (number)
  game_session (GameSession), timer_seconds (number)
  question_list (list of Questions)

START GAME:
  Create GameSession → Search random Questions
  Set question_list, current_question = item #1
  Start timer countdown

ANSWER BUTTON CLICK:
  Step 1: Check answer vs correct_answer
  Step 2: If correct → score + 1, show green
           If wrong → show red + show correct green
  Step 3: Pause 1.5 seconds
  Step 4: current_index + 1
  Step 5: Set current_question = list:item #new_index
  Step 6: Reset timer to 15

TIMER:
  Do every 1 second → timer_seconds - 1
  When timer = 0 → auto-advance (no score)

GAME OVER:
  When current_index > total_questions:
    Set is_complete = yes, end_time = now
    Show score, percentage, time taken
    Leaderboard: GameSessions sorted by score desc
```

## Common mistakes

- **Not randomizing question order between games** — Players memorize the sequence and the quiz becomes trivial after a few plays Fix: Use ':shuffled' on the question list when starting each game to randomize the order
- **Allowing multiple clicks on answer buttons before advancing** — Fast clicks can increment the score multiple times for one question Fix: Disable answer buttons immediately after a click using a custom state 'is_answering' set to yes, re-enabled when the next question loads
- **Not handling the timer when the user switches browser tabs** — The 'Do every 1 second' event may pause or slow in background tabs, giving users extra time Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/build-a-trivia-quiz-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/build-a-trivia-quiz-in-bubble