itemengine-cypress-automation 1.0.166-migrationScripts-b8c79a0.0 → 1.0.167-repoUpdate10April-1465c8c.0

package/cypress/pages/numberLinePage.js

@@ -0,0 +1,723 @@
+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 selectors = {
+    ...toolsAndControlsComponent,
+    ...questionInstructionsComponent,
+    ...resetPopupComponent,
+    ...additionalSettingsPanel,
+    ...autoScoredStudentViewSettings,
+    ...autoScoredScoringPreviewTab,
+    ...randomizeOptionsComponent,
+    ...commonComponents,
+    ...defaultToolDropdown,
+    ...autoScoredScoringSectionMultiResponseType,
+
+    //Specify correct answer
+    numberLineSpecifyCorrectAnswer: () => cy.get('.ngie-accordion .ngie-jxgbox svg'),
+    numberLineToolOptionSpecifyCorrectAnswer: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get(`.graph-tools-wrapper .single-select-toggle-group-double button[aria-label*="${toolOptionAriaLabel}"]`).eq(0)
+        } else {
+            return cy.get('.graph-tools-wrapper .single-select-toggle-group-double button')
+        }
+    },
+    numberLineControlOptionSpecifyCorrectAnswer: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get(`[class*="GraphingToolsstyles__ControlsWrapper"] button[aria-label*="${toolOptionAriaLabel}"]`)
+        } else {
+            return cy.get('[class*="GraphingToolsstyles__ControlsWrapper"] button')
+        }
+    },
+    numberLineTitleSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-accordion [class*="LineGraphstyles__TitleText"]'),
+    plotNumberLineToggleButton: () => cy.get('[data-ngie-testid="plot-number-line-tab"]'),
+    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[tabindex="0"]'),
+    numberLineSegmentPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find('[stroke-linecap="butt"]'),
+    numberLineToolOptionPreviewTab: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get(`[class*="question-preview-wrapper"] .graph-tools-wrapper .single-select-toggle-group-double button[aria-label*="${toolOptionAriaLabel}"]`).eq(0)
+        } else {
+            return cy.get('[class*="question-preview-wrapper"] .graph-tools-wrapper .single-select-toggle-group-double button')
+        }
+    },
+    numberLineControlOptionPreviewTab: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get(`[class*="question-preview-wrapper"] [class*="ControlsWrapper"] button[aria-label*="${toolOptionAriaLabel}"]`)
+        } else {
+            return cy.get('[class*="question-preview-wrapper"] [class*="ControlsWrapper"] button')
+        }
+    },
+    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[tabindex="0"]'),
+    correctIncorrectAnswerTextWrapper: () => cy.get('[class*="CorrectIncorrectWrapper"]'),
+    numberLineTitleCorrectAnswerSection: () => cy.get('[class*="LineGraphstyles__TitleText"]').last()
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...toolsAndControlsComponent.steps,
+    ...questionInstructionsComponent.steps,
+    ...resetPopupComponent.steps,
+    ...scoringSectionBaseEditTab.steps,
+    ...additionalSettingsPanel.steps,
+    ...autoScoredStudentViewSettings.steps,
+    ...autoScoredScoringPreviewTab.steps,
+    ...autoScoredSpecifyCorrectAnswerSection.steps,
+    ...commonComponents.steps,
+    ...autoScoredScoringSectionMultiResponseType.steps,
+    ...defaultToolDropdown.steps,
+
+    /**
+     * @description This function selects the tool option from graph
+     * @param {string} toolOption aria label of the tool option to be selected
+     */
+    selectNumberLineToolOptionSpecifyCorrectAnswer: (toolOption) => {
+        numberLinePage.numberLineToolOptionSpecifyCorrectAnswer(toolOption)
+            .click();
+    },
+
+    /**
+    * @description This function selects the control option from graph
+    * @param {string} controlOption aria label of the control option to be selected
+    */
+    selectNumberLineControlOptionSpecifyCorrectAnswerSection: (controlOption) => {
+        numberLinePage.numberLineControlOptionSpecifyCorrectAnswer(controlOption)
+            .click();
+    },
+
+    /**
+    * 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
+    */
+    plotPointOnNumberLineSpecifyCorrectAnswer: (coordinates) => {
+        coordinates.forEach(({ x, xRange }) => {
+            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 });
+                });
+        });
+    },
+
+    /**
+    * 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 }) => {
+            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');
+                });
+        });
+    },
+
+    /**
+    * 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 }) => {
+            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);
+                    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
+    */
+    verifyPointsPlottedOnNumberLineNotExistSpecifyCorrectAnswer: (coordinates) => {
+        coordinates.forEach(({ x, xRange }) => {
+            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('not.exist');
+                });
+        });
+    },
+
+    verifyPointsPerResponseLabel: () => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'Points per response:\n-');
+        utilities.verifyElementVisibilityState(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'visible');
+    },
+
+    /**
+    * @param {number} optionIndex - The index of the option to verify the partial equal weights points per response score.
+    * @param {number} points - The expected points value to be verified.
+    * @description Verifies the partial equal weights points per response score for a specific option in the specify correct answer section for a multi-response type question.
+    */
+    verifyPartialEqualWeightsPointsPerResponseScore: (points) => {
+        utilities.verifyInnerText(numberLinePage.partialEqualWeightsPointsPerResponseScore(), `${points}`);
+    },
+
+    /**
+    * 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
+    */
+    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);
+                    numberLinePage.numberLinePreviewTab()
+                        .click(xPixel, originY, { 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
+    */
+    verifyPointsPlottedOnNumberLinePreviewTab: (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);
+                    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');
+                });
+        });
+    },
+
+    /**
+    * 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
+    */
+    verifyPointsNotExistOnNumberLinePreviewTab: (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);
+                    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');
+                });
+        });
+    },
+
+    /**
+    * 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 }) => {
+            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"]`)
+                        .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
+    */
+    verifyIncorrectPointsOnNumberLinePreviewTab: (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);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(xPixel)}"][cy*="${Math.floor(originY)}"][tabindex="0"]`)
+                        .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
+    */
+    verifyLineSegmentOnNumberLinePreviewTab: (coordinates) => {
+        coordinates.forEach(({ x1, x1Range, x2, x2Range }) => {
+            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*="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
+    */
+    verifyCorrectLineSegmentOnNumberLinePreviewTab: (coordinates) => {
+        coordinates.forEach(({ x1, x1Range, x2, x2Range }) => {
+            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*="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 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 }) => {
+            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*="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
+    * @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
+    */
+    verifyLineSegmentOnNumberLineNotExistPreviewTab: (coordinates) => {
+        coordinates.forEach(({ x1, x1Range, x2, x2Range }) => {
+            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)}"]`)
+                        .should('not.exist');
+                });
+        });
+    },
+
+    /**
+     * @description This function selects the tool option from graph
+     * @param {string} toolOption aria label of the tool option to be selected
+     */
+    selectNumberLineToolOptionPreviewTab: (toolOption) => {
+        numberLinePage.numberLineToolOptionPreviewTab(toolOption)
+            .click();
+    },
+
+    /**
+    * @description This function verifies the tool option is in selected state
+    * @param {string} toolOption aria label of the tool option to be verified selected
+    */
+    verifyToolOptionSelectedPreviewTab: (toolOptionAriaLabel) => {
+        numberLinePage.numberLineToolOptionPreviewTab(toolOptionAriaLabel)
+            .should('have.class', 'single-select-toggle-button-selected');
+    },
+
+    /**
+    * @description This function verifies the tool option is not in selected state
+    * @param {string} toolOption aria label of the tool option to be verified not selected
+    */
+    verifyToolOptionNotSelectedPreviewTab: (toolOptionAriaLabelArray) => {
+        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
+            numberLinePage.numberLineToolOptionPreviewTab(toolOptionAriaLabel)
+                .should('not.have.class', 'single-select-toggle-button-selected');
+        });
+    },
+
+    /**
+    * @description This function selects the control option from graph
+    * @param {string} controlOption aria label of the control option to be selected
+    */
+    selectNumberLineControlOptionPreviewTab: (controlOption) => {
+        numberLinePage.numberLineControlOptionPreviewTab(controlOption)
+            .click();
+    },
+
+    /**
+    * @description This function verifies the tool option is in selected state
+    * @param {string} toolOption aria label of the tool option to be verified selected
+    */
+    verifyToolOptionSelectedSpecifyCorrectAnswerSection: (toolOptionAriaLabel) => {
+        numberLinePage.numberLineToolOptionSpecifyCorrectAnswer(toolOptionAriaLabel)
+            .eq(0)
+            .should('have.class', 'single-select-toggle-button-selected');
+    },
+
+    /**
+     * @description This function verifies the tool option is not in selected state
+     * @param {string} toolOption aria label of the tool option to be verified not selected
+     */
+    verifyToolOptionNotSelectedSpecifyCorrectAnswerSection: (toolOptionAriaLabelArray) => {
+        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
+            numberLinePage.numberLineToolOptionSpecifyCorrectAnswer(toolOptionAriaLabel)
+                .should('not.have.class', 'single-select-toggle-button-selected');
+        });
+    },
+    //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 }) => {
+            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('exist');
+                });
+        });
+    },
+
+    /**
+    * 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[].x - x coordinate to be plotted on the graph
+    * @param {number} coordinates[].xRange - range of x coordinate
+    */
+    verifyCorrectPointsOnNumberLineCorrectAnswerSection: (coordinates) => {
+        coordinates.forEach(({ x, xRange }) => {
+            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.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
+    */
+    verifyIncorrectPointsOnNumberLineCorrectAnswerSection: (coordinates) => {
+        coordinates.forEach(({ x, xRange }) => {
+            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);
+                });
+        });
+    },
+
+    /**
+   * 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');
+                });
+        });
+    },
+
+    /**
+   * 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 }) => {
+            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.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[].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);
+                });
+        });
+    },
+
+    /**
+   * 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 }) => {
+            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(`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');
+    },
+
+    verifyCorrectAnswerSectionNotExist: () => {
+        utilities.verifyElementVisibilityState(numberLinePage.numberLineCorrectAnswerSection(), 'notExist');
+    },
+
+    /**
+    * @param {("correct" | "incorrect")} answerStatus - The status of the answer.
+    * @description Verifies the visibility and content of the correct/incorrect answer label block.
+    * If the answer is correct, it also verifies the visibility of the correct icon;
+    * otherwise, it verifies the visibility of the incorrect icon.
+    */
+    verifyCorrectIncorrectAnswerLabel: (answerStatus) => {
+        utilities.verifyInnerText(numberLinePage.correctIncorrectAnswerTextWrapper(), `Your answer is\n${answerStatus}`)
+        numberLinePage.correctIncorrectAnswerTextWrapper()
+            .within(() => {
+                if (answerStatus === 'correct') {
+                    utilities.verifyElementVisibilityState(numberLinePage.correctIcon(), 'visible');
+                } else {
+                    utilities.verifyElementVisibilityState(numberLinePage.incorrectIcon(), 'visible');
+                }
+            });
+    }
+}
+
+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,
+
+    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([{ x: 0, xRange: 20 }, { x: 1, xRange: 20 }]);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer([{ x: 0, xRange: 20 }, { x: 1, xRange: 20 }]);
+        });
+
+        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([{ x: 0, xRange: 20 }, { x: 1, xRange: 20 }]);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer([{ x: 0, xRange: 20 }, { x: 1, xRange: 20 }]);
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
+
+        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(numberLinePage.numberLineSpecifyCorrectAnswer());
+        });
+    }
+
+}
+
+export const numberLinePage = {
+    ...selectors,
+    steps,
+    tests
+}