itemengine-cypress-automation 1.0.173 → 1.0.174

package/cypress/pages/numberLinePage.js

@@ -1,6 +1,7 @@
 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';
 const css = Cypress.env('css');
+const range = 20.4472843;
 
 const selectors = {
     ...toolsAndControlsComponent,
@@ -13,7 +14,9 @@ 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'),
     //Specify correct answer
     numberLineSpecifyCorrectAnswer: () => cy.get('.ngie-accordion .ngie-jxgbox svg'),
     numberLineToolOptionSpecifyCorrectAnswer: (toolOptionAriaLabel = null) => {
@@ -36,7 +39,7 @@ const selectors = {
 
     //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[tabindex="0"]'),
+    numberLinePointPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find('svg ellipse[display="inline"]'),
     numberLineSegmentPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find('[stroke-linecap="butt"]'),
     numberLineToolOptionPreviewTab: (toolOptionAriaLabel = null) => {
         if (toolOptionAriaLabel) {
@@ -59,7 +62,7 @@ const selectors = {
     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[tabindex="0"]'),
+    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()
 }
@@ -97,86 +100,107 @@ const steps = {
     },
 
     /**
-    * This function plots points on the number line on Edit 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
+    * This function plots coordinate on the number line on the preview tab.
+    * @param {("horizontal"|"vertical")} orientation of the number line
+    * @param {number} range - The range of coordinate.
+    * @param {number[]} points - An array of coordinates to be plotted on the graph.
     */
-    plotPointOnNumberLineSpecifyCorrectAnswer: (coordinates) => {
-        coordinates.forEach(({ x, xRange }) => {
+    plotPointOnNumberLineSpecifyCorrectAnswer: (orientation, range, coordinate) => {
+        numberLinePage.numberLineSpecifyCorrectAnswer()
+            .then(($graphElement) => {
+                const graphWidth = $graphElement[0].clientWidth;
+                const graphHeight = $graphElement[0].clientHeight;
+                const originX = graphWidth / 2;
+                const originY = graphHeight / 2;
+                if (orientation === 'horizontal') {
+                    const xPixel = originX + coordinate * (graphWidth / range);
+                    numberLinePage.numberLineSpecifyCorrectAnswer()
+                        .click(xPixel, originY, { force: true });
+                } else {
+                    const yPixel = originY - coordinate * (graphWidth / range);
+                    numberLinePage.numberLineSpecifyCorrectAnswer()
+                        .click(originX, yPixel, { force: true });
+                }
+            });
+    },
+
+    /**
+    * This function verifies plotted points on the number line on the Edit tab.
+    * @param {number} range - The range of x coordinates.
+    * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
+    */
+    verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer: (range, coordinates) => {
+        coordinates.forEach(x => {
             numberLinePage.numberLineSpecifyCorrectAnswer()
                 .then(($graphElement) => {
                     const graphWidth = $graphElement[0].clientWidth;
                     const graphHeight = $graphElement[0].clientHeight;
                     const originX = graphWidth / 2;
                     const originY = graphHeight / 2;
-                    const xPixel = originX + x * (graphWidth / xRange);
-                    numberLinePage.numberLineSpecifyCorrectAnswer()
-                        .click(xPixel, originY, { force: true });
+                    const xPixel = originX + x * (graphWidth / range);
+                    cy.get(`.ngie-accordion .ngie-jxgbox svg ellipse[cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(originY)}"][tabindex="0"]`)
+                        .should('exist');
                 });
         });
     },
 
     /**
-    * This function verifies plotted points on the number line on Edit 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
-    */
-    verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer: (coordinates) => {
-        coordinates.forEach(({ x, xRange }) => {
+   * This function verifies the presence of line segments on the number line in the edit tab, given a uniform range for all coordinates.
+   * @param {number} range - The uniform range of coordinates.
+   * @param {Object[]} coordinates - An array of objects, each with x1 and x2 properties representing the points of each line segment.
+   * Usage - verifyLineSegmentOnNumberLineSpecifyCorrectAnswer(20, [{ x1: 2, x2: 4 }]);
+   */
+    verifyLineSegmentOnNumberLineSpecifyCorrectAnswer: (range, coordinates) => {
+        coordinates.forEach(({ x1, x2 }) => {
             numberLinePage.numberLineSpecifyCorrectAnswer()
                 .then(($graphElement) => {
                     const graphWidth = $graphElement[0].clientWidth;
                     const graphHeight = $graphElement[0].clientHeight;
                     const originX = graphWidth / 2;
                     const originY = graphHeight / 2;
-                    const xPixel = originX + x * (graphWidth / xRange);
-                    cy.get(`.ngie-accordion .ngie-jxgbox svg ellipse[cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(originY)}"][tabindex="0"]`)
-                        .should('exist');
+                    const x1Pixel = originX + x1 * (graphWidth / range);
+                    const x2Pixel = originX + x2 * (graphWidth / range);
+                    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');
                 });
         });
     },
 
     /**
-    * This verifies line segment on the number line on Edit tab
-    * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
-    * @param {number} coordinates[].x1 - x coordinate to be plotted on the graph
-    * @param {number} coordinates[].x1Range - range of x coordinate
-    * @param {number} coordinates[].x2 - x coordinate to be plotted on the graph
-    * @param {number} coordinates[].x2Range - range of x coordinate
-    */
-    verifyLineSegmentOnNumberLineSpecifyCorrectAnswer: (coordinates) => {
-        coordinates.forEach(({ x1, x1Range, x2, x2Range }) => {
+     * Verifies the presence of a ray on the number line in the "Specify Correct Answer" section.
+     * @param {("left"|"right")} direction - The direction of the ray ("left" or "right").
+     * @param {number} range - The range of the number line.
+     * @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 + x1 * (graphWidth / x1Range);
-                    const x2Pixel = originX + x2 * (graphWidth / x2Range);
+                    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');
                 });
-        });
     },
 
     /**
-    * This function verifies plotted points not exist on the number line on Edit 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
+    * This function verifies plotted points on the number line do not exist on the Edit tab.
+    * @param {number} range - The range of x coordinates.
+    * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
     */
-    verifyPointsPlottedOnNumberLineNotExistSpecifyCorrectAnswer: (coordinates) => {
-        coordinates.forEach(({ x, xRange }) => {
+    verifyPointsPlottedOnNumberLineNotExistSpecifyCorrectAnswer: (range, coordinates) => {
+        coordinates.forEach(x => {
             numberLinePage.numberLineSpecifyCorrectAnswer()
                 .then(($graphElement) => {
                     const graphWidth = $graphElement[0].clientWidth;
                     const graphHeight = $graphElement[0].clientHeight;
                     const originX = graphWidth / 2;
                     const originY = graphHeight / 2;
-                    const xPixel = originX + x * (graphWidth / xRange);
+                    const xPixel = originX + x * (graphWidth / range);
                     cy.get(`.ngie-accordion .ngie-jxgbox svg ellipse[cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(originY)}"][tabindex="0"]`)
                         .should('not.exist');
                 });
@@ -198,41 +222,45 @@ const steps = {
     },
 
     /**
-    * This function plots points on the number line on preview 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
+    * This function plots coordinate on the number line on the preview tab.
+    * @param {("horizontal"|"vertical")} orientation of the number line
+    * @param {number} range - The range of coordinate.
+    * @param {number[]} points - An array of coordinates to be plotted on the graph.
+    * Usage - plotPointOnNumberLinePreviewTab('vertical', 20, 2);
     */
-    plotPointOnNumberLinePreviewTab: (coordinates) => {
-        coordinates.forEach(({ x, xRange }) => {
-            numberLinePage.numberLinePreviewTab()
-                .then(($graphElement) => {
-                    const graphWidth = $graphElement[0].clientWidth;
-                    const graphHeight = $graphElement[0].clientHeight;
-                    const originX = graphWidth / 2;
-                    const originY = graphHeight / 2;
-                    const xPixel = originX + x * (graphWidth / xRange);
+    plotPointOnNumberLinePreviewTab: (orientation, range, coordinate) => {
+        numberLinePage.numberLinePreviewTab()
+            .then(($graphElement) => {
+                const graphWidth = $graphElement[0].clientWidth;
+                const graphHeight = $graphElement[0].clientHeight;
+                const originX = graphWidth / 2;
+                const originY = graphHeight / 2;
+                if (orientation === 'horizontal') {
+                    const xPixel = originX + coordinate * (graphWidth / range);
                     numberLinePage.numberLinePreviewTab()
                         .click(xPixel, originY, { force: true });
-                });
-        });
+                } else {
+                    const yPixel = originY + coordinate * (graphWidth / range);
+                    numberLinePage.numberLinePreviewTab()
+                        .click(originX, yPixel, { force: true });
+                }
+            });
     },
 
     /**
-    * This verifies plotted points on the number line on preview 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
+    * This function verifies plotted points on the number line on the preview tab.
+    * @param {number} range - The range of x coordinates.
+    * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
     */
-    verifyPointsPlottedOnNumberLinePreviewTab: (coordinates) => {
-        coordinates.forEach(({ x, xRange }) => {
+    verifyPointsPlottedOnNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(x => {
             numberLinePage.numberLinePreviewTab()
                 .then(($graphElement) => {
                     const graphWidth = $graphElement[0].clientWidth;
                     const graphHeight = $graphElement[0].clientHeight;
                     const originX = graphWidth / 2;
                     const originY = graphHeight / 2;
-                    const xPixel = originX + x * (graphWidth / xRange);
+                    const xPixel = originX + x * (graphWidth / range);
                     cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(originY)}"][tabindex="0"]`)
                         .should('exist');
                 });
@@ -240,20 +268,19 @@ const steps = {
     },
 
     /**
-    * This function verifies points not exist on the number line on preview 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
+    * This function verifies plotted points on the number line do not exist on the preview tab.
+    * @param {number} range - The range of x coordinates.
+    * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
     */
-    verifyPointsNotExistOnNumberLinePreviewTab: (coordinates) => {
-        coordinates.forEach(({ x, xRange }) => {
+    verifyPointsNotExistOnNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(x => {
             numberLinePage.numberLinePreviewTab()
                 .then(($graphElement) => {
                     const graphWidth = $graphElement[0].clientWidth;
                     const graphHeight = $graphElement[0].clientHeight;
                     const originX = graphWidth / 2;
                     const originY = graphHeight / 2;
-                    const xPixel = originX + x * (graphWidth / xRange);
+                    const xPixel = originX + x * (graphWidth / range);
                     cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(originY)}"][tabindex="0"]`)
                         .should('not.exist');
                 });
@@ -261,90 +288,103 @@ const steps = {
     },
 
     /**
-    * This function verifies correct points on the number line on Edit 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
-    */
-    verifyCorrectPointsOnNumberLinePreviewTab: (coordinates) => {
-        coordinates.forEach(({ x, xRange }) => {
+     * This function verifies correct plotted points on the number line.
+     * @param {number} range - The range of x coordinates.
+     * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
+     */
+    verifyCorrectPointsOnNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(x => {
             numberLinePage.numberLinePreviewTab()
                 .then(($graphElement) => {
                     const graphWidth = $graphElement[0].clientWidth;
                     const graphHeight = $graphElement[0].clientHeight;
                     const originX = graphWidth / 2;
                     const originY = graphHeight / 2;
-                    const xPixel = originX + x * (graphWidth / xRange);
-                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(originY)}"][tabindex="0"]`)
+                    const xPixel = originX + x * (graphWidth / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(originY)}"][display="inline"]`)
                         .should('have.css', 'stroke', css.color.correctAnswer);
                 });
         });
     },
 
     /**
-    * This function verifies incorrect points on the number line on preview 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
+    * This function verifies incorrect plotted points on the number line
+    * @param {number} range - The range of x coordinates.
+    * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
     */
-    verifyIncorrectPointsOnNumberLinePreviewTab: (coordinates) => {
-        coordinates.forEach(({ x, xRange }) => {
+    verifyIncorrectPointsOnNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(x => {
             numberLinePage.numberLinePreviewTab()
                 .then(($graphElement) => {
                     const graphWidth = $graphElement[0].clientWidth;
                     const graphHeight = $graphElement[0].clientHeight;
                     const originX = graphWidth / 2;
                     const originY = graphHeight / 2;
-                    const xPixel = originX + x * (graphWidth / xRange);
-                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(originY)}"][tabindex="0"]`)
+                    const xPixel = originX + x * (graphWidth / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(originY)}"][display="inline"]`)
                         .should('have.css', 'stroke', css.color.incorrectAnswer);
                 });
         });
     },
 
     /**
-    * This function plots points on the number line on Edit tab
-    * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
-    * @param {number} coordinates[].x1 - x coordinate to be plotted on the graph
-    * @param {number} coordinates[].x1Range - range of x coordinate
-    * @param {number} coordinates[].x2 - x coordinate to be plotted on the graph
-    * @param {number} coordinates[].x2Range - range of x coordinate
+    * This function verifies the presence of line segments on the number line in the preview tab, given a uniform range for all coordinates.
+    * @param {number} range - The uniform range of coordinates.
+    * @param {Object[]} coordinates - An array of objects, each with x1 and x2 properties representing the points of each line segment.
+    * Usage - verifyLineSegmentOnNumberLinePreviewTab(20, [{ x1: 2, x2: 4 }]);
     */
-    verifyLineSegmentOnNumberLinePreviewTab: (coordinates) => {
-        coordinates.forEach(({ x1, x1Range, x2, x2Range }) => {
+    verifyLineSegmentOnNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(({ x1, x2 }) => {
             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 + x1 * (graphWidth / x1Range);
-                    const x2Pixel = originX + x2 * (graphWidth / x2Range);
+                    const x1Pixel = originX + x1 * (graphWidth / range);
+                    const x2Pixel = originX + x2 * (graphWidth / range);
                     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');
                 });
         });
     },
 
+    /**
+     * Verifies the presence of a ray on the number line in the "Preview" tab.
+     * @param {("left" | "right")} direction - The direction of the ray ("left" or "right").
+     * @param {number} range - The range of the number line.
+     * @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');
+                });
+    },
 
     /**
-    * This function verifies correct points on the number line on Edit tab
-    * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
-    * @param {number} coordinates[].x1 - x coordinate to be plotted on the graph
-    * @param {number} coordinates[].x1Range - range of x coordinate
-    * @param {number} coordinates[].x2 - x coordinate to be plotted on the graph
-    * @param {number} coordinates[].x2Range - range of x coordinate
+    * This function verifies the presence of correct line segments on the number line in the preview tab, given a uniform range for all coordinates.
+    * @param {number} range - The uniform range of coordinates.
+    * @param {Object[]} coordinates - An array of objects, each with x1 and x2 properties representing the points of each line segment.
     */
-    verifyCorrectLineSegmentOnNumberLinePreviewTab: (coordinates) => {
-        coordinates.forEach(({ x1, x1Range, x2, x2Range }) => {
+    verifyCorrectLineSegmentOnNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(({ x1, x2 }) => {
             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 + x1 * (graphWidth / x1Range);
-                    const x2Pixel = originX + x2 * (graphWidth / x2Range);
+                    const x1Pixel = originX + x1 * (graphWidth / range);
+                    const x2Pixel = originX + x2 * (graphWidth / range);
                     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);
                 });
@@ -352,23 +392,41 @@ const steps = {
     },
 
     /**
-    * This function verifies incorrect points on the number line on Edit tab
-    * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
-    * @param {number} coordinates[].x1 - x coordinate to be plotted on the graph
-    * @param {number} coordinates[].x1Range - range of x coordinate
-    * @param {number} coordinates[].x2 - x coordinate to be plotted on the graph
-    * @param {number} coordinates[].x2Range - range of x coordinate
-    */
-    verifyIncorrectLineSegmentOnNumberLinePreviewTab: (coordinates) => {
-        coordinates.forEach(({ x1, x1Range, x2, x2Range }) => {
+     * Verifies the presence of a correct ray on the number line in the "Preview" tab.
+     * @param {("left" | "right")} direction - The direction of the ray ("left" or "right").
+     * @param {number} range - The range of the number line.
+     * @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);
+                });
+    },
+
+    /**
+   * This function verifies the presence of incorrect line segments on the number line in the preview tab, given a uniform range for all coordinates.
+   * @param {number} range - The uniform range of coordinates.
+   * @param {Object[]} coordinates - An array of objects, each with x1 and x2 properties representing the points of each line segment.
+   */
+    verifyIncorrectLineSegmentOnNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(({ x1, x2 }) => {
             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 + x1 * (graphWidth / x1Range);
-                    const x2Pixel = originX + x2 * (graphWidth / x2Range);
+                    const x1Pixel = originX + x1 * (graphWidth / range);
+                    const x2Pixel = originX + x2 * (graphWidth / range);
                     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);
                 });
@@ -376,29 +434,69 @@ const steps = {
     },
 
     /**
-    * This function verifies points does not exist on the number line on Edit tab
-    * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
-    * @param {number} coordinates[].x1 - x coordinate to be plotted on the graph
-    * @param {number} coordinates[].x1Range - range of x coordinate
-    * @param {number} coordinates[].x2 - x coordinate to be plotted on the graph
-    * @param {number} coordinates[].x2Range - range of x coordinate
+     * Verifies the presence of an incorrect ray on the number line in the "Preview" tab.
+     * @param { ("left" | "right")} direction - The direction of the ray ("left" or "right").
+     * @param {number} range - The range of the number line.
+     * @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);
+                });
+    },
+
+    /**
+    * This function verifies points does not exist on the number line on Edit tab, given a uniform range for all coordinates.
+    * @param {number} range - The uniform range of coordinates.
+    * @param {Object[]} coordinates - An array of objects, each with x1 and x2 properties representing the points of each line segment.
+    * Usage - verifyLineSegmentOnNumberLineNotExistPreviewTab(20, [{ x1: 2, x2: 4 }]);
     */
-    verifyLineSegmentOnNumberLineNotExistPreviewTab: (coordinates) => {
-        coordinates.forEach(({ x1, x1Range, x2, x2Range }) => {
+    verifyLineSegmentOnNumberLineNotExistPreviewTab: (range, coordinates) => {
+        coordinates.forEach(({ x1, x2 }) => {
             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 + x1 * (graphWidth / x1Range);
-                    const x2Pixel = originX + x2 * (graphWidth / x2Range);
-                    cy.get(`[class*="PreviewTabstyles__ContentWrapper"] .ngie-jxgbox svg [stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
+                    const x1Pixel = originX + x1 * (graphWidth / range);
+                    const x2Pixel = originX + x2 * (graphWidth / range);
+                    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('not.exist');
                 });
         });
     },
 
+    /**
+     * Verifies the absence of a ray on the number line in the "Preview" tab.
+     * @param {("left"| "right")} direction - The direction of the ray ("left" or "right").
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - It represents starting point of ray
+    */
+    verifyRayOnNumberLineNotExistPreviewTab: (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('not.exist');
+            });
+    },
+
     /**
      * @description This function selects the tool option from graph
      * @param {string} toolOption aria label of the tool option to be selected
@@ -457,23 +555,23 @@ const steps = {
                 .should('not.have.class', 'single-select-toggle-button-selected');
         });
     },
-    //Correct answer section 
 
+    //Correct answer section 
     /**
     * This function verifies plotted points on the 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
     */
-    verifyPointsPlottedOnNumberLineCorrectAnswerSection: (coordinates) => {
-        coordinates.forEach(({ x, xRange }) => {
+    verifyPointsPlottedOnNumberLineCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(x => {
             numberLinePage.numberLineCorrectAnswerSection()
                 .then(($graphElement) => {
                     const graphWidth = $graphElement[0].clientWidth;
                     const graphHeight = $graphElement[0].clientHeight;
                     const originX = graphWidth / 2;
                     const originY = graphHeight / 2;
-                    const xPixel = originX + x * (graphWidth / xRange);
+                    const xPixel = originX + x * (graphWidth / range);
                     cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg ellipse[cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(originY)}"][pointer-events="visiblePainted"]`)
                         .should('exist');
                 });
@@ -486,85 +584,79 @@ const steps = {
     * @param {number} coordinates[].x - x coordinate to be plotted on the graph
     * @param {number} coordinates[].xRange - range of x coordinate
     */
-    verifyCorrectPointsOnNumberLineCorrectAnswerSection: (coordinates) => {
-        coordinates.forEach(({ x, xRange }) => {
+    verifyCorrectPointsOnNumberLineCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(x => {
             numberLinePage.numberLineCorrectAnswerSection()
                 .then(($graphElement) => {
                     const graphWidth = $graphElement[0].clientWidth;
                     const graphHeight = $graphElement[0].clientHeight;
                     const originX = graphWidth / 2;
                     const originY = graphHeight / 2;
-                    const xPixel = originX + x * (graphWidth / xRange);
-                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg ellipse[cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(originY)}"][pointer-events="visiblePainted"]`)
+                    const xPixel = originX + x * (graphWidth / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg ellipse[cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(originY)}"][display="inline"]`)
                         .should('have.css', 'stroke', css.color.correctAnswer);
                 });
         });
     },
 
-
     /**
-    * This function verifies incorrect plotted points on the 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
+    * This function verifies the presence of line segments on the number line in the preview tab, given a uniform range for all coordinates.
+    * @param {number} range - The uniform range of coordinates.
+    * @param {Object[]} coordinates - An array of objects, each with x1 and x2 properties representing the points of each line segment.
+    * Usage - verifyLineSegmentOnNumberLineCorrectAnswerSection(20, [{ x1: 2, x2: 4 }]);
     */
-    verifyIncorrectPointsOnNumberLineCorrectAnswerSection: (coordinates) => {
-        coordinates.forEach(({ x, xRange }) => {
+    verifyLineSegmentOnNumberLineCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(({ x1, x2 }) => {
             numberLinePage.numberLineCorrectAnswerSection()
                 .then(($graphElement) => {
                     const graphWidth = $graphElement[0].clientWidth;
                     const graphHeight = $graphElement[0].clientHeight;
                     const originX = graphWidth / 2;
                     const originY = graphHeight / 2;
-                    const xPixel = originX + x * (graphWidth / xRange);
-                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg ellipse[cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(originY)}"][pointer-events="visiblePainted"]`)
-                        .should('have.css', 'stroke', css.color.incorrectAnswer);
+                    const x1Pixel = originX + x1 * (graphWidth / range);
+                    const x2Pixel = originX + x2 * (graphWidth / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
+                        .should('be.visible');
                 });
         });
     },
 
     /**
-   * This function verifies line plotted points on the number line on c tab
-   * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
-   * @param {number} coordinates[].x1 - x coordinate to be plotted on the graph
-   * @param {number} coordinates[].x1Range - range of x coordinate
-   * @param {number} coordinates[].x2 - x coordinate to be plotted on the graph
-   * @param {number} coordinates[].x2Range - range of x coordinate
-   */
-    verifyLineSegmentOnNumberLineCorrectAnswerSection: (coordinates) => {
-        coordinates.forEach(({ x1, x1Range, x2, x2Range }) => {
-            numberLinePage.numberLineCorrectAnswerSection()
-                .then(($graphElement) => {
-                    const graphWidth = $graphElement[0].clientWidth;
-                    const graphHeight = $graphElement[0].clientHeight;
-                    const originX = graphWidth / 2;
-                    const originY = graphHeight / 2;
-                    const x1Pixel = originX + x1 * (graphWidth / x1Range);
-                    const x2Pixel = originX + x2 * (graphWidth / x2Range);
-                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
-                        .should('be.visible');
-                });
-        });
+     * Verifies the presence of a ray on the number line in the "Correct Answer" section.
+     * @param {("left" | "right")} direction - The direction of the ray ("left" or "right").
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - It representing the coordinates of the starting point of the ray.
+     */
+    verifyRayOnNumberLineCorrectAnswerSection: (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 x1Pixel = originX + startingPoint * (graphWidth / range);
+                const rayArrowWidth = 42;
+                const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
+                    .should('be.visible');
+            });
     },
 
     /**
-   * This function verifies correct plotted points on the number line on c tab
-   * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
-   * @param {number} coordinates[].x1 - x coordinate to be plotted on the graph
-   * @param {number} coordinates[].x1Range - range of x coordinate
-   * @param {number} coordinates[].x2 - x coordinate to be plotted on the graph
-   * @param {number} coordinates[].x2Range - range of x coordinate
-   */
-    verifyCorrectLineSegmentOnNumberLineCorrectAnswerSection: (coordinates) => {
-        coordinates.forEach(({ x1, x1Range, x2, x2Range }) => {
+     * This function verifies the presence of correct line segments on the number line in the preview tab, given a uniform range for all coordinates.
+     * @param {number} range - The uniform range of coordinates.
+     * @param {Object[]} coordinates - An array of objects, each with x1 and x2 properties representing the points of each line segment.
+     */
+    verifyCorrectLineSegmentOnNumberLineCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(({ x1, x2 }) => {
             numberLinePage.numberLineCorrectAnswerSection()
                 .then(($graphElement) => {
                     const graphWidth = $graphElement[0].clientWidth;
                     const graphHeight = $graphElement[0].clientHeight;
                     const originX = graphWidth / 2;
                     const originY = graphHeight / 2;
-                    const x1Pixel = originX + x1 * (graphWidth / x1Range);
-                    const x2Pixel = originX + x2 * (graphWidth / x2Range);
+                    const x1Pixel = originX + x1 * (graphWidth / range);
+                    const x2Pixel = originX + x2 * (graphWidth / range);
                     cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).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);
                 });
@@ -572,53 +664,69 @@ const steps = {
     },
 
     /**
-   * This function verifies incorrect plotted points on the number line on c tab
-   * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
-   * @param {number} coordinates[].x1 - x coordinate to be plotted on the graph
-   * @param {number} coordinates[].x1Range - range of x coordinate
-   * @param {number} coordinates[].x2 - x coordinate to be plotted on the graph
-   * @param {number} coordinates[].x2Range - range of x coordinate
-   */
-    verifyIncorrectLineSegmentOnNumberLineCorrectAnswerSection: (coordinates) => {
-        coordinates.forEach(({ x1, x1Range, x2, x2Range }) => {
-            numberLinePage.numberLineCorrectAnswerSection()
-                .then(($graphElement) => {
-                    const graphWidth = $graphElement[0].clientWidth;
-                    const graphHeight = $graphElement[0].clientHeight;
-                    const originX = graphWidth / 2;
-                    const originY = graphHeight / 2;
-                    const x1Pixel = originX + x1 * (graphWidth / x1Range);
-                    const x2Pixel = originX + x2 * (graphWidth / x2Range);
-                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).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);
-                });
-        });
+     * Verifies the presence of a correct ray on the number line in the "Correct Answer" section.
+     * @param {("left" | "right")} direction - The direction of the ray ("left" or "right").
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - It representing the starting point of the ray.
+     */
+    verifyCorrectRayOnNumberLineCorrectAnswerSection: (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 x1Pixel = originX + startingPoint * (graphWidth / range);
+                const rayArrowWidth = 42;
+                const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).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);
+            });
     },
 
     /**
-   * This function verifies plotted points not exist on the number line on c tab
-   * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
-   * @param {number} coordinates[].x1 - x coordinate to be plotted on the graph
-   * @param {number} coordinates[].x1Range - range of x coordinate
-   * @param {number} coordinates[].x2 - x coordinate to be plotted on the graph
-   * @param {number} coordinates[].x2Range - range of x coordinate
-   */
-    verifyLineSegmentOnNumberLineNotExistCorrectAnswerSection: (coordinates) => {
-        coordinates.forEach(({ x1, x1Range, x2, x2Range }) => {
+     * This function verifies the presence of line segments do not exist on the number line in the preview tab, given a uniform range for all coordinates.
+     * @param {number} range - The uniform range of coordinates.
+     * @param {Object[]} coordinates - An array of objects, each with x1 and x2 properties representing the points of each line segment.
+     * Usage - verifyLineSegmentOnNumberLineCorrectAnswerSection(20, [{ x1: 2, x2: 4 }]);
+     */
+    verifyLineSegmentOnNumberLineNotExistCorrectAnswerSection: (range, coordinates) => {
+        coordinates.forEach(({ x1, x2 }) => {
             numberLinePage.numberLineCorrectAnswerSection()
                 .then(($graphElement) => {
                     const graphWidth = $graphElement[0].clientWidth;
                     const graphHeight = $graphElement[0].clientHeight;
                     const originX = graphWidth / 2;
                     const originY = graphHeight / 2;
-                    const x1Pixel = originX + x1 * (graphWidth / x1Range);
-                    const x2Pixel = originX + x2 * (graphWidth / x2Range);
+                    const x1Pixel = originX + x1 * (graphWidth / range);
+                    const x2Pixel = originX + x2 * (graphWidth / range);
                     cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg [stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
                         .should('not.exist');
                 });
         });
     },
 
+    /**
+     * Verifies the ray doesn't exist on the number line in the "Correct Answer" section.
+     * @param {("left" | "right")} direction - The direction of the ray ("left" or "right").
+     * @param {number} range - The range of the number line.
+     * @param {number} startingPoint - It representing the starting point of the ray.
+     */
+    verifyRayOnNumberLineNotExistCorrectAnswerSection: (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 x1Pixel = originX + startingPoint * (graphWidth / range);
+                const rayArrowWidth = 42;
+                const x2Pixel = direction === "left" ? rayArrowWidth : graphWidth - rayArrowWidth;
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg [stroke-linecap="butt"][x1*="${Math.floor(x1Pixel)}"][y1*="${Math.floor(originY)}"][x2*="${Math.floor(x2Pixel)}"][y2*="${Math.floor(originY)}"]`)
+                    .should('not.exist');
+            });
+    },
+
     verifyPlotNumberLineSelected: () => {
         numberLinePage.plotNumberLineToggleButton()
             .should('have.attr', 'aria-selected', 'true');
@@ -644,6 +752,23 @@ const steps = {
                     utilities.verifyElementVisibilityState(numberLinePage.incorrectIcon(), 'visible');
                 }
             });
+    },
+
+    /**
+     * 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.
+     */
+    enterValueInLimitNumberOfResponsesInputField: (value) => {
+        numberLinePage.limitNumberOfResponsesInputField()
+            .clear()
+            .type(value)
+            .blur()
+    },
+
+    uncheckStaggerResponseCheckbox: () => {
+        numberLinePage.staggerResponseCheckbox()
+            .click();
     }
 }
 
@@ -678,8 +803,9 @@ const tests = {
    */
     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([{ x: 0, xRange: 20 }, { x: 1, xRange: 20 }]);
-            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer([{ x: 0, xRange: 20 }, { x: 1, xRange: 20 }]);
+            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`, () => {
@@ -703,8 +829,9 @@ const tests = {
         autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y();
 
         it('When the user plots on the number line then the error message should disappear', () => {
-            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer([{ x: 0, xRange: 20 }, { x: 1, xRange: 20 }]);
-            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer([{ x: 0, xRange: 20 }, { x: 1, xRange: 20 }]);
+            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer("horizontal", range, 0);
+            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer("horizontal", range, 1);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer(range, [0, 1]);
         });
 
         autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);