SurveyJS

https://surveyjs.io/documentation
Admin
SurveyJS is a comprehensive suite of JavaScript components designed to help users build surveys,...
Tokens:146,307
Snippets:2,350
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Full Implementation Example

Source: https://surveyjs.io/Documentation/Analytics?id=get-started-angular

A complete example demonstrating the setup of survey JSON, results, configuration, and the Angular component class.

```typescript
import { AfterViewInit, Component } from '@angular/core';
import { Model } from 'survey-core';
import { VisualizationPanel } from 'survey-analytics';

const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

const surveyResults = [{
  "satisfaction-score": 5,
  "nps-score": 10
}, {
  "satisfaction-score": 5,
  "nps-score": 9
}, {
  "satisfaction-score": 3,
  "nps-score": 6
}, {
  "satisfaction-score": 3,
  "nps-score": 6
}, {
  "satisfaction-score": 2,
  "nps-score": 3
}];

const vizPanelOptions = {
  allowHideQuestions: false
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'SurveyJS Dashboard for Angular';

  ngAfterViewInit(): void {
    const survey = new Model(surveyJson);
    const vizPanel = new VisualizationPanel(
      survey.getAllQuestions(),
      surveyResults,
      vizPanelOptions
    );
  }
}
```

--------------------------------

### start()

Source: https://surveyjs.io/Documentation/Library?id=surveymodel

Starts the survey. This method applies only if the survey has a start page defined.

```APIDOC
## start()

### Description
Starts the survey. Applies only if the survey has a start page.

### Returns
- **boolean** - Returns true if the survey was successfully started.
```

--------------------------------

### Install survey-pdf package

Source: https://surveyjs.io/Documentation/Pdf-Export?id=get-started-angular

Run this command to install the necessary PDF generation library and its dependencies.

```bash
npm install survey-pdf --save
```

--------------------------------

### Install Survey Creator for Vue

Source: https://surveyjs.io/Documentation/Survey-Creator?id=get-started-vue

Run this command to install the survey-creator-vue package and its core dependency.

```bash
npm install survey-creator-vue --save
```

--------------------------------

### Full Survey Implementation Example

Source: https://surveyjs.io/Documentation/Library?id=get-started-angular

A complete example showing the component logic and module configuration for a basic survey.

```typescript
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Model } from "survey-core";

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

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

```typescript
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SurveyModule } from "survey-angular-ui";

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SurveyModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

--------------------------------

### Enable Start Button on Start Page

Source: https://surveyjs.io/Documentation/Library?id=design-survey-create-a-quiz

Use firstPageIsStartPage and startSurveyText to add and customize the start button.

```javascript
const surveyJson = {
  firstPageIsStartPage: true,
  startSurveyText: "Start Quiz",
};
```

--------------------------------

### Complete Survey Rendering Example

Source: https://surveyjs.io/Documentation/Library?id=get-started-vue

A full example showing the integration of styles, model, and component rendering.

```typescript
<script setup lang="ts">
import 'survey-core/survey-core.css';
import { Model } from 'survey-core';
import { SurveyComponent } from 'survey-vue3-ui';

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

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

<template>
  <SurveyComponent :model="survey" />
</template>
```

--------------------------------

### Full Survey Implementation Example

Source: https://surveyjs.io/Documentation/Library?id=get-started-vue

A complete example combining style imports, model instantiation, and survey definition.

```typescript
<script setup lang="ts">
import 'survey-core/survey-core.css';
import { Model } from 'survey-core';

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

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

<template>
  <!-- ... -->
</template>
```

--------------------------------

### Install SurveyJS React UI Package

Source: https://surveyjs.io/Documentation/Library?id=get-started-react

Install the necessary npm package to enable SurveyJS rendering in a React environment. The core dependency is installed automatically.

```bash
npm install survey-react-ui --save
```

--------------------------------

### Install Survey Creator React package

Source: https://surveyjs.io/Documentation/Survey-Creator?id=Migrate-from-V1-to-V2

Use these commands to remove the legacy package and install the native React version.

```bash
npm uninstall survey-creator
npm install survey-creator-react --save
```

--------------------------------

### Install SurveyJS Vue 3 package

Source: https://surveyjs.io/Documentation/Library?id=get-started-vue

Installs the survey-vue3-ui package and its dependency survey-core via npm.

