itemengine-cypress-automation 1.0.181 → 1.0.182

package/cypress/pages/numberLinePage.js

@@ -1,6 +1,5 @@
 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;
 
@@ -15,90 +14,11 @@ const selectors = {
     ...commonComponents,
     ...defaultToolDropdown,
     ...autoScoredScoringSectionMultiResponseType,
-    ...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'),
+    //layout
     staggerResponseCheckbox: () => cy.get('[data-ngie-testid="stagger-response-checkbox"] 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'),
+    limitNumberOfResponsesInputField: () => cy.get('.limit-number-line-response-wrapper .text-input-field 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)
@@ -119,7 +39,6 @@ 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) => {
@@ -145,10 +64,7 @@ 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(),
-
-    warningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
-    warningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
+    numberLineTitleCorrectAnswerSection: () => cy.get('[class*="LineGraphstyles__TitleText"]').last()
 }
 
 const steps = {
@@ -257,18 +173,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');
+                });
     },
 
     /**
@@ -440,18 +356,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');
+                });
     },
 
     /**
@@ -482,18 +398,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);
+                });
     },
 
     /**
@@ -524,18 +440,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);
+                });
     },
 
     /**
@@ -838,1074 +754,21 @@ 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 the specified value into the input field.
-     * @param {number} value - The value to enter into the input field.
+     * 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.
      */
-    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()
+    enterValueInLimitNumberOfResponsesInputField: (value) => {
+        numberLinePage.limitNumberOfResponsesInputField()
             .clear()
             .type(value)
-            .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);
+            .blur()
     },
 
-    /**
-    * 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()
+    uncheckStaggerResponseCheckbox: () => {
+        numberLinePage.staggerResponseCheckbox()
             .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);
     }
 }