itemengine-cypress-automation 1.0.184-e2e-execution-crash-3b9d0d0.0 → 1.0.184

package/cypress/pages/numberLinePage.js

@@ -1,7 +1,10 @@
 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 { createQuestionBasePage, toolsAndControlsComponent, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, commonComponents, autoScoredScoringSectionMultiResponseType, toolSettingsComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, autoScoredStudentViewSettings, randomizeOptionsComponent, studentViewSettingsLabelComponent, defaultToolDropdown, layoutSectionComponent, numberLineCommonComponent } from './components';
+import { dialogBoxBase } from './dialogBoxBase';
 const css = Cypress.env('css');
-const range = 20.4472843;
+const range = 20.75;
+const lineSettingsOptions = ['Whole numbers', 'Decimals', 'Fractions', 'Mixed fractions'];
+const numbers = ['-10', '-10.00', "−\n10\n1", "−\n10\n0\n1"]
 
 const selectors = {
     ...toolsAndControlsComponent,
@@ -14,11 +17,12 @@ const selectors = {
     ...commonComponents,
     ...defaultToolDropdown,
     ...autoScoredScoringSectionMultiResponseType,
-    //layout
-    staggerResponseCheckbox: () => cy.get('[data-ngie-testid="stagger-response-checkbox"] input'),
-    limitNumberOfResponsesInputField: () => cy.get('.limit-number-line-response-wrapper .text-input-field input'),
+    ...dialogBoxBase,
+    ...numberLineCommonComponent,
+    ...layoutSectionComponent,
+
     //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)
@@ -38,8 +42,7 @@ const selectors = {
     partialEqualWeightsPointsPerResponseScore: () => cy.get('.alternate-points-points-per-value-span'),
 
     //Preview Tab
-    numberLinePreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox svg').eq(0),
-    numberLinePointPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find('svg ellipse[display="inline"]'),
+    numberLineAxisPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox svg line').eq(0),
     numberLineSegmentPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find('[stroke-linecap="butt"]'),
     numberLineToolOptionPreviewTab: (toolOptionAriaLabel = null) => {
         if (toolOptionAriaLabel) {
@@ -58,13 +61,11 @@ const selectors = {
     numberLineTitlePreviewTab: () => cy.get('.edit-question-preview-wrapper [class*="LineGraphstyles__TitleText"]'),
 
     //Correct answer section
-    correctAnswersLabel: () => cy.get('[class*="AnswerLabel"]'),
-    correctIcon: () => cy.get('[data-icon="CorrectAnswer"]'),
-    incorrectIcon: () => cy.get('[data-icon="Incorrect"]'),
     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 = {
@@ -80,6 +81,8 @@ const steps = {
     ...commonComponents.steps,
     ...autoScoredScoringSectionMultiResponseType.steps,
     ...defaultToolDropdown.steps,
+    ...numberLineCommonComponent.steps,
+    ...layoutSectionComponent.steps,
 
     /**
      * @description This function selects the tool option from graph
@@ -117,7 +120,7 @@ const steps = {
                     numberLinePage.numberLineSpecifyCorrectAnswer()
                         .click(xPixel, originY, { force: true });
                 } else {
-                    const yPixel = originY - coordinate * (graphWidth / range);
+                    const yPixel = originY - coordinate * (graphHeight / range);
                     numberLinePage.numberLineSpecifyCorrectAnswer()
                         .click(originX, yPixel, { force: true });
                 }
@@ -173,18 +176,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');
+            });
     },
 
     /**
@@ -240,7 +243,7 @@ const steps = {
                     numberLinePage.numberLinePreviewTab()
                         .click(xPixel, originY, { force: true });
                 } else {
-                    const yPixel = originY + coordinate * (graphWidth / range);
+                    const yPixel = originY - coordinate * (graphHeight / range);
                     numberLinePage.numberLinePreviewTab()
                         .click(originX, yPixel, { force: true });
                 }
@@ -356,18 +359,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 +401,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 +443,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,93 +757,1328 @@ const steps = {
             });
     },
 
+    //Layout
+    /**
+     * 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.
+    */
+    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.
+         */
+    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');
+        }
+    },
+
     /**
-     * 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.
+     * 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.
      */
-    enterValueInLimitNumberOfResponsesInputField: (value) => {
-        numberLinePage.limitNumberOfResponsesInputField()
-            .clear()
-            .type(value)
-            .blur()
+    verifyLabelsVisibleOnNumberLineSpecifyCorrectAnswerSection: (value, interval) => {
+        cy.wait(3000)
+        numberLinePage.numberLineSpecifyCorrectAnswer()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .its('length').then((len) => {
+                for (let index = 0; index < len; index++) {
+                    numberLinePage.numberLineSpecifyCorrectAnswer()
+                        .parents('.ngie-jxgbox')
+                        .find('.number-line-tick-font')
+                        .eq(index)
+                        .should('have.text', value);
+                    value += interval;
+                }
+            });
     },
 
-    uncheckStaggerResponseCheckbox: () => {
-        numberLinePage.staggerResponseCheckbox()
+    /**
+    * 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('.number-line-tick-font')
+            .its('length').then((len) => {
+                for (let index = 0; index < len; index++) {
+                    numberLinePage.numberLinePreviewTab()
+                        .parents('.ngie-jxgbox')
+                        .find('.number-line-tick-font')
+                        .eq(index)
+                        .should('have.text', value);
+                    value += interval;
+                }
+            });
+    },
+
+
+    verifyLabelsNotVisibleOnNumberLinePreviewTab: () => {
+        numberLinePage.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .should('not.exist');
+    },
+
+    verifyLabelsNotVisibleOnNumberLineSpecifyCorrectAnswerSection: () => {
+        numberLinePage.numberLineSpecifyCorrectAnswer()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .should('not.exist');
+    },
+
+    clickOnToolOptionsSpecifyCorrectAnswer: () => {
+        cy.log('Clicking on control options to remove error message');
+        numberLinePage.numberLineToolOptionSpecifyCorrectAnswer()
+            .parents('.graph-tools-wrapper')
             .click();
-    }
-}
+    },
 
-const tests = {
-    ...resetPopupComponent.tests,
-    ...toolSettingsComponent.tests,
-    ...additionalSettingsAccessibilitySectionComponent.tests,
-    ...additionalSettingsPanel.tests,
-    ...studentViewSettingsLabelComponent.tests,
-    ...autoScoredStudentViewSettings.tests,
-    ...autoScoredSpecifyCorrectAnswerSection.tests,
-    ...createQuestionBasePage.tests,
-    ...commonComponents.tests,
-    ...autoScoredScoringPreviewTab.tests,
-    ...defaultToolDropdown.tests,
-    ...scoringSectionBaseEditTab.tests,
-    ...autoScoredScoringSectionMultiResponseType.tests,
+    clickOnToolOptionsPreviewTab: () => {
+        cy.log('Clicking on control options to remove error message');
+        numberLinePage.numberLineToolOptionPreviewTab()
+            .parents('.graph-tools-wrapper')
+            .click();
+    },
 
-    verifyContentsOfSpecifyCorrectAnswerSection: () => {
-        it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
-            utilities.verifyElementVisibilityState(numberLinePage.numberLineSpecifyCorrectAnswer(), 'visible');
-            utilities.verifyElementVisibilityState(numberLinePage.numberLineToolOptionSpecifyCorrectAnswer(), 'visible');
-            utilities.verifyElementVisibilityState(numberLinePage.numberLineControlOptionSpecifyCorrectAnswer(), 'visible');
-            utilities.verifyElementVisibilityState(numberLinePage.numberLineTitleSpecifyCorrectAnswerSection(), 'exist');
+    /**
+     * 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('.number-line-tick-font')
+                .eq(index)
+                .then(($el) => {
+                    const innerText = $el[0].innerText;
+                    expect(innerText.trim()).to.equal(value.toString());
+                });
         });
     },
 
     /**
-   * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
-   * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
-   * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
-   */
-    verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
-        it(`The user should be able to plot points on number line in the specify correct answer section ${accordionName} accordion`, () => {
-            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer("horizontal", range, 0);
-            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer("horizontal", range, 1);
-            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer(range, [0, 1]);
+    * 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('.number-line-tick-font')
+                .eq(index)
+                .then(($el) => {
+                    const innerText = $el[0].innerText;
+                    expect(innerText.trim()).to.equal(value.toString());
+                });
         });
+    },
 
-        it(`When the user resets the number line in the ${accordionName} accordion, \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
-            numberLinePage.steps.selectNumberLineControlOptionSpecifyCorrectAnswerSection('Reset');
-            numberLinePage.steps.confirmReset();
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
-            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
-            if (accordionName == 'Correct') {
-                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
-                    .within(() => {
-                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
-                    });
-            } else {
-                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
-                    .within(() => {
-                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
-                    });
-            };
-        });
+    /**
+     * 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 of' ? 'right' : 'left';
+                value = '85px';
+                break;
+            default:
+                throw new Error('Invalid Number line orientation');
+        }
+        numberLinePage.numberLineSpecifyCorrectAnswer()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .eq(0)
+            .should('have.css', property, value);
+    },
 
-        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y();
+    /**
+     * 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 of' ? 'right' : 'left';
+                value = '85px';
+                break;
+            default:
+                throw new Error('Invalid Number line orientation');
+        }
 
-        it('When the user plots on the number line then the error message should disappear', () => {
-            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer("horizontal", range, 0);
-            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer("horizontal", range, 1);
-            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer(range, [0, 1]);
-        });
+        numberLinePage.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .eq(0)
+            .should('have.css', property, value);
+    },
 
-        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
+    /**
+     * Verifies the annotated labels on the number line.
+     * @param {string} value - The value of the annotated label.
+     * @param {number} annotateEvery - The frequency of annotation.
+     */
+    verifyAnnotatedLabelsOnNumberLineSpecifyCorrectAnswerSection: (value, annotateEvery) => {
+        cy.wait(3000);
+        numberLinePage.numberLineSpecifyCorrectAnswer()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .each(($element, index) => {
+                if (index % annotateEvery === 0) {
+                    cy.wrap($element).should('have.text', value);
+                    value += annotateEvery;
+                }
+            });
+    },
 
-        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(numberLinePage.numberLineSpecifyCorrectAnswer());
-        });
-    }
+    /**
+     * Verifies the annotated labels on 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('.number-line-tick-font')
+            .each(($element, index) => {
+                if (index % annotateEvery === 0) {
+                    cy.wrap($element).should('have.text', value);
+                    value += annotateEvery;
+                }
+            });
+    },
 
+    //Vertical orientation
+    /**
+    * This function verifies plotted points on the vertical number line on the specify correct answer section.
+    * @param {number} range - The range of y coordinates.
+    * @param {number[]} coordinates - An array containing y coordinates to be plotted on the graph.
+    */
+    verifyPointsPlottedOnVerticalNumberLineSpecifyCorrectAnswer: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLineSpecifyCorrectAnswer()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY - y * (graphHeight / range);
+                    cy.get(`.ngie-accordion .ngie-jxgbox svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][tabindex="0"]`)
+                        .should('exist');
+                });
+        });
+    },
+
+    /**
+    * This function verifies plotted points on the vertical number line do not exist on the Edit tab.
+    * @param {number} range - The range of y coordinates.
+    * @param {number[]} coordinates - An array containing y coordinates to be plotted on the graph.
+    */
+    verifyPointsPlottedOnVerticalNumberLineNotExistSpecifyCorrectAnswer: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLineSpecifyCorrectAnswer()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY + y * (graphHeight / range);
+                    cy.get(`.ngie-accordion .ngie-jxgbox svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][tabindex="0"]`)
+                        .should('not.exist');
+                });
+        });
+    },
+
+    /**
+    * This function verifies plotted points on the vertical number line on the preview tab.
+    * @param {number} range - The range of y coordinates.
+    * @param {number[]} coordinates - An array containing y coordinates to be plotted on the graph.
+    */
+    verifyPointsPlottedOnVerticalNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY - y * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][tabindex="0"]`)
+                        .should('exist');
+                });
+        });
+    },
+
+    verifyCorrectPointsOnVerticalNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY - y * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][display="inline"]`)
+                        .should('have.css', 'stroke', css.color.correctAnswer);
+                });
+        });
+    },
+
+    verifyIncorrectPointsOnVerticalNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY - y * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][display="inline"]`)
+                        .should('have.css', 'stroke', css.color.incorrectAnswer);
+                });
+        });
+    },
+
+    /**
+     * Verifies that the points do not exist on the vertical number line in the preview tab.
+     * @param {number} range - The range of the number line.
+     * @param {number[]} coordinates - The y-coordinates of the points.
+     */
+    verifyPointsNotExistOnVerticalNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY - y * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][tabindex="0"]`)
+                        .should('not.exist');
+                });
+        });
+    },
+
+    /**
+    * This function verifies plotted points on the vertical number line on c tab
+    * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
+    * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+    * @param {number} coordinates[].xRange - range of x coordinate
+    */
+    verifyPointsPlottedOnVerticalNumberLineCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLineCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY - y * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][pointer-events="visiblePainted"]`)
+                        .should('exist');
+                });
+        });
+    },
+
+    /**
+    * Verifies that the correct points exist on the vertical number line in the correct answer section.
+    * @param {number} range - The range of the number line.
+    * @param {number[]} coordinates - The y-coordinates of the points.
+    */
+    verifyCorrectPointsOnVerticalNumberLineCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLinePage.numberLineCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const yPixel = originY - y * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg ellipse[cx*="${Math.floor(originX)}"][cy*="${Math.floor(yPixel)}"][display="inline"]`)
+                        .should('have.css', 'stroke', css.color.correctAnswer);
+                });
+        });
+    },
+
+    /**
+     * Verifies the line segment on the vertical number line in the specify correct answer section.
+     * @param {number} range - The range of the number line.
+     * @param {Object[]} coordinates - The coordinates of the line segment.
+     * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+     * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+     */
+    verifyLineSegmentOnVerticalNumberLineSpecifyCorrectAnswer: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLineSpecifyCorrectAnswer()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get(`.ngie-accordion .ngie-jxgbox svg [stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('be.visible');
+                });
+        });
+    },
+
+    /**
+     * Verifies the line segment on the vertical number line preview tab.
+     * @param {number} range - The range of the number line.
+     * @param {Object[]} coordinates - The coordinates of the line segment.
+     * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+     * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+     */
+    verifyLineSegmentOnVerticalNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('be.visible');
+                });
+        });
+    },
+
+    /**
+     * Verifies the correct line segment on the vertical number line preview tab.
+     * @param {number} range - The range of the number line.
+     * @param {Object[]} coordinates - The coordinates of the line segment.
+     * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+     * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+     */
+    verifyCorrectLineSegmentOnVerticalNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('have.css', 'stroke', css.color.correctAnswer);
+                });
+        });
+    },
+
+    /**
+     * Verifies the incorrect line segment on the vertical number line in the preview tab.
+     * @param {number} range - The range of the number line.
+     * @param {Object[]} coordinates - The coordinates of the line segment.
+     * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+     * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+     */
+    verifyIncorrectLineSegmentOnVerticalNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('have.css', 'stroke', css.color.incorrectAnswer);
+                });
+        });
+    },
+
+    /**
+     * Verifies that the line segment on the vertical number line does not exist in the preview tab.
+    * @param {number} range - The range of the number line.
+    * @param {Object[]} coordinates - The coordinates of the line segment.
+    * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+    * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+    */
+    verifyLineSegmentOnVerticalNumberLineNotExistPreviewTab: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('not.exist');
+                });
+        });
+    },
+
+    /**
+     * Verifies that the line segment on the vertical number line exists in the correct answer section.
+     * @param {number} range - The range of the number line.
+     * @param {Object[]} coordinates - The coordinates of the line segment.
+     * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+     * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+     */
+    verifyLineSegmentOnVerticalNumberLineCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLineCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('be.visible');
+                });
+        });
+    },
+
+    /**
+     * Verifies that the line segment on the vertical number line in the correct answer section has the correct appearance.
+     * @param {number} range - The range of the number line.
+     * @param {Object[]} coordinates - The coordinates of the line segment.
+     * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+     * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+     */
+    verifyCorrectLineSegmentOnVerticalNumberLineCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLineCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('have.css', 'stroke', css.color.correctAnswer);
+                });
+        });
+    },
+
+    /**
+     * Verifies that the line segment on the vertical number line does not exist in the correct answer section.
+     * @param {number} range - The range of the number line.
+     * @param {Object[]} coordinates - The coordinates of the line segment.
+     * @param {number} coordinates[].y1 - The y-coordinate of the starting point.
+     * @param {number} coordinates[].y2 - The y-coordinate of the ending point.
+     */
+    verifyLineSegmentOnVerticalNumberLineNotExistCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(({ y1, y2 }) => {
+            numberLinePage.numberLineCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const y1Pixel = originY - y1 * (graphHeight / range);
+                    const y2Pixel = originY - y2 * (graphHeight / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg [stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                        .should('not.exist');
+                });
+        });
+    },
+
+    /**
+     * Verifies the ray on the vertical number line in the specify correct answer section.
+     * @param {string} direction - The direction of the ray ('left' or 'right').
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - The starting point of the ray.
+     */
+    verifyRayOnVerticalNumberLineSpecifyCorrectAnswer: (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 y1Pixel = originY - startingPoint * (graphHeight / range);
+            const rayArrowHeight = 42;
+            const y2Pixel = direction === 'up' ? rayArrowHeight : graphHeight - rayArrowHeight;
+            cy.get(`.ngie-accordion .ngie-jxgbox svg [stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                .should('be.visible');
+        });
+    },
+
+    /**
+     * Verifies the ray on the vertical number line preview tab.
+     * @param {string} direction - The direction of the ray ('up' or 'down').
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - The starting point of the ray.
+     */
+    verifyRayOnVerticalNumberLinePreviewTab: (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 y1Pixel = originY - startingPoint * (graphHeight / range);
+            const rayArrowHeight = 42;
+            const y2Pixel = direction === 'up' ? rayArrowHeight : graphHeight - rayArrowHeight;
+            cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                .should('be.visible');
+        });
+    },
+
+    /**
+     * Verifies the correct ray on the vertical number line preview tab.
+     * @param {string} direction - The direction of the ray ('up' or 'down').
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - The starting point of the ray.
+     */
+    verifyCorrectRayOnVerticalNumberLinePreviewTab: (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 y1Pixel = originY - startingPoint * (graphHeight / range);
+                const rayArrowHeight = 42;
+                const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                    .should('have.css', 'stroke', css.color.correctAnswer);
+            });
+    },
+
+    /**
+     * Verifies the incorrect ray on the vertical number line preview tab.
+     * @param {string} direction - The direction of the ray ('up' or 'down').
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - The starting point of the ray.
+     */
+    verifyIncorrectRayOnVerticalNumberLinePreviewTab: (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 y1Pixel = originY - startingPoint * (graphHeight / range);
+            const rayArrowHeight = 42;
+            const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
+            cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                .should('have.css', 'stroke', css.color.incorrectAnswer);
+        });
+    },
+
+    /**
+     * Verifies the ray on the vertical number line does not exist on the preview tab.
+     * @param {string} direction - The direction of the ray ('up' or 'down').
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - The starting point of the ray.
+     */
+    verifyRayOnVerticalNumberLineNotExistPreviewTab: (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 y1Pixel = originY - startingPoint * (graphHeight / range);
+            const rayArrowHeight = 42;
+            const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
+            cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                .should('not.exist');
+        });
+    },
+
+    /**
+ * Verifies the ray on the vertical number line in the correct answer section.
+ * @param {string} direction - The direction of the ray ('up' or 'down').
+ * @param {number} range - The range of the number line.
+ * @param {number} startingPoint - The starting point of the ray.
+ */
+    verifyRayOnVerticalNumberLineCorrectAnswerSection: (direction, range, startingPoint) => {
+        numberLinePage.numberLineCorrectAnswerSection().then(($graphElement) => {
+            const graphWidth = $graphElement[0].clientWidth;
+            const graphHeight = $graphElement[0].clientHeight;
+            const originX = graphWidth / 2;
+            const originY = graphHeight / 2;
+            const y1Pixel = originY - startingPoint * (graphHeight / range);
+            const rayArrowHeight = 42;
+            const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
+            cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                .should('be.visible');
+        });
+    },
+
+    /**
+     * Verifies the correct ray on the vertical number line in the correct answer section.
+     * @param {string} direction - The direction of the ray ('up' or 'down').
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - The starting point of the ray.
+     */
+    verifyCorrectRayOnVerticalNumberLineCorrectAnswerSection: (direction, range, startingPoint) => {
+        numberLinePage.numberLineCorrectAnswerSection().then(($graphElement) => {
+            const graphWidth = $graphElement[0].clientWidth;
+            const graphHeight = $graphElement[0].clientHeight;
+            const originX = graphWidth / 2;
+            const originY = graphHeight / 2;
+            const y1Pixel = originY - startingPoint * (graphHeight / range);
+            const rayArrowHeight = 42;
+            const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
+            cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                .should('have.css', 'stroke', css.color.correctAnswer);
+        });
+    },
+
+    /**
+     * Verifies that the ray does not exist on the vertical number line in the correct answer section.
+     * @param {string} direction - The direction of the ray ('up' or 'down').
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - The starting point of the ray.
+     */
+    verifyRayOnVerticalNumberLineNotExistCorrectAnswerSection: (direction, range, startingPoint) => {
+        numberLinePage.numberLineCorrectAnswerSection().then(($graphElement) => {
+            const graphWidth = $graphElement[0].clientWidth;
+            const graphHeight = $graphElement[0].clientHeight;
+            const originX = graphWidth / 2;
+            const originY = graphHeight / 2;
+            const y1Pixel = originY - startingPoint * (graphHeight / range);
+            const rayArrowHeight = 42;
+            const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
+            cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg [stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
+                .should('not.exist');
+        });
+    },
+}
+
+
+const tests = {
+    ...resetPopupComponent.tests,
+    ...toolSettingsComponent.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
+    ...additionalSettingsPanel.tests,
+    ...studentViewSettingsLabelComponent.tests,
+    ...autoScoredStudentViewSettings.tests,
+    ...autoScoredSpecifyCorrectAnswerSection.tests,
+    ...createQuestionBasePage.tests,
+    ...commonComponents.tests,
+    ...autoScoredScoringPreviewTab.tests,
+    ...defaultToolDropdown.tests,
+    ...scoringSectionBaseEditTab.tests,
+    ...autoScoredScoringSectionMultiResponseType.tests,
+    ...layoutSectionComponent.tests,
+
+    verifyContentsOfSpecifyCorrectAnswerSection: () => {
+        it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
+            utilities.verifyElementVisibilityState(numberLinePage.numberLineSpecifyCorrectAnswer(), 'visible');
+            utilities.verifyElementVisibilityState(numberLinePage.numberLineToolOptionSpecifyCorrectAnswer(), 'visible');
+            utilities.verifyElementVisibilityState(numberLinePage.numberLineControlOptionSpecifyCorrectAnswer(), 'visible');
+            utilities.verifyElementVisibilityState(numberLinePage.numberLineTitleSpecifyCorrectAnswerSection(), 'exist');
+        });
+    },
+
+    /**
+   * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
+   * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
+   * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
+   */
+    verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
+        it(`The user should be able to plot points on number line in the specify correct answer section ${accordionName} accordion`, () => {
+            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer("horizontal", range, 0);
+            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer("horizontal", range, 1);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer(range, [0, 1]);
+        });
+
+        it(`When the user resets the number line in the ${accordionName} accordion, \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
+            numberLinePage.steps.selectNumberLineControlOptionSpecifyCorrectAnswerSection('Reset');
+            numberLinePage.steps.confirmReset();
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
+            if (accordionName == 'Correct') {
+                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            } else {
+                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            };
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y();
+
+        it('When the user plots on the number line then the error message should disappear', () => {
+            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer("horizontal", range, 0);
+            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer("horizontal", range, 1);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer(range, [0, 1]);
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
+
+        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(numberLinePage.numberLineSpecifyCorrectAnswer());
+        });
+    },
+
+    /**
+     * Verifies the functionality of the layout section in the edit tab.
+     * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     */
+    verifyLayoutSectionEditTabFunctionality: (orientation) => {
+        it(`When user selects ${orientation} orientation, then number line in Number line section and Specify correct answer section should be updated to ${orientation} number line`, () => {
+            numberLinePage.steps.selectOrientationToggleButton(orientation);
+            numberLinePage.steps.verifyNumberLineOrientationAndSizeNumberLineSection(orientation, '640');
+            numberLinePage.steps.verifyNumberLineOrientationAndSizeSpecifyCorrectAnswerSection(orientation, '640');
+        });
+
+        if (orientation === "Horizontal") {
+            it('When user updates value for Width input field, it should get updated in Number line section and Specify correct answer section', () => {
+                numberLinePage.steps.enterTextInWidthInputField(600);
+                numberLinePage.steps.verifyTextInWidthInputField(600);
+                numberLinePage.steps.verifyNumberLineOrientationAndSizeNumberLineSection(orientation, '600');
+                numberLinePage.steps.verifyNumberLineOrientationAndSizeSpecifyCorrectAnswerSection(orientation, '600');
+            });
+        } else {
+            it('When user updates value for Height input field, it should get updated in Number line section and Specify correct answer section', () => {
+                numberLinePage.steps.enterTextInHeightInputField(600);
+                numberLinePage.steps.verifyTextInHeightInputField(600);
+                numberLinePage.steps.verifyNumberLineOrientationAndSizeNumberLineSection(orientation, '600');
+                numberLinePage.steps.verifyNumberLineOrientationAndSizeSpecifyCorrectAnswerSection(orientation, '600');
+            });
+        }
+
+        it('When user updates value for Margin input field, it should get updated in Specify correct answer section', () => {
+            numberLinePage.steps.enterTextInMarginInputField(12);
+            numberLinePage.steps.verifyTextInMarginInputField(12);
+            numberLinePage.steps.verifyMarginForNumberLineSpecifyCorrectAnswerSection(12);
+        });
+
+        it('When user updates value for Response spacing input field, it should get updated in Number line section and Specify correct answer section', () => {
+            numberLinePage.steps.enterTextInResponseSpacingInputField(28);
+            numberLinePage.steps.verifyTextInResponseSpacingInputField(28);
+            numberLinePage.steps.verifyResponseSpacingSpecifyCorrectAnswerSection(orientation, 28);
+        });
+
+        it('When user checks Show min arrow checkbox, then arrow should be displayed on left end of number line and arrow should not be displayed on right end of number line in number line section and specify correct answer section', () => {
+            numberLinePage.steps.checkCheckbox('Show min arrow');
+            numberLinePage.steps.verifyMinArrowVisibilitySpecifyCorrectAnswerSection('visible');
+            numberLinePage.steps.verifyMinArrowVisibilityNumberLineSection('visible');
+        });
+
+        it('When user unchecks Show min arrow checkbox, then arrow should not be displayed on left end of number line in number line section and specify correct answer section', () => {
+            numberLinePage.steps.uncheckCheckbox('Show min arrow');
+            numberLinePage.steps.verifyMinArrowVisibilitySpecifyCorrectAnswerSection('hidden');
+            numberLinePage.steps.verifyMinArrowVisibilityNumberLineSection('hidden');
+        });
+
+        it('When user checks Show max arrow checkbox, then arrow should be displayed on right end of number line and arrow should not be displayed on left end of number line in number line section and specify correct answer section', () => {
+            numberLinePage.steps.checkCheckbox('Show max arrow');
+            numberLinePage.steps.verifyMaxArrowVisibilitySpecifyCorrectAnswerSection('visible');
+            numberLinePage.steps.verifyMaxArrowVisibilityNumberLineSection('visible');
+        });
+
+        it('When user unchecks Show max arrow checkbox, then arrow should not be displayed on right end of number line in number line section and specify correct answer section', () => {
+            numberLinePage.steps.uncheckCheckbox('Show max arrow');
+            numberLinePage.steps.verifyMaxArrowVisibilitySpecifyCorrectAnswerSection('hidden');
+            numberLinePage.steps.verifyMaxArrowVisibilityNumberLineSection('hidden');
+        });
+
+        //Note: Only for Label number line
+        it('When user unchecks Stagger response checkbox', () => {
+            numberLinePage.steps.uncheckCheckbox('Stagger response');
+        });
+
+        //Note: Only for Label number line
+        it('When user uncheck Stagger response checkbox', () => {
+            numberLinePage.steps.checkCheckbox('Stagger response');
+        });
+
+        it('When user unchecks Show labels checkbox, then labels on number line should disappear in number line section and specify correct answer section', () => {
+            numberLinePage.steps.uncheckCheckbox('Show labels');
+            numberLinePage.steps.verifyLabelsNotVisibleOnNumberLineNumberLineSection();
+            numberLinePage.steps.verifyLabelsNotVisibleOnNumberLineSpecifyCorrectAnswerSection();
+        });
+
+        it('When Show labels checkbox is unchecked, then Line settings and Display numbers section should be in disabled state', () => {
+            numberLinePage.steps.verifyDisplayNumbersAndLineSettingsSectionDisabled();
+        });
+
+        it('When user checks Show labels checkbox, then labels on number line should be displayed in number line section and specify correct answer section', () => {
+            numberLinePage.steps.checkCheckbox('Show labels');
+            numberLinePage.steps.verifyLabelsVisibleOnNumberLineNumberLineSection(-10, 1);
+            numberLinePage.steps.verifyLabelsVisibleOnNumberLineSpecifyCorrectAnswerSection(-10, 1);
+        });
+
+        it('When Show labels checkbox is checked, then Line settings and Display numbers section should be in enabled state', () => {
+            numberLinePage.steps.verifyDisplayNumbersAndLineSettingsSectionEnabled();
+        });
+
+        //Note: Unable to check on cypress, added to manual sheet
+        it('When user unchecks Show ticks checkbox, then ticks on number line should disappear in number line section and specify correct answer section', () => {
+
+        });
+
+        //Note: Unable to check on cypress, added to manual sheet
+        it('When user checks Show ticks checkbox, then ticks on number line should be displayed in number line section and specify correct answer section', () => {
+
+        });
+    },
+
+    /**
+    * Verifies the functionality of the layout section in the preview tab.
+    * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+    */
+    verifyLayoutSectionPreviewTabFunctionality: (orientation) => {
+        it(`When user selects ${orientation} orientation, then ${orientation} number line should be displayed in preview tab`, () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.selectOrientationToggleButton(orientation);
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyNumberLineOrientationAndSizePreviewTab(orientation, '640');
+        });
+
+        if (orientation === "Horizontal") {
+            it('When user updates value for Width input field, it should get updated in preview tab', () => {
+                numberLinePage.steps.switchToEditTab();
+                numberLinePage.steps.enterTextInWidthInputField(600);
+                numberLinePage.steps.verifyTextInWidthInputField(600);
+                numberLinePage.steps.switchToPreviewTab();
+                numberLinePage.steps.verifyNumberLineOrientationAndSizePreviewTab(orientation, '600');
+            });
+        } else {
+            it('When user updates value for Height input field, it should get updated in preview tab', () => {
+                numberLinePage.steps.switchToEditTab();
+                numberLinePage.steps.enterTextInHeightInputField(600);
+                numberLinePage.steps.verifyTextInHeightInputField(600);
+                numberLinePage.steps.switchToPreviewTab();
+                numberLinePage.steps.verifyNumberLineOrientationAndSizePreviewTab(orientation, '600');
+            });
+        }
+
+        it('When user updates value for Margin input field, it should get updated in preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.enterTextInMarginInputField(12);
+            numberLinePage.steps.verifyTextInMarginInputField(12);
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyMarginForNumberLinePreviewTab(12);
+        });
+
+        it('When user updates value for Response spacing input field, it should get updated in preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.enterTextInResponseSpacingInputField(28);
+            numberLinePage.steps.verifyTextInResponseSpacingInputField(28);
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyResponseSpacingPreviewTab(orientation, 28);
+        });
+
+        it('When user checks Show min arrow checkbox, then arrow should be displayed on left end of number line and arrow should not be displayed on right end of number line in preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.checkCheckbox('Show min arrow');
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyMinArrowVisibilityPreviewTab('visible');
+        });
+
+        it('When user unchecks Show min arrow checkbox, then arrow should not be displayed on left end of number line in preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.uncheckCheckbox('Show min arrow');
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyMinArrowVisibilityPreviewTab('hidden');
+        });
+
+        it('When user checks Show max arrow checkbox, then arrow should be displayed on right end of number line and arrow should not be displayed on left end of number line in preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.checkCheckbox('Show max arrow');
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyMaxArrowVisibilityPreviewTab('visible');
+        });
+
+        it('When user unchecks Show max arrow checkbox, then arrow should not be displayed on right end of number line in preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.uncheckCheckbox('Show max arrow');
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyMaxArrowVisibilityPreviewTab('hidden');
+        });
+
+        it('When user unchecks Show labels checkbox, then labels on number line should disappear in preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.uncheckCheckbox('Show labels');
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyLabelsNotVisibleOnNumberLinePreviewTab();
+        });
+
+        it('When user checks Show labels checkbox, then labels on number line should be displayed in preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.checkCheckbox('Show labels');
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyLabelsVisibleOnNumberLinePreviewTab(-10, 1);
+        });
+
+        //Note: Unable to check on cypress, added to manual sheet
+        it('When user unchecks Show ticks checkbox, then ticks on number line should disappear in preview tab', () => {
+
+        });
+
+        //Note: Unable to check on cypress, added to manual sheet
+        it('When user checks Show ticks checkbox, then ticks on number line should be displayed in preview tab', () => {
+
+        });
+    },
+
+    /**
+    * Verifies the functionality of the number line title popup in the edit tab.
+    * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+    */
+    verifyNumberLineTitlePopupEditTabFunctionality: (title) => {
+        it('When the user edits the Number line title and clicks on \'Cancel\' button then the changes should not be displayed in the Number line section and \'Specify correct answer\' section Number line', () => {
+            numberLinePage.steps.enterTextInTitlePopupAddLabelInputField(title);
+            numberLinePage.steps.clickOnTitlePopupCancelButton();
+            utilities.verifyInnerText(numberLinePage.numberLineTitleNumberLineSection(), 'Number line title');
+            utilities.verifyInnerText(numberLinePage.numberLineTitleSpecifyCorrectAnswerSection(), 'Number line title');
+        });
+
+        it('When the user clicks on the \'Number line title\' then the original text should be displayed in the popup', () => {
+            numberLinePage.steps.clickOnNumberLineTitle();
+            numberLinePage.steps.verifyTextInTitlePopupAddLabelInputField('Number line title');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in the Number line section and \'Specify correct answer\' section Number line', () => {
+            numberLinePage.steps.enterTextInTitlePopupAddLabelInputField(title);
+            numberLinePage.steps.clickOnTitlePopupSaveButton();
+            utilities.verifyInnerText(numberLinePage.numberLineTitleNumberLineSection(), title);
+            utilities.verifyInnerText(numberLinePage.numberLineTitleSpecifyCorrectAnswerSection(), title);
+        });
+    },
+
+    /**
+     * Verifies the functionality of the number line title popup in the preview tab.
+     * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     */
+    verifyNumberLineTitlePopupPreviewTabFunctionality: (title) => {
+        it('When the user edits the number line title and clicks on \'Cancel\' button then the changes should not be displayed in the preview tab', () => {
+            numberLinePage.steps.clickOnNumberLineTitle();
+            numberLinePage.steps.enterTextInTitlePopupAddLabelInputField(title);
+            numberLinePage.steps.clickOnTitlePopupCancelButton();
+            numberLinePage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(numberLinePage.numberLineTitlePreviewTab(), 'Number line title');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in the preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.clickOnNumberLineTitle();
+            numberLinePage.steps.enterTextInTitlePopupAddLabelInputField(title);
+            numberLinePage.steps.clickOnTitlePopupSaveButton();
+            numberLinePage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(numberLinePage.numberLineTitlePreviewTab(), title);
+        });
+    },
+
+    /**
+     * Verifies the functionality of the number line section in the edit tab.
+     * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     */
+    verifyNumberLineSectionEditTabFunctionality: (orientation) => {
+        it('When user updates value in Min input field then it should be updated in Specify correct answer section', () => {
+            numberLinePage.steps.enterTextInMinInputField(-12);
+            numberLinePage.steps.verifyTextInMinInputField(-12);
+            numberLinePage.steps.verifyLabelOnNumberLineNumberLineSection([{ value: -12, index: 0 }]);
+            numberLinePage.steps.verifyLabelOnNumberLineSpecifyCorrectAnswerSection([{ value: -12, index: 0 }]);
+        });
+
+        it('When user updates value in Max input field then it should be updated in Specify correct answer section', () => {
+            numberLinePage.steps.enterTextInMaxInputField(12);
+            numberLinePage.steps.verifyTextInMaxInputField(12);
+            numberLinePage.steps.verifyLabelOnNumberLineNumberLineSection([{ value: 12, index: 24 }]);
+            numberLinePage.steps.verifyLabelOnNumberLineSpecifyCorrectAnswerSection([{ value: 12, index: 24 }]);
+        });
+
+        //Note- Can't check ticks are not annotated so adding it to manual sheet
+        it('When user updates value in Interval input field then interval of labels and ticks should be updated in number line section and specify correct answer section', () => {
+            numberLinePage.steps.enterTextInIntervalInputField(2);
+            numberLinePage.steps.verifyTextInIntervalInputField(2);
+            numberLinePage.steps.verifyLabelsVisibleOnNumberLineNumberLineSection(-12, 2);
+            numberLinePage.steps.verifyLabelsVisibleOnNumberLineSpecifyCorrectAnswerSection(-12, 2);
+        });
+
+        //Note- Can't check ticks are not annotated so adding it to manual sheet
+        it('When user updates value in Annotate every input field then labels should be annotated appropriately and ticks should not get annotated for the number line in the number line section and the specify correct answer section.', () => {
+            cy.log('Changing interval input fields value to its default value');
+            numberLinePage.steps.enterTextInIntervalInputField(1);
+            numberLinePage.steps.enterTextInAnnotateEveryInputField(2);
+            numberLinePage.steps.verifyTextInAnnotateEveryInputField(2);
+            numberLinePage.steps.verifyAnnotatedLabelsOnNumberLineNumberLineSection(-12, 2);
+            numberLinePage.steps.verifyAnnotatedLabelsOnNumberLineSpecifyCorrectAnswerSection(-12, 2);
+        });
+
+        const displayNumbersOptions = (orientation === "Horizontal") ? ["Below line", "Above line"] : ["Left of line", "Right of line"];
+        const direction = (orientation === "Horizontal") ? "Below" : "Left of";
+        it(`When "${displayNumbersOptions[0]}" is selected, labels should be displayed ${direction} number line in both the number line section and the specify correct answer section.`, () => {
+            numberLinePage.steps.verifyDisplayNumbersToggleButtonSelected(displayNumbersOptions[0]);
+            numberLinePage.steps.verifyDisplayNumbersOrientationNumberLineSection(orientation, direction);
+            numberLinePage.steps.verifyDisplayNumbersOrientationSpecifyCorrectAnswerSection(orientation, direction);
+        });
+
+        const oppositeDirection = (orientation === "Horizontal") ? "Above" : "Right of";
+        it(`When "${displayNumbersOptions[1]}" is selected, labels should be displayed ${oppositeDirection} number line in both the number line section and the specify correct answer section.`, () => {
+            numberLinePage.steps.selectDisplayNumbersToggleButton(displayNumbersOptions[1]);
+            numberLinePage.steps.verifyDisplayNumbersOrientationNumberLineSection(orientation, oppositeDirection);
+            numberLinePage.steps.verifyDisplayNumbersOrientationSpecifyCorrectAnswerSection(orientation, oppositeDirection);
+        });
+    },
+
+    /**
+     * Verifies the functionality of the display specific annotation and line settings in the edit tab.
+     * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     */
+    verifyDisplaySpecificAnnotationAndLineSettingsEditTabFunctionality: () => {
+        lineSettingsOptions.forEach((option, index) => {
+            it(`When user selects ${option} in line settings section, then number displayed on number line should be ${option} in number line section and specify correct answer section`, () => {
+                numberLinePage.steps.selectLineSettingsToggleButton(option);
+                numberLinePage.steps.verifyLineSettingsToggleButtonSelected(option);
+                numberLinePage.steps.verifyLabelOnNumberLineNumberLineSection([{ value: numbers[index], index: 0 }]);
+                numberLinePage.steps.verifyLabelOnNumberLineSpecifyCorrectAnswerSection([{ value: numbers[index], index: 0 }]);
+            });
+        });
+
+        it('When user enters value in Display specific annotation (use semicolons to separate) input field then it should be displayed on number line in Number line section and Specify correct answer section', () => {
+            numberLinePage.steps.selectLineSettingsToggleButton(lineSettingsOptions[0]);
+            numberLinePage.steps.enterTextInDisplaySpecificAnnotationInputField('-9;');
+            numberLinePage.steps.verifyTextInDisplaySpecificAnnotationInputField('-9;');
+            numberLinePage.steps.verifyLabelOnNumberLineSpecifyCorrectAnswerSection([{ value: -9, index: 1 }]);
+            numberLinePage.steps.verifyLabelOnNumberLineNumberLineSection([{ value: -9, index: 1 }]);
+        });
+    },
+
+    /**
+     * Verifies the functionality of the number line section in the preview tab.
+     * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     */
+    verifyNumberLineSectionPreviewTabFunctionality: (orientation) => {
+        it('When user updates value in Min input field then it should be updated in preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.enterTextInMinInputField(-12);
+            numberLinePage.steps.verifyTextInMinInputField(-12);
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyLabelOnNumberLinePreviewTab([{ value: -12, index: 0 }]);
+        });
+
+        it('When user updates value in Max input field then it should be updated in preview  tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.enterTextInMaxInputField(12);
+            numberLinePage.steps.verifyTextInMaxInputField(12);
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyLabelOnNumberLinePreviewTab([{ value: 12, index: 24 }]);
+        });
+
+        //Note- Can't check ticks are not annotated so adding it to manual sheet
+        it('When user updates value in Interval input field then interval of labels and ticks should be updated in preview  tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.enterTextInIntervalInputField(2);
+            numberLinePage.steps.verifyTextInIntervalInputField(2);
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyLabelsVisibleOnNumberLinePreviewTab(-12, 2);
+        });
+
+        //Note- Can't check ticks are not annotated so adding it to manual sheet
+        it('When user updates value in Annotate every input field then labels should be annotated appropriately for the number line and ticks should not get annotated in the preview tab.', () => {
+            numberLinePage.steps.switchToEditTab();
+            cy.log('Changing interval input fields value to its default value');
+            numberLinePage.steps.enterTextInIntervalInputField(1);
+            numberLinePage.steps.enterTextInAnnotateEveryInputField(2);
+            numberLinePage.steps.verifyTextInAnnotateEveryInputField(2);
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyAnnotatedLabelsOnNumberLinePreviewTab(-12, 2);
+        });
+
+        const displayNumbersOptions = (orientation === "Horizontal") ? ["Below line", "Above line"] : ["Left of line", "Right of line"];
+        const direction = (orientation === "Horizontal") ? "Below" : "Left of";
+        it(`When ${displayNumbersOptions[0]} is selected then labels should be displayed ${direction} number line in the preview tab.`, () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.verifyDisplayNumbersToggleButtonSelected(displayNumbersOptions[0]);
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyDisplayNumbersOrientationPreviewTab(orientation, direction);
+        });
+
+        const oppositeDirection = (orientation === "Horizontal") ? "Above" : "Right of";
+        it(`When user selects ${displayNumbersOptions[1]} then labels should labels should be displayed ${oppositeDirection} number line in the preview tab.`, () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.selectDisplayNumbersToggleButton(displayNumbersOptions[1]);
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyDisplayNumbersOrientationPreviewTab(orientation, oppositeDirection);
+        });
+    },
+
+    /**
+     * Verifies the functionality of the display specific annotation and line settings in the preview tab.
+     * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     */
+    verifyDisplaySpecificAnnotationAndLineSettingsPreviewTabFunctionality: () => {
+        lineSettingsOptions.forEach((option, index) => {
+            it(`When user selects ${option} in line settings section, then number displayed on number line should be ${option} in preview tab`, () => {
+                numberLinePage.steps.switchToEditTab();
+                numberLinePage.steps.selectLineSettingsToggleButton(option);
+                numberLinePage.steps.verifyLineSettingsToggleButtonSelected(option);
+                numberLinePage.steps.switchToPreviewTab();
+                numberLinePage.steps.verifyLabelOnNumberLinePreviewTab([{ value: numbers[index], index: 0 }]);
+            });
+        });
+
+        it('When user enters value in Display specific annotation (use semicolons to separate) input field then it should be displayed on number line in preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.selectLineSettingsToggleButton(lineSettingsOptions[0]);
+            numberLinePage.steps.enterTextInDisplaySpecificAnnotationInputField('-9;');
+            numberLinePage.steps.verifyTextInDisplaySpecificAnnotationInputField('-9;');
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyLabelOnNumberLinePreviewTab([{ value: -9, index: 1 }]);
+        });
+    }
 }
 
 export const numberLinePage = {