```bash
npm install survey-vue3-ui --save
```

--------------------------------

### Install Plotly.js type definitions

Source: https://surveyjs.io/Documentation/Analytics?id=get-started-angular

Install the required type definitions for the Plotly.js library as a development dependency.

```bash
npm i @types/plotly.js-dist-min --save-dev
```

--------------------------------

### Full Survey Creator Component Implementation

Source: https://surveyjs.io/Documentation/Survey-Creator?id=get-started-angular

A complete example showing the component template, logic, and styles.

```html
<!-- survey-creator.component.html -->
<div id="surveyCreator">
  <survey-creator [model]="surveyCreatorModel"></survey-creator>
</div>
```

```typescript
// survey-creator.component.ts
import { Component, OnInit } from "@angular/core";
import { SurveyCreatorModel } from "survey-creator-core";

const creatorOptions = {
  autoSaveEnabled: true,
  collapseOnDrag: true
};

@Component({
  selector: 'survey-creator-component',
  templateUrl: './survey-creator.component.html',
  styleUrls: ['./survey-creator.component.css']
})
export class SurveyCreatorComponent implements OnInit {
  surveyCreatorModel: SurveyCreatorModel;
  ngOnInit() {
    const creator = new SurveyCreatorModel(creatorOptions);
    this.surveyCreatorModel = creator;
  }
}
```

```css
/* survey-creator.component.css */
#surveyCreator {
    height: 100vh;
    width: 100vw;
}
```

--------------------------------

### Install SurveyJS Angular packages

Source: https://surveyjs.io/Documentation/Library?id=get-started-angular

Install the core rendering package and the required Angular CDK dependency.

```bash
npm install survey-angular-ui --save
```

```bash
npm install @angular/cdk@^12.0.0 --save
```

--------------------------------

### Full AppModule Configuration

Source: https://surveyjs.io/Documentation/Survey-Creator?id=get-started-angular

A complete example of an AppModule configured with SurveyCreatorModule.

```typescript
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SurveyCreatorModule } from 'survey-creator-angular';

import { AppComponent } from './app.component';
import { SurveyCreatorComponent } from './survey-creator/survey-creator.component';

@NgModule({
  declarations: [
    AppComponent,
    SurveyCreatorComponent
  ],
  imports: [
    BrowserModule,
    SurveyCreatorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

--------------------------------

### Run Angular Development Server

Source: https://surveyjs.io/Documentation/Analytics?id=get-started-angular

Command to start the local development server for viewing the application.

```bash
ng serve
```

--------------------------------

### Built-in Function Implementation Example

Source: https://surveyjs.io/Documentation/Library?id=design-survey-conditional-display

An example demonstrating the implementation and registration of the built-in age function.

```typescript
import { registerFunction } from "survey-core";

// Accepts a birthdate and returns the current age in full years
function age(params: any[]): any {
  if (!params && params.length < 1) return null;
  if (!params[0]) return null;
  var birthDate = new Date(params[0]);
  var today = new Date();
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age -= age > 0 ? 1 : 0;
  }
  return age;
}
// Register the `age` function under the `age` alias
registerFunction({ name: "age", func: age });
```

--------------------------------

### Configure a Survey Start Page

Source: https://surveyjs.io/Documentation/Library?id=design-survey-create-a-multi-page-survey

Define the first page of the survey as a start page by adding HTML elements to the first object in the pages array.

```javascript
const surveyJson = {
    pages: [{
        elements: [{
            type: "html",
            html: "<h2>In this survey, we will ask you a couple questions about your impressions of our product.</h2>"
        }]
    },
    // ...
    // Other pages are configured here
    // ...
    ],
};
```

--------------------------------

### Install Survey Creator and Dependencies

Source: https://surveyjs.io/Documentation/Survey-Creator?id=get-started-angular

Commands to install the Survey Creator package and the required Angular CDK dependency.

```bash
npm install survey-creator-angular --save
```

```bash
npm install @angular/cdk@^12.0.0 --save
```

--------------------------------

### Access the Start Page in Code

Source: https://surveyjs.io/Documentation/Library?id=design-survey-create-a-multi-page-survey

Retrieve the start page instance from the survey model using the startPage property.

```javascript
const survey = new Survey.Model(surveyJson);

