itemengine-cypress-automation 1.0.180-essayResponseLazyLoadingFix-3170a00.0 → 1.0.181

package/cypress/pages/numberLinePage.js

@@ -1,5 +1,6 @@
 import utilities from '../support/helpers/utilities';
 import { createQuestionBasePage, toolsAndControlsComponent, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, commonComponents, autoScoredScoringSectionMultiResponseType, toolSettingsComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, autoScoredStudentViewSettings, randomizeOptionsComponent, studentViewSettingsLabelComponent, defaultToolDropdown } from './components';
+import { dialogBoxBase } from './dialogBoxBase';
 const css = Cypress.env('css');
 const range = 20.4472843;
 
@@ -14,11 +15,90 @@ const selectors = {
     ...commonComponents,
     ...defaultToolDropdown,
     ...autoScoredScoringSectionMultiResponseType,
-    //layout
+    ...dialogBoxBase,
+    //Layout
+    layoutLabel: () => cy.get('.customized-options-label'),
+    layoutAccordionChevronButton: () => cy.get('.number-line-response-accordion [class*="MuiAccordionSummary-expandIconWrapper"]'),
+    layoutAccordionButton: () => cy.get('.number-line-response-accordion .ngie-accordion-summary'),
+    orientationLabel: () => cy.get('.number-line-layout-options .single-select-toggle-group-title'),
+    orientationToggleButton: (ariaLabel = null) => {
+        if (ariaLabel !== null) {
+            return cy.get(`.number-line-layout-options [class*="SingleSelectToggleGroupstyles__ButtonContainer"] button[aria-label*="${ariaLabel}"]`);
+        } else {
+            return cy.get('.number-line-layout-options [class*="SingleSelectToggleGroupstyles__ButtonContainer"] button');
+        }
+    },
+    widthLabel: () => cy.get('.number-line-layout-options [aria-labelledby="Width (px)"]'),
+    widthInputField: () => cy.get('.number-line-layout-options input[aria-label="Width (px)"]'),
+    heightLabel: () => cy.get('.number-line-layout-options [aria-labelledby="Height (px)"]'),
+    heightInputField: () => cy.get('.number-line-layout-options input[aria-label="Height (px)"]'),
+    marginLabel: () => cy.get('.margin-input-wrapper [aria-labelledby="Margin (px)"]'),
+    marginInputField: () => cy.get('.number-line-layout-options input[aria-label="Margin (px)"]'),
+    responseSpacingLabel: () => cy.get('.dropdown-wrapper [aria-labelledby="Response Spacing"]'),
+    responseSpacingInputField: () => cy.get('.dropdown-wrapper input[aria-label="Response Spacing"]'),
+    makeResponsiveLabel: () => cy.get('.mobile-responsive-wrapper .MuiFormControlLabel-label'),
+    makeResponsiveCheckbox: () => cy.get('.mobile-responsive-wrapper input'),
+    makeResponsiveCheckboxIcon: () => cy.get('.mobile-responsive-wrapper .MuiSwitch-thumb'),
+    whatIsThisLabel: () => cy.get('.what-is-wrapper [class*="StyledLink"]'),
+    makeResponsiveHelpText: () => cy.get('[class*="WhatIsThisDescriptionWrapper"]'),
+    showMinArrowLabel: () => cy.get('[data-ngie-testid="show-min-arrow-checkbox"] .MuiFormControlLabel-label'),
+    showMinArrowCheckbox: () => cy.get('[data-ngie-testid="show-min-arrow-checkbox"] input'),
+    showMaxArrowLabel: () => cy.get('[data-ngie-testid="show-max-arrow-checkbox"] .MuiFormControlLabel-label'),
+    showMaxArrowCheckbox: () => cy.get('[data-ngie-testid="show-max-arrow-checkbox"] input'),
+    stackResponsesLabel: () => cy.get('[data-ngie-testid="stack-responses-checkbox"] .MuiFormControlLabel-label'),
+    stackResponsesCheckbox: () => cy.get('[data-ngie-testid="stack-responses-checkbox"] input'),
+    staggerResponseLabel: () => cy.get('[data-ngie-testid="stagger-response-checkbox"] .MuiFormControlLabel-label'),
     staggerResponseCheckbox: () => cy.get('[data-ngie-testid="stagger-response-checkbox"] input'),
-    limitNumberOfResponsesInputField: () => cy.get('.limit-number-line-response-wrapper .text-input-field input'),
+    showLabelsLabel: () => cy.get('[data-ngie-testid="show-labels-checkbox"] .MuiFormControlLabel-label'),
+    showLabelsCheckbox: () => cy.get('[data-ngie-testid="show-labels-checkbox"] input'),
+    showTicksLabel: () => cy.get('[data-ngie-testid="show-ticks-checkbox"] .MuiFormControlLabel-label'),
+    showTicksCheckbox: () => cy.get('[data-ngie-testid="show-ticks-checkbox"] input'),
+    showMinLabel: () => cy.get('[data-ngie-testid="show-min-checkbox"] .MuiFormControlLabel-label'),
+    showMinCheckbox: () => cy.get('[data-ngie-testid="show-min-checkbox"] input'),
+    showMaxLabel: () => cy.get('[data-ngie-testid="show-max-checkbox"] .MuiFormControlLabel-label'),
+    showMaxCheckbox: () => cy.get('[data-ngie-testid="show-max-checkbox"] input'),
+    limitNumbersOfResponsesLabel: () => cy.get('[data-ngie-testid="limit-number-of-responses-checkbox"] .MuiFormControlLabel-label'),
+    limitNumbersOfResponsesCheckbox: () => cy.get('[data-ngie-testid="limit-number-of-responses-checkbox"] input'),
+    limitNumbersOfResponsesInputField: () => cy.get('.limit-number-line-response-wrapper .text-input-field input'),
+    //Number line section
+    titlePopupAddLabelLabel: () => cy.get('[aria-labelledby="alert-dialog-title"] .inline-text-property-label'),
+    titlePopupAddLabelInputField: () => cy.get('[aria-labelledby="alert-dialog-title"] input'),
+    titlePopupCancelButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(0),
+    titlePopupSaveButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(1),
+    numberLineNumberLineSection: () => cy.get('.number-line-grid-setting .ngie-jxgbox svg'),
+    numberLineAxisNumberLineSection: () => cy.get('.number-line-grid-setting .ngie-jxgbox svg line'),
+    numberLineTitleNumberLineSection: () => cy.get('[class*="LineGraphComponentsstyles__TitleContainer"]'),
+    minLabel: () => cy.get('[class*="LineGraphComponentsstyles__GraphRightLeft"] [class*="LineGraphComponentsstyles__CustomInputFieldLabel"]').eq(0),
+    minInputField: () => cy.get('[class*="LineGraphComponentsstyles__GraphRightLeft"] input').eq(0),
+    maxLabel: () => cy.get('[class*="LineGraphComponentsstyles__GraphRightLeft"] [class*="LineGraphComponentsstyles__CustomInputFieldLabel"]').eq(1),
+    maxInputField: () => cy.get('[class*="LineGraphComponentsstyles__GraphRightLeft"] input').eq(1),
+    intervalLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [aria-labelledby="Interval"]'),
+    intervalInputField: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] input[id="Interval"]'),
+    annotateEveryLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [aria-labelledby="Annotate every"]'),
+    annotateEveryInputField: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] input[id="Annotate every"]'),
+    lineSettingsToggleButtonWrapper: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ToggleButtonWrapper"]').eq(0),
+    lineSettingsLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] .single-select-toggle-group-title').eq(0),
+    lineSettingsToggleButton: (ariaLabel = null) => {
+        if (ariaLabel !== null) {
+            return cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(0).find(`button[aria-label*="${ariaLabel}"]`);
+        } else {
+            return cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(0).find('button');
+        }
+    },
+    displayNumbersToggleButtonWrapper: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ToggleButtonWrapper"]').eq(1),
+    displayNumbersLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] .single-select-toggle-group-title').eq(1),
+    displayNumbersToggleButton: (ariaLabel = null) => {
+        if (ariaLabel !== null) {
+            return cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(1).find(`button[aria-label*="${ariaLabel}"]`);
+        } else {
+            return cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(1).find('button');
+        }
+    },
+    displaySpecificAnnotationLabel: () => cy.get('[class*="LineGridSettingstyles__SpecificAnnotationWrapper"] .inline-text-property-label'),
+    displaySpecificAnnotationInputField: () => cy.get('[class*="LineGridSettingstyles__SpecificAnnotationWrapper"] input'),
     //Specify correct answer
     numberLineSpecifyCorrectAnswer: () => cy.get('.ngie-accordion .ngie-jxgbox svg'),
