Survey Constructor

The Survey constructor is your starting point for creating a new survey in RoundtableJS.

​

Basic Usage

import Survey from 'roundtable-js/core/survey.js';

const mySurvey = new Survey({
    participantId: 'user123',
    condition: 'experimental'
});

The Survey constructor accepts a single optional parameter that stores any metadata and custom styles.

​

customSurveyDetails

An object containing custom details and styles for the survey.

Example Custom Survey Details

• participantId (string): A unique identifier for the survey participant.
• condition (string): The experimental condition or group for the survey.
• styles (object): Custom styles to be applied globally to the survey.

​

Styling

The Survey constructor allows you to define global styles that will be applied to the entire survey. There are two main categories of styles you can set:

1. Survey-level styles: Applied to the overall survey structure.
2. Element-level styles: Applied to all elements within the survey.

​

Survey-level Styling

These styles are applied to the overall survey structure:

const mySurvey = new Survey({
    styles: {
        body: {
            fontFamily: 'Arial, sans-serif',
            backgroundColor: '#f7f7f7'
        },
        container: {
            maxWidth: '700px',
            boxShadow: '0 0 10px rgba(0,0,0,0.1)'
        },
        button: {
            backgroundColor: '#333',
            color: '#ffffff'
        }
    }
});

​

Element-level Styling

You can also define styles that will be applied to all elements within the survey:

const mySurvey = new Survey({
    styles: {
        Element: {
            root: {
                background: 'gray',
                padding: '20px',
                borderRadius: '5px'
            },
            text: {
                color: 'white',
                fontSize: '16px'
            }
        }
    }
});

These styles will be applied to all elements in the survey, but can be overridden by individual element styles.

​

Available Style Keys

Survey-level style keys:

• body: Styles for the survey body
• container: Styles for the main survey container
• navigation: Styles for the navigation container
• button: Styles for survey navigation buttons
• errorMessage: Styles for error messages
• nextButtonError: Styles for the error message next to the ‘Next’ button
• finishMessage: Styles for the survey completion message

Element-level style keys:

• root: Styles for the main container of each element
• innerContainer: Styles for the inner container of elements (if applicable)
• textContainer: Styles for the container holding text elements
• text: Styles for the main text (usually the question text)
• subText: Styles for additional instructional text
• errorMessage: Styles for validation error messages

For details on the styling syntax and more advanced styling options that RoundtableJS follows, consult our Styling page.

​

Methods

​

setSurveyDetail(key, value)

Set a custom survey detail.

• Parameters:
  • key (string): The key for the survey detail
  • value (any): The value to set for the survey detail

survey.setSurveyDetail('language', 'en-US');

​

getSurveyDetail(key)

Retrieve a custom survey detail.

• Parameters:
  • key (string): The key of the survey detail to retrieve
• Returns:
  • The value of the specified survey detail

const language = survey.getSurveyDetail('language');

​

showPage(page)

Display a specific page of the survey.

• Parameters:
  • page (object): The page object to display
• Returns:
  • A Promise that resolves when the page is completed

await survey.showPage({ id: 'page1', elements: [question1, question2] });

​

finishSurvey(options)

Complete the survey and display a finishing message.

• Parameters:
  • options (object): An object containing the finishing options
    • message (string): The message to display upon survey completion

survey.finishSurvey({ message: 'Thank you for completing the survey!' });

​

getResponse(questionId)

Retrieve the most recent response for a specific question.

• Parameters:
  • questionId (string): The ID of the question
• Returns:
  • The most recent response for the specified question, or null if not found

const response = survey.getResponse('age');

​

getAllResponses()

Retrieve all responses collected in the survey.

• Returns:
  • An array of all response objects

const allResponses = survey.getAllResponses();

​

getAllSurveyData()

Retrieve all survey data, including survey details and responses.

• Returns:
  • An object containing surveyDetails and responses

const surveyData = survey.getAllSurveyData();

​

addPlugin(plugin)

Add a plugin to the survey.

• Parameters:
  • plugin (object): The plugin object to add

const myPlugin = {
    initialize: (survey) => {
        // Plugin initialization logic
    },
    // Other plugin methods
};
survey.addPlugin(myPlugin);

​

removePlugin(plugin)

Remove a plugin from the survey.

• Parameters:
  • plugin (object): The plugin object to remove
• Returns:
  • true if the plugin was successfully removed, false otherwise

const removed = survey.removePlugin(myPlugin);
if (removed) {
    console.log('Plugin removed successfully');
} else {
    console.log('Plugin not found');
}