Skip to content

lotas/survey-builder

Repository files navigation

Survey Builder

Small library to build custom surveys, export/import to JSON.

Live demo

Installation

Use sources or include dist/survey-builder.css, dist/survey-builder[.min].js files.

Usage

Library will register custom component in global scope SurveyBuilderInit:

function SurveyBuilderInit(SurveyBuilderOpts): void;

export interface SurveyBuilderOpts {
  target: HTMLElement | Element;  // i.e. document.getElementById('placeholder')
  props: {
    haveTitle?: boolean;
    customInputNames?: boolean; // allow input of custom names for each question
    snapshot?: SurveyBuilderSnapshot; // see below
    onChange?: (snapshot: SurveyBuilderSnapshot) => void; // will be triggered on every change
    onExport?: (snapshot: SurveyBuilderSnapshot) => void; // will be triggered on export click
    debug?: boolean; // show debug info
    showLabels?: boolean;
    showExportButton?: boolean;
  };
}

To use it:

<head>
  <link rel='stylesheet' href='/dist/survey-builder.css'>
  <script src='/dist/survey-builder.min.js'></script>
</head>

<div id="element-root"></div>

<script>
  window.SurveyBuilderInit({
    target: document.getElementById('element-root'),
    props: {
      haveTitle: false,
      customInputNames: true,
      debug: true,
      showLabels: true,
      showExportButton: true,
      snapshot: snapshot: {
        title: 'Sample survey',
        questions: [
          {
            id: 'q-1',
            title: 'User name',
            name: 'userName',
            type: 'input',
            required: true,
          },
          {
            id: 'q-2',
            title: 'User rating',
            name: 'userRating',
            type: 'rating',
            required: true,
            options: 5,
          },
          {
            id: 'q-3',
            title: 'Account type',
            name: 'accountType',
            type: 'single',
            required: true,
            answers: [
              {
                id: 'a-1',
                title: 'Private account',
                type: 'text',
              },
              {
                id: 'a-2',
                title: 'Business account',
                type: 'text',
              },
            ],
          },
        ],
      },
      onExport: (data) => {
        console.log('Congrats: export', data)
      },
      onChange: (data) => {
        console.log('Model changed', data)
      },
    },
  })
</script>