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 custom characters instead of numbers, restart question numbering on each page, hide question numbers, or number questions within a panel separately from survey-level numbering. Switch to the Angular, React, Vue, Knockout, or jQuery version of this demo to view code for your framework.

Surveys use continuous numbering across all pages. If you want to start numbering on each page, set SurveyModel's showQuestionNumbers property to "onpage". If you want to hide question numbers, set the same property to "off" or false. In this demo, the "Show question numbers" checkbox allows you to control question visibility at runtime.

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, "onpanel" to auto-number questions within the panel separately from survey-level numbering, or "off" to hide numbers for these questions. Use the "Include questions within panels in survey-level numbering" checkbox to change the showQuestionNumbers property 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 hideNumber property to true.

Panels do not have numbers because they only contain other survey elements and do not produce values. However, you can include panels in numbering if you want. To do this, 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.

Like panels, 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.