const startPage = survey.startPage;
```

--------------------------------

### Full Survey Model Configuration

Source: https://surveyjs.io/Documentation/Library?id=design-survey-create-a-multi-page-survey

A comprehensive example defining survey pages, conditional visibility logic, and navigation UI settings.

```javascript
const surveyJson = {
    pages: [{
        elements: [{
            name: "satisfaction-score",
            title: "How would you describe your experience with our product?",
            type: "radiogroup",
            choices: [
                { value: 5, text: "Fully satisfying" },
                { value: 4, text: "Generally satisfying" },
                { value: 3, text: "Neutral" },
                { value: 2, text: "Rather unsatisfying" },
                { value: 1, text: "Not satisfying at all" }
            ],
            isRequired: true
        }]
    }, {
        elements: [{
            name: "what-would-make-you-more-satisfied",
            title: "What can we do to make your experience more satisfying?",
            type: "comment",
            visibleIf: "{satisfaction-score} = 4"
        }, {
            name: "nps-score",
            title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
            type: "rating",
            rateMin: 0,
            rateMax: 10
        }],
        visibleIf: "{satisfaction-score} >= 4"
    }, {
        elements: [{
            name: "how-can-we-improve",
            title: "In your opinion, how could we improve our product?",
            type: "comment"
        }],
        visibleIf: "{satisfaction-score} = 3"
    }, {
        elements: [{
            name: "disappointing-experience",
            title: "Please let us know why you had such a disappointing experience with our product",
            type: "comment"
        }],
        visibleIf: "{satisfaction-score} =< 2"
    }],
    pageNextText: "Forward",
    completeText: "Submit",
    showPrevButton: false,
};
```

--------------------------------

### Install survey-analytics package

Source: https://surveyjs.io/Documentation/Analytics?id=get-started-vue

Run this command in your terminal to install the SurveyJS Dashboard package and its Plotly.js dependency.

```bash
npm install survey-analytics --save
```

--------------------------------

### Configure Quiz Start Page

Source: https://surveyjs.io/Documentation/Library?id=design-survey-create-a-quiz

Define the first page of the survey to act as an introduction with user input fields.

```javascript
const surveyJson = {
  pages: [{
    elements: [{
      type: "html",
      html: "You are about to start a quiz on American history. <br>You will have 10 seconds for every question and 25 seconds to end the quiz.<br>Enter your name below and click <b>Start Quiz</b> to begin."
    }, {
      type: "text",
      name: "username",
      titleLocation: "hidden",
      isRequired: true
    }]
  },
  // ...
  // Other quiz pages are configured here
  // ...
  ]
};
```

--------------------------------

### Create a Full Quiz Survey Model

Source: https://surveyjs.io/Documentation/Library?id=design-survey-create-a-quiz

A comprehensive example demonstrating a quiz with a timer, progress bar, multiple pages, and conditional completion messages.

```javascript
const surveyJson = {
  title: "American History",
  showProgressBar: true,
  progressBarLocation: "bottom",
  showTimer: true,
  timeLimitPerPage: 10,
  timeLimit: 25,
  firstPageIsStartPage: true,
  startSurveyText: "Start Quiz",
  pages: [{
    elements: [{
      type: "html",
      html: "You are about to start a quiz on American history. <br>You will have 10 seconds for every question and 25 seconds to end the quiz.<br>Enter your name below and click <b>Start Quiz</b> to begin."
    }, {
      type: "text",
      name: "username",
      titleLocation: "hidden",
      isRequired: true
    }]
  }, {
    elements: [{
      type: "radiogroup",
      name: "civilwar",
      title: "When was the American Civil War?",
      choices: [
        "1796-1803", "1810-1814", "1861-1865", "1939-1945"
      ],
      correctAnswer: "1861-1865"
    }]
  }, {
    elements: [{
      type: "radiogroup",
      name: "libertyordeath",
      title: "Whose quote is this: \"Give me liberty, or give me death\"?",
      choicesOrder: "random",
      choices: [
        "John Hancock", "James Madison", "Patrick Henry", "Samuel Adams"
      ],
      correctAnswer: "Patrick Henry"
    }]
  }, {
    elements: [{
      type: "radiogroup",
      name: "magnacarta",
      title: "What is Magna Carta?",
      choicesOrder: "random",
      choices: [
        "The foundation of the British parliamentary system",
        "The Great Seal of the monarchs of England",
        "The French Declaration of the Rights of Man",
        "The charter signed by the Pilgrims on the Mayflower"
      ],
      correctAnswer: "The foundation of the British parliamentary system"
    }]
  }],
  completedHtml: "<h4>You got <b>{correctAnswers}</b> out of <b>{questionCount}</b> correct answers.</h4>",
  completedHtmlOnCondition: [{
    expression: "{correctAnswers} == 0",
    html: "<h4>Unfortunately, none of your answers are correct. Please try again.</h4>"
  }, {
    expression: "{correctAnswers} == {questionCount}",
    html: "<h4>Congratulations! You answered all the questions correctly!</h4>"
  }]
};
```

--------------------------------

### Configure questionStartIndex

Source: https://surveyjs.io/Documentation/Library?id=panelmodel

Examples of setting the questionStartIndex property to define custom numbering formats for elements within a panel or page.

```json
"questionStartIndex": "a.", // a., b., c., ...
"questionStartIndex": "#3", // #3, #4, #5, ...
"questionStartIndex": "(B)." // (B)., (C)., (D)., ...
```

--------------------------------

### Install Ace Editor package

Source: https://surveyjs.io/Documentation/Survey-Creator?id=get-started-angular

Use npm to add the ace-builds package to your project dependencies.

```bash
npm install ace-builds --save
```

--------------------------------

### Full Survey Component Implementation

Source: https://surveyjs.io/Documentation/Library?id=get-started-vue

A complete example showing the necessary imports, model initialization, and template rendering for a Vue 3 survey component.

```typescript
<script setup lang="ts">
import 'survey-core/survey-core.css';
import { Model } from 'survey-core';
import { SurveyComponent } from 'survey-vue3-ui';

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

