Survey builder for vue.js applications

Overview

vue-survey-builder

This is a survey builder component for vue.js applications.

How to install

You can install the component using npm i -S vue-survey-builder

Demo

You can see the demo here

Please look at the souce code of the demo here

Steps to use

Step 1: Once you install it, you can import the SurveyBuilder as shown below

import { SurveyBuilder, SurveyBuilderJson } from 'vue-survey-builder';

Step 2: You can use it in your vue component, as shown below

<SurveyBuilder :options="SurveyBuilderJson" />

Here SurveyBuilderJson is the json, which is used to form question object. Please take a look at it here

Depending on the type of question, only few keys are used in the whole JSON.

Step 3: SurveyBuilder emits an event called add-update-question with a question object this.$root.$emit('add-update-question', question);

In your component, keep track of this event to capture the question which is added or updated

mounted() {
  this.$root.$on('add-update-question', question => {
    window.console.log(question);
  });
},

Each question will have an id which is a UUID field. Once you get the question object form the above event, you can check the id of with with the list of questions you have. If the id exists, then it means there is an update to the question, if the id doesn't exist, then you can directly add that question to the list of questions. You can refer the sample code in the demo repository

Step 4: You can add your own logic in your component to show the list of question in read only and edit mode. There is a component called QuestionsView, to show the list of questions, which is available here. Please use this component QuestionsView in case, you want to show the list of questions added.

You can import this component as shown below

import { QuestionsView } from 'vue-survey-builder';

Once you import it, you can use it in your component as shown below

<QuestionsView :questions="questionsList" :readOnly="true" />

  • questions is a property which takes an array of questions.

  • readOnly is used to make the whole component editable or non editable, based on the value we pass. It takes true or false.

Supported Question types

  • BOOLEAN
  • SINGLE_CHOICE
  • MULTI_CHOICE
  • SCALE
  • NUMBER
  • TEXT
  • DATE
  • TIME

Keys of the JSON

  • id : This is a unique field, which will be created dynamically for every qiestion. This field is required for all type of questions.
  • type : This represents the type of the question. The supported types are mentioned here. This field is required for all type of questions.
  • multiSelect : This represents whether the question is multi select question or not. This is is false by default and will be true only for MULTI_CHOICE question.
  • characterLimited : It represents the limit for characters, the user can enter. This is used for text type of questions.
  • hasMinMax : This represents whether the question has any min and max values or not. This will be used by NUMBER type of questions only.
  • allowDecimals : This represents whether we need to allow the decimals or not. This will be used by NUMBER type only.
  • sequence : This represents the sequence of the question. This field will be used by all the question types.
  • minValue : This represents the min value. This field will be used by NUMBER type of questions only.
  • maxValue : This represents the max value. This field will be used by NUMBER type of questions only.
  • labels : This represents the labels for scale type of question. This field is required for scale type only.
  • dateFormat : This represents the date format to be shown. This field is required for DATE type of questions.
  • timeFormat : This represents the date format to be shown. This field is required for TIME type of questions.
  • intervals : This represents the number of intervals used for SCALE type of questions.
  • textLimit : This represents the number character limit for TEXT type of questions.
  • units : This represents the units to be shown. This field will be used for NUMBER type of questions.
  • options : This represents the options of question. This field is used by SINGLE_CHOICE and MULTI_CHOICE questions.

Versions

0.1.0

This version is the initial release of this open source project. It has all the required functionalities to build the surveys using vue.js

0.2.0

This version exports SurveyBuilder, QuestionsView and SurveyBuilderJson from index.js file.

To Do

  • Support for rating question
  • Introduce drag and drop

Organisation

Fission Labs

LICENSE

Please read it here

You might also like...
A wrapper for Google Analytics to be used in web clients, oriented to single page applications