+    numberLineAxisSpecifyCorrectAnswer: () => cy.get('.ngie-accordion .ngie-jxgbox svg line'),
     numberLineToolOptionSpecifyCorrectAnswer: (toolOptionAriaLabel = null) => {
         if (toolOptionAriaLabel) {
             return cy.get(`.graph-tools-wrapper .single-select-toggle-group-double button[aria-label*="${toolOptionAriaLabel}"]`).eq(0)
@@ -39,6 +119,7 @@ const selectors = {
 
     //Preview Tab
     numberLinePreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox svg').eq(0),
+    numberLineAxisPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox svg line').eq(0),
     numberLinePointPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find('svg ellipse[display="inline"]'),
     numberLineSegmentPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find('[stroke-linecap="butt"]'),
     numberLineToolOptionPreviewTab: (toolOptionAriaLabel = null) => {
@@ -64,7 +145,10 @@ const selectors = {
     numberLineCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox svg:visible').eq(1),
     numberLinePointCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find('svg ellipse[display="inline"]'),
     correctIncorrectAnswerTextWrapper: () => cy.get('[class*="CorrectIncorrectWrapper"]'),
-    numberLineTitleCorrectAnswerSection: () => cy.get('[class*="LineGraphstyles__TitleText"]').last()
+    numberLineTitleCorrectAnswerSection: () => cy.get('[class*="LineGraphstyles__TitleText"]').last(),
+
+    warningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
+    warningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
 }
 
 const steps = {
@@ -173,18 +257,18 @@ const steps = {
      * @param {number} startingPoint - It representing the starting point of the ray.
      */
     verifyRayOnNumberLineSpecifyCorrectAnswer: (direction, range, startingPoint) => {
-            numberLinePage.numberLineSpecifyCorrectAnswer()
-                .then(($graphElement) => {
-                    const graphWidth = $graphElement[0].clientWidth;
-                    const graphHeight = $graphElement[0].clientHeight;
-                    const originX = graphWidth / 2;
-                    const originY = graphHeight / 2;
-                    const x1Pixel = originX + startingPoint * (graphWidth / range);
-                    const rayArrowWidth = 42;
-                    const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
-                    cy.get(`.ngie-accordion .ngie-jxgbox svg [stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
-                        .should('be.visible');
-                });
+        numberLinePage.numberLineSpecifyCorrectAnswer()
+            .then(($graphElement) => {
+                const graphWidth = $graphElement[0].clientWidth;
+                const graphHeight = $graphElement[0].clientHeight;
+                const originX = graphWidth / 2;
+                const originY = graphHeight / 2;
+                const x1Pixel = originX + startingPoint * (graphWidth / range);
+                const rayArrowWidth = 42;
+                const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
+                cy.get(`.ngie-accordion .ngie-jxgbox svg [stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
+                    .should('be.visible');
+            });
     },
 
     /**
@@ -356,18 +440,18 @@ const steps = {
      * @param {number} startingPoint - It representing the starting point of the ray.
      */
     verifyRayOnNumberLinePreviewTab: (direction, range, startingPoint) => {
-            numberLinePage.numberLinePreviewTab()
-                .then(($graphElement) => {
-                    const graphWidth = $graphElement[0].clientWidth;
-                    const graphHeight = $graphElement[0].clientHeight;
-                    const originX = graphWidth / 2;
-                    const originY = graphHeight / 2;
-                    const x1Pixel = originX + startingPoint * (graphWidth / range);
-                    const rayArrowWidth = 42;
-                    const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
-                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
-                        .should('be.visible');
-                });
+        numberLinePage.numberLinePreviewTab()
+            .then(($graphElement) => {
+                const graphWidth = $graphElement[0].clientWidth;
+                const graphHeight = $graphElement[0].clientHeight;
+                const originX = graphWidth / 2;
+                const originY = graphHeight / 2;
+                const x1Pixel = originX + startingPoint * (graphWidth / range);
+                const rayArrowWidth = 42;
+                const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
+                    .should('be.visible');
+            });
     },
 
     /**
@@ -398,18 +482,18 @@ const steps = {
      * @param {number} startingPoint -It representing the starting point of the ray.
      */
     verifyCorrectRayOnNumberLinePreviewTab: (direction, range, startingPoint) => {
-            numberLinePage.numberLinePreviewTab()
-                .then(($graphElement) => {
-                    const graphWidth = $graphElement[0].clientWidth;
-                    const graphHeight = $graphElement[0].clientHeight;
-                    const originX = graphWidth / 2;
-                    const originY = graphHeight / 2;
-                    const x1Pixel = originX + startingPoint * (graphWidth / range);
-                    const rayArrowWidth = 42;
-                    const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
-                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
-                        .should('have.css', 'stroke', css.color.correctAnswer);
-                });
+        numberLinePage.numberLinePreviewTab()
+            .then(($graphElement) => {
+                const graphWidth = $graphElement[0].clientWidth;
+                const graphHeight = $graphElement[0].clientHeight;
+                const originX = graphWidth / 2;
+                const originY = graphHeight / 2;
+                const x1Pixel = originX + startingPoint * (graphWidth / range);
+                const rayArrowWidth = 42;
+                const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
+                    .should('have.css', 'stroke', css.color.correctAnswer);
+            });
     },
 
     /**
@@ -440,18 +524,18 @@ const steps = {
      * @param {number} startingPoint- It representing the starting point of the ray.
      */
     verifyIncorrectRayOnNumberLinePreviewTab: (direction, range, startingPoint) => {
-            numberLinePage.numberLinePreviewTab()
-                .then(($graphElement) => {
-                    const graphWidth = $graphElement[0].clientWidth;
-                    const graphHeight = $graphElement[0].clientHeight;
-                    const originX = graphWidth / 2;
-                    const originY = graphHeight / 2;
-                    const x1Pixel = originX + startingPoint * (graphWidth / range);
-                    const rayArrowWidth = 42;
-                    const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
-                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
-                        .should('have.css', 'stroke', css.color.incorrectAnswer);
-                });
+        numberLinePage.numberLinePreviewTab()
+            .then(($graphElement) => {
+                const graphWidth = $graphElement[0].clientWidth;
+                const graphHeight = $graphElement[0].clientHeight;
+                const originX = graphWidth / 2;
+                const originY = graphHeight / 2;
+                const x1Pixel = originX + startingPoint * (graphWidth / range);
+                const rayArrowWidth = 42;
+                const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
+                    .should('have.css', 'stroke', css.color.incorrectAnswer);
+            });
     },
 
     /**
@@ -754,21 +838,1074 @@ const steps = {
             });
     },
 
+    //Layout
+    verifyLayoutAccordionIsCollapsed: () => {
+        numberLinePage.layoutAccordionButton()
+            .should('have.attr', 'aria-expanded', 'false');
+        numberLinePage.layoutAccordionChevronButton()
+            .should('not.have.class', 'Mui-expanded');
+    },
+
+    verifyLayoutAccordionIsExpanded: () => {
+        numberLinePage.layoutAccordionButton()
+            .should('have.attr', 'aria-expanded', 'true');
+        numberLinePage.layoutAccordionChevronButton()
+            .should('have.class', 'Mui-expanded');
+    },
+
+    expandLayoutAccordion: () => {
+        numberLinePage.layoutAccordionButton()
+            .click();
+        numberLinePage.layoutAccordionButton()
+            .should('have.attr', 'aria-expanded', 'true');
+        numberLinePage.layoutAccordionChevronButton()
+            .should('have.class', 'Mui-expanded');
+    },
+
+    collapseLayoutAccordion: () => {
+        numberLinePage.layoutAccordionButton()
+            .click();
+        numberLinePage.layoutAccordionButton()
+            .should('have.attr', 'aria-expanded', 'false');
+        numberLinePage.layoutAccordionChevronButton()
+            .should('not.have.class', 'Mui-expanded');
+    },
+
+    verifyMakeResponsiveCheckboxChecked: () => {
+        numberLinePage.makeResponsiveCheckboxIcon()
+            .should('have.class', 'icon-ILC-tick-icon');
+    },
+
+    verifyMakeResponsiveCheckboxUnchecked: () => {
+        numberLinePage.makeResponsiveCheckboxIcon()
+            .should('have.class', 'icon-x-circle');
+    },
+
+    checkMakeResponsiveCheckbox: () => {
+        numberLinePage.makeResponsiveCheckboxIcon()
+            .click({ force: true });
+        steps.verifyMakeResponsiveCheckboxChecked();
+    },
+
+    uncheckMakeResponsiveCheckbox: () => {
+        numberLinePage.makeResponsiveCheckboxIcon()
+            .click({ force: true });
+        steps.verifyMakeResponsiveCheckboxUnchecked();
+    },
+
     /**
-     * Enters a value into the Limit Number of Responses input field.
-     * @param {string | number} value - The value to be entered into the input field.
-     * @description This function clears the input field and then enters the specified value into the Limit Number of Responses input field on the page.
+     * Enters the specified value into the input field.
+     * @param {number} value - The value to enter into the input field.
      */
-    enterValueInLimitNumberOfResponsesInputField: (value) => {
-        numberLinePage.limitNumberOfResponsesInputField()
+    enterTextInWidthInputField: (value) => {
+        numberLinePage.widthInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInWidthInputField: (value) => {
+        numberLinePage.widthInputField()
+            .should('have.value', value);
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInMarginInputField: (value) => {
+        numberLinePage.marginInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInMarginInputField: (value) => {
+        numberLinePage.marginInputField()
+            .should('have.value', value);
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInResponseSpacingInputField: (value) => {
+        numberLinePage.responseSpacingInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInResponseSpacingInputField: (value) => {
+        numberLinePage.responseSpacingInputField()
+            .should('have.value', value);
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInLimitNumberOfResponsesInputField: (value) => {
+        numberLinePage.limitNumbersOfResponsesInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInLimitNumberOfResponsesInputField: (value) => {
+        numberLinePage.limitNumbersOfResponsesInputField()
+            .should('have.value', value);
+    },
+
+    /**
+     * @description Verify that the specified checkbox is checked.
+     * @param {('Stagger response'|'Show labels'|'Show ticks'|'Show min'|'Show max'|'Limit number of responses'|'Show min arrow'|'Show max arrow'|'Stack responses')} checkboxName - The name of the checkbox to verify.
+     */
+    verifyCheckboxChecked: (checkboxName) => {
+        switch (checkboxName) {
+            case 'Show min arrow':
+                numberLinePage.showMinArrowCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Show max arrow':
+                numberLinePage.showMaxArrowCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Stack responses':
+                numberLinePage.stackResponsesCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Stagger response':
+                numberLinePage.staggerResponseCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Show labels':
+                numberLinePage.showLabelsCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Show ticks':
+                numberLinePage.showTicksCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Show min':
+                numberLinePage.showMinCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Show max':
+                numberLinePage.showMaxCheckbox()
+                    .should('be.checked');
+                break;
+            case 'Limit number of responses':
+                numberLinePage.limitNumbersOfResponsesCheckbox()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     * @description Verify that the specified checkbox is unchecked.
+     * @param {('Stagger response'|'Show labels'|'Show ticks'|'Show min'|'Show max'|'Limit number of responses'|'Show min arrow'|'Show max arrow'|'Stack responses')} checkboxName - The name of the checkbox to verify.
+     */
+    verifyCheckboxUnchecked: (checkboxName) => {
+        switch (checkboxName) {
+            case 'Show min arrow':
+                numberLinePage.showMinArrowCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Show max arrow':
+                numberLinePage.showMaxArrowCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Stack responses':
+                numberLinePage.stackResponsesCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Stagger response':
+                numberLinePage.staggerResponseCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Show labels':
+                numberLinePage.showLabelsCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Show ticks':
+                numberLinePage.showTicksCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Show min':
+                numberLinePage.showMinCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Show max':
+                numberLinePage.showMaxCheckbox()
+                    .should('not.be.checked');
+                break;
+            case 'Limit number of responses':
+                numberLinePage.limitNumbersOfResponsesCheckbox()
+                    .should('not.be.checked');
+                break;
+            default:
+                throw new Error('invalid state string');
+        }
+    },
+
+    /**
+    *@description Checks the specified checkbox
+    * @param {('Stagger response'|'Show labels'|'Show ticks'|'Show min'|'Show max'|'Limit number of responses'|'Show min arrow'|'Show max arrow'|'Stack responses')} checkboxName - The name of the checkbox.
+    */
+    checkCheckbox: (checkboxName) => {
+        switch (checkboxName) {
+            case 'Show min arrow':
+                numberLinePage.showMinArrowCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Show max arrow':
+                numberLinePage.showMaxArrowCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Stack responses':
+                numberLinePage.stackResponsesCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Stagger response':
+                numberLinePage.staggerResponseCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Show labels':
+                numberLinePage.showLabelsCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Show ticks':
+                numberLinePage.showTicksCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Show min':
+                numberLinePage.showMinCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Show max':
+                numberLinePage.showMaxCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Limit number of responses':
+                numberLinePage.limitNumbersOfResponsesCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     *@description Unhecks the specified checkbox
+     * @param {('Stagger response'|'Show labels'|'Show ticks'|'Show min'|'Show max'|'Limit number of responses'|'Show min arrow'|'Show max arrow'|'Stack responses')} checkboxName - The name of the checkbox.
+     */
+    uncheckCheckbox: (checkboxName) => {
+        switch (checkboxName) {
+            case 'Show min arrow':
+                numberLinePage.showMinArrowCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Show max arrow':
+                numberLinePage.showMaxArrowCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Stack responses':
+                numberLinePage.stackResponsesCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Stagger response':
+                numberLinePage.staggerResponseCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Show labels':
+                numberLinePage.showLabelsCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Show ticks':
+                numberLinePage.showTicksCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Show min':
+                numberLinePage.showMinCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Show max':
+                numberLinePage.showMaxCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Limit number of responses':
+                numberLinePage.limitNumbersOfResponsesCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            default:
+                throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     * Clicks on the orientation toggle button with the specified ARIA label and verifies it is selected.
+     * @param {string} ariaLabel - The ARIA label of the orientation toggle button to select.
+     */
+    selectOrientationToggleButton: (ariaLabel) => {
+        numberLinePage.orientationToggleButton(ariaLabel)
+            .click();
+        steps.verifyOrientationToggleButtonSelected(ariaLabel);
+    },
+
+    /**
+     * Verifies that the toggle button with the specified ARIA label is selected.
+     * @param {string} ariaLabel - The ARIA label of the toggle button to verify.
+     */
+    verifyOrientationToggleButtonSelected: (ariaLabel) => {
+        numberLinePage.orientationToggleButton(ariaLabel)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+    * Verifies that the toggle button with the specified ARIA label is unselected.
+    * @param {string} ariaLabel - The ARIA label of the toggle button to verify.
+    */
+    verifyOrientationToggleButtonUnselected: (ariaLabel) => {
+        numberLinePage.orientationToggleButton(ariaLabel)
+            .should('have.attr', 'aria-pressed', 'false');
+    },
+
+    /**
+ * Verifies the orientation and size of the number line section.
+ * @param {string} orientation - The orientation of the number line section ('Horizontal' or 'Vertical').
+ * @param {string} value - The value representing the width or height of the number line section.
+ */
+    verifyNumberLineOrientationAndSizeNumberLineSection: (orientation, value) => {
+        const isHorizontal = orientation === 'Horizontal';
+        const width = isHorizontal ? value : '120';
+        const height = isHorizontal ? '120' : value;
+        numberLinePage.numberLineNumberLineSection()
+            .should('have.attr', 'width', width)
+            .and('have.attr', 'height', height);
+    },
+
+    /**
+     * Verifies the orientation and size of the specify correct answer section.
+     * @param {string} orientation - The orientation of the specify correct answer section ('Horizontal' or 'Vertical').
+     * @param {string} value - The value representing the width or height of the specify correct answer section.
+     */
+    verifyNumberLineOrientationAndSizeSpecifyCorrectAnswerSection: (orientation, value) => {
+        const isHorizontal = orientation === 'Horizontal';
+        const width = isHorizontal ? value : '120';
+        const height = isHorizontal ? '120' : value;
+        numberLinePage.numberLineSpecifyCorrectAnswer()
+            .should('have.attr', 'width', width)
+            .and('have.attr', 'height', height);
+    },
+
+    /**
+     * Verifies the orientation and size of the preview tab of the number line.
+     * @param {string} orientation - The orientation of the preview tab ('Horizontal' or 'Vertical').
+     * @param {string} value - The value representing the width or height of the preview tab.
+     */
+    verifyNumberLineOrientationAndSizePreviewTab: (orientation, value) => {
+        const isHorizontal = orientation === 'Horizontal';
+        const width = isHorizontal ? value : '120';
+        const height = isHorizontal ? '120' : value;
+        numberLinePage.numberLinePreviewTab()
+            .should('have.attr', 'width', width)
+            .and('have.attr', 'height', height);
+    },
+
+    /**
+     * Verifies the margin for the specify correct answer section of the number line.
+     * @param {number} value - The expected margin value in pixels.
+     */
+    verifyMarginForNumberLineSpecifyCorrectAnswerSection: (value) => {
+        numberLinePage.numberLineSpecifyCorrectAnswer()
+            .parents('[class*="LineGraphstyles__GraphContainer"]')
+            .should('have.css', 'padding', `${value}px`);
+    },
+
+    /**
+     * Verifies the margin for the preview tab of the number line.
+     * @param {number} value - The expected margin value in pixels.
+     */
+    verifyMarginForNumberLinePreviewTab: (value) => {
+        numberLinePage.numberLinePreviewTab()
+            .parents('[class*="LineGraphstyles__GraphContainer"]')
+            .should('have.css', 'padding', `${value}px`);
+    },
+
+    /**
+     * Verifies the response spacing for the specify correct answer section of the number line.
+     * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     * @param {number} value - The expected response spacing value.
+     */
+    verifyResponseSpacingSpecifyCorrectAnswerSection: (orientation, value) => {
+        const attribute = orientation === 'Horizontal' ? 'height' : 'width';
+        numberLinePage.numberLineSpecifyCorrectAnswer()
+            .should('have.attr', attribute, value * 4);
+    },
+
+    /**
+     * Verifies the response spacing for the preview tab of the number line.
+     * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     * @param {number} value - The expected response spacing value.
+     */
+    verifyResponseSpacingPreviewTab: (orientation, value) => {
+        const attribute = orientation === 'Horizontal' ? 'height' : 'width';
+        numberLinePage.numberLinePreviewTab()
+            .should('have.attr', attribute, value * 4);
+    },
+
+    /**
+     * Verifies the visibility of the minimum arrow .
+     * @param {string} visibility - The expected visibility ('visible' or 'hidden').
+     * @throws {Error} Throws an error if the provided visibility string is invalid.
+     */
+    verifyMinArrowVisibilitySpecifyCorrectAnswerSection: (visibility) => {
+        if (visibility === 'visible') {
+            numberLinePage.numberLineAxisSpecifyCorrectAnswer()
+                .should('have.attr', 'marker-start');
+        }
+        else if (visibility === 'hidden') {
+            numberLinePage.numberLineAxisSpecifyCorrectAnswer()
+                .should('not.have.attr', 'marker-start');
+        }
+        else {
+            throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     * Verifies the visibility of the minimum arrow
+     * @param {string} visibility - The expected visibility ('visible' or 'hidden').
+     * @throws {Error} Throws an error if the provided visibility string is invalid.
+     */
+    verifyMinArrowVisibilityNumberLineSection: (visibility) => {
+        if (visibility === 'visible') {
+            numberLinePage.numberLineAxisNumberLineSection()
+                .should('have.attr', 'marker-start');
+        }
+        else if (visibility === 'hidden') {
+            numberLinePage.numberLineAxisNumberLineSection()
+                .should('not.have.attr', 'marker-start');
+        }
+        else {
+            throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     * Verifies the visibility of the minimum arrow 
+     * @param {string} visibility - The expected visibility ('visible' or 'hidden').
+     * @throws {Error} Throws an error if the provided visibility string is invalid.
+     */
+    verifyMinArrowVisibilityPreviewTab: (visibility) => {
+        if (visibility === 'visible') {
+            numberLinePage.numberLineAxisPreviewTab()
+                .should('have.attr', 'marker-start');
+        }
+        else if (visibility === 'hidden') {
+            numberLinePage.numberLineAxisPreviewTab()
+                .should('not.have.attr', 'marker-start');
+        }
+        else {
+            throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     * Verifies the visibility of the maximum arrow 
+     * @param {string} visibility - The expected visibility ('visible' or 'hidden').
+     * @throws {Error} Throws an error if the provided visibility string is invalid.
+     */
+    verifyMaxArrowVisibilitySpecifyCorrectAnswerSection: (visibility) => {
+        if (visibility === 'visible') {
+            numberLinePage.numberLineAxisSpecifyCorrectAnswer()
+                .should('have.attr', 'marker-end');
+        }
+        else if (visibility === 'hidden') {
+            numberLinePage.numberLineAxisSpecifyCorrectAnswer()
+                .should('not.have.attr', 'marker-end');
+        }
+        else {
+            throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     * Verifies the visibility of the maximum arrow 
+     * @param {string} visibility - The expected visibility ('visible' or 'hidden').
+     * @throws {Error} Throws an error if the provided visibility string is invalid.
+     */
+    verifyMaxArrowVisibilityNumberLineSection: (visibility) => {
+        if (visibility === 'visible') {
+            numberLinePage.numberLineAxisNumberLineSection()
+                .should('have.attr', 'marker-end');
+        }
+        else if (visibility === 'hidden') {
+            numberLinePage.numberLineAxisNumberLineSection()
+                .should('not.have.attr', 'marker-end');
+        }
+        else {
+            throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     * Verifies the visibility of the maximum arrow 
+     * @param {string} visibility - The expected visibility ('visible' or 'hidden').
+     * @throws {Error} Throws an error if the provided visibility string is invalid.
+     */
+    verifyMaxArrowVisibilityPreviewTab: (visibility) => {
+        if (visibility === 'visible') {
+            numberLinePage.numberLineAxisPreviewTab()
+                .should('have.attr', 'marker-end');
+        }
+        else if (visibility === 'hidden') {
+            numberLinePage.numberLineAxisPreviewTab()
+                .should('not.have.attr', 'marker-end');
+        }
+        else {
+            throw new Error('invalid state string');
+        }
+    },
+
+    /**
+     * Verifies the visibility and text of labels on the specify correct answer section of the number line.
+     * @param {string} value - The initial value of the labels.
+     * @param {number} interval - The interval between consecutive labels.
+     */
+    verifyLabelsVisibleOnNumberLineSpecifyCorrectAnswerSection: (value, interval) => {
+        cy.wait(3000)
+        numberLinePage.numberLineSpecifyCorrectAnswer()
+            .parents('.ngie-jxgbox')
+            .find('.JXGtext')
+            .its('length').then((len) => {
+                for (let index = 0; index < len; index++) {
+                    numberLinePage.numberLineSpecifyCorrectAnswer()
+                        .parents('.ngie-jxgbox')
+                        .find('.JXGtext')
+                        .eq(index)
+                        .should('have.text', value);
+                    value += interval;
+                }
+            });
+    },
+
+    /**
+     * Verifies the visibility and text of labels on the number line section.
+     * @param {string} value - The initial value of the labels.
+     * @param {number} interval - The interval between consecutive labels.
+     */
+    verifyLabelsVisibleOnNumberLineNumberLineSection: (value, interval) => {
+        cy.wait(3000);
+        numberLinePage.numberLineNumberLineSection()
+            .parents('.ngie-jxgbox')
+            .find('.JXGtext')
+            .its('length').then((len) => {
+                for (let index = 0; index < len; index++) {
+                    numberLinePage.numberLineNumberLineSection()
+                        .parents('.ngie-jxgbox')
+                        .find('.JXGtext')
+                        .eq(index)
+                        .should('have.text', value);
+                    value += interval;
+                }
+            });
+    },
+
+    /**
+     * Verifies the visibility and text of labels on the preview tab of the number line.
+     * @param {string} value - The initial value of the labels.
+     * @param {number} interval - The interval between consecutive labels.
+     */
+    verifyLabelsVisibleOnNumberLinePreviewTab: (value, interval) => {
+        numberLinePage.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .find('.JXGtext')
+            .its('length').then((len) => {
+                for (let index = 0; index < len; index++) {
+                    numberLinePage.numberLinePreviewTab()
+                        .parents('.ngie-jxgbox')
+                        .find('.JXGtext')
+                        .eq(index)
+                        .should('have.text', value);
+                    value += interval;
+                }
+            });
+    },
+
+
+    verifyLabelsNotVisibleOnNumberLinePreviewTab: () => {
+        numberLinePage.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .find('.JXGtext')
+            .should('not.exist');
+    },
+
+    verifyLabelsNotVisibleOnNumberLineSpecifyCorrectAnswerSection: () => {
+        numberLinePage.numberLineSpecifyCorrectAnswer()
+            .parents('.ngie-jxgbox')
+            .find('.JXGtext')
+            .should('not.exist');
+    },
+
+    verifyLabelsNotVisibleOnNumberLineNumberLineSection: () => {
+        numberLinePage.numberLineNumberLineSection()
+            .parents('.ngie-jxgbox')
+            .find('.JXGtext')
+            .should('not.exist');
+    },
+
+    clickOnToolOptionsSpecifyCorrectAnswer: () => {
+        cy.log('Clicking on control options to remove error message');
+        numberLinePage.numberLineToolOptionSpecifyCorrectAnswer()
+            .parents('.graph-tools-wrapper')
+            .click();
+    },
+
+    clickOnToolOptionsPreviewTab: () => {
+        cy.log('Clicking on control options to remove error message');
+        numberLinePage.numberLineToolOptionPreviewTab()
+            .parents('.graph-tools-wrapper')
+            .click();
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInMinInputField: (value) => {
+        numberLinePage.minInputField()
             .clear()
             .type(value)
-            .blur()
+            .blur();
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInMinInputField: (value) => {
+        numberLinePage.minInputField()
+            .should('have.value', value);
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInMaxInputField: (value) => {
+        numberLinePage.maxInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInMaxInputField: (value) => {
+        numberLinePage.maxInputField()
+            .should('have.value', value);
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInIntervalInputField: (value) => {
+        numberLinePage.intervalInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInIntervalInputField: (value) => {
+        numberLinePage.intervalInputField()
+            .should('have.value', value);
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInAnnotateEveryInputField: (value) => {
+        numberLinePage.annotateEveryInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInAnnotateEveryInputField: (value) => {
+        numberLinePage.annotateEveryInputField()
+            .should('have.value', value);
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInDisplaySpecificAnnotationInputField: (value) => {
+        numberLinePage.displaySpecificAnnotationInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInDisplaySpecificAnnotationInputField: (value) => {
+        numberLinePage.displaySpecificAnnotationInputField()
+            .should('have.value', value);
+    },
+
+    /**
+     * Clicks on the toggle button with the specified ARIA label and verifies it is selected.
+     * @param {string} ariaLabel - The ARIA label of the toggle button to select.
+     */
+    selectDisplayNumbersToggleButton: (ariaLabel) => {
+        numberLinePage.displayNumbersToggleButton(ariaLabel)
+            .click();
+        steps.verifyDisplayNumbersToggleButtonSelected(ariaLabel);
+    },
+
+    /**
+   * Verifies that the toggle button with the specified ARIA label is selected.
+   * @param {string} ariaLabel - The ARIA label of the toggle button to verify.
+   */
+    verifyDisplayNumbersToggleButtonSelected: (ariaLabel) => {
+        numberLinePage.displayNumbersToggleButton(ariaLabel)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+    * Verifies that the toggle button with the specified ARIA label is unselected.
+    * @param {string} ariaLabel - The ARIA label of the toggle button to verify.
+    */
+    verifyDisplayNumbersToggleButtonUnselected: (ariaLabel) => {
+        numberLinePage.displayNumbersToggleButton(ariaLabel)
+            .should('have.attr', 'aria-pressed', 'false');
+    },
+
+    /**
+     * Clicks on the toggle button with the specified ARIA label and verifies it is selected.
+     * @param {string} ariaLabel - The ARIA label of the toggle button to select.
+     */
+    selectLineSettingsToggleButton: (ariaLabel) => {
+        numberLinePage.lineSettingsToggleButton(ariaLabel)
+            .click();
+        steps.verifyLineSettingsToggleButtonSelected(ariaLabel);
+    },
+
+    /**
+   * Verifies that the toggle button with the specified ARIA label is selected.
+   * @param {string} ariaLabel - The ARIA label of the toggle button to verify.
+   */
+    verifyLineSettingsToggleButtonSelected: (ariaLabel) => {
+        numberLinePage.lineSettingsToggleButton(ariaLabel)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+   * Verifies that the toggle button with the specified ARIA label is unselected.
+   * @param {string} ariaLabel - The ARIA label of the toggle button to verify.
+   */
+    verifyLineSettingsToggleButtonUnselected: (ariaLabel) => {
+        numberLinePage.lineSettingsToggleButton(ariaLabel)
+            .should('have.attr', 'aria-pressed', 'false');
+    },
+
+
+    /**
+     * Verifies the label on the number line.
+     * @param {Array} values - An array of objects containing the value and index of each label.
+     */
+    verifyLabelOnNumberLineSpecifyCorrectAnswerSection: (values) => {
+        values.forEach(({ value, index }) => {
+            numberLinePage.numberLineSpecifyCorrectAnswer()
+                .parents('.ngie-jxgbox')
+                .find('.JXGtext')
+                .eq(index)
+                .then(($el) => {
+                    const innerText = $el[0].innerText;
+                    expect(innerText.trim()).to.equal(value.toString());
+                });
+        });
+    },
+
+    /**
+    * Verifies the label on the number line.
+    * @param {Array} values - An array of objects containing the value and index of each label.
+    */
+    verifyLabelOnNumberLineNumberLineSection: (values) => {
+        values.forEach(({ value, index }) => {
+            numberLinePage.numberLineNumberLineSection()
+                .parents('.ngie-jxgbox')
+                .find('.JXGtext')
+                .eq(index)
+                .then(($el) => {
+                    const innerText = $el[0].innerText;
+                    expect(innerText.trim()).to.equal(value.toString());
+                });
+        });
+    },
+
+    /**
+    * Verifies the label on the number line.
+    * @param {Array} values - An array of objects containing the value and index of each label.
+    */
+    verifyLabelOnNumberLinePreviewTab: (values) => {
+        values.forEach(({ value, index }) => {
+            numberLinePage.numberLinePreviewTab()
+                .parents('.ngie-jxgbox')
+                .find('.JXGtext')
+                .eq(index)
+                .then(($el) => {
+                    const innerText = $el[0].innerText;
+                    expect(innerText.trim()).to.equal(value.toString());
+                });
+        });
+    },
+
+    /**
+     * Verifies the display numbers orientation in the specify correct answer section of the number line.
+     * @param {string} numberLineOrientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     * @param {string} numberOrientation - The orientation of the numbers ('Below' or 'Left').
+     * @throws {Error} Thrown if the number line orientation is invalid.
+     */
+    verifyDisplayNumbersOrientationSpecifyCorrectAnswerSection: (numberLineOrientation, numberOrientation) => {
+        let property, value;
+        switch (numberLineOrientation) {
+            case 'Horizontal':
+                property = numberOrientation === 'Below' ? 'top' : 'bottom';
+                value = '83px';
+                break;
+            case 'Vertical':
+                property = numberOrientation === 'Left' ? 'right' : 'left';
+                value = '85px';
+                break;
+            default:
+                throw new Error('Invalid Number line orientation');
+        }
+        numberLinePage.numberLineSpecifyCorrectAnswer()
+            .parents('.ngie-jxgbox')
+            .find('.JXGtext')
+            .eq(0)
+            .should('have.css', property, value);
+    },
+
+    /**
+     * Verifies the display numbers orientation in the number line section.
+     * @param {string} numberLineOrientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     * @param {string} numberOrientation - The orientation of the numbers ('Below' or 'Left').
+     * @throws {Error} Thrown if the number line orientation is invalid.
+     */
+    verifyDisplayNumbersOrientationNumberLineSection: (numberLineOrientation, numberOrientation) => {
+        let property, value;
+        switch (numberLineOrientation) {
+            case 'Horizontal':
+                property = numberOrientation === 'Below' ? 'top' : 'bottom';
+                value = '83px';
+                break;
+            case 'Vertical':
+                property = numberOrientation === 'Left' ? 'right' : 'left';
+                value = '85px';
+                break;
+            default:
+                throw new Error('Invalid Number line orientation');
+        }
+        numberLinePage.numberLineNumberLineSection()
+            .parents('.ngie-jxgbox')
+            .find('.JXGtext')
+            .eq(0)
+            .should('have.css', property, value);
+    },
+
+    /**
+     * Verifies the display numbers orientation in the number line section.
+     * @param {string} numberLineOrientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     * @param {string} numberOrientation - The orientation of the numbers ('Below' or 'Left').
+     * @throws {Error} Thrown if the number line orientation is invalid.
+     */
+    verifyDisplayNumbersOrientationPreviewTab: (numberLineOrientation, numberOrientation) => {
+        let property, value;
+        switch (numberLineOrientation) {
+            case 'Horizontal':
+                property = numberOrientation === 'Below' ? 'top' : 'bottom';
+                value = '83px';
+                break;
+            case 'Vertical':
+                property = numberOrientation === 'Left' ? 'right' : 'left';
+                value = '85px';
+                break;
+            default:
+                throw new Error('Invalid Number line orientation');
+        }
+
+        numberLinePage.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .find('.JXGtext')
+            .eq(0)
+            .should('have.css', property, value);
+    },
+
+    clickOnNumberLineTitle: () => {
+        numberLinePage.numberLineTitleNumberLineSection()
+            .click();
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInTitlePopupAddLabelInputField: (text) => {
+        numberLinePage.titlePopupAddLabelInputField()
+            .clear()
+            .type(text)
+            .should('have.value', text);
     },
 
-    uncheckStaggerResponseCheckbox: () => {
-        numberLinePage.staggerResponseCheckbox()
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInTitlePopupAddLabelInputField: (text) => {
+        numberLinePage.titlePopupAddLabelInputField()
+            .should('have.value', text);
+    },
+
+    clickOnTitlePopupCancelButton: () => {
+        numberLinePage.titlePopupCancelButton()
+            .click();
+    },
+
+    clickOnTitlePopupSaveButton: () => {
+        numberLinePage.titlePopupSaveButton()
             .click();
+    },
+
+    verifyAnnotatedLabelsOnNumberLineSpecifyCorrectAnswerSection: (value, annotateEvery) => {
+        cy.wait(3000);
+        numberLinePage.numberLineSpecifyCorrectAnswer()
+            .parents('.ngie-jxgbox')
+            .find('.JXGtext')
+            .each(($element, index) => {
+                if (index % annotateEvery === 0) {
+                    cy.wrap($element).should('have.text', value);
+                    value += annotateEvery;
+                }
+            });
+    },
+
+    /**
+     * Verifies the annotated labels on the number line section.
+     * @param {string} value - The value of the annotated label.
+     * @param {number} annotateEvery - The frequency of annotation.
+     */
+    verifyAnnotatedLabelsOnNumberLineNumberLineSection: (value, annotateEvery) => {
+        cy.wait(3000);
+        numberLinePage.numberLineNumberLineSection()
+            .parents('.ngie-jxgbox')
+            .find('.JXGtext')
+            .each(($element, index) => {
+                if (index % annotateEvery === 0) {
+                    cy.wrap($element).should('have.text', value);
+                    value += annotateEvery;
+                }
+            });
+    },
+
+    /**
+     * Verifies the annotated labels on the preview tab of the number line.
+     * @param {string} value - The value of the annotated label.
+     * @param {number} annotateEvery - The frequency of annotation.
+     */
+    verifyAnnotatedLabelsOnNumberLinePreviewTab: (value, annotateEvery) => {
+        numberLinePage.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .find('.JXGtext')
+            .each(($element, index) => {
+                if (index % annotateEvery === 0) {
+                    cy.wrap($element).should('have.text', value);
+                    value += annotateEvery;
+                }
+            });
+    },
+
+    verifyDisplayNumbersAndLineSettingsSectionDisabled: () => {
+        utilities.verifyCSS(numberLinePage.lineSettingsToggleButtonWrapper(), {
+            'opacity': '0.4'
+        });
+        utilities.verifyCSS(numberLinePage.displayNumbersToggleButtonWrapper(), {
+            'opacity': '0.4'
+        });
+    },
+
+    verifyDisplayNumbersAndLineSettingsSectionEnabled: () => {
+        utilities.verifyCSS(numberLinePage.lineSettingsToggleButtonWrapper(), {
+            'opacity': '1'
+        });
+        utilities.verifyCSS(numberLinePage.displayNumbersToggleButtonWrapper(), {
+            'opacity': '1'
+        });
+    },
+
+    /**
+    * Enters the specified value into the input field.
+    * @param {number} value - The value to enter into the input field.
+    */
+    enterTextInHeightInputField: (value) => {
+        numberLinePage.heightInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * Verifies that the input field has the specified value.
+    * @param {number} value - The expected value of the input field   
+    */
+    verifyTextInHeightInputField: (value) => {
+        numberLinePage.heightInputField()
+            .should('have.value', value);
     }
 }