const alertResults = (sender: any) => {
  const results = JSON.stringify(sender.data);
  alert(results);
}

const survey = new Model(surveyJson);
survey.onComplete.add(alertResults);
</script>

<template>
  <SurveyComponent :model="survey" />
</template>
```

--------------------------------

### Initialize Survey Creator Component

Source: https://surveyjs.io/Documentation/Survey-Creator?id=get-started-react

Basic setup for the Survey Creator component in a React environment with required CSS imports.

```typescript
// components/SurveyCreator.tsx
'use client'

import { useState } from "react";
import { ICreatorOptions } from "survey-creator-core";
import { SurveyCreatorComponent, SurveyCreator } from "survey-creator-react";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";

const defaultCreatorOptions: ICreatorOptions = {
  autoSaveEnabled: true
};
```

--------------------------------

### Full Survey Component Implementation

Source: https://surveyjs.io/Documentation/Library?id=get-started-react

A complete example of a SurveyJS component using React hooks and the survey-core library.

```typescript
// components/Survey.tsx
'use client'

import { useCallback } from 'react';
import 'survey-core/survey-core.css';
import { Model } from 'survey-core';
import { Survey } from 'survey-react-ui';

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

export default function SurveyComponent() {
  const survey = new Model(surveyJson);
  const alertResults = useCallback((survey: Model) => {
    const results = JSON.stringify(survey.data);
    alert(results);
  }, []);

  survey.onComplete.add(alertResults);

  return <Survey model={survey} />;
}
```

--------------------------------

### startTimer()

Source: https://surveyjs.io/Documentation/Library?id=surveymodel

Starts a timer that calculates how many seconds a respondent has spent on the survey. This is intended for use in quiz surveys.

```APIDOC
## startTimer()

### Description
Starts a timer that calculates how many seconds a respondent has spent on the survey. Applies only to quiz surveys.
```

--------------------------------

### Programmatic Survey Navigation API

Source: https://surveyjs.io/Documentation/Library?id=design-survey-create-a-multi-page-survey

Demonstrates how to use navigation methods like start, nextPage, prevPage, and completion methods while handling potential validation failures.

```javascript
const survey = new Survey.Model(surveyJson);

survey.start();

const navigatedForward = survey.nextPage();
if (!navigatedForward) {
    alert("Navigation failed!")
}

const navigatedBack = survey.prevPage();
if (!navigatedBack) {
    alert("Navigation failed!")
}

const completedSuccessfully = survey.tryComplete();
if (!completedSuccessfully) {
    alert("Check the answers for validation errors")
}

