itemengine-cypress-automation 1.0.216 → 1.0.218-numberLineFixes-382e88a.0

package/cypress/pages/components/numberLineCommonComponent.js

@@ -45,11 +45,11 @@ const steps = {
 
     /**
      * Verifies the orientation and size of the specify correct answer section.
-     * @param {string} orientation - The orientation of the specify correct answer section ('Horizontal' or 'Vertical').
+     * @param {string} orientation - The orientation of the specify correct answer section ('Sideways' or 'Upright').
      * @param {string} value - The value representing the width or height of the specify correct answer section.
      */
     verifyNumberLineOrientationAndSizeSpecifyCorrectAnswerSection: (orientation, value) => {
-        if (orientation === 'Horizontal') {
+        if (orientation === 'Sideways') {
             numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
                 .should('have.attr', 'width', value)
         } else {
@@ -70,13 +70,13 @@ const steps = {
 
     /**
     * Verifies the response spacing for the specify correct answer section of the number line.
-    * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+    * @param {string} orientation - The orientation of the number line ('Sideways' or 'Upright').
     * @param {number} value - The expected response spacing value.
     */
     verifyResponseSpacingSpecifyCorrectAnswerSection: (orientation, value) => {
-        const attribute = orientation === 'Horizontal' ? 'height' : 'width';
+        const attribute = orientation === 'Sideways' ? 'height' : 'width';
         numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
-            .should('have.attr', attribute, value * 4);
+            .should('have.attr', attribute, value * 5);
     },
 
     /**
@@ -127,17 +127,19 @@ const steps = {
 
     /**
     * Verifies the visibility and text of labels on the specify correct answer section of the number line.
-    * @param {string} value - The initial value of the labels.
+    * @param {string} min - The initial value of the labels.
     * @param {number} interval - The interval between consecutive labels.
     */
-    verifyLabelsVisibleOnNumberLineSpecifyCorrectAnswerSection: (value, interval) => {
+    verifyLabelsVisibleOnNumberLineSpecifyCorrectAnswerSection: (min, interval) => {
         cy.log('Wait added to make sure all the labels are visible after checking the checkbox')
         cy.wait(3000)
         numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
             .parents('.ngie-jxgbox')
             .find('.number-line-tick-font')
             .its('length').then((len) => {
-                for (let index = 0; index < len; index++) {
+                const length = len - 3;
+                let value = min + 1;
+                for (let index = 0; index < length; index++) {
                     numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
                         .parents('.ngie-jxgbox')
                         .find('.number-line-tick-font')
@@ -145,16 +147,26 @@ const steps = {
                         .should('have.text', value);
                     value += interval;
                 }
+                numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+                    .parents('.ngie-jxgbox')
+                    .find('.number-line-tick-font')
+                    .eq(len - 2)
+                    .should('have.text', min);
+                numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+                    .parents('.ngie-jxgbox')
+                    .find('.number-line-tick-font')
+                    .eq(len - 1)
+                    .should('have.text', `${value + 1}`);
             });
     },
 
     /**
      * Verifies the orientation and size of the preview tab of the number line.
-     * @param {string} orientation - The orientation of the preview tab ('Horizontal' or 'Vertical').
+     * @param {string} orientation - The orientation of the preview tab ('Sideways' or 'Upright').
      * @param {string} value - The value representing the width or height of the preview tab.
      */
     verifyNumberLineOrientationAndSizePreviewTab: (orientation, value) => {
-        if (orientation === 'Horizontal') {
+        if (orientation === 'Sideways') {
             numberLineCommonComponent.numberLinePreviewTab()
                 .should('have.attr', 'width', value)
         } else {
@@ -175,13 +187,13 @@ const steps = {
 
     /**
      * Verifies the response spacing for the preview tab of the number line.
-     * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     * @param {string} orientation - The orientation of the number line ('Sideways' or 'Upright').
      * @param {number} value - The expected response spacing value.
      */
     verifyResponseSpacingPreviewTab: (orientation, value) => {
-        const attribute = orientation === 'Horizontal' ? 'height' : 'width';
+        const attribute = orientation === 'Sideways' ? 'height' : 'width';
         numberLineCommonComponent.numberLinePreviewTab()
-            .should('have.attr', attribute, value * 4);
+            .should('have.attr', attribute, value * 5);
     },
 
     /**
@@ -224,15 +236,17 @@ const steps = {
 
     /**
     * Verifies the visibility and text of labels on the preview tab of the number line.
-    * @param {string} value - The initial value of the labels.
+    * @param {string} min - The initial value of the labels.
     * @param {number} interval - The interval between consecutive labels.
     */
-    verifyLabelsVisibleOnNumberLinePreviewTab: (value, interval) => {
+    verifyLabelsVisibleOnNumberLinePreviewTab: (min, interval) => {
         numberLineCommonComponent.numberLinePreviewTab()
             .parents('.ngie-jxgbox')
             .find('.number-line-tick-font')
             .its('length').then((len) => {
-                for (let index = 0; index < len; index++) {
+                const length = len - 3;
+                let value = min + 1;
+                for (let index = 0; index < length; index++) {
                     numberLineCommonComponent.numberLinePreviewTab()
                         .parents('.ngie-jxgbox')
                         .find('.number-line-tick-font')
@@ -240,6 +254,16 @@ const steps = {
                         .should('have.text', value);
                     value += interval;
                 }
+                numberLineCommonComponent.numberLinePreviewTab()
+                    .parents('.ngie-jxgbox')
+                    .find('.number-line-tick-font')
+                    .eq(len - 2)
+                    .should('have.text', min);
+                numberLineCommonComponent.numberLinePreviewTab()
+                    .parents('.ngie-jxgbox')
+                    .find('.number-line-tick-font')
+                    .eq(len - 1)
+                    .should('have.text', `${value + 1}`);
             });
     },
 
@@ -323,7 +347,7 @@ const steps = {
 const tests = {
     /**
     * Verifies the functionality of the layout section in the edit tab.
-    * @param {('Horizontal'|'Vertical')} orientation - The orientation of the number line
+    * @param {('Sideways'|'Upright')} orientation - The orientation of the number line
     */
     verifyLayoutSectionEditTabFunctionality: (orientation) => {
         it(`When user selects ${orientation} orientation, then number line in Number line section and Specify correct answer section should be updated to ${orientation} number line`, () => {
@@ -332,7 +356,7 @@ const tests = {
             numberLineCommonComponent.steps.verifyNumberLineOrientationAndSizeSpecifyCorrectAnswerSection(orientation, '640');
         });
 
-        if (orientation === "Horizontal") {
+        if (orientation === "Sideways") {
             it('When user updates value for Width input field, it should get updated in Number line section and Specify correct answer section', () => {
                 numberLineCommonComponent.steps.enterTextInWidthInputField(600);
                 numberLineCommonComponent.steps.verifyTextInWidthInputField(600);
@@ -357,26 +381,26 @@ const tests = {
             numberLineCommonComponent.steps.enterTextInMarginInputField(10);
         });
 
-        it('When user checks Show min arrow checkbox, then arrow should be displayed on left end of number line and arrow should not be displayed on right end of number line in number line section and specify correct answer section', () => {
-            numberLineCommonComponent.steps.checkCheckbox('Show min arrow');
+        it('When user checks Display minimum arrow checkbox, then arrow should be displayed on left end of number line and arrow should not be displayed on right end of number line in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.checkCheckbox('Display minimum arrow');
             numberLineCommonComponent.steps.verifyMinArrowVisibilitySpecifyCorrectAnswerSection('visible');
             numberLineCommonComponent.steps.verifyMinArrowVisibilityNumberLineSection('visible');
         });
 
-        it('When user unchecks Show min arrow checkbox, then arrow should not be displayed on left end of number line in number line section and specify correct answer section', () => {
-            numberLineCommonComponent.steps.uncheckCheckbox('Show min arrow');
+        it('When user unchecks Display minimum arrow checkbox, then arrow should not be displayed on left end of number line in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.uncheckCheckbox('Display minimum arrow');
             numberLineCommonComponent.steps.verifyMinArrowVisibilitySpecifyCorrectAnswerSection('hidden');
             numberLineCommonComponent.steps.verifyMinArrowVisibilityNumberLineSection('hidden');
         });
 
-        it('When user checks Show max arrow checkbox, then arrow should be displayed on right end of number line and arrow should not be displayed on left end of number line in number line section and specify correct answer section', () => {
-            numberLineCommonComponent.steps.checkCheckbox('Show max arrow');
+        it('When user checks Display maximum arrow checkbox, then arrow should be displayed on right end of number line and arrow should not be displayed on left end of number line in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.checkCheckbox('Display maximum arrow');
             numberLineCommonComponent.steps.verifyMaxArrowVisibilitySpecifyCorrectAnswerSection('visible');
             numberLineCommonComponent.steps.verifyMaxArrowVisibilityNumberLineSection('visible');
         });
 
-        it('When user unchecks Show max arrow checkbox, then arrow should not be displayed on right end of number line in number line section and specify correct answer section', () => {
-            numberLineCommonComponent.steps.uncheckCheckbox('Show max arrow');
+        it('When user unchecks Display maximum arrow checkbox, then arrow should not be displayed on right end of number line in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.uncheckCheckbox('Display maximum arrow');
             numberLineCommonComponent.steps.verifyMaxArrowVisibilitySpecifyCorrectAnswerSection('hidden');
             numberLineCommonComponent.steps.verifyMaxArrowVisibilityNumberLineSection('hidden');
         });
@@ -391,40 +415,40 @@ const tests = {
             numberLineCommonComponent.steps.checkCheckbox('Stagger response');
         });
 
-        it('When user unchecks Show labels checkbox, then labels on number line should disappear in number line section and specify correct answer section', () => {
-            numberLineCommonComponent.steps.uncheckCheckbox('Show labels');
+        it('When user unchecks Display values checkbox, then labels on number line should disappear in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.uncheckCheckbox('Display values');
             numberLineCommonComponent.steps.verifyLabelsNotVisibleOnNumberLineNumberLineSection();
             numberLineCommonComponent.steps.verifyLabelsNotVisibleOnNumberLineSpecifyCorrectAnswerSection();
         });
 
-        it('When Show labels checkbox is unchecked, then Line settings and Display numbers section should be in disabled state', () => {
+        it('When Display values checkbox is unchecked, then Line settings and Display numbers section should be in disabled state', () => {
             numberLineCommonComponent.steps.verifyDisplayNumbersAndLineSettingsSectionDisabled();
         });
 
-        it('When user checks Show labels checkbox, then labels on number line should be displayed in number line section and specify correct answer section', () => {
-            numberLineCommonComponent.steps.checkCheckbox('Show labels');
+        it('When user checks Display values checkbox, then labels on number line should be displayed in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.checkCheckbox('Display values');
             numberLineCommonComponent.steps.verifyLabelsVisibleOnNumberLineNumberLineSection(-10, 1);
             numberLineCommonComponent.steps.verifyLabelsVisibleOnNumberLineSpecifyCorrectAnswerSection(-10, 1);
         });
 
-        it('When Show labels checkbox is checked, then Line settings and Display numbers section should be in enabled state', () => {
+        it('When Display values checkbox is checked, then Line settings and Display numbers section should be in enabled state', () => {
             numberLineCommonComponent.steps.verifyDisplayNumbersAndLineSettingsSectionEnabled();
         });
 
         //Note: Unable to check on cypress, added to manual sheet
-        it('When user unchecks Show ticks checkbox, then ticks on number line should disappear in number line section and specify correct answer section', () => {
+        it('When user unchecks Display nodes checkbox, then ticks on number line should disappear in number line section and specify correct answer section', () => {
 
         });
 
         //Note: Unable to check on cypress, added to manual sheet
-        it('When user checks Show ticks checkbox, then ticks on number line should be displayed in number line section and specify correct answer section', () => {
+        it('When user checks Display nodes checkbox, then ticks on number line should be displayed in number line section and specify correct answer section', () => {
 
         });
     },
 
     /**
     * Verifies the functionality of the layout section in the preview tab.
-    * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+    * @param {string} orientation - The orientation of the number line ('Sideways' or 'Upright').
     */
     verifyLayoutSectionPreviewTabFunctionality: (orientation) => {
         it(`When user selects ${orientation} orientation, then ${orientation} number line should be displayed in preview tab`, () => {
@@ -434,7 +458,7 @@ const tests = {
             numberLineCommonComponent.steps.verifyNumberLineOrientationAndSizePreviewTab(orientation, '640');
         });
 
-        if (orientation === "Horizontal") {
+        if (orientation === "Sideways") {
             it('When user updates value for Width input field, it should get updated in preview tab', () => {
                 numberLineCommonComponent.steps.switchToEditTab();
                 numberLineCommonComponent.steps.enterTextInWidthInputField(600);
@@ -463,63 +487,63 @@ const tests = {
             numberLineCommonComponent.steps.verifyMarginForNumberLinePreviewTab(12);
         });
 
-        it('When user checks Show min arrow checkbox, then arrow should be displayed on left end of number line and arrow should not be displayed on right end of number line in preview tab', () => {
+        it('When user checks Display minimum arrow checkbox, then arrow should be displayed on left end of number line and arrow should not be displayed on right end of number line in preview tab', () => {
             numberLineCommonComponent.steps.switchToEditTab();
             numberLineCommonComponent.steps.enterTextInMarginInputField(10);
-            numberLineCommonComponent.steps.checkCheckbox('Show min arrow');
+            numberLineCommonComponent.steps.checkCheckbox('Display minimum arrow');
             numberLineCommonComponent.steps.switchToPreviewTab();
             numberLineCommonComponent.steps.verifyMinArrowVisibilityPreviewTab('visible');
         });
 
-        it('When user unchecks Show min arrow checkbox, then arrow should not be displayed on left end of number line in preview tab', () => {
+        it('When user unchecks Display minimum arrow checkbox, then arrow should not be displayed on left end of number line in preview tab', () => {
             numberLineCommonComponent.steps.switchToEditTab();
-            numberLineCommonComponent.steps.uncheckCheckbox('Show min arrow');
+            numberLineCommonComponent.steps.uncheckCheckbox('Display minimum arrow');
             numberLineCommonComponent.steps.switchToPreviewTab();
             numberLineCommonComponent.steps.verifyMinArrowVisibilityPreviewTab('hidden');
         });
 
-        it('When user checks Show max arrow checkbox, then arrow should be displayed on right end of number line and arrow should not be displayed on left end of number line in preview tab', () => {
+        it('When user checks Display maximum arrow checkbox, then arrow should be displayed on right end of number line and arrow should not be displayed on left end of number line in preview tab', () => {
             numberLineCommonComponent.steps.switchToEditTab();
-            numberLineCommonComponent.steps.checkCheckbox('Show max arrow');
+            numberLineCommonComponent.steps.checkCheckbox('Display maximum arrow');
             numberLineCommonComponent.steps.switchToPreviewTab();
             numberLineCommonComponent.steps.verifyMaxArrowVisibilityPreviewTab('visible');
         });
 
-        it('When user unchecks Show max arrow checkbox, then arrow should not be displayed on right end of number line in preview tab', () => {
+        it('When user unchecks Display maximum arrow checkbox, then arrow should not be displayed on right end of number line in preview tab', () => {
             numberLineCommonComponent.steps.switchToEditTab();
-            numberLineCommonComponent.steps.uncheckCheckbox('Show max arrow');
+            numberLineCommonComponent.steps.uncheckCheckbox('Display maximum arrow');
             numberLineCommonComponent.steps.switchToPreviewTab();
             numberLineCommonComponent.steps.verifyMaxArrowVisibilityPreviewTab('hidden');
         });
 
-        it('When user unchecks Show labels checkbox, then labels on number line should disappear in preview tab', () => {
+        it('When user unchecks Display values checkbox, then labels on number line should disappear in preview tab', () => {
             numberLineCommonComponent.steps.switchToEditTab();
-            numberLineCommonComponent.steps.uncheckCheckbox('Show labels');
+            numberLineCommonComponent.steps.uncheckCheckbox('Display values');
             numberLineCommonComponent.steps.switchToPreviewTab();
             numberLineCommonComponent.steps.verifyLabelsNotVisibleOnNumberLinePreviewTab();
         });
 
-        it('When user checks Show labels checkbox, then labels on number line should be displayed in preview tab', () => {
+        it('When user checks Display values checkbox, then labels on number line should be displayed in preview tab', () => {
             numberLineCommonComponent.steps.switchToEditTab();
-            numberLineCommonComponent.steps.checkCheckbox('Show labels');
+            numberLineCommonComponent.steps.checkCheckbox('Display values');
             numberLineCommonComponent.steps.switchToPreviewTab();
             numberLineCommonComponent.steps.verifyLabelsVisibleOnNumberLinePreviewTab(-10, 1);
         });
 
         //Note: Unable to check on cypress, added to manual sheet
-        it('When user unchecks Show ticks checkbox, then ticks on number line should disappear in preview tab', () => {
+        it('When user unchecks Display nodes checkbox, then ticks on number line should disappear in preview tab', () => {
 
         });
 
         //Note: Unable to check on cypress, added to manual sheet
-        it('When user checks Show ticks checkbox, then ticks on number line should be displayed in preview tab', () => {
+        it('When user checks Display nodes checkbox, then ticks on number line should be displayed in preview tab', () => {
 
         });
     },
 
     /**
    * Verifies the functionality of the number line title popup in the edit tab.
-   * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+   * @param {string} orientation - The orientation of the number line ('Sideways' or 'Upright').
    */
     verifyNumberLineTitlePopupEditTabFunctionality: (title) => {
         it('When the user edits the Number line title and clicks on \'Cancel\' button then the changes should not be displayed in the Number line section and \'Specify correct answer\' section Number line', () => {
@@ -578,7 +602,7 @@ const tests = {
 
     /**
     * Verifies the functionality of the number line title popup in the preview tab.
-    * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+    * @param {string} orientation - The orientation of the number line ('Sideways' or 'Upright').
     */
     verifyNumberLineTitlePopupPreviewTabFunctionality: (title) => {
         it('When the user edits the number line title and clicks on \'Cancel\' button then the changes should not be displayed in the preview tab', () => {

package/cypress/pages/listOrderingPage.js

@@ -776,6 +776,19 @@ const steps = {
             .click({ force: true });
     },
 
+    /**
+     * @param {string} optionsText text content of the option
+     * @param {number} targetIndex the position at which the options is being dropped
+     * @description verifies option cant be selected in grading view
+     */
+    verifyOptionNotEditableInGradingView: (optionsTextArray) => {
+        optionsTextArray.forEach(optionsText => {
+            listOrderingPage.horizontalOptionPreviewTab()
+                .contains(optionsText)
+                .should('have.css', 'pointer-events', 'none');
+        });
+    },
+
     /**
      * @param {string} optionsText text content of the option
      * @param {number} targetIndex the position at which the options is being dropped

package/cypress/pages/numberLineLabelPage.js

@@ -2,7 +2,7 @@ import constants from '../fixtures/constants';
 import utilities from '../support/helpers/utilities';
 import { createQuestionBasePage, questionInstructionsComponent, scoringSectionBaseEditTab, ckEditorToolbar, equationEditorFlyout, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, numberLineCommonComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, commonComponents, studentViewSettingsLabelComponent, randomizeOptionsComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, toolSettingsComponent, layoutSectionComponent } from './components';
 const css = Cypress.env('css');
-const tolerance = 11.36;
+const tolerance = 6.24;
 
 const selectors = {
     ...questionInstructionsComponent,
@@ -667,6 +667,7 @@ const steps = {
      * Verifies the orientation and size of the preview tab
      * @param {number} height - The value representing the width or height of the preview tab.
      */
+
     verifyVerticalNumberLineOrientationAndSizePreviewTab: (height) => {
         numberLineLabelPage.labelContainerPreviewTab()
             .then(($element) => {
@@ -783,9 +784,12 @@ const steps = {
                         .then(($element) => {
                             let graphHeight = $graphElement[0].clientHeight;
                             let containerHeight = $element[0].clientHeight;
-                            graphHeight = graphHeight - containerHeight - 42;
-                            const originY = graphHeight / 2;
-                            const yPixel = originY - y * (graphHeight / range);
+                            graphHeight = graphHeight - containerHeight - 32;
+                            const originY = graphHeight / 2 - tolerance / 2;
+                            const yPixel = originY - y * ((graphHeight - tolerance) / range);
+                            cy.log(yPixel) 
+                            cy.log(graphHeight)
+                            cy.log(originY)
                             cy.get(`.ngie-accordion .ngie-jxgbox svg ellipse[cy*="${Math.floor(yPixel)}"]:visible`)
                                 .should('exist');
                         });
@@ -806,9 +810,9 @@ const steps = {
                         .then(($element) => {
                             let graphHeight = $graphElement[0].clientHeight;
                             let containerHeight = $element[0].clientHeight;
-                            graphHeight = graphHeight - containerHeight - 42;
-                            const originY = graphHeight / 2;
-                            const yPixel = originY - y * (graphHeight / range);
+                            graphHeight = graphHeight - containerHeight - 32;
+                            const originY = graphHeight / 2 - tolerance/2;
+                            const yPixel = originY - coordinate * ((graphHeight - tolerance) / range);
                             cy.get(`.ngie-accordion .ngie-jxgbox svg ellipse[cy*="${Math.floor(yPixel)}"]:visible`)
                                 .should('not.exist');
                         });
@@ -829,9 +833,9 @@ const steps = {
                         .then(($element) => {
                             let graphHeight = $graphElement[0].clientHeight;
                             let containerHeight = $element[0].clientHeight;
-                            graphHeight = graphHeight - containerHeight - 42;
-                            const originY = graphHeight / 2;
-                            const yPixel = originY - y * (graphHeight / range);
+                            graphHeight = graphHeight - containerHeight - 32;
+                            const originY = graphHeight / 2 - tolerance/2;
+                            const yPixel = originY - coordinate * ((graphHeight - tolerance) / range);
                             cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cy*="${Math.floor(yPixel)}"]:visible`)
                                 .should('not.exist');
                         });
@@ -852,9 +856,9 @@ const steps = {
                         .then(($element) => {
                             let graphHeight = $graphElement[0].clientHeight;
                             let containerHeight = $element[0].clientHeight;
-                            graphHeight = graphHeight - containerHeight - 42;
-                            const originY = graphHeight / 2;
-                            const yPixel = originY - y * (graphHeight / range);
+                            graphHeight = graphHeight - containerHeight - 32;
+                            const originY = graphHeight / 2 - tolerance/2;
+                            const yPixel = originY - y * ((graphHeight - tolerance) / range);
                             cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cy*="${Math.floor(yPixel)}"]:visible`)
                                 .should('exist');
                         });
@@ -874,9 +878,9 @@ const steps = {
                     .then(($element) => {
                         let graphHeight = $graphElement[0].clientHeight;
                         let containerHeight = $element[0].clientHeight;
-                        graphHeight = graphHeight - containerHeight - 42;
-                        const originY = graphHeight / 2;
-                        const yPixel = originY - coordinate * (graphHeight / range);
+                        graphHeight = graphHeight - containerHeight - 32;
+                        const originY = graphHeight / 2 - tolerance / 2;
+                        const yPixel = originY - coordinate * ((graphHeight - tolerance) / range);
                         cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cy*="${Math.floor(yPixel)}"]:visible`)
                             .should('have.css', 'fill', css.color.incorrectAnswer);
                     });
@@ -904,9 +908,9 @@ const steps = {
                     .then(($element) => {
                         let graphHeight = $graphElement[0].clientHeight;
                         let containerHeight = $element[0].clientHeight;
-                        graphHeight = graphHeight - containerHeight - 42;
-                        const originY = graphHeight / 2;
-                        const yPixel = originY - coordinate * (graphHeight / range);
+                        graphHeight = graphHeight - containerHeight - 32;
+                        const originY = graphHeight / 2 - tolerance / 2;
+                        const yPixel = originY - coordinate * ((graphHeight - tolerance) / range);
                         cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cy*="${Math.floor(yPixel)}"]:visible`)
                             .should('have.css', 'fill', css.color.correctAnswer);
                     });
@@ -931,8 +935,8 @@ const steps = {
         numberLineLabelPage.numberLineCorrectAnswerSection()
             .then(($graphElement) => {
                 let graphHeight = $graphElement[0].clientHeight;
-                const originY = graphHeight / 2;
-                const yPixel = originY - coordinate * (graphHeight / range);
+                const originY = graphHeight / 2 - tolerance / 2;
+                const yPixel = originY - coordinate * ((graphHeight - tolerance) / range);
                 cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg ellipse[cy*="${Math.floor(yPixel)}"][display="inline"]:visible`)
                     .should('have.css', 'fill', css.color.correctAnswer);
             });