The OpenEnd question type provides a text area for users to input free-form text responses.

​
Basic Usage

const feedbackQuestion = new OpenEnd({
    id: 'feedback',
    text: 'Please provide your feedback',
    subText: 'Your opinion matters to us',
    minLength: 10,
    maxLength: 500,
    rows: 4,
    placeholder: 'Enter your feedback here...'
});

​
Parameters

id
string
required

Unique identifier for the question.

text
string
required

The main question text.

subText
string
default: ""

Additional text to provide context or instructions.

minLength
integer
default: "0"

Minimum required length of the response.

maxLength
integer
default: "10000"

Maximum allowed length of the response.

rows
integer
default: "2"

Number of visible text rows.

placeholder
string
default: ""

Placeholder text for the text area.

required
boolean
default: "true"

Whether the question is required.

includeAlias
boolean
default: "true"

Whether to include alias data for typing history.

customValidation
function

A custom validation function that takes the response as input and returns true if valid, or an error message string if invalid.

styles
object

Custom styles to apply to the question. Available keys are:

  • root
  • innerContainer
  • textContainer
  • text
  • subText
  • textarea
  • errorMessage

​
Data

Response Format

The OpenEnd question type returns a string containing the user’s text input:

"This is the user's detailed feedback about the product..."

Additional data stored includes:

  • responseLength: The length of the response.
  • aliasTypingHistory: An array of typing events if includeAlias is true.

Validation

The OpenEnd question validates that:

  1. The response is not empty when required is true.
  2. The response length is at least minLength (if specified).
  3. The response length does not exceed maxLength (if specified).
  4. Any custom validation provided in the customValidation function passes.

If validation fails, it displays an appropriate error message.

​
Advanced

​
Methods

The OpenEnd question type inherits methods from the base Element class and includes some specific methods:

setResponse
function

Set the response for the question.

Parameters:

  • value (string): The text response
openEndQuestion.setResponse('This is my detailed feedback...');
validate
function

Validate the current response against the question’s rules.

Returns:

  • An object with isValid (boolean) and errorMessage (string) properties.
const { isValid, errorMessage } = openEndQuestion.validate();

​
Example

Here’s an example of how to create a customized open-end question:

const detailedFeedbackQuestion = new OpenEnd({
    id: 'detailed_feedback',
    text: 'Please share your detailed thoughts on our product',
    subText: 'Your insights help us improve',
    minLength: 50,
    maxLength: 1000,
    rows: 6,
    placeholder: 'Describe your experience, suggestions, and any issues...',
    required: true,
    includeAlias: true,
    customValidation: (response) => {
        if (response.toLowerCase().includes('bad') && response.length < 100) {
            return 'If you had a negative experience, please provide more details (at least 100 characters).';
        }
        return true;
    },
    styles: {
        root: {
            backgroundColor: '#f0f8ff',
            padding: '15px',
            borderRadius: '8px',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        },
        text: {
            color: '#2c3e50',
            fontSize: '1.2em',
            fontWeight: 'bold'
        },
        subText: {
            fontStyle: 'italic',
            color: '#7f8c8d'
        },
        textarea: {
            border: '2px solid #3498db',
            borderRadius: '4px',
            fontSize: '1.1em',
            lineHeight: '1.5',
            transition: 'border-color 0.3s ease',
            '&:focus': {
                borderColor: '#2980b9',
                outline: 'none',
            }
        },
        errorMessage: {
            color: '#e74c3c',
            fontWeight: 'bold',
            marginTop: '5px'
        }
    }
});
Number ScaleSingle Select