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
• Create a Survey Model
  • Define a Static Survey Model in JSON
  • Create or Change a Survey Model Dynamically
• Display the Survey

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:

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

• Define a static survey model in JSON
  Use this approach if the survey structure is known beforehand.

• Create a survey model dynamically
  Use this approach if you want to add or remove survey elements at runtime.

Static survey models are specified by model schemas (JSON objects). For example, the following model schema declares a page that contains two textual questions and an expandable panel with two more textual questions. All survey elements have unique 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 schema 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);

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:"
}

You can embed the survey inside your page or display it as a pop-up survey:

<!-- Render the survey inside the page -->
<survey [model]="surveyModel"></survey>

<!-- Render the survey in a pop-up window -->
<popup-survey [model]="surveyModel" [isExpanded]="true"></popup-survey>

import { Component, OnInit } from '@angular/core';
import { Model } from "survey-core";

const surveyJson = {
  // ...
};

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

<template>
  <!-- Render the survey inside the page -->
  <Survey :survey="survey" />

  <!-- Render the survey in a pop-up window -->
  <PopupSurvey :survey="survey" :isExpanded="true" />
</template>

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

const surveyJson = {
  // ...
};

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

    return {
      survey
    }
  }
}
</script>

<script setup lang="ts">
import { Model } from 'survey-core';

const surveyJson = {
  // ...
};
const survey = new Model(surveyJson);
</script>

<template>
  <!-- Render the survey inside the page -->
  <SurveyComponent :model="survey" />

  <!-- Render the survey in a pop-up window -->
  <PopupSurveyComponent :model="survey" :isExpanded="true" />
</template>

import { Model } from 'survey-core';
import { Survey, PopupSurvey } 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 in a pop-up window
  return <PopupSurvey model={survey} isExpanded={true} />;
}

export default App;

<survey params="survey: model"></survey>

const surveyJson = {
    // ...
};

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

// Render the survey in a pop-up window
const survey = new Survey.PopupSurveyModel(survey);
survey.isExpanded = true;
document.addEventListener("DOMContentLoaded", function() {
  survey.show();
});

<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 in a pop-up window
    $("#surveyContainer").PopupSurvey({ model: survey, isExpanded: true });
});

View Demo

• Create a Multi-Page Survey
• Create a Quiz
• Conditional Logic and Dynamic Texts
• Access Survey Results