survey.doComplete();
```

--------------------------------

### beginLoading()

Source: https://surveyjs.io/Documentation/Library?id=surveymodel

Displays the Loading page.

```APIDOC
## beginLoading()

### Description
Displays the Loading page.
```

--------------------------------

### Initialize SurveyPDF with IDocOptions

Source: https://surveyjs.io/Documentation/Pdf-Export?id=idocoptions

Demonstrates how to instantiate SurveyPDF using the survey JSON and PDF document options.

```javascript
const surveyPdf = new SurveyPDF.SurveyPDF(surveyJson, pdfDocOptions);

// In modular applications:
import { SurveyPDF } from "survey-pdf";
const surveyPdf = new SurveyPDF(surveyJson, pdfDocOptions);
```

--------------------------------

### chooseFiles(input, callback, context)

Source: https://surveyjs.io/Documentation/Library?id=surveymodel

Opens a dialog window for users to select files.

```APIDOC
## chooseFiles(input, callback, context)

### Description
Opens a dialog window for users to select files.

### Parameters
- **input** (HTMLInputElement) - A file input HTML element.
- **callback** ((files: File[]) => void) - A callback function that you can use to process selected files. Accepts an array of JavaScript File objects.
- **context** ({ element: Base; item?: any; elementType?: string; propertyName?: string; }) - Optional context object.
```

--------------------------------

### Install React Form Builder Package

Source: https://surveyjs.io/Documentation/Survey-Creator?id=get-started-react

Install the necessary npm package to include the SurveyJS Form Builder in your React project.

```bash
npm install survey-creator-react --save
```

--------------------------------

### Survey Data Structure Examples

Source: https://surveyjs.io/Documentation/Library?id=handle-survey-results-access

Examples of the JSON structure returned by the survey data property for simple and complex question types.

```json
{
  "question1Name": "question1Value",
  "question2Name": "question2Value",
  // ...
  "questionNName": "questionNValue",
}
```

```json
{
  "question1Name": [ "value1", "value2", ... ],
  "question2Name": {
    "nestedQuestion1Name": "nestedQuestion1Value",
    "nestedQuestion2Name": "nestedQuestion2Value",
    // ...
  },
  // ...
}
```

--------------------------------

### selectAllText

Source: https://surveyjs.io/Documentation/Library?id=questioncheckboxmodel

Gets or sets the caption for the 'Select All' choice item.

```APIDOC
## selectAllText

### Description
Gets or sets a caption for the "Select All" choice item. This property is stored in the survey JSON definition and can be edited in the Survey Creator.

### Type
string (writable)
```

--------------------------------

### raw()

Source: https://surveyjs.io/Documentation/Pdf-Export?id=surveypdf

An asynchronous method that allows you to get PDF content in different formats.

```APIDOC
## raw(type)

### Description
An asynchronous method that allows you to get PDF content in different formats.

### Parameters
- **type** (string) - Optional - The format of the PDF content (e.g., "arraybuffer", "blob", "bloburl", "dataurlstring").

### Returns
- **Promise** - A promise that resolves to the PDF content in the requested format.
```

--------------------------------

### dontKnowText

Source: https://surveyjs.io/Documentation/Library?id=QuestionSelectBase

Gets or sets a caption for the 'Don't know' choice item.

```APIDOC
## dontKnowText

### Description
Gets or sets a caption for the 'Don't know' choice item.

### Type
string (writable)
```

--------------------------------

### save()

Source: https://surveyjs.io/Documentation/Pdf-Export?id=surveypdf

An asynchronous method that starts to download the generated PDF file in the web browser.

```APIDOC
## save(fileName)

### Description
An asynchronous method that starts to download the generated PDF file in the web browser.

### Parameters
- **fileName** (string) - Optional - A file name with the ".pdf" extension. Default value: "survey_result.pdf".

### Returns
- **Promise** - A promise that resolves when the download process is initiated.
```

--------------------------------

### Configure Toolbox Display Mode

Source: https://surveyjs.io/Documentation/Survey-Creator?id=toolbox

Use forceCompact to toggle between full and compact toolbox modes.

```javascript
// Compact mode
creator.toolbox.forceCompact = true;
// Full mode
creator.toolbox.forceCompact = false;
```

--------------------------------

### Register SurveyJS Plugin Globally

Source: https://surveyjs.io/Documentation/Library?id=get-started-vue

Install the surveyPlugin in main.ts to register the SurveyComponent globally.

```typescript
// main.ts
import { createApp } from 'vue'
import { surveyPlugin } from 'survey-vue3-ui'
import App from './App.vue'

