Skip to content

roundtableAI/roundtable-js

Repository files navigation

Roundtable Logo

RoundtableJS

Programmatic survey software
Cloud editorSlackDocumentation

GitHub Stars NPM Downloads Hacker News Cloud Editor

Twitter Follow Join Slack LinkedIn Follow

RoundtableJS is an open-source JavaScript library for building complex surveys, forms, and data annotation tasks. It's designed to be simple but completely customizable. We make it easy to add complex logic (e.g. branching, skipping, looping), modify question types, and fully customize the design.

🌟 Features

  • Designed for the Modern Web: We're designed in JavaScript and leverage its asynchronous functionality for managing survey logic. For example, rather than determining this logic based on callbacks that trigger when a page is submitted, our library builds the timeline in an async function which means the logic flows intuitively from top to bottom.

  • Developer-Friendly: We are open-source and API-first. The idea for RoundtableJS arose by seeing how difficult it was to integrate Roundtable's API into other survey software. We want the open-source offering to include a robust plugin ecosystem where people can introduce new question types, integrate with tools like CRMs, and control how data is stored and processed.

  • AI-Native Functionality: Our cloud offering has AI-native features such as natural language programming and automated fraud detection. We're continuously expanding our AI features. Let us know what tools you'd like to see!

🖼️ Examples

Here are some example surveys built with RoundtableJS. All code is in the examples/studies directory.

🚀 Quick Start

Installation

Option 1: npm

  1. Install roundtable-js using npm:
    npm install roundtable-js

Option 2: Git

  1. Clone the repository:

    git clone https://github.com/roundtableAI/roundtable-js.git
    
  2. Navigate to the project directory:

    cd roundtable-js
    
  3. Include the necessary files in your project.

Option 3: CDN

  1. Include the following script tag in your HTML:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.js"></script>

Usage

  1. Import the necessary modules in your JavaScript file for npm or Git installations:

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

    For CDN installation, ensure the script is loaded and use the global RoundtableJS object:

    const { Survey, SingleSelect } = RoundtableJS;
  2. Create a survey instance and add pages with questions:

    // Define an asynchronous function to run the survey
    async function runSurvey() {
       // Create a new Survey instance with a specific participant ID
       const survey = new Survey({ participantId: 'participant_123' });
    
       // Define the first question as a single-select question with two options
       const question1 = new SingleSelect({
          id: 'question1',
          text: 'A question',
          options: ['Option 1', 'Option 2'],
       });
    
       // Define the second question as a single-select question with two options
       const question2 = new SingleSelect({
          id: 'question2',
          text: 'A second question',
          options: ['Option 1', 'Option 2'],
       });
    
       // Show the first page with the first question and wait for it to be answered
       await survey.showPage({ id: 'page1', elements: [question1] });
    
       // This code runs only after the first page is completed
       console.log('Page 1 completed');
    
       // Show the next page with the second question and wait for it to be answered
       await survey.showPage({ id: 'page2', elements: [question2] });
    
       // Finish the survey once all pages are completed and display an end message
       survey.finishSurvey('Thank you for completing the survey!');
    }
    
    // Start the survey by calling the runSurvey function
    runSurvey();   
  3. Set up your HTML:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey</title>
    <style>
       * {
          box-sizing: border-box;
       }
    
       .hidden {
          display: none;
       }
    </style>
    </head>
    
    <body>
    <div id="survey-container" class="hidden">
       <div id="page-container"></div>
       <div id="navigation">
          <button id="next-button">Next</button>
       </div>
       <div id = 'finish'></div>
    </div>
    <script type="module" src="survey_script.js"></script>
    </body>
    
    </html>

📚 Documentation

Read our full documentation.

🎉 Community

Join our community:

🛠️ Development / Open-Source Community

Please see our Contributing Guide.

📜 License

RoundtableJS is open source software licensed.