Introduce questionStartIndex on page level to allow reset the questio… (#10524)

* Introduce questionStartIndex on page level to allow reset the question index from a particular page fix #10523

* Update doccomment

* Make questionStartIndex visible in the page object

---------

Co-authored-by: RomanTsukanov <[email protected]>

Author: andrewtelnov

packages/survey-core/src/base-interfaces.ts

@@ -155,7 +155,7 @@ export interface ISurvey extends ITextProcessor, ISurveyErrorOwner {
     actions: Array<IAction>,
     question?: QuestionPanelDynamicModel
   ): Array<IAction>;
-  questionStartIndex: string;
+  getQuestionStartIndex(pageVisibleIndex: number): string;
   showQuestionNumbers: string | boolean;
   questionTitleLocation: string;
   questionDescriptionLocation: string;

packages/survey-core/src/page.ts

@@ -169,10 +169,11 @@ export class PageModel extends PanelModel implements IPage {
     if (this.isQuestionIndexRecursive()) return 0;
     return index;
   }
+  protected getPageVisibleIndex(): number { return this.visibleIndex; }
   getQuestionStartIndex(): string {
     const res = this.getStartIndex();
     if (this.isQuestionIndexRecursive()) {
-      return this.getQuestionStartIndexVsVisibleIndex(res, this.visibleIndex);
+      return this.getQuestionStartIndexVsVisibleIndex(res, this.num - 1);
     }
     return res;
   }
@@ -461,7 +462,6 @@ Serializer.addClass(
     { name: "page", visible: false, isSerializable: false },
     { name: "showNumber", visible: false },
     { name: "showQuestionNumbers", visible: false },
-    { name: "questionStartIndex", visible: false },
     { name: "allowAdaptiveActions", visible: false },
     { name: "requiredErrorText:text", serializationProperty: "locRequiredErrorText", visible: false },
   ],

packages/survey-core/src/panel.ts

@@ -566,6 +566,25 @@ export class PanelModelBase extends SurveyElement<Question>
   public set questionsOrder(val: string) {
     this.questionOrder = val;
   }
+  /**
+   * Specifies a number or letter used to start numbering of elements inside this page/panel.
+   *
+   * You can include desired prefixes and postfixes alongside the number or letter:
+   *
+   * ```js
+   * "questionStartIndex": "a.", // a., b., c., ...
+   * "questionStartIndex": "#3", // #3, #4, #5, ...
+   * "questionStartIndex": "(B)." // (B)., (C)., (D)., ...
+   * ```
+   * Default value: `"1."` (inherited from the `questionStartIndex` property specified for the parent panel, page, or survey)
+   * @see showQuestionNumbers
+   */
+  public get questionStartIndex(): string {
+    return this.getPropertyValue("questionStartIndex", "");
+  }
+  public set questionStartIndex(val: string) {
+    this.setPropertyValue("questionStartIndex", val);
+  }
   public addNoFromChild(no: string): string { return no; }
   private canRandomize(isRandom: boolean): boolean {
     return isRandom && (this.questionOrder !== "initial") || this.questionOrder === "random";
@@ -2243,6 +2262,7 @@ export class PanelModel extends PanelModelBase implements IElement {
    * - `"off"` - Hides question numbers within this page/panel.
    * @see [SurveyModel.showQuestionNumbers](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showQuestionNumbers)
    * @see showNumber
+   * @see questionStartIndex
    */
   public get showQuestionNumbers(): string {
     return this.getPropertyValue("showQuestionNumbers");
@@ -2251,26 +2271,7 @@ export class PanelModel extends PanelModelBase implements IElement {
     this.setPropertyValue("showQuestionNumbers", value);
     this.notifySurveyOnVisibilityChanged();
   }
-  /**
-   * Specifies a number or letter used to start numbering of elements inside the panel.
-   *
-   * You can include desired prefixes and postfixes alongside the number or letter:
-   *
-   * ```js
-   * "questionStartIndex": "a.", // a., b., c., ...
-   * "questionStartIndex": "#3", // #3, #4, #5, ...
-   * "questionStartIndex": "(B)." // (B)., (C)., (D)., ...
-   * ```
-   * Default value: `"1."` (inherited from `SurveyModel`'s `questionStartIndex` property)
-   * @see SurveyModel.questionStartIndex
-   * @see showQuestionNumbers
-   */
-  public get questionStartIndex(): string {
-    return this.getPropertyValue("questionStartIndex", "");
-  }
-  public set questionStartIndex(val: string) {
-    this.setPropertyValue("questionStartIndex", val);
-  }
+  protected getPageVisibleIndex(): number { return (<any>this.page)?.visibleIndex || -1; }
   getQuestionStartIndex(): string {
     const res = this.questionStartIndex;
     if (!!res && this.isQuestionIndexOnPanel && this.isComplexIndex(res))

packages/survey-core/src/question.ts

@@ -571,6 +571,7 @@ export class Question extends SurveyElement<Question>
   public getPanels(): Array<IPanel> {
     return null;
   }
+  protected getPageVisibleIndex(): number { return (<any>this.page)?.visibleIndex || -1; }
   public delete(doDispose: boolean = true): void {
     this.removeFromParent();
     if (doDispose) {

packages/survey-core/src/survey-element.ts

@@ -847,9 +847,10 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
   public setVisibleIndex(index: number): number {
     return 0;
   }
+  protected getPageVisibleIndex(): number { return -1; }
   protected getStartIndex(): string {
     if (!!this.parent) return this.parent.getQuestionStartIndex();
-    if (!!this.survey) return this.survey.questionStartIndex;
+    if (!!this.survey) return this.survey.getQuestionStartIndex(this.getPageVisibleIndex());
     return "";
   }
   public delete(doDispose: boolean): void { }

packages/survey-core/src/survey.ts

@@ -1828,6 +1828,15 @@ export class SurveyModel extends SurveyElementCore
   public set questionStartIndex(val: string) {
     this.setPropertyValue("questionStartIndex", val);
   }
+  getQuestionStartIndex(pageVisibleIndex: number): string {
+    if (pageVisibleIndex >= 0 && pageVisibleIndex < this.visiblePages.length) {
+      for (let i = pageVisibleIndex; i >= 0; i--) {
+        const page = this.visiblePages[i];
+        if (!!page.questionStartIndex) return page.questionStartIndex;
+      }
+    }
+    return this.questionStartIndex;
+  }
   /**
    * Specifies whether to store the "Other" option response in a separate property.
    *
@@ -6675,12 +6684,18 @@ export class SurveyModel extends SurveyElementCore
   }
   private updatePageVisibleIndexes(): void {
     this.updateButtonsVisibility();
-    var index = 0;
+    let index = 0;
+    let numIndex = 1;
+    this.pages.forEach(page => {
+    });
     for (var i = 0; i < this.pages.length; i++) {
       const page = this.pages[i];
       const isPageVisible = page.isVisible && (i > 0 || !page.isStartPage);
+      if (!!page.questionStartIndex) {
+        numIndex = 1;
+      }
       page.visibleIndex = isPageVisible ? index++ : -1;
-      page.num = isPageVisible ? page.visibleIndex + 1 : -1;
+      page.num = isPageVisible ? numIndex++ : -1;
     }
   }
   public fromJSON(json: any, options?: ILoadFromJSONOptions): void {

packages/survey-core/tests/paneltests.ts

@@ -3739,3 +3739,68 @@ QUnit.test("Panel.validate vs callback function as a parameter #10307", function
 
   FunctionFactory.Instance.unregister("asyncFunc");
 });
+QUnit.test("page questionStartIndex, Issue#10523", function (assert) {
+  const survey = new SurveyModel({
+    pages: [{
+      elements: [
+        {
+          type: "text",
+          name: "q1"
+        }] },
+    {
+      elements: [
+        {
+          type: "text",
+          name: "q2"
+        }] },
+    {
+      questionStartIndex: "A.1",
+      elements: [
+        {
+          type: "panel", name: "p1", title: "Panel",
+          elements: [
+            { type: "text", name: "q3" },
+            { type: "text", name: "q4" }
+          ]
+        },
+      ] },
+    { elements: [
+      { type: "text", name: "q5" },
+      {
+        type: "panel", name: "p2", title: "Panel",
+        elements: [
+          { type: "text", name: "q6" },
+          { type: "text", name: "q7" }
+        ]
+      }]
+    }],
+    showQuestionNumbers: "recursive",
+    questionStartIndex: "1.1"
+  });
+  assert.equal(survey.pages[1].visibleIndex, 1, "page2.visibleIndex, #1");
+  assert.equal(survey.pages[1].num, 2, "page2.num, #2");
+  assert.equal(survey.pages[2].questionStartIndex, "A.1", "questionStartIndex, #1");
+  assert.equal(survey.pages[2].visibleIndex, 2, "page2.visibleIndex, #1");
+  assert.equal(survey.pages[2].num, 1, "page2.num, #2");
+  assert.equal(survey.pages[3].visibleIndex, 3, "page3.visibleIndex, #1");
+  assert.equal(survey.pages[3].num, 2, "page3.num, #1");
+  const q1 = survey.getQuestionByName("q1");
+  const q2 = survey.getQuestionByName("q2");
+  const q3 = survey.getQuestionByName("q3");
+  const q4 = survey.getQuestionByName("q4");
+  const q5 = survey.getQuestionByName("q5");
+  const q6 = survey.getQuestionByName("q6");
+  const q7 = survey.getQuestionByName("q7");
+  const p1 = survey.getPanelByName("p1");
+  const p2 = survey.getPanelByName("p2");
+
+  assert.equal(q1.no, "1.1", "q1, #1");
+  assert.equal(q2.no, "2.1", "q2, #1");
+  assert.equal(p1.no, "A.1", "panel1, #1");
+  assert.equal(q3.no, "A.1.1", "q3, #1");
+  assert.equal(q4.no, "A.1.2", "q4, #1");
+  assert.equal(q5.no, "B.1", "q5, #1");
+  assert.equal(p2.no, "B.2", "panel2, #1");
+  assert.equal(q6.no, "B.2.1", "q6, #1");
+  assert.equal(q7.no, "B.2.2", "q7, #1");
+});