createApp(App).use(surveyPlugin).mount('#app');
```

--------------------------------

### Instantiate Visualization Panel in Angular

Source: https://surveyjs.io/Documentation/Analytics?id=get-started-angular

Initialize the Visualization Panel within the ngAfterViewInit lifecycle hook using survey questions and results.

```typescript
import { AfterViewInit, Component } from '@angular/core';
import { Model } from 'survey-core';
import { VisualizationPanel } from 'survey-analytics';

const surveyJson = { /* ... */ };
const surveyResults = [ /* ... */ ];
const vizPanelOptions = { /* ... */ };

@Component({
  // ...
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    const survey = new Model(surveyJson);
    const vizPanel = new VisualizationPanel(
      survey.getAllQuestions(),
      surveyResults,
      vizPanelOptions
    );
  }
}
```

--------------------------------

### Numeric Expression Example

Source: https://surveyjs.io/Documentation/Library?id=design-survey-conditional-display

Uses the sum function to calculate the total of two question values.

```json
"expression": "sum({total1}, {total2})"
```

--------------------------------

### Calculate Total with VAT and Discount

Source: https://surveyjs.io/documentation/surveyjs-architecture

Example of a SurveyJS expression calculating a total sum with conditional logic.

```js
({total} * (1 + {vat}/100) * iif({total} > 1000, 0.9, 1)
```

--------------------------------

### Access Survey Data Property

Source: https://surveyjs.io/Documentation/Library?id=handle-survey-results-access

Demonstrates initializing a survey model and logging the survey data to the console.

```javascript
import { Model } from "survey-core";

const surveyJson = { ... };
const survey = new Model(surveyJson);

console.log(survey.data);
```

--------------------------------

### Full Survey component with PDF export

Source: https://surveyjs.io/Documentation/Pdf-Export?id=get-started-react

A complete example of a Survey component configured for PDF export.

```tsx
// components/Survey.tsx
'use client'

import 'survey-core/survey-core.css';
import { Model } from 'survey-core';
import { Survey } from 'survey-react-ui';
import { IDocOptions, SurveyPDF } from 'survey-pdf';

const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "how-can-we-improve",
    title: "In your opinion, how could we improve our product?",
    type: "comment"
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

const pdfDocOptions: IDocOptions = {
  fontSize: 12
};

const savePdf = (surveyData: any) => {
  const surveyPdf = new SurveyPDF(surveyJson, pdfDocOptions);
  surveyPdf.data = surveyData;
  surveyPdf.save();
};

export default function SurveyComponent() {
  const survey = new Model(surveyJson);
  
  survey.addNavigationItem({
    id: "pdf-export",
    title: "Save as PDF",
    action: () => savePdf(survey.data)
  });

  return (
    <Survey model={survey} id="surveyContainer" />
  );
}
```

--------------------------------

### String Expression Example

Source: https://surveyjs.io/Documentation/Library?id=design-survey-conditional-display

Uses the iif function to return a string based on a conditional evaluation of a birthdate.

```json
"expression": "iif(age({birthdate}) >= 21, 'Adult', 'Minor')"
```

--------------------------------

### Create a Survey Data Model Programmatically

Source: https://surveyjs.io/documentation/surveyjs-architecture

Instantiate survey components using JavaScript classes for dynamic configuration.

```js
const survey = new Model();
const page = survey.addNewPage();
const question = page.addNewQuestion("checkbox");
question.name = "programmingLanguages";
question.title = "What programming languages do you use?";
question.choices.push(new ItemValue("c++", "C++"));
question.choices.push(new ItemValue("js", "JavaScript"));
question.choices.push(new ItemValue("java", "Java"));
question.showOtherItem = true;
```

--------------------------------

### Set Help Text for a Property Editor

Source: https://surveyjs.io/Documentation/Survey-Creator?id=property-grid

Use the localization API to access the pehelp object and assign a string hint to a specific property editor.

```javascript
// Get English translations
const translations = SurveyCreatorCore.getLocaleStrings("en");
// In modular applications
import { getLocaleStrings } from "survey-creator-core";
const translations = getLocaleStrings("en");

translations.pehelp.title = "A hint for the Title property editor";
```

--------------------------------

### Get Current Page Index

Source: https://surveyjs.io/Documentation/Library?id=design-survey-create-a-multi-page-survey

Retrieves the index of the current page within the visible pages array.

```javascript
const visiblePageIndex = survey.currentPageNo;

```

--------------------------------

### Displaying Surveys in jQuery

Source: https://surveyjs.io/Documentation/Library?id=design-survey-create-a-simple-survey

Initialize the survey model and use jQuery plugins to render the survey into a container.

```html
<div id="surveyContainer"></div>
```

```javascript
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 });
});
```

--------------------------------

### loadFiles(files: File[], sourceType?: string)

Source: https://surveyjs.io/Documentation/Library?id=questionfilemodel

Loads multiple files into the question.

```APIDOC
## loadFiles(files: File[], sourceType?: string)

