The HTML component allows you to insert custom HTML content into your survey. This is useful for adding rich text, images, videos, or any other HTML elements that are not covered by the standard question types.

​
Basic Usage

const welcomeMessage = new HTML({
    id: 'welcome',
    content: '<h2>Welcome to our survey!</h2><p>Thank you for participating.</p>'
});

​
Parameters

id
string
required

Unique identifier for the HTML component.

content
string
required

The HTML content to be inserted into the survey. Must be a non-empty string.

styles
object

Custom styles to apply to the HTML container. All style keys from the base Element class are available for styling.

​
Data

Response Format

The HTML component does not collect any data, so it doesn’t have a response format.

Validation

The HTML component always passes validation as it doesn’t collect any data.

​
Advanced

​
Methods

The HTML component inherits methods from the base Element class, but most are not applicable as it doesn’t collect data. Here are some key methods:

validate
function

Always returns an object indicating valid status as HTML components don’t require validation.

Returns:

  • An object with isValid (boolean) set to true and an empty errorMessage string.
const { isValid, errorMessage } = htmlComponent.validate();
// isValid will always be true, errorMessage will be an empty string
generateHTML
function

Generates the HTML structure for the component.

Returns:

  • string: The generated HTML
const htmlString = htmlComponent.generateHTML();
render
function

Renders the HTML content or updates it if already rendered.

Parameters:

  • surveyElementStyles (object): Styles to be applied from the survey level
htmlComponent.render(surveyStyles);
destroy
function

Removes the HTML content from the DOM.

htmlComponent.destroy();

​
Example

Here’s an example of how to create a more complex HTML component:

const complexContent = new HTML({
    id: 'instructions',
    content: `
        <div class="instructions">
            <h3>Survey Instructions</h3>
            <ol>
                <li>Read each question carefully</li>
                <li>Answer honestly</li>
                <li>Take your time</li>
            </ol>
            <img src="survey-image.jpg" alt="Survey illustration">
        </div>
    `,
    styles: {
        root: {
            backgroundColor: '#f0f8ff',
            padding: '15px',
            borderRadius: '8px',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        },
        // Other style keys inherited from Element class can be used here
    }
});
GridMultiple Select