v0.2.3

DropdownSelect
There is a new element called DropdownSelect

const dropdownSelect = new DropdownSelect({
    id: 'country',
    text: 'Select your country of residence',
    options: ['United States', 'Canada', 'United Kingdom', 'Australia', 'Germany', 'France', 'Japan', 'Other'],
    required: true
});

v0.2.2

You can now modify Element styling in the survey initialization, eg

const survey = new Survey({
    styles: {
        Element: {
            root: {
                background: 'gray',
            }
        }
    }
});

Styling

The element styles you can style from the survey are

'root', 'innerContainer', 'textContainer', 'text', 'subText', 'errorMessage'

Element-specific styling is still done at the element level and can override default styles from the survey, eg

const openEnd = new OpenEnd({
    id: 'feedback',
    text: 'Please provide any additional feedback you may have',
    styles:{
        root: {
            background: 'white', // Overrides the gray background set in the survey styles
        },
        textarea: {
            borderRadius: '0px', // Removes the default border radius only on the textarea
        }
    }
});

The styling for the survey is the same as before, but there is no question selector

Custom validation

Each question can now take an optional customValidation input that is a function to determine whether the response is valid. The function takes their response as an input. If it fails, it returns a string with the error message. If it passes, it returns true, eg

const singleSelect = new SingleSelect({
    id: 'favorite-color',
    text: 'What is your favorite color?',
    options: ['Red', 'Blue', 'Green', 'Yellow'],
    customValidation: (response) => {
        if (response === 'Yellow') {
            return 'Yellow is not a valid option';
        }
        return true;
    }
});

This validation is done in addition to the other validation (e.g., was a required question answered, is the the length of an open end above the minimum length specified, ect).

PageHTML

There is a new plugin called PageHTML that adds an HTML element to every page, eg
const logo = new PageHTML({
    id: 'logo',
    content: '<img src="https://roundtable.ai/images/logo-with-text.svg" alt="Company Logo">',
    position: 'top',
    styles:{
        root: {
            margin: '0 auto',
            width: '100%',
            maxWidth: '180px',
        }
    }
});

survey.addPlugin(logo);

The PageHTML takes targetId, which is the id of the div that it will be added to (default 'survey-container') and a position ('top' or 'bottom') the specifies where in the div it should be added

Rename element
OrderedScale is now called NumberScale

SingleSelect other
You can allow the participant to set an "other" response to SingleSelect by allowOther to true. Optionally you can also pass otherText as the name of this option (default: "Other (please specify)")

const singleSelect = new SingleSelect({
    id: 'favorite-color',
    text: 'What is your favorite color?',
    subText: 'Select one option',
    options: ['Red', 'Blue', 'Green', 'Yellow'],
    allowOther: true,
    otherText: 'Other (please be specifi)',
});

Plugin updates
You can now remove plugins the same way they are added:
survey.removePlugin(logo);

Initial launch for private beta

Initial launch for private beta

v0.0.2-beta

index.js imports/exports