### Description
Loads multiple files into the question.

### Parameters
- **files** (File[]) - Required - An array of File objects.
- **sourceType** (string) - Optional - The source type of the files.
```

--------------------------------

### Get the default survey locale

Source: https://surveyjs.io/Documentation/Library?id=Question

Use this code to retrieve the default locale when the survey is using the default settings.

```typescript
import { surveyLocalization } from 'survey-core';
const defaultLocale = surveyLocalization.defaultLocale;
```

--------------------------------

### Instantiate Visualization Panel in React

Source: https://surveyjs.io/Documentation/Analytics?id=get-started-react

Create an instance of the VisualizationPanel and store it in state to manage the analytics dashboard lifecycle.

```typescript
// components/Dashboard.tsx
// ...
import { useState } from 'react';
import { Model } from 'survey-core';
import { IVisualizationPanelOptions, VisualizationPanel } from 'survey-analytics';

const surveyJson = { /* ... */ };
const surveyResults = [ /* ... */ ];
const vizPanelOptions: IVisualizationPanelOptions = { /* ... */ };

export default function DashboardComponent() {
  const [survey, setSurvey] = useState<Model>();
  const [vizPanel, setVizPanel] = useState<VisualizationPanel>();
  if (!survey) {
    const survey = new Model(surveyJson);
    setSurvey(survey);
  }

  if (!vizPanel && !!survey) {
    const vizPanel = new VisualizationPanel(
      survey.getAllQuestions(),
      surveyResults,
      vizPanelOptions
    );
    setVizPanel(vizPanel);
  }

  return "...";
}
```

```typescript
// components/Dashboard.tsx
import 'survey-analytics/survey.analytics.css';
import { useState } from 'react';
import { Model } from 'survey-core';
import { IVisualizationPanelOptions, VisualizationPanel } from 'survey-analytics';

const surveyJson = {
  elements: [{
    name: "satisfaction-score",
    title: "How would you describe your experience with our product?",
    type: "radiogroup",
    choices: [
      { value: 5, text: "Fully satisfying" },
      { value: 4, text: "Generally satisfying" },
      { value: 3, text: "Neutral" },
      { value: 2, text: "Rather unsatisfying" },
      { value: 1, text: "Not satisfying at all" }
    ],
    isRequired: true
  }, {
    name: "nps-score",
    title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
    type: "rating",
    rateMin: 0,
    rateMax: 10,
  }],
  completedHtml: "Thank you for your feedback!",
};

const surveyResults = [{
  "satisfaction-score": 5,
  "nps-score": 10
}, {
  "satisfaction-score": 5,
  "nps-score": 9
}, {
  "satisfaction-score": 3,
  "nps-score": 6
}, {
  "satisfaction-score": 3,
  "nps-score": 6
}, {
  "satisfaction-score": 2,
  "nps-score": 3
}];

const vizPanelOptions = {
  allowHideQuestions: false
}

export default function DashboardComponent() {
  const [survey, setSurvey] = useState<Model>();
  const [vizPanel, setVizPanel] = useState<VisualizationPanel>();
  if (!survey) {
    const survey = new Model(surveyJson);
    setSurvey(survey);
  }

  if (!vizPanel && !!survey) {
    const vizPanel = new VisualizationPanel(
      survey.getAllQuestions(),
      surveyResults,
      vizPanelOptions
    );
    setVizPanel(vizPanel);
  }

  return "...";
}
```
Tokens:
Raw