Question Auto-Numbering

Question and page numbers provide a clear structure to a survey and help respondents track their progress and identify survey elements. They also ensure logical sequencing and grouping of related questions, making it easier to understand the flow of the survey and navigate through it. This demo shows how to manage numbering within your survey: use sequential or recursive numbering, restart numbering on each page or within individual panels, or hide question numbers altogether. Switch to the Angular, React, Vue, Vanilla JS, or jQuery version of this demo to view code for your framework.

Surveys support the following numbering modes:

• Sequential numbering
  Survey elements are numbered in order, regardless of whether they are nested in panels or not.

• Recursive numbering
  Survey elements are numbered in a manner that takes into account their nesting level (for example, 1 → 1.1 → 1.1.1).

• Sequential numbering with a reset on each page
  Survey elements are numbered in order, but the numbering starts anew on each page.

By default, questions are not numbered. To enable one of the numbering modes, set SurveyModel's showQuestionNumbers property to true (sequential numbering), "recursive", or "onpage". In this demo, you can switch between those modes using the Question numbering dropdown.

Questions within panels can participate in survey-level numbering or have an individual numbering sequence. Use PanelModel's showQuestionNumbers property to specify the desired numbering mode: "default" to continue survey-level numbering, "recursive" to number nested questions recursively, "onpanel" to start numbering within the panel from scratch, or "off" to hide numbers for nested questions. Use the "Reset numbering within each panel" checkbox to apply the "onpanel" mode in this demo.

Questions are numbered starting with 1. If you want to start numbering with a different number or use letters instead, specify SurveyModel's questionStartIndex property. You can include desired prefixes and suffixes in the property value:

const surveyJson = {
  // ...
  "questionStartIndex": "a.", // a., b., c., ...
  "questionStartIndex": "#3", // #3, #4, #5, ...
  "questionStartIndex": "(B)." // (B)., (C)., (D)., ...
}

To access the number of an individual question, use its no property. Note that the property's value may contain letters, prefixes, and suffixes if the questionStartIndex specifies them. If you want to hide a question number, set the showNumber property to false.

Panels have numbers only in recursive numbering mode. If you want to number panels in other modes, enable the showNumber property for each panel that should have a number. The no property allows you to access the panel number. This demo displays the "Show panel numbers" checkbox that lets you change page number visibility.

Pages do not have numbers, but you can enable SurveyModel's showPageNumbers property to display them. In this demo, click the "Show page numbers" checkbox to show or hide page numbers at runtime.