# 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 %}


---

# 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/react-sdk-components/gamification/gamifiedquiz-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.