Cart Licenses Contact Support Online Creator Login/Register
Try
Free
v 1.9.32
Try
Free
v 1.9.32

Create a Simple Survey

This article illustrates a SurveyJS survey structure and the different ways you can describe this structure using a survey model. The article also contains code examples that show how to display the survey inside your page or in an expandable window.

Survey Structure

A survey consists of one or several pages. A page can contain panels and questions. Panels are used to group questions and control them as one. A panel can contain other panels and questions (nested panels are supported). The following image illustrates this structure:

SurveyJS: Survey Structure

Create a Survey Model

A survey model describes the survey structure. You can create a survey model as follows:

Define a Static Survey Model in JSON

Static survey models are specified by model definitions (JSON objects). For example, the following model definition declares a page that contains two textual questions and an expandable panel with two more textual questions. All survey elements have names that can be used to identify the elements in code. The panel and questions also have titles that are displayed on screen.

const surveyJson = {
  pages: [{
    name: "PersonalDetails",
    elements: [{
      type: "text",
      name: "FirstName",
      title: "Enter your first name:"
    }, {
      type: "text",
      name: "LastName",
      title: "Enter your last name:"
    }, {
      type: "panel",
      name: "Contacts",
      state: "collapsed",
      title: "Contacts (optional)",
      elements: [{
        type: "text",
        name: "Telegram",
        title: "Telegram:"
      }, {
        type: "text",
        name: "GitHub",
        title: "GitHub username:"
      }]
    }]
  }]
};

const survey = new Survey.Model(surveyJson);

The model definition above produces the following survey:

See the Pen SurveyJS - Define a Static Survey Model in JSON by RomanTsukanov (@romantsukanov) on CodePen.

If your survey contains only one page, as in the previous example, you can skip the pages array declaration and specify the elements array at the top level:

const surveyJson = {
  elements: [{
    type: "text",
    name: "FirstName",
    title: "Enter your first name:"
  },
  // ...
  ]
};

const survey = new Survey.Model(surveyJson);

Create or Change a Survey Model Dynamically

SurveyJS allows you to create or modify a survey model at runtime. Call different methods to add or remove survey elements; specify properties using dot notation to configure the elements. For example, the following code adds survey elements using the addNewPage(name), addNewPanel(name), and addNewQuestion(type, name) methods. The title and state properties configure the added elements. Refer to the API help section for a full list of supported methods and properties.

// Create an empty model
const survey = new Survey.Model();
// Add a PersonalDetails page to the model
const page = survey.addNewPage("PersonalDetails");
// Add a FirstName question to the page
const firstName = page.addNewQuestion("text", "FirstName");
firstName.title = "Enter your first name:";

// Add a LastName question to the page
const lastName = page.addNewQuestion("text", "LastName");
lastName.title = "Enter your last name:";

// Add a Contacts panel to the page
const panel = page.addNewPanel("Contacts");
panel.title = "Contacts (optional)";
panel.state = "collapsed";

// Add a Telegram question to the panel
const telegram = panel.addNewQuestion("text", "Telegram");
telegram.title = "Telegram:"

// Add a GitHub question to the panel
const github = panel.addNewQuestion("text", "GitHub");
github.title = "GitHub username:"

You can combine both approaches to survey model configuration. The following example shows how to define a survey model in JSON, and then change it using methods and properties:

const surveyJson = {
  pages: [{
    name: "PersonalDetails",
    elements: [{
      type: "text",
      name: "FirstName",
      title: "Enter your first name:"
    }, {
      type: "text",
      name: "LastName",
      title: "Enter your last name:"
    }, {
      type: "panel",
      name: "Contacts",
      title: "Contacts (optional)",
      elements: [{
        type: "text",
        name: "GitHub"
      }]
    }]
  }]
};

const survey = new Survey.Model(surveyJson);

// Add a title to the GitHub question
const github = survey.getQuestionByName("GitHub");
if (github) {
  github.title = "GitHub username:"
}
// Configure the Contacts panel
const panel = survey.getPanelByName("Contacts");
if (panel) {
  // Collapse the panel
  panel.state = "collapsed";

  // Add a Telegram question to the panel
  const telegram = panel.addNewQuestion("text", "Telegram");
  telegram.title = "Telegram:"
}

Display the Survey

You can embed the survey inside your page or display it as an expandable window:

Angular
<div id="surveyContainer"></div>
import { Component, OnInit } from '@angular/core';
import { Model, SurveyNG, SurveyWindowNG } from "survey-angular";

const surveyJson = {
  // ...
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit() {
    const survey = new Model(surveyJson);

    // Render the survey inside the page
    SurveyNG.render("surveyContainer", { model: survey });

    // Render the survey as an expandable window
    SurveyWindowNG.render("surveyContainer", { model: survey });
  }
}
Vue
<template>
  <!-- Render the survey inside the page -->
  <Survey :survey="survey" />

  <!-- Render the survey as an expandable window -->
  <SurveyWindow :survey="survey" />
</template>

<script>
import { Model } from 'survey-core';
import { Survey, SurveyWindow } from 'survey-vue-ui';

const surveyJson = {
  // ...
};

export default {
  components: {
    Survey,
    SurveyWindow
  },
  data() {
    const survey = new Model(surveyJson);

    return {
      survey
    }
  }
}
</script>
React
import { Model } from 'survey-core';
import { Survey, SurveyWindow } from 'survey-react-ui';

const surveyJson = {
  // ...
};

function App() {
  const survey = new Model(surveyJson);

  // Render the survey inside the page
  return <Survey model={survey} />;

  // Render the survey as an expandable window
  return <SurveyWindow model={surveyJson} />;
}

export default App;
Knockout
<div id="surveyContainer"></div>
const surveyJson = {
    // ...
};

// Render the survey inside the page
const survey = new Survey.Model(surveyJson);
document.addEventListener("DOMContentLoaded", function() {
    survey.render("surveyContainer");
});

// Render the survey as an expandable window
const survey = new Survey.SurveyWindow(surveyJson);
survey.show();
jQuery
<div id="surveyContainer"></div>
const surveyJson = {
    // ...
};

const survey = new Survey.Model(surveyJson);

$(function() {
    // Render the survey inside the page
    $("#surveyContainer").Survey({ model: survey });

    // Render the survey as an expandable window
    $("#surveyContainer").SurveyWindow({ model: survey });
});

Further Reading

; ;