BOOTSTRAP AND DESIGN

Use predefined css classes (standard or bootstrap) and modify them as required your site design.

VISUAL SURVEY EDITOR

Use the Visual Survey Editor to create, test and then insert a survey into your web page. The editor generates JSON that can be edited in it later, if needed.

FULL CONTROL

It's just a Javascript library. That means you have the full control. You may get/set data or send them to the server at any moment. Modify survey on the fly and add new functionality.

SAVE AND ANALYZE DATA

If you don't want to deal with saving and then analyzing JSON data, you may use the dxSurvey Service. It will do it for you.
Add Survey into your page

Or use npm

npm install survey-angular
npm install survey-jquery
npm install survey-knockout
npm install survey-react
npm install survey-vue

Step 2

Add a link to your platform Angular2 or JQuery or KnockoutJS or React Vue

import { Component } from '@angular/core';
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
import React from 'react';
import ReactDOM from 'react-dom';
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>

Step 3

Add link(s) to survey.js

If you are NOT going to use the Bootstrap, add the link to survey css.
<link href="css/survey.css" type="text/css" rel="stylesheet" />
Link to the angular2 version of the library.
import * as Survey from "survey-angular";
Link to the jquery version of the library.
<script src="js/survey.jquery.min.js"></script>
Link to the knockout version of the library.
<script src="js/survey.ko.min.js"></script>
Link to the react version of the library.
import * as Survey from "survey-react";
Link to the vue version of the library.
import * as Survey from "survey-vue";

Step 4

Build JSON using

Visual Survey Editor

JSON example (Load it in Visual Survey Editor now)

var surveyJSON = { title: "Tell us, what technologies do you use?", pages: [
  { name:"page1", questions: [ 
      { type: "radiogroup", choices: [ "Yes", "No" ], isRequired: true, name: "frameworkUsing",title: "Do you use any front-end framework like Bootstrap?" },
      { type: "checkbox", choices: ["Bootstrap","Foundation"], hasOther: true, isRequired: true, name: "framework", title: "What front-end framework do you use?", visibleIf: "{frameworkUsing} = 'Yes'" }
   ]},
  { name: "page2", questions: [
    { type: "radiogroup", choices: ["Yes","No"],isRequired: true, name: "mvvmUsing", title: "Do you use any MVVM framework?" },
    { type: "checkbox", choices: [ "AngularJS", "KnockoutJS", "React" ], hasOther: true, isRequired: true, name: "mvvm", title: "What MVVM framework do you use?", visibleIf: "{mvvmUsing} = 'Yes'" } ] },
  { name: "page3",questions: [
    { type: "comment", name: "about", title: "Please tell us about your main requirements for Survey library" } ] }
 ]
}

Step 5

Show Survey on the page

If you are using Bootstrap, tell the library to use the bootstrap css classes.
Survey.Survey.cssType = "bootstrap";

As Survey Window

<ng-app></ng-app>
@Component({
  selector: 'ng-app',
  template: `<div id='surveyElement'></div>`,
})
export class AppComponent  {
  ngOnInit() {
    var survey = new Survey.Model(surveyJSON);
    survey.onComplete.add(sendDataToServer);
    Survey.SurveyWindowNG.render("surveyElement", {model:survey});
  }
}

Inside your web page

<ng-app></ng-app>
@Component({
  selector: 'ng-app',
  template: `<div id='surveyElement'></div>`,
})
export class AppComponent  {
  ngOnInit() {
    var survey = new Survey.Model(surveyJSON);
    survey.onComplete.add(sendDataToServer);
    Survey.SurveyNG.render("surveyElement", {model:survey});
  }
}

As Survey Window

var survey = new Survey.Model(surveyJSON);
$("#surveyContainer").SurveyWindow({
    model:survey,
    onComplete:sendDataToServer
});

Inside your web page

<div id="surveyContainer"></div>
var survey = new Survey.Model(surveyJSON);
$("#surveyContainer").Survey({
    model:survey,
    onComplete:sendDataToServer
});

As Survey Window

var surveyWindow = new Survey.SurveyWindow(surveyJSON);
surveyWindow.show();
//Use onComplete event to save the data
surveyWindow.survey.onComplete.add(sendDataToServer);

Inside your web page

<div id="surveyContainer"></div>
var survey = new Survey.Model(surveyJSON, "surveyContainer");
//Use onComplete event to save the data
survey.onComplete.add(sendDataToServer);

As Survey Window

ReactDOM.render(
  <Survey.SurveyWindow json={surveyJSON} onComplete={sendDataToServer}/>,
  document.getElementById("surveyContainer"));

Inside your web page

<div id="surveyContainer"></div>
ReactDOM.render(
  <Survey.Survey json={surveyJSON} onComplete={sendDataToServer}/>,
  document.getElementById("surveyContainer"));

As Survey Window

<div id="surveyContainer"><survey-window :survey="survey"></survey-window></div>
var survey = new Survey.Model(surveyJSON);
new Vue({ el: '#surveyContainer', data: { survey: survey } });

Inside your web page

<div id="surveyContainer"><survey :survey="survey"></survey></div>
var survey = new Survey.Model(surveyJSON);
new Vue({ el: '#surveyContainer', data: { survey: survey } });

Step 6

Save survey data on the web server.

Your web server

function sendDataToServer(survey) {
  var resultAsString = JSON.stringify(survey.data);
  alert(resultAsString); //send Ajax request to your web server.
}

dxSurvey.com service

//You should get the Guid for storing survey data in dxSurvey.com
survey.surveyPostId = 'e544a02f-7fff-4ffb-b62d-6a9aa16efd7c';
//You may call survey.sendResult function as another option. 
function sendDataToServer(survey) {
  survey.sendResult('e544a02f-7fff-4ffb-b62d-6a9aa16efd7c');
}

The survey example

Step 7 (optional)

Get the results of your survey using the dxSurvey Service.

Share the survey results via direct link. Current Survey Results

Show me example