How to Create an Interactive Quiz Platform with Leaderboard in FlutterFlow

Create a quizzes collection with fields: title (String), description (String), category (String), questionCount (int), timeLimit (int, seconds). Under each quiz document, create a questions subcollection with fields: questionText (String), options (String array of 4 items), correctIndex (int, 0-3), order (int). Create a top-level quiz_results collection with fields: userId (String), quizId (String), score (int), totalQuestions (int), timeTaken (int, seconds), completedAt (Timestamp). Add 5-10 test questions for at least one quiz.

Create a QuizPage with Route Parameter quizId (String). Add a Backend Query for the questions subcollection ordered by order ascending. Add Component State: currentIndex (int, default 0), selectedAnswerIndex (int, default -1), selectedAnswers (int List, empty), startTime (Timestamp, set on page load). Place a Row at the top with a LinearPercentIndicator for question progress and a Text widget showing the countdown timer. Use a Periodic Action (every 1 second) that decrements the remaining time from the quiz timeLimit. Below, add a PageView with NeverScrollableScrollPhysics containing one question per page.

Inside each PageView page, add a Column with the questionText in Headline Small style, a SizedBox for spacing, and a RadioButton group bound to the options array. When the user taps an option, update Component State selectedAnswerIndex. Below the options, add a Next button that is disabled when selectedAnswerIndex equals -1. On Next tap: append selectedAnswerIndex to the selectedAnswers list, reset selectedAnswerIndex to -1, increment currentIndex, and call Animate to Next Page. On the last question, change button text to Submit.

Create a Cloud Function called calculateQuizScore that accepts userId, quizId, and selectedAnswers array. The function reads the questions subcollection server-side, compares each submitted answer to the correctIndex, tallies the score, calculates timeTaken from startTime to now, and writes a quiz_results document with userId, quizId, score, totalQuestions, timeTaken, and completedAt. On the Submit button tap in FlutterFlow, call this Cloud Function via an API Call action, passing the Component State data. This prevents client-side score manipulation.

1// Cloud Function: calculateQuizScore
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.calculateQuizScore = functions.https.onCall(async (data, context) => {
7  const { quizId, selectedAnswers } = data;
8  const userId = context.auth.uid;
9  const questionsSnap = await admin.firestore()
10    .collection('quizzes').doc(quizId)
11    .collection('questions').orderBy('order').get();
12
13  let score = 0;
14  questionsSnap.docs.forEach((doc, i) => {
15    if (doc.data().correctIndex === selectedAnswers[i]) score++;
16  });
17
18  const result = {
19    userId,
20    quizId,
21    score,
22    totalQuestions: questionsSnap.size,
23    timeTaken: Math.floor((Date.now() - data.startTime) / 1000),
24    completedAt: admin.firestore.FieldValue.serverTimestamp(),
25  };
26  await admin.firestore().collection('quiz_results').add(result);
27  return result;
28});

After the Cloud Function returns, navigate to a ResultsPage passing score, totalQuestions, and timeTaken as Route Parameters. Display a CircularPercentIndicator showing the percentage score, a Text with the fraction (e.g., 8 out of 10), and the time taken. Add a Lottie animation for celebration if score is above 70 percent, or encouragement if below. Include a Retake Quiz button that navigates back to QuizPage and a View Leaderboard button.

Create a LeaderboardPage with Route Parameter quizId. Add a Backend Query on quiz_results filtered by quizId, ordered by score descending then timeTaken ascending (Firestore composite index required). Display the top 3 entries in a special Row with gold, silver, and bronze Container styling using CircleImage avatars and score Text. Below, show remaining entries in a ListView with rank numbers, display names, scores, and time taken. Highlight the current user's row with a distinct background color. Add ChoiceChips for filtering by Today, This Week, or All Time using completedAt date ranges.