> For the complete documentation index, see [llms.txt](https://docs.questera.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/gamification/gamifiedquiz-component.md).

# GamifiedQuiz component

## **Component Visuals**

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

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

{% tab title="Visual 1" %}

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

{% tab title="Visual 2" %}

<figure><img src="/files/7pjA3Vsm4esIskHIfm8R" 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 `GamifiedQuiz` component, you need to install the Quest Labs React SDK:

* Open your terminal/command prompt.
* Navigate to your project's root directory using the `cd` command if you're not already there.
* Run the following command to install the `quest-sdk` package using npm:

```bash
npm install @questlabs/react-sdk
```

> This command will download and install the package and its dependencies into your project.

{% hint style="info" %}
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
{% endhint %}

#### GamifiedQuiz Component Features

1. **Interactive GamifiedQuiz**: The component guides users through a sequence of screens, collects their responses, and provides customization options for a dynamic gamifiedQuiz experience.
2. **Customization Options**: You can customize various aspects of the GamifiedQuiz process, including colors, input styles, button sizes, font sizes, and more.
3. **Data Collection**: The component collects user responses, allowing you to set and update answers as users progress through the GamifiedQuiz flow.
4. **Dynamic Content**: Customize the content and appearance of GamifiedQuiz question section screens based on the `design` and `headingScreen` props.
5. **Integration with API**: The component integrates with your API to retrieve gamifiedQuiz criteria and eligibility data, enhancing the user experience.

### **GamifiedQuiz Component Props**

The `GamifiedQuiz` component accepts a variety of props to configure and customize the gamifiedQuiz process:

<table><thead><tr><th width="256">Prop Name</th><th width="95">Type</th><th width="99">Required</th><th>Details</th></tr></thead><tbody><tr><td>userId</td><td>string</td><td>required</td><td>The unique identifier for the user participating in the gamifiedQuiz process.</td></tr><tr><td>token</td><td>string</td><td>required</td><td>An authentication token used for authorization.</td></tr><tr><td>questId</td><td>string</td><td>required</td><td>The unique identifier for the gamifiedQuiz quest that defines the sequence of screens and questions.</td></tr><tr><td>heading</td><td>string</td><td>optional</td><td>set the main heading </td></tr><tr><td>showFooter</td><td>boolean</td><td>optional</td><td>true: show quest footer<br>false: hide quest footer</td></tr><tr><td>thanksPopUpFooter</td><td>boolean</td><td>optional</td><td>true: show  footer<br>false: hide  footer</td></tr><tr><td>uniqueUserId</td><td>string </td><td>optional</td><td>Unique user identifier.</td></tr><tr><td>uniqueEmailId</td><td>string</td><td>optional</td><td>Unique email identifier.</td></tr><tr><td>questionSections</td><td>array of arrays</td><td>optional</td><td>Specifies the layout of screens within the gamified process.</td></tr><tr><td>sectionHeading</td><td>array of strings</td><td>optional</td><td>Defines the headings for each screen in the gamified process.</td></tr><tr><td>sectionSubHeading</td><td>array of strings</td><td>optional</td><td>Defines the sub headings for each screen in the gamified process.</td></tr><tr><td>feedbackContent</td><td>object </td><td>optional</td><td>To define the Heading and description of the submit page. </td></tr><tr><td>getAnswers</td><td>function</td><td>optional</td><td>A callback function to retrieve user answers during the onboarding process.</td></tr><tr><td>questionPerSection</td><td>number</td><td>optional</td><td>To define the number of questions in a section</td></tr><tr><td>variation</td><td>boolean</td><td>optional</td><td>To enable variations</td></tr><tr><td>customComponents</td><td>array</td><td>optional</td><td>An array of custom components to be included within the onboarding screens.</td></tr><tr><td>customComponentPositions</td><td>number</td><td>optional</td><td>Defines the positions within the onboarding process where custom components can be inserted.</td></tr><tr><td>setGamifiedQuiz</td><td>function</td><td>optional</td><td>Function to perform any task.</td></tr><tr><td>gamifiedQuiz</td><td>boolean</td><td>optional</td><td>Boolean indicating whether the gamified is active or not.</td></tr><tr><td>functionOnSubmit</td><td>function</td><td>optional</td><td> Function to be execute on submitting the questions.</td></tr><tr><td>heading</td><td>string</td><td>optional</td><td>Heading of the component</td></tr><tr><td>isV1Api</td><td>boolean</td><td>optional</td><td>To define the V1 api or not</td></tr><tr><td>showFooter</td><td>true</td><td>optional</td><td>To show &#x26; hide the footer</td></tr><tr><td>thanksPopUpFooter</td><td>boolean</td><td>optional</td><td>To show &#x26; hide the thanks pop up footer</td></tr><tr><td>EmailError</td><td>object</td><td>optional</td><td>take two properties <br>1. text: string type<br>2. errorStyle: CSS property</td></tr><tr><td>styleConfig</td><td>object</td><td>optional</td><td>An object containing CSS properties for styling various components within the onboarding process, including form, headings, descriptions, inputs, labels, buttons, single-choice options, multi-choice options, and progress bar.</td></tr></tbody></table>

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

```typescriptreact
 styleConfig?: {
        Form?: CSSProperties,
        IconColor?: CSSProperties,
        LabelColor?: CSSProperties,
        EmailError?: {
            errorStyle?: CSSProperties,
            text?: string,
        }
        Heading?: CSSProperties,
        FormContainer?: CSSProperties,
        Question?: CSSProperties,
        SubHeading?: CSSProperties,
        Input?: CSSProperties,
        PrimaryButton?: CSSProperties,
        SecondaryButton?: CSSProperties,
        Footer? : CSSProperties,
        TextArea? : CSSProperties,
        ThanksPopup?: CSSProperties,
        ThanksPopupHeading?: CSSProperties,
        ThanksPopupDescription?: CSSProperties,
        ThanksPopupFooter?: CSSProperties,
        ThanksPopupGotoHome?: CSSProperties,
        OptionsSelectedColor?: CSSProperties,
    }
```

#### GamifiedQuiz Component Usage

To use the `GamifiedQuiz` component in your React application, follow these steps:

Import the necessary components and dependencies:

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

```jsx
import { GamifiedQuiz } from '@questLabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'
```

{% endtab %}

{% tab title="Offline" %}

```jsx
import { GamifiedQuiz } from '@questLabs/react-sdk/offline';
```

{% endtab %}
{% endtabs %}

Include the `GamifiedQuiz` component within your application, passing the required and optional props:

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

<pre class="language-tsx"><code class="lang-tsx">&#x3C;GamifiedQuiz
  userId={"/* User ID */"}
  token={"/* Authentication token */"}
  questId={"/* Onboarding quest ID */"}
  uniqueUserId={"/* Unique User Id  */"}
  uniqueEmailId={"/* Unique Email Id */"} 
<strong>  questionSections={"/* Specify the layout of questions */"}  
</strong><strong>  sectionHeading={"/* Specify the section headings */"}
</strong><strong>  sectionSubHeading={"/* Specify the section sub headings */"}
</strong><strong>  feedbackContent={"/* Specify the Heading &#x26; subheading of feedback*/"}
</strong><strong>  questionPerSection={"/* Specify the number of question per section  */"}
</strong>  variation={"/* Specify the variation enable or disable */"}
  setGamifiedQuiz={"/* Specify the function */"}
  gamifiedQuiz={"/* Specify the Component enable or disable */"}
  functionOnSubmit={"/* Specify the function executes on submit */"}
  heading={"/* Define screen headings */"}
  isV1Api={"/* Specify the V1 Api or not */"}
  showFooter={"/* Specify the Footer enable or disable */"}
  thanksPopUpFooter={"/* Specify the Thanks pop up Footer enable or disable */"}
  
  styleConfig?: {{
        Form?: CSSProperties,
        IconColor?: CSSProperties,
        LabelColor?: CSSProperties,
        EmailError?: {
            errorStyle?: CSSProperties,
            text?: string,
        }
        Heading?: CSSProperties,
        FormContainer?: CSSProperties,
        Question?: CSSProperties,
        SubHeading?: CSSProperties,
        Input?: CSSProperties,
        PrimaryButton?: CSSProperties,
        SecondaryButton?: CSSProperties,
        Footer? : CSSProperties,
        TextArea? : CSSProperties,
        ThanksPopup?: CSSProperties,
        ThanksPopupHeading?: CSSProperties,
        ThanksPopupDescription?: CSSProperties,
        ThanksPopupFooter?: CSSProperties,
        ThanksPopupGotoHome?: CSSProperties,
        OptionsSelectedColor?: CSSProperties,
    }}

/>

</code></pre>

{% endtab %}

{% tab title="Offline" %}

```
<GamifiedQuiz
  uniqueUserId={"/* Unique User Id  */"}
  uniqueEmailId={"/* Unique Email Id */"} 
  questionSections={"/* Specify the layout of questions */"}  
  sectionHeading={"/* Specify the section headings */"}
  sectionSubHeading={"/* Specify the section sub headings */"}
  feedbackContent={"/* Specify the Heading & subheading of feedback*/"}
  questionPerSection={"/* Specify the number of question per section  */"}
  variation={"/* Specify the variation enable or disable */"}
  setGamifiedQuiz={"/* Specify the function */"}
  gamifiedQuiz={"/* Specify the Component enable or disable */"}
  functionOnSubmit={"/* Specify the function executes on submit */"}
  heading={"/* Define screen headings */"}
  isV1Api={"/* Specify the V1 Api or not */"}
  showFooter={"/* Specify the Footer enable or disable */"}
  thanksPopUpFooter={"/* Specify the Thanks pop up Footer enable or disable */"}
  styleConfig={{
        Form?: CSSProperties,
        IconColor?: CSSProperties,
        LabelColor?: CSSProperties,
        EmailError?: {
            errorStyle?: CSSProperties,
            text?: string,
        }
        Heading?: CSSProperties,
        FormContainer?: CSSProperties,
        Question?: CSSProperties,
        SubHeading?: CSSProperties,
        Input?: CSSProperties,
        PrimaryButton?: CSSProperties,
        SecondaryButton?: CSSProperties,
        Footer? : CSSProperties,
        TextArea? : CSSProperties,
        ThanksPopup?: CSSProperties,
        ThanksPopupHeading?: CSSProperties,
        ThanksPopupDescription?: CSSProperties,
        ThanksPopupFooter?: CSSProperties,
        ThanksPopupGotoHome?: CSSProperties,
        OptionsSelectedColor?: CSSProperties,
    }}
  offlineFormData={/* Action fields */}
/>

```

{% endtab %}
{% endtabs %}

1. Customize the onboarding experience by adjusting the props to meet your application's requirements.
2. Utilize the `getAnswers` and `setAnswer` functions to manage user responses and data collection.
3. Integrate the `GamifiedQuiz` component with your API to retrieve relevant gmaifiedQuiz criteria and eligibility data.

By following these steps, you can seamlessly integrate and customize the `GamifiedQuiz` component within your React application to create dynamic and interactive user gamifiedQuiz experiences.

### Example Usage

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

```jsx
import React, { useState } from 'react';
import { QuestProvider, GamifiedQuiz } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'
import answerData from './path-to-answer-data'; // Import or create the answer data object.

function YourApp() {
    const [answer, setAnswer] = useState([]) // State to manage user responses

    return (
        <div className="App">
            {/* Render your application content here */}

            {/* Include the OnBoarding component */}
            <QuestProvider 
              apiKey={"your api key"} 
              entityId={"your entity Id"}
              apiType ={"STAGING" OR "PRODUCTION"}
              featureFlags={{}}
              >
                <GamifiedQuiz
                    userId="q-xxxxxx505-xxxx-4xx8-xx69365x2fxxcx"
                    token="xxxxxzI1NiIsZiNmZkMGJxxxxxxxxOCIsImlhdCI6MTY5Mzg4MDUxxxxxxxxx3SHKDjJ6NQ7OPuzAL6jCzI"
                    questId="q-xxxxxx505-xxxx-4xx8-xx69365x2fxxcx"
                    questionSections={[[1, 2], [3, 4, 5], [6, 7]]}
                    sectionHeading={["Section 1", "Section 2"]}
                    sectionSubHeading={["Sub Section 1", "Sub Section 1"]}
                    feedbackContent={
                       FeedbackHeading="Feedback Heading"
                       FeedbackDescription="Feedback Description"
                    }
                    variation={"/* Specify the variation enable or disable */"}
                    setGamifiedQuiz={"/* Specify the function */"}
                    questionPerSection={"/* Specify number of questions per section*/"}
                    gamifiedQuiz={"/* Specify the Component enable or disable */"}
                    functionOnSubmit={"/* Specify the function executes on submit */"}
                    heading={"/* Define screen headings */"}
                    isV1Api={"/* Specify the V1 Api or not */"}
                    showFooter={"/* Specify the Footer enable or disable */"}
                    thanksPopUpFooter={"/* Specify the Thanks pop up Footer enable or disable */"}
                    styleConfig?: {{
                        Form?: CSSProperties,
                        IconColor?: CSSProperties,
                        LabelColor?: CSSProperties,
                        EmailError?: {
                            errorStyle?: CSSProperties,
                            text?: string,
                        }
                        Heading?: CSSProperties,
                        FormContainer?: CSSProperties,
                        Question?: CSSProperties,
                        SubHeading?: CSSProperties,
                        Input?: CSSProperties,
                        PrimaryButton?: CSSProperties,
                        SecondaryButton?: CSSProperties,
                        Footer? : CSSProperties,
                        TextArea? : CSSProperties,
                        ThanksPopup?: CSSProperties,
                        ThanksPopupHeading?: CSSProperties,
                        ThanksPopupDescription?: CSSProperties,
                        ThanksPopupFooter?: CSSProperties,
                        ThanksPopupGotoHome?: CSSProperties,
                        OptionsSelectedColor?: CSSProperties,
                    }}
                />
            </QuestProvider>
        </div>
);
}

export default YourApp;

```

{% endtab %}

{% tab title="Offline" %}

```jsx
import React, { useState } from 'react';
import {OnBoarding} from '@questlabs/react-sdk/offline';

function YourApp() {
    const [answer, setAnswer] = useState([]) // State to manage user responses

    return (
        <div className="App">
            {/* Render your application content here */}

            {/* Include the OnBoarding component */}
            <QuestProvider apiKey={"your api key"} entityId={"e-cbd0cc-3fcb-4085-a95e-71274fa7ac"}
                           featureFlags={{}}>
                <OnBoarding
                    offlineFormData={[
                      {
                        "type": "USER_INPUT_TEXT",
                        "question": "First name",
                        "options": [""],
                        "criteriaId": "ec-2733e056-350c-40d9-acfd-833882e99117",
                        "required": true,
                        "linkTitle": "",
                        "linkUrl": "",
                        "manualInput": false,
                        placeholder: "",
                      },]}
                       design={[[1, 2], [3, 4, 5], [6, 7]]}
                     headingScreen={[{name: "Tell about your self", desc: ""}, {
                        name: "Tell us more about your company",
                        desc: ""
                    }, {name: "A little more will help us guide you the best", desc: ""}]}
                    singleChoose={/* Define single-choice input type */}
                    multiChoice="modal1"
                    getAnswers={/*() => "Callback to retrieve answers" */}
                    answer={answer}
                    setAnswer={setAnswer}
                    customComponents={/* Custom components */}
                    customComponentPositions={5}
                    progress={/* Specify headings of progress bar for each tab */}
                    loadingTracker={/* Define status for loading tracker */}
                    setLoading={/* Function to set loading state */}
                    nextBtnText={/* Text for next button */}
                    progressBarMultiLine={/* Boolean indicating whether progress bar should be displayed in multiple lines */}
                    controlBtnType={/* Type of control buttons */}
                    template={/* Template type */}
                    styleConfig={} 
                />
            </QuestProvider>
        </div>
);
}

export default YourApp;

```

{% endtab %}
{% endtabs %}