roundtable-js - 开源JavaScript库助力构建复杂调查和数据收集

RoundtableJS

程序化调查软件
云端编辑器 • Slack • 文档

RoundtableJS 是一个开源的 JavaScript 库，用于构建复杂的调查问卷、表单和数据标注任务。它设计得简单但完全可定制。我们使添加复杂逻辑（如分支、跳过、循环）、修改问题类型和完全自定义设计变得容易。

🌟 特点

为现代网络设计： 我们使用 JavaScript 设计，并利用其异步功能来管理调查逻辑。例如，我们的库在异步函数中构建时间线，而不是基于页面提交时触发的回调来确定这种逻辑，这意味着逻辑直观地从上到下流动。
对开发者友好： 我们是开源的，并且以 API 为先。RoundtableJS 的想法源于看到将 Roundtable 的 API 集成到其他调查软件中有多困难。我们希望开源产品包含一个强大的插件生态系统，人们可以在其中引入新的问题类型、与 CRM 等工具集成，并控制数据的存储和处理方式。
原生 AI 功能： 我们的云端产品具有原生 AI 功能，如自然语言编程和自动欺诈检测。我们不断扩展我们的 AI 功能。让我们知道您想看到哪些工具！

🖼️ 示例

以下是使用 RoundtableJS 构建的一些示例调查。所有代码都在 examples/studies 目录中。

🚀 快速开始

安装

选项1：npm

使用npm安装roundtable-js：
```
npm install roundtable-js
```

选项2：Git

克隆仓库：

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

进入项目目录：
```
cd roundtable-js
```
在你的项目中包含必要的文件。

选项3：CDN

在你的HTML中包含以下脚本标签：

<script src="https://cdn.jsdelivr.net/npm/roundtable-js@0.1.2/dist/bundle.js"></script>

使用方法

对于npm或Git安装，在你的JavaScript文件中导入必要的模块：

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

对于CDN安装，确保脚本已加载并使用全局的RoundtableJS对象：

const { Survey, SingleSelect } = RoundtableJS;

创建一个调查实例并添加带有问题的页面：

// 定义一个异步函数来运行调查
async function runSurvey() {
   // 创建一个新的Survey实例，带有特定的参与者ID
   const survey = new Survey({ participantId: 'participant_123' });

   // 定义第一个问题为单选题，有两个选项
   const question1 = new SingleSelect({
      id: 'question1',
      text: '一个问题',
      options: ['选项1', '选项2'],
   });

   // 定义第二个问题为单选题，有两个选项
   const question2 = new SingleSelect({
      id: 'question2',
      text: '第二个问题',
      options: ['选项1', '选项2'],
   });

   // 显示包含第一个问题的第一页，并等待回答
   await survey.showPage({ id: 'page1', elements: [question1] });

   // 这段代码只在第一页完成后运行
   console.log('第1页已完成');

   // 显示包含第二个问题的下一页，并等待回答
   await survey.showPage({ id: 'page2', elements: [question2] });

   // 所有页面完成后结束调查并显示结束信息
   survey.finishSurvey('感谢您完成调查！');
}

// 通过调用runSurvey函数开始调查
runSurvey();

设置你的HTML：

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>调查</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">下一步</button>
   </div>
   <div id="finish"></div>
</div>
<script type="module" src="survey_script.js"></script>
</body>

</html>