# Gamified Quiz Component

## Components Visuals 

{% tabs %}
{% tab title="Overview" %}

<figure><img src="/files/FHxGLhfEBHEeK8fHj71p" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1" %}

<figure><img src="/files/1iGwp36YBaL4srAG9Y9F" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="/files/pNtaFsTwEcjm8ZQoXiXP" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

### Installation

To use the get Gamified Quiz component , you need to install `questlabs_flutter_sdk` package into your project&#x20;

* First, navigate to the root directory of your Flutter project. Open the `pubspec.yaml` file using your preferred code editor.
* Under the `dependencies` section in your `pubspec.yaml` file, add the following line to include the `questlabs_flutter_sdk` package
* After saving your changes, open your terminal or command prompt and run the following command to fetch the new dependency

```dart
dependencies:
  questlabs_flutter_sdk:
    git:
      url: "Replace with your github URL"
      ref: master  
  flutter_bloc: ^8.1.6
```

## Props of Gamified Quiz Component

<table><thead><tr><th width="170">Prop Name</th><th width="178">Type</th><th width="343">Description</th><th>Required</th></tr></thead><tbody><tr><td>questProvider</td><td>QuestProvider</td><td>Provides necessary configuration such as API key, entity ID, and optional theme settings</td><td>Yes</td></tr><tr><td>apiKey</td><td>String</td><td>API key to authenticate requests.</td><td>Yes</td></tr><tr><td>entityId</td><td>String</td><td>Entity ID associated with the quest.</td><td>Yes</td></tr><tr><td>themeConfig</td><td>QuestThemeConfig</td><td>Customizes theme settings like background color, font style, border color, button color, etc.</td><td>No</td></tr><tr><td>primaryColor</td><td>Color</td><td>Sets the primary color of the component .</td><td>no</td></tr><tr><td>secondaryColor</td><td>Color</td><td>Sets the secondary color of the component .</td><td>no</td></tr><tr><td>buttonColor</td><td>Color</td><td>Defines the color of buttons within the component .</td><td>no</td></tr><tr><td>backgroundColor</td><td>Color</td><td>Specifies the background color of the component .</td><td>no</td></tr><tr><td>borderColor</td><td>Color</td><td>Defines the color of the component's border.</td><td>no</td></tr><tr><td>fontStyle</td><td>String</td><td>Sets the font style for text within the component (e.g., <code>"poppins"</code>)</td><td>no</td></tr><tr><td>gamificationComponentProps</td><td>GamificationComponentProps</td><td>Contains user ID, quest ID, token, and display options for the "Gamified Quiz Component" </td><td>Yes</td></tr><tr><td>userId</td><td>String</td><td>Unique user identifier.</td><td>Yes</td></tr><tr><td>token</td><td>String</td><td>Token for authenticating the user session.</td><td>Yes</td></tr><tr><td>questId</td><td>String</td><td>Unique quest identifier.</td><td>Yes</td></tr><tr><td>showFooter</td><td>bool</td><td>Whether or not to display the footer in the "Gamification Quiz" component.</td><td>no</td></tr><tr><td>uiHeader</td><td>List&#x3C;UiHeader></td><td>change question section header and description </td><td>no</td></tr><tr><td>heading</td><td>String</td><td>Sets the text for the heading area of the component</td><td>no</td></tr><tr><td>subHeading</td><td>String</td><td>Provides text for the description area of the component</td><td>no</td></tr><tr><td>questionSection</td><td>List&#x3C;List&#x3C;int>></td><td>change your question order and question section</td><td>no</td></tr></tbody></table>

**You can customize the UI with the type of** QuestThemeConfig **would be**

```dart

          themeConfig: QuestThemeConfig(
              secondaryColor: Colors.red,
              primaryColor: Colors.blue,
              buttonColor: Colors.yellow,
              backgroundColor: Colors.yellow,
              fontStyle: "libre baskerville",
              borderColor: Colors.red
          )
```

### **Basic Usage:**

* In your `main()` function, ensure you initialize the app and dependencies as follows:

```dart
void main() {
  runApp(const MyApp());
  getItInit();
  getIt<SharedPref>().init();
}
```

* Add the following `BlocProvider` setup to your `providers` list to initialize the `ComponentStateCubit` for state management:

```dart
providers: [
  BlocProvider(
            create: (context) => getIt<ComponentStateCubit>(),
          ),
],
```

{% hint style="info" %}
Ensure you provide your entity ID, API key, token, user ID, and quest ID
{% endhint %}

```dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:questlabs_flutter_sdk/questlabs_flutter_sdk.dart';

void main() {
  runApp(const MyApp());
  getItInit();
  getIt<SharedPref>().init();
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider(
          create: (context) => getIt<ComponentStateCubit>(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        home:   GamificationQuizComponent(
          questProvider: QuestProvider(
            apiKey: "apiKey",
            entityId: "entityId",
            // themeConfig: QuestThemeConfig(
            //   secondaryColor: Colors.red,
            //   primaryColor: Colors.blue,
            //   buttonColor: Colors.yellow,
            //   fontStyle: "",
            //   borderColor: Colors.red
            // )
          ),
          gamificationComponentProps: GamificationComponentProps(
            token: "token",
            userId: "userId",
            questId: "questId",
            // questionSection: [[1,2,3], [4,5,6,7]],
            // showFooter: true,
            // uiHeader: [
            //   UiHeader(
            //       heading: "notheee",
            //       subHeading: "none 1"
            //   ),
            //   UiHeader(
            //       heading: "screen 2",
            //       subHeading: "none 2"
            //   ),
            // ],
          ),
        )
      ),
    );
  }
}



```

Watch the video below for a step-by-step guide on testing the Gamified Quiz component in your Flutter project.

{% embed url="<https://www.loom.com/share/acf7d8810cab4ebabe183a930cfec5c7?sid=3d7caf89-7f24-4b4e-b4fe-09b6e3e8946a>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.questera.ai/questera-ai-sdks/flutter-sdk-components/gamification/gamified-quiz-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.