Interactive Quiz

The Quiz feature (registered as quiz in the CLI) allows you to build interactive multiple-choice experiences for your users. It handles state management, scoring, and animated transitions between questions.

vf add quiz

Structure

• Screen: apps/native/src/app/(root)/(protected)/quiz/index.tsx is the entry point that renders the quiz interface.
• Config: apps/native/src/features/quiz/config.ts stores the questions, options, and correct answers.
• Components: apps/native/src/features/quiz/components contains the UI primitives for question cards, progress indicators, and result summaries.

Personalization

You can easily modify the quiz content by updating the QUIZ_CONFIG:

export const QUIZ_CONFIG = {
  questions: [
    {
      id: 1,
      text: "Which of these is a built-in VibeFast feature?",
      options: ["AI Chatbot", "Time Travel", "Pizza Delivery"],
      correctIndex: 0,
    },
  ],
};

Tracking & Results

The component calculates the final score and can trigger achievements or analytics events based on the user's performance. It uses the project's theme tokens to ensure the celebration and result screens look consistent with your brand.