Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lotas/survey-builder
Small interactive survey builder
https://github.com/lotas/survey-builder
survey survey-form svelte tailwind typescript
Last synced: 21 days ago
JSON representation
Small interactive survey builder
- Host: GitHub
- URL: https://github.com/lotas/survey-builder
- Owner: lotas
- License: mit
- Created: 2021-09-13T20:08:41.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-05T20:55:11.000Z (about 3 years ago)
- Last Synced: 2024-10-05T18:23:49.004Z (about 1 month ago)
- Topics: survey, survey-form, svelte, tailwind, typescript
- Language: Svelte
- Homepage: https://yaraslav.com/survey-builder/
- Size: 731 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Survey Builder
Small library to build custom surveys, export/import to JSON.
[Live demo](https://yaraslav.com/survey-builder/)
# 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`:
```ts
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:
```html
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)
},
},
})
```