How to Create an Interactive Quiz with Scoring in FlutterFlow

In Firestore, create a quizzes collection with fields: title (String), description (String), category (String), totalQuestions (Integer), timeLimit (Integer — seconds per question, 0 for no limit), createdAt (Timestamp), isActive (Boolean). Under each quiz document, create a questions subcollection with fields: questionText (String), answers (Array of Strings — the answer options to display, shuffled), imageUrl (String — optional question image), order (Integer — display sequence). Notice that correctIndex (Integer — the index of the correct answer) is NOT included in this schema. Store correctIndex in a separate server-only correctAnswers subcollection under each quiz, with a matching document ID to the question. Firestore Security Rules will block clients from reading correctAnswers — only the Cloud Function can read them using the Admin SDK.

Create a QuizScreen page with parameters: quizId (String) and quizTitle (String). Add Page State variables: currentQuestionIndex (Integer, default 0), selectedAnswerIndex (Integer, default -1 meaning no selection), score (Integer, default 0), correctCount (Integer, default 0), and answeredQuestions (List of Maps — stores questionId, selectedIndex, isCorrect for each answered question). Add a Backend Query at the page level that fetches the questions subcollection for the quizId, ordered by the order field. Add a PageView widget with its controller bound to currentQuestionIndex. Inside the PageView, create a question card with: a question number indicator Text, the questionText Text, an optional Image widget conditionally visible when imageUrl is not empty, and a Column of RadioButton widgets for each answer option. Each RadioButton sets selectedAnswerIndex to its index when tapped.

Create a Cloud Function named checkAnswer. It accepts quizId (String), questionId (String), selectedIndex (Integer), and userId (String). The function reads the correctAnswers subcollection document for this question using the Admin SDK (bypassing Security Rules), compares the selectedIndex to the correctIndex, and returns a result object containing isCorrect (Boolean), correctIndex (Integer — to display which answer was right), and explanation (String — optional). In FlutterFlow, create an API call to this Cloud Function. In the quiz screen's Next button On Tap action: first call checkAnswer with the current question's data, then update Page State based on the result (increment score if correct, add to answeredQuestions list), then advance the PageView to the next question. If it is the last question, navigate to the ResultsScreen.

1// Cloud Function: checkAnswer (index.js)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.checkAnswer = functions.https.onCall(async (data, context) => {
7  if (!context.auth) {
8    throw new functions.https.HttpsError('unauthenticated', 'Login required');
9  }
10  const { quizId, questionId, selectedIndex } = data;
11  if (!quizId || !questionId || selectedIndex === undefined) {
12    throw new functions.https.HttpsError('invalid-argument', 'Missing required fields');
13  }
14  const db = admin.firestore();
15  const correctDoc = await db
16    .collection('quizzes').doc(quizId)
17    .collection('correctAnswers').doc(questionId)
18    .get();
19  if (!correctDoc.exists) {
20    throw new functions.https.HttpsError('not-found', 'Question not found');
21  }
22  const { correctIndex, explanation } = correctDoc.data();
23  const isCorrect = Number(selectedIndex) === Number(correctIndex);
24  // Log the attempt
25  await db.collection('quiz_attempts').add({
26    userId: context.auth.uid,
27    quizId, questionId,
28    selectedIndex: Number(selectedIndex),
29    isCorrect,
30    timestamp: admin.firestore.FieldValue.serverTimestamp(),
31  });
32  return { isCorrect, correctIndex, explanation: explanation || '' };
33});

Create a ResultsScreen page with parameters: quizId (String), score (Integer), totalQuestions (Integer), answeredQuestions (List of Maps — from Page State). Display the final score prominently at the top with a percentage and a grade indicator (A, B, C, D based on percentage). Below the score, add a ListView that iterates over answeredQuestions. Each item shows the question number, whether it was correct (green checkmark) or incorrect (red X), the selected answer text, and the correct answer text. Use Conditional Visibility to show or hide the correct answer reveal based on whether isCorrect is false. At the bottom, add a Play Again button that resets Page State and navigates back to the quiz start, and a Leaderboard button that opens the leaderboard page.

Create a quiz_scores Firestore collection with fields: userId (String), displayName (String), avatarUrl (String), quizId (String), score (Integer), totalQuestions (Integer), percentage (Double), completedAt (Timestamp). After showing the results screen, write the user's score to quiz_scores — but only if it is their best score for this quiz. In FlutterFlow, create a Cloud Function named submitScore that checks if a better score already exists for this user/quiz pair before writing. Create a Leaderboard page that streams the quiz_scores collection filtered by quizId and ordered by score descending with a limit of 50. Display results in a ListView with rank number, avatar, display name, and score. Highlight the current user's row in a different color using Conditional Styling.