roundtable-js

v0.2.3

Published

a year ago

A modular survey framework built with JavaScript

0High
0Medium
0Low

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

Install roundtable-js using npm:
```
npm install roundtable-js
```

Option 2: Git

Clone the repository:

git clone https://github.com/roundtableAI/roundtable-js.git

Navigate to the project directory:
```
cd roundtable-js
```
Include the necessary files in your project.

Option 3: CDN

Include the following script tag in your HTML:

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

Usage

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/question_types/singleSelect.js';

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

const { Survey, SingleSelect } = RoundtableJS;

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();

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.