Let’s walk through creating a more complex survey using RoundtableJS. This example will demonstrate how to set up a survey with multiple pages, apply custom styling, and include various question types.

Step 1: Import Necessary Modules

First, import the Survey class and the question types you’ll use:

import Survey from 'roundtable-js/core/survey.js';
import SingleSelect from 'roundtable-js/question_types/singleSelect.js';
import OpenEnd from 'roundtable-js/question_types/openEnd.js';
import NumberEntry from 'roundtable-js/question_types/numberEntry.js';

Step 2: Create the Survey Instance

Define a function to create the survey instance with custom styles:

function createSurvey() {
    return new Survey({
        participantId: 'user456',
        condition: 'experimental',
        styles: {
            body: {
                fontFamily: 'Roboto, sans-serif',
                backgroundColor: '#e6f2ff'
            },
            container: {
                maxWidth: '600px',
                boxShadow: '0 0 10px rgba(0,0,0,0.1)',
                padding: '20px',
                borderRadius: '10px',
                backgroundColor: '#ffffff'
            },
            button: {
                backgroundColor: '#4CAF50',
                borderRadius: '20px',
                padding: '10px 20px',
                color: 'white',
                border: 'none',
                cursor: 'pointer'
            }
        }
    });
}

Step 3: Create Survey Pages

Define functions to create the survey pages. Each page will contain different question types.

function createPage1() {
    return {
        id: 'demographics',
        elements: [
            new NumberEntry({
                id: 'age',
                text: 'What is your age?',
                min: 18,
                max: 120
            }),
            new SingleSelect({
                id: 'gender',
                text: 'What is your gender?',
                options: ['Male', 'Female', 'Non-binary', 'Prefer not to say']
            })
        ]
    };
}

function createPage2() {
    return {
        id: 'feedback',
        elements: [
            new OpenEnd({
                id: 'experience',
                text: 'Describe your experience with our product:',
                minLength: 50,
                maxLength: 500
            })
        ]
    };
}

Step 4: Run the Survey

Create an asynchronous function to handle the survey flow, display pages, and finish the survey.

async function runSurvey() {
    try {
        // Create a new survey instance
        const mySurvey = createSurvey();

        // Create survey pages
        const page1 = createPage1();
        const page2 = createPage2();

        // Show the first page
        await mySurvey.showPage(page1);

        // Get a response and use it
        const age = mySurvey.getSurveyDetail('age');
        console.log(`Participant age: ${age}`);

        // Show the second page
        await mySurvey.showPage(page2);

        // Finish the survey
        mySurvey.finishSurvey({ 
            message: 'Thank you for completing our survey! Your feedback is valuable.'
        });

    } catch (error) {
        console.error('An error occurred during the survey:', error);
    }
}

// Start the survey
runSurvey();

​
Explanation

  1. Import Modules: Import the necessary classes and question types from roundtable-js.
  2. Create Survey Instance: The createSurvey function initializes a new survey with custom styles applied to the body, container, and buttons.
  3. Create Pages: The createPage1 and createPage2 functions define two pages of the survey. Page 1 collects demographic information, and Page 2 collects user feedback.
  4. Run the Survey: The runSurvey function handles the survey flow. It displays each page sequentially, retrieves responses, and completes the survey with a thank you message.

​
Customization

You can extend this example indefinitely. Here are some ideas:

  • Additional Pages: Create more pages with various question types like MultiSelect, Grid, etc.
  • Conditional Logic: Add conditional logic to show or hide questions based on previous answers.
  • Advanced Styling: Customize the survey further by defining more detailed styles for individual questions or error messages.
DataContribution