This is a wrapper for Google Analytics to be used in web clients, oriented to single page applications (something that google doesn't do oob), like automatically reporting requests performance, navigation links, redux plugin etc

Singlepage.js is a pure Javascript portal platform for building modular Web applications

Singlepage.js is a pure Javascript portal platform for building modular Web applications.

Handling Google sign-in and sign-out for Vue3 applications.
Handling Google sign-in and sign-out for Vue3 applications.

vue3-google-oauth2 Handling Google sign-in and sign-out for Vue3 applications. Please refer to here for Vue2 applications. Front-end Demo Installation

A fullscreen components for vue2, supports single page applications

Quick start @hyhello/vue-fullscreen The @hyhello/vue-fullscreen component for vue2, supports single page applications.

A starting learning tutorial on Vue 3.0 + TypeScript, suitable for complete Vue novices and Vue 2.0 veterans, incorporating some of my own practical experience on the basis of official documents.
A starting learning tutorial on Vue 3.0 + TypeScript, suitable for complete Vue novices and Vue 2.0 veterans, incorporating some of my own practical experience on the basis of official documents.

learning-vue3 This is a starting learning tutorial on Vue 3.0 + TypeScript, suitable for complete Vue novices and Vue 2.0 veterans, incorporating some

vue-easteregg - Easey add an easteregg to your vue app (default with konami code)

vue-easteregg ADD an easter egg to your vue app ;) template div id="app" {{ title }} easteregg @easter="test" :eggs="eggs" duration="50

Avatar editor for Vue.js. Demo on : https://fpluquet.github.io/vue-avatar-editor/

vue-avatar-editor Facebook like, avatar / profile picture component. This is Vue.js clone of mosch/react-avatar-editor Resize, rotate and crop your up

Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.
Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.

Vue Twemoji Picker This component is meant to be a developer friendly, easy integrable and performatic emoji picker (with some batteries) using the Tw

Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.
Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.

Vue Twemoji Picker This component is meant to be a developer friendly, easy integrable and performatic emoji picker (with some batteries) using the Tw

Comments
Releases(v0.2.0)
Owner
null
Resume Builder with Vue.JS

CVue-Awesome Demo Project setup npm install Compiles and hot-reloads for development npm run serve ToDo List Dark Theme Support Language Support Dif

Emre Coşkunçay 18 Sep 6, 2022
Facebook Messenger flowchart builder using vueflow.

Facebook Messenger Flowchart This app is an example of how to use vue-flow with Pinia store, to create a flow with custom components, its main purpose

Onitiana Rajaonarivony 3 Aug 9, 2022
Smoothly implements keyboard shortcuts (hotkeys) in Vue applications.

Smoothly implements keyboard shortcuts (hotkeys) in Vue applications.

Rogério Taques 10 Sep 19, 2022
A framework for building VR applications with Vue

A Wrapper of Panolens for building VR applications with Vue based on threejs

Mudin Ibrahim 445 Sep 30, 2022
Lexical components and composables for Vue applications.

lexical-vue Note: Lexical is currently in early development and APIs and packages are likely to change quite often. Lexical components and composables

Robert Soriano 97 Oct 6, 2022
Wowerlay is a popover library for Vue 3 applications.

Wowerlay is a popover library for Vue 3 applications. It isn't an alternative for Popper. Demos/Examples You can see all examples Here. Intallation Fo

Wope 6 Apr 29, 2022
HolusVue is a library of accessible components for creating web applications, developed with the Vue.js framework.

HolusVue is a library of accessible components for creating web applications, developed with the Vue.js framework.

Evandro C. Severgnini 0 Aug 10, 2021
Handling Google sign-in and sign-out for Vue.js applications

vue-google-oauth2 Handling Google sign-in and sign-out for Vue.js applications. This package is updated to support detection of disabled cookies. This

JunGroupProductions 0 Jan 11, 2021
Applications for any device with HTML, CSS and JavaScript - free and open source!

App Framework App Framework development has ended. I recommend using the Framework7 CLI instead. iOS and Android Apps with HTML & JavaScript - App Fra

null 647 Oct 4, 2022
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.

?? Welcome to DataFormsJS! Thanks for visiting! ?? ?? ?? ?? ?? ?? 中文 (简体) 欢迎来到 DataFormsJS Español Bienvenido a DataFormsJS Português (do Brasil) Bem

DataFormsJS 150 Sep 24, 2022