One to one Survey Component

The Quest Survey component is a customizable feature that empowers users to create one-to-one surveys and quizzes.

To unlock early access to the component Get Access

Installation

To install the Quest react-sdk into your project, follow these steps:

• 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:

npm install @questlabs/react-sdk

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

Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.

This component provides a seamless way to gather feedback, insights, or information from users in a user-friendly manner. With Quest Survey, you can design surveys with various input types tailored to your specific needs.

• Normal Input: Collect text or numerical responses.

• Multiple Choice Options: Allow users to select multiple answers from a predefined list.

• Single Choice Options: Enable users to choose a single answer from a list of options.

• Date: Capture date-related responses.

• Text Area: Provide a text area for users to input larger text or comments

Navigation

The component provides intuitive navigation options to guide users through the survey or quiz seamlessly. It offers multiple ways for users to navigate between pages, ensuring a user-friendly experience.

Navigating to the Next Page:

1. Pressing Enter:

• Users can advance to the next page of the survey or quiz by pressing the "Enter" key on their keyboard when an input field, such as a text input or multiple-choice option, is in focus. This allows for quick and convenient progression.

2. Scrolling Down:

• Another method for moving to the next page is by scrolling down. When users scroll down the page, it will automatically transition to the subsequent page. This feature is designed for users who prefer a scroll-based interaction.

3. Clicking the "Next" Button:

• The component includes a "Next" button that users can click to move forward to the next page. This button provides explicit control and is easily accessible for users who prefer to navigate by clicking.

Returning to the Previous Page:

1. Clicking the "Previous" Button:

• To revisit a previous page, users can click the "Previous" button. This action allows users to backtrack and review their responses or change their answers as needed.

2. Scrolling Up:

• Users can also navigate to the previous page by scrolling up. When users scroll upward within the page, it will smoothly transition to the previous page, offering a consistent scroll-based navigation experience.

Example Usage

import { QuestForm, QuestProvider } from '@questLabs/react-sdk'
import { useState } from 'react'

const YourComponent = () => {

const [ answers, setAnswer ] = useState([])

return(
<QuestProvider 
    apiKey={"your api key"} 
    entityId={"your entityId"}>
    <QuestForm
        onSubmit={()=>{
            console.log(answers)
        }}
        bgColor={"white"}
        setAnswer={setAnswer}
        color={"black"}
        inputBorderColor={"black"}
        alignment={"center"}
        questId={"your questId"}
        userId={"your userId"}
        token={"your token"}
        progressBar={true}
    >
    </QuestForm>
</QuestProvider>
)}