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

Good styling is an underrated way to enhance the participant experience
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');
}