itemengine-cypress-automation 1.0.131 → 1.0.133-7thMarchFixes-0e78080.0

package/cypress/e2e/ILC/SimpleCalculator/editTabFunctionality.js

@@ -0,0 +1,242 @@
+import { simpleCalculatorPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const customizeCalculatorSettingsButtons = ['History', 'Undo/Redo', 'Parentheses', 'Pi', 'Square', 'Reciprocal', 'Percentage', 'Square root', 'Exponent', 'Sign change']
+describe('Simple calculator - Customize calculator settings, show calculator visibility', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Simple calculator: Customize calculator settings - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            simpleCalculatorPage.steps.navigateToCreateResource('simple calculator');
+        });
+
+        it('"Customize calculator settings" label should be displayed', () => {
+            utilities.verifyInnerText(simpleCalculatorPage.customizeCalculatorSettingsLabel(), 'Customize calculator settings');
+        });
+
+        it(`In the "Customize calculator settings" section, a list of ${customizeCalculatorSettingsButtons.length} settings should be displayed. Out of ${customizeCalculatorSettingsButtons.join(', ')} settings, History and Undo/Redo settings should be in selected state by default`, () => {
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.customizeCalculatorSettingsHistoryButton(), 'visible');
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.customizeCalculatorSettingsUndoRedoButton(), 'visible');
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.customizeCalculatorSettingsParenthesesButton(), 'visible');
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.customizeCalculatorSettingsPiButton(), 'visible');
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.customizeCalculatorSettingsSquareButton(), 'visible');
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.customizeCalculatorSettingsReciprocalButton(), 'visible');
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.customizeCalculatorSettingsPercentageButton(), 'visible');
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.customizeCalculatorSettingsSquareRootButton(), 'visible');
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.customizeCalculatorSettingsExponentButton(), 'visible');
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.customizeCalculatorSettingsSignChangeButton(), 'visible');
+            simpleCalculatorPage.steps.verifyCustomizeCalculatorSettingsHistoryButtonSelectedState();
+            simpleCalculatorPage.steps.verifyCustomizeCalculatorSettingsUndoRedoButtonSelectedState();
+            customizeCalculatorSettingsButtons.forEach((button, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(simpleCalculatorPage.customizeCalculatorSettingsButtonLabel(), index), button);
+            });
+        });
+
+        it('The user should be able to select/deselect any settings toggle button', () => {
+            simpleCalculatorPage.steps.deselectCustomizeCalculatorSettingsHistoryButton();
+            simpleCalculatorPage.steps.selectCustomizeCalculatorSettingsPercentageButton();
+        });
+
+        it('When the user selects "Sign change" button, then the "Parentheses" button should automatically get selected and be in a disabled state', () => {
+            simpleCalculatorPage.steps.selectCustomizeCalculatorSettingsSignChangeButton();
+            utilities.verifyElementDisabledClass(simpleCalculatorPage.customizeCalculatorSettingsParenthesesButton());
+            simpleCalculatorPage.steps.verifyCustomizeCalculatorSettingsParenthesesButtonSelectedState();
+        });
+
+        it('When the user deselects "Sign change" button, then the "Parentheses" button should get enabled and continue to stay in selected state', () => {
+            simpleCalculatorPage.steps.deselectCustomizeCalculatorSettingsSignChangeButton();
+            utilities.verifyElementNotDisabled(simpleCalculatorPage.customizeCalculatorSettingsParenthesesButton());
+            simpleCalculatorPage.steps.verifyCustomizeCalculatorSettingsParenthesesButtonSelectedState();
+        });
+
+        it('When the user selects "Square root" button, then the "Parentheses" button should automatically get selected and be in a disabled state', () => {
+            simpleCalculatorPage.steps.selectCustomizeCalculatorSettingsSquareRootButton();
+            utilities.verifyElementDisabledClass(simpleCalculatorPage.customizeCalculatorSettingsParenthesesButton());
+            simpleCalculatorPage.steps.verifyCustomizeCalculatorSettingsParenthesesButtonSelectedState();
+        });
+
+        it('When the user deselects "Square root" button, then the "Parentheses" button should get enabled and continue to stay in selected state', () => {
+            simpleCalculatorPage.steps.deselectCustomizeCalculatorSettingsSquareRootButton();
+            utilities.verifyElementNotDisabled(simpleCalculatorPage.customizeCalculatorSettingsParenthesesButton());
+            simpleCalculatorPage.steps.verifyCustomizeCalculatorSettingsParenthesesButtonSelectedState();
+        });
+
+        it('When the user selects the "Parentheses" button, the "Sign change" and "Square root" buttons should continue to stay in deselected state', () => {
+            simpleCalculatorPage.steps.selectCustomizeCalculatorSettingsParenthesesButton();
+            simpleCalculatorPage.steps.verifyCustomizeCalculatorSettingsSignChangeButtonDeselectedState();
+            simpleCalculatorPage.steps.verifyCustomizeCalculatorSettingsSquareRootButtonDeselectedState();
+        });
+
+        it('CSS of customize calculator settings', { tags: 'css' }, () => {
+            utilities.verifyCSS(simpleCalculatorPage.customizeCalculatorSettingsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            cy.log('CSS of unselected button')
+            utilities.verifyCSS(simpleCalculatorPage.customizeCalculatorSettingsPiButton().find('[class*="CalculatorStyleIconLabelWrapper"]'), {
+                'background-color': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(utilities.getNthElement(simpleCalculatorPage.customizeCalculatorSettingsLabel(), 3), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(simpleCalculatorPage.customizeCalculatorSettingsPiButton().find('svg path'), {
+                'fill': css.color.secondaryBtn
+            });
+            cy.log('CSS of selected button')
+            utilities.verifyCSS(simpleCalculatorPage.customizeCalculatorSettingsPiButton().find('[class*="CalculatorStyleIconLabelWrapper"]'), {
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(utilities.getNthElement(simpleCalculatorPage.customizeCalculatorSettingsLabel(), 3), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(simpleCalculatorPage.customizeCalculatorSettingsHistoryButton().find('svg path'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(simpleCalculatorPage.tickIcon(), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of customize calculator settings', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(simpleCalculatorPage.customizeCalculatorSettingsLabel().parents('[class*="CustomizeCalculatorSettingsWrapper"]'));
+        });
+    });
+
+    describe('Simple calculator: Customize calculator settings - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            simpleCalculatorPage.steps.navigateToCreateResource('simple calculator');
+        });
+
+        it('When the user modifies the options in customize calculator settings section, then the calculator buttons should be updated accordingly in the preview tab', () => {
+            simpleCalculatorPage.steps.deselectCustomizeCalculatorSettingsHistoryButton();
+            simpleCalculatorPage.steps.selectCustomizeCalculatorSettingsPercentageButton();
+            simpleCalculatorPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.checkHistoryButton(), 'notExist');
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.percentageButton(), 'visible');
+        });
+    });
+
+    describe('\'Simple calculator visibility\' section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            simpleCalculatorPage.steps.navigateToCreateResource('simple calculator');
+        });
+
+        it('\'Simple calculator visibility\' label should be displayed', () => {
+            utilities.verifyInnerText(simpleCalculatorPage.calculatorVisibilityLabel(), 'Simple calculator visibility');
+        });
+
+        it('\'Add show/hide button\' label and checkbox should be displayed and by default the checkbox should be unchecked', () => {
+            simpleCalculatorPage.steps.verifyAddShowHideButtonLabel();
+            simpleCalculatorPage.steps.verifyAddShowHideButtonCheckboxUnchecked();
+        });
+
+        it('CSS of \'Simple calculator visibility\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(simpleCalculatorPage.calculatorVisibilityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(simpleCalculatorPage.addShowHideButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(simpleCalculatorPage.addShowHideButtonCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('When user checks \'Add show/hide button\' checkbox, then \'Launch the simple calculator by default\' label and checkbox should be displayed and by default the checkbox should be unchecked', () => {
+            simpleCalculatorPage.steps.checkAddShowHideButtonCheckbox();
+            simpleCalculatorPage.steps.verifyLaunchToolByDefaultLabel('simple calculator');
+            simpleCalculatorPage.steps.verifyLaunchToolByDefaultCheckboxUnchecked();
+        });
+
+        it('User should be able to check \'Launch the simple calculator by default\' checkbox', () => {
+            simpleCalculatorPage.steps.checkLaunchToolByDefaultCheckbox();
+        });
+
+        it('CSS of \'Simple calculator visibility\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(simpleCalculatorPage.launchToolByDefaultLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(simpleCalculatorPage.addShowHideButtonCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(simpleCalculatorPage.launchToolByDefaultCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+    });
+
+    describe('\'Simple calculator visibility\' section - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            simpleCalculatorPage.steps.navigateToCreateResource('simple calculator');
+        });
+
+        it('When \'Add show/hide button\' checkbox is unchecked in the edit tab, then \'Show simple calculator\' button should not be displayed in preview tab', () => {
+            simpleCalculatorPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.calculatorVisibilityButton(), 'notExist');
+        });
+
+        it('When user checks \'Add show/hide button\' checkbox in the edit tab, then \'Show simple calculator\' button should be displayed and the simple calculator should not be displayed in preview tab', () => {
+            simpleCalculatorPage.steps.switchToEditTab();
+            simpleCalculatorPage.steps.checkAddShowHideButtonCheckbox();
+            simpleCalculatorPage.steps.switchToPreviewTab();
+            simpleCalculatorPage.steps.verifyCalculatorVisibilityButtonLabel('Show');
+            simpleCalculatorPage.steps.verifyCalculatorNotExists();
+        });
+
+        it('When user clicks on \'Show simple calculator\' button, simple calculator should be displayed and \'Show simple calculator\' button should change to \'Hide button\' ', () => {
+            simpleCalculatorPage.steps.clickOnCalculatorVisibilityButton();
+            simpleCalculatorPage.steps.verifyCalculatorVisibilityButtonLabel('Hide');
+            simpleCalculatorPage.steps.verifyCalculatorIsVisible();
+        });
+
+        it('If the user selects the \'Launch simple calculator by default\' checkbox in the edit tab, then \'Hide simple calculator\' button should become visible, and the simple calculator should be displayed by default in the preview tab', () => {
+            simpleCalculatorPage.steps.switchToEditTab();
+            simpleCalculatorPage.steps.checkLaunchToolByDefaultCheckbox();
+            simpleCalculatorPage.steps.switchToPreviewTab();
+            simpleCalculatorPage.steps.verifyCalculatorVisibilityButtonLabel('Hide');
+            simpleCalculatorPage.steps.verifyCalculatorIsVisible();
+        });
+
+        it('When the user selects \'Hide simple calculator\' button then simple calculator should not be displayed and the button should change to \'Show simple calculator\'', () => {
+            simpleCalculatorPage.steps.clickOnCalculatorVisibilityButton();
+            simpleCalculatorPage.steps.verifyCalculatorVisibilityButtonLabel('Show');
+            simpleCalculatorPage.steps.verifyCalculatorNotExists();
+        });
+
+        it('When the calculator is shown, a close button should also be displayed on the calculator', () => {
+            simpleCalculatorPage.steps.clickOnCalculatorVisibilityButton();
+            simpleCalculatorPage.steps.verifyCalculatorVisibilityButtonLabel('Hide');
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.closeCalculatorButton(), 'visible');
+        });
+
+        it('When the user clicks on the "close calculator" button, the calculator should disappear and the visibility button label should change to "Show calculator"', () =>{
+            simpleCalculatorPage.steps.clickOnCloseCalculatorButton();
+            simpleCalculatorPage.steps.verifyCalculatorVisibilityButtonLabel('Show');
+            simpleCalculatorPage.steps.verifyCalculatorNotExists();
+        });
+
+        it('On clicking on the "Show calculator" button, the calculator should be displayed again', () => {
+            simpleCalculatorPage.steps.clickOnCalculatorVisibilityButton();
+            simpleCalculatorPage.steps.verifyCalculatorVisibilityButtonLabel('Hide');
+            utilities.verifyElementVisibilityState(simpleCalculatorPage.closeCalculatorButton(), 'visible');
+        });
+    });
+});

package/cypress/e2e/ILC/TextEntryMath/allOrNothingBasicForAllViews.smoke.js

@@ -29,10 +29,9 @@ describe('Create Item page - Text entry math: All or nothing ', () => {
             it('When the user sets correct answer responses and allots points, then the alloted points should be displayed in the preview tab', () => {
                 textEntryMathPage.steps.switchToEditTab();
                 textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(0);
-                textEntryMathPage.steps.addInputToResponseAnswerInputFieldSpecifyCorrectAnswer(0, 'Correctanswer1');
+                textEntryMathPage.steps.addInputToResponseAnswerInputFieldSpecifyCorrectAnswer(0, 'Correct1');
                 textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(1);
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldSpecifyCorrectAnswerSection(1);
-                textEntryMathPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
                 equationEditorFlyout.steps.enterQuadraticEquation();
                 textEntryMathPage.steps.allotPoints(20);
                 textEntryMathPage.steps.switchToPreviewTab();
@@ -41,7 +40,7 @@ describe('Create Item page - Text entry math: All or nothing ', () => {
 
             it('When the user attempts question in preview tab and switches to edit tab, then on re-switching to the preview tab, users response should not persist', () => {
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(0);
-                equationEditorFlyout.steps.enterTextInPreviewInputField(0, 'Correctanswer1');
+                equationEditorFlyout.steps.enterTextInPreviewInputField(0, 'Correct1');
                 equationEditorFlyout.steps.clickOnOkButton();
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(1);
                 equationEditorFlyout.steps.enterQuadraticEquation();
@@ -66,14 +65,12 @@ describe('Create Item page - Text entry math: All or nothing ', () => {
                         textEntryMathPage.steps.addResponseToken();
                         textEntryMathPage.steps.addResponseToken();
                         textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(0);
-                        textEntryMathPage.steps.addInputToResponseAnswerInputFieldSpecifyCorrectAnswer(0, 'Correctanswer1');
+                        textEntryMathPage.steps.addInputToResponseAnswerInputFieldSpecifyCorrectAnswer(0, 'Correct1');
                         textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(1);
                         textEntryMathPage.steps.focusInResponseAnswerInputFieldSpecifyCorrectAnswerSection(1);
-                        textEntryMathPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
                         equationEditorFlyout.steps.enterQuadraticEquation();
                         textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(2);
                         textEntryMathPage.steps.focusInResponseAnswerInputFieldSpecifyCorrectAnswerSection(2);
-                        textEntryMathPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
                         equationEditorFlyout.steps.enterEquationUsingPiSymbol();
                         textEntryMathPage.steps.allotPoints(20);
                         textEntryMathPage.steps.switchToPreviewTab();
@@ -124,7 +121,7 @@ describe('Create Item page - Text entry math: All or nothing ', () => {
                     textEntryMathPage.steps.verifyPreviewScore(0, 20);
                 }
                 textEntryMathPage.steps.verifyResponseFieldNumerationPreviewTab();
-                textEntryMathPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Correctanswer1', '2x2y2+4xy+4', '6×π']);
+                textEntryMathPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Correct1', '2x2y2+4xy+4', '6×π']);
                 textEntryMathPage.steps.verifyCorrectAnswerResponsesAriaLabel(1, '2 x squared y squared plus 4 x y plus 4');
                 textEntryMathPage.steps.verifyCorrectAnswerResponsesAriaLabel(2, '6 times pi');
                 textEntryMathPage.steps.verifyCorrectIncorrectIconNotExist(0);
@@ -157,7 +154,7 @@ describe('Create Item page - Text entry math: All or nothing ', () => {
                 textEntryMathPage.steps.verifyIncorrectResponseIcon(1);
                 textEntryMathPage.steps.verifyIncorrectResponseIcon(2);
                 textEntryMathPage.steps.verifyResponseFieldNumerationPreviewTab();
-                textEntryMathPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Correctanswer1', '2x2y2+4xy+4', '6×π']);
+                textEntryMathPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Correct1', '2x2y2+4xy+4', '6×π']);
                 textEntryMathPage.steps.verifyCorrectAnswerResponsesAriaLabel(1, '2 x squared y squared plus 4 x y plus 4');
                 textEntryMathPage.steps.verifyCorrectAnswerResponsesAriaLabel(2, '6 times pi');
                 textEntryMathPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
@@ -168,7 +165,7 @@ describe('Create Item page - Text entry math: All or nothing ', () => {
                     studentViewPage.steps.clearResponses();
                 }
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(0);
-                equationEditorFlyout.steps.enterTextInPreviewInputField('Correctanswer1');
+                equationEditorFlyout.steps.enterTextInPreviewInputField('Correct1');
                 equationEditorFlyout.steps.clickOnOkButton();
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(1);
                 equationEditorFlyout.steps.enterQuadraticEquation();
@@ -189,7 +186,7 @@ describe('Create Item page - Text entry math: All or nothing ', () => {
                 textEntryMathPage.steps.verifyCorrectResponseIcon(1);
                 textEntryMathPage.steps.verifyIncorrectResponseIcon(2);
                 textEntryMathPage.steps.verifyResponseFieldNumerationPreviewTab();
-                textEntryMathPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Correctanswer1', '2x2y2+4xy+4', '6×π']);
+                textEntryMathPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Correct1', '2x2y2+4xy+4', '6×π']);
                 textEntryMathPage.steps.verifyCorrectAnswerResponsesAriaLabel(1, '2 x squared y squared plus 4 x y plus 4');
                 textEntryMathPage.steps.verifyCorrectAnswerResponsesAriaLabel(2, '6 times pi');
                 textEntryMathPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
@@ -200,7 +197,7 @@ describe('Create Item page - Text entry math: All or nothing ', () => {
                     studentViewPage.steps.clearResponses();
                 }
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(0);
-                equationEditorFlyout.steps.enterTextInPreviewInputField('Correctanswer1');
+                equationEditorFlyout.steps.enterTextInPreviewInputField('Correct1');
                 equationEditorFlyout.steps.clickOnOkButton();
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(1);
                 equationEditorFlyout.steps.enterQuadraticEquation();
@@ -218,7 +215,7 @@ describe('Create Item page - Text entry math: All or nothing ', () => {
                 textEntryMathPage.steps.verifyCorrectResponseIcon(1);
                 textEntryMathPage.steps.verifyCorrectIncorrectIconNotExist(2);
                 textEntryMathPage.steps.verifyResponseFieldNumerationPreviewTab();
-                textEntryMathPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Correctanswer1', '2x2y2+4xy+4', '6×π']);
+                textEntryMathPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Correct1', '2x2y2+4xy+4', '6×π']);
                 textEntryMathPage.steps.verifyCorrectAnswerResponsesAriaLabel(1, '2 x squared y squared plus 4 x y plus 4');
                 textEntryMathPage.steps.verifyCorrectAnswerResponsesAriaLabel(2, '6 times pi');
                 textEntryMathPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
@@ -229,7 +226,7 @@ describe('Create Item page - Text entry math: All or nothing ', () => {
                     studentViewPage.steps.clearResponses();
                 }
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(0);
-                equationEditorFlyout.steps.enterTextInPreviewInputField('Correctanswer1');
+                equationEditorFlyout.steps.enterTextInPreviewInputField('Correct1');
                 equationEditorFlyout.steps.clickOnOkButton();
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(1);
                 equationEditorFlyout.steps.enterQuadraticEquation();
@@ -265,14 +262,12 @@ describe('Create Item page - Text entry math: All or nothing ', () => {
                 textEntryMathPage.steps.addResponseToken();
                 textEntryMathPage.steps.addResponseToken();
                 textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(0);
-                textEntryMathPage.steps.addInputToResponseAnswerInputFieldSpecifyCorrectAnswer(0, 'Correctanswer1');
+                textEntryMathPage.steps.addInputToResponseAnswerInputFieldSpecifyCorrectAnswer(0, 'Correct1');
                 textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(1);
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldSpecifyCorrectAnswerSection(1);
-                textEntryMathPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
                 equationEditorFlyout.steps.enterQuadraticEquation();
                 textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(2);
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldSpecifyCorrectAnswerSection(2);
-                textEntryMathPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
                 equationEditorFlyout.steps.enterEquationUsingPiSymbol();
                 textEntryMathPage.steps.allotPoints(20);
             });

package/cypress/e2e/ILC/TextEntryMath/checkAnswerFunctionalityForAllViews.smoke.js

@@ -38,14 +38,12 @@ describe('Create item page - Text entry math - Check answer functionality', () =
                         textEntryMathPage.steps.addResponseToken();
                         textEntryMathPage.steps.addResponseToken();
                         textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(0);
-                        textEntryMathPage.steps.addInputToResponseAnswerInputFieldSpecifyCorrectAnswer(0, 'Correct answer 1');
+                        textEntryMathPage.steps.addInputToResponseAnswerInputFieldSpecifyCorrectAnswer(0, 'Correct1');
                         textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(1);
                         textEntryMathPage.steps.focusInResponseAnswerInputFieldSpecifyCorrectAnswerSection(1);
-                        textEntryMathPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
                         equationEditorFlyout.steps.enterQuadraticEquation();
                         textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(2);
                         textEntryMathPage.steps.focusInResponseAnswerInputFieldSpecifyCorrectAnswerSection(2);
-                        textEntryMathPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
                         equationEditorFlyout.steps.enterEquationUsingPiSymbol();
                         textEntryMathPage.steps.allotPoints(20);
                         textEntryMathPage.steps.checkAllowStudentToCheckAnswerCheckbox();
@@ -114,7 +112,7 @@ describe('Create item page - Text entry math - Check answer functionality', () =
 
             it('When the user attempts the question partially correct, then on clicking Check answer button, correct icons should be displayed beside the correct responses, incorrect icons should be displayed beside the incorrect responses, and \'Your answer is incorrect\' should be displayed', () => {
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(0);
-                equationEditorFlyout.steps.enterTextInPreviewInputField('Correct answer 1');
+                equationEditorFlyout.steps.enterTextInPreviewInputField('Correct1');
                 equationEditorFlyout.steps.clickOnOkButton();
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(1);
                 equationEditorFlyout.steps.enterQuadraticEquation();
@@ -131,7 +129,7 @@ describe('Create item page - Text entry math - Check answer functionality', () =
 
             it('When the user attempts the question partially correct with a incomplete response, then on clicking Check answer button, incorrect icons should be displayed beside the incorrect responses, no icons should be displayed beside unattempted responses and \'Your answer is incorrect\' should be displayed', () => {
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(0);
-                equationEditorFlyout.steps.enterTextInPreviewInputField('Correct answer 1');
+                equationEditorFlyout.steps.enterTextInPreviewInputField('Correct1');
                 equationEditorFlyout.steps.clickOnOkButton();
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(1);
                 equationEditorFlyout.steps.enterQuadraticEquation();
@@ -145,7 +143,7 @@ describe('Create item page - Text entry math - Check answer functionality', () =
 
             it('When user attempts the question correctly, then on clicking Check answer button, then correct icons should be displayed beside all the responses, and \'Your answer is correct\' should be displayed', () => {
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(0);
-                equationEditorFlyout.steps.enterTextInPreviewInputField('Correct answer 1');
+                equationEditorFlyout.steps.enterTextInPreviewInputField('Correct1');
                 equationEditorFlyout.steps.clickOnOkButton();
                 textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(1)
                 equationEditorFlyout.steps.enterQuadraticEquation();

package/cypress/e2e/ILC/TextEntryMath/previewContentsForAllViews.smoke.js

@@ -24,10 +24,9 @@ describe('Create item page - Text entry math: Preview contents', () => {
                         textEntryMathPage.steps.addResponseToken();
                         textEntryMathPage.steps.addResponseToken();
                         textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(0);
-                        textEntryMathPage.steps.addInputToResponseAnswerInputFieldSpecifyCorrectAnswer(0, 'Correct answer 1');
+                        textEntryMathPage.steps.addInputToResponseAnswerInputFieldSpecifyCorrectAnswer(0, 'Correct1');
                         textEntryMathPage.steps.expandResponseAccordionSpecifyCorrectAnswer(1);
                         textEntryMathPage.steps.focusInResponseAnswerInputFieldSpecifyCorrectAnswerSection(1);
-                        textEntryMathPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
                         equationEditorFlyout.steps.enterQuadraticEquation();
                         textEntryMathPage.steps.allotPoints(10);
                         textEntryMathPage.steps.switchToPreviewTab();
@@ -79,7 +78,7 @@ describe('Create item page - Text entry math: Preview contents', () => {
 
                 it(`User should able to enter answers in the response fields  for ${view}`, () => {
                     textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(0);
-                    equationEditorFlyout.steps.enterTextInPreviewInputField('Correct answer 1');
+                    equationEditorFlyout.steps.enterTextInPreviewInputField('Correct1');
                     equationEditorFlyout.steps.clickOnOkButton();
                     textEntryMathPage.steps.verifyResponseAreaTextContentPreviewTab(0, 'Correct answer 1');
                     textEntryMathPage.steps.focusInResponseAnswerInputFieldPreviewTab(1);
@@ -97,7 +96,7 @@ describe('Create item page - Text entry math: Preview contents', () => {
                 });
             } else {
                 it(`The response input fields should be displayed filled with correct answers`, () => {
-                    textEntryMathPage.steps.verifyResponseAreaTextContentPreviewTab(0, 'Correct answer 1');
+                    textEntryMathPage.steps.verifyResponseAreaTextContentPreviewTab(0, 'Correct1');
                     textEntryMathPage.steps.verifyResponseAreaTextContentPreviewTab(1, '2x2y2+4xy+4');
                     textEntryMathPage.steps.verifyResponseFieldEquationAriaLabel(1, '2 x squared y squared plus 4 x y plus 4');
                 });

package/cypress/fixtures/theme/ilc.json

@@ -112,6 +112,8 @@
         "playerButtonBorder": "rgb(107, 139, 255)",
         "toggleButtonSelectedBg": "rgb(81, 0, 255)",
         "UnselectedToggleButton": "rgb(68, 68, 97)",
+        "alternateAnswerCount": "rgb(102, 102, 102)",
+        "unselectedOptionText": "rgb(0, 0, 124)",
         "darkThemeBg": "rgb(0, 0, 97)",
         "darkThemeBtnBg": "rgb(28, 28, 155)",
         "darkThemeBtnBorder": "rgb(117, 51, 255)",

package/cypress/pages/components/autoScoredSpecifyCorrectAnswerSection.js

@@ -33,7 +33,7 @@ const steps = {
      */
     addAlternativeAnswerAccordion: (accordionIndex) => {
         autoScoredSpecifyCorrectAnswerSection.steps.clickOnAddAlternativeAnswerButton();
-        utilities.verifyInnerText(utilities.getNthElement(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion(), accordionIndex), `Alternative ${accordionIndex}`);
+        utilities.verifyInnerText(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion(), `Alternative ${accordionIndex}`);
     },
 
     verifySpecifyCorrectAnswerErrorIconNotExists: () => {

package/cypress/pages/components/correctIncorrectAnswerLabelComponent.js

@@ -18,7 +18,7 @@ const steps = {
     * otherwise, it verifies the visibility of the incorrect icon.
     */
     verifyCorrectIncorrectAnswerLabel: (answerStatus) => {
-        utilities.verifyElementVisibilityState(correctIncorrectAnswerLabelComponent.correctIncorrectAnswerBlock(), 'visible');
+        utilities.verifyElementVisibilityState(correctIncorrectAnswerLabelComponent.correctIncorrectAnswerBlock(), 'exist');
         utilities.verifyInnerText(correctIncorrectAnswerLabelComponent.correctIncorrectStatusMessageText(), `Your answer is\n${answerStatus}`)
         if (answerStatus === 'correct') {
             utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.correctIcon(), 'visible');

package/cypress/pages/components/fillInTheGapsDragAndDropCommonComponents.js

@@ -1,9 +1,11 @@
 import utilities from "../../support/helpers/utilities";
 import { autoScoredScoringSectionMultiResponseType } from "./autoScoredScoringSectionMultiResponseType";
+import { draggableOptionsSectionComponent } from "./draggableOptionsSectionComponent";
+import { optionsWrapperComponent } from "./optionsWrapperComponent";
 
 const selectors = {
     dropzoneLabelSpecifyCorrectAnswerSection: () => cy.get('[class*="ResponseLabel"].title-casing'),
-
+    dropzoneOptionTooltip: () => cy.get('.question-text-popover .question-text-wrapper'),
     //Penalty points
     penaltyPointsForEachIncorrectDropzoneInputField: () => cy.get('input[aria-label="Penalty points for each incorrect dropzone"]'),
     specifyPointsForEachIncorrectDropzoneRadioButton: () => cy.get('input[aria-label*="Specify points for each incorrect"]'),
@@ -14,6 +16,9 @@ const selectors = {
     tickIconWrapper: () => cy.get('.tick-icon-wrapper'),
     correctAnswerContainer: () => cy.get('.dnd-correct-answer-wrapper'),
     correctIncorrectAnswerLabel: () => cy.get('[class*="CorrectIncorrectLabel"]'),
+
+    //additional settings
+    enterAriaLabelInputField: () => cy.get('input[aria-label*="Enter ARIA label"]')
 }
 
 const steps = {
@@ -50,7 +55,7 @@ const steps = {
     * @param {number} points - The expected penalty points value for each incorrect dropzone.
     */
     verifyPenaltyPointsForEachIncorrectDropzoneValue: (points) => {
-        fillInTheGapsOverImageDragAndDropPage.penaltyPointsForEachIncorrectDropzoneInputField()
+        fillInTheGapsDragAndDropCommonComponents.penaltyPointsForEachIncorrectDropzoneInputField()
             .should('have.value', points);
     },
 
@@ -59,7 +64,7 @@ const steps = {
     * @param {number} points - The penalty points to be allotted for each dropzone.
     */
     allotPenaltyPointsForEachIncorrectDropzone: (points) => {
-        fillInTheGapsOverImageDragAndDropPage.penaltyPointsForEachIncorrectDropzoneInputField()
+        fillInTheGapsDragAndDropCommonComponents.penaltyPointsForEachIncorrectDropzoneInputField()
             .clear()
             .type(`${points}`)
             .should('have.value', points)
@@ -67,9 +72,34 @@ const steps = {
     },
 
     selectPenaltyPointsForEachIncorrectDropzone: () => {
-        fillInTheGapsOverImageDragAndDropPage.specifyPointsForEachIncorrectDropzoneRadioButton()
+        fillInTheGapsDragAndDropCommonComponents.specifyPointsForEachIncorrectDropzoneRadioButton()
             .click();
-    }
+    },
+
+    /**
+   * @description verify the displayed penalty points for each incorrect dropzone
+   * @param {number} penaltyPoints displayed penalty points 
+   */
+    verifyPenaltyPointsForEachIncorrectDropzone: (penaltyPoints) => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.penaltyPointsDetailsSectionAllottedPointsLabel(), `Penalty points for each incorrect dropzone: ${penaltyPoints}`);
+    },
+
+    setGroupedOptions: () => {
+        let flowers = [['Flower', 'Petals', 'Seed', 'Pollen'],
+        ['Leaflet', 'Leaves', 'Leaf', 'Green'],
+        ['Stem', 'Branch', 'Trunk', 'Tree'],
+        ['Rose', 'Lily', 'Orchid', 'Petals']
+        ];
+        let groupTitles = ['Group A', 'Group B', 'Group C', 'Group D'];
+        draggableOptionsSectionComponent.steps.expandDraggableOptionsLayoutDropdown()
+        draggableOptionsSectionComponent.steps.selectOptionFromDraggableOptionsLayoutDropdown('Grouped')
+        draggableOptionsSectionComponent.steps.addGroupTitle(groupTitles[0]);
+        optionsWrapperComponent.steps.addMultipleOptionFields(2);
+        optionsWrapperComponent.steps.addInputToOptionsInputField(flowers[0]);
+        draggableOptionsSectionComponent.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection(groupTitles[1], flowers[1]);
+        draggableOptionsSectionComponent.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection(groupTitles[2], flowers[2]);
+        draggableOptionsSectionComponent.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection(groupTitles[3], flowers[3]);
+    },
 }
 
 export const fillInTheGapsDragAndDropCommonComponents = {

package/cypress/pages/components/imageCanvasComponent.js

@@ -38,7 +38,7 @@ const selectors = {
     },
     textResponse: () => cy.get('[class*="Canvasstyle__TextBoxContainer"] textarea'),
     canvasImage: () => cy.get('.canvas-image').eq(0),
-    canvasImageInPreviewTab: () => cy.get('[class*="PreviewTabstyles"] [class*="ImageWrapper"] img'),
+    canvasImageInPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="ImageWrapper"] img'),
     imagePropertiesLabel: () => cy.get('[class*="ImagePropertiesstyles__SectionLabel"]'),
     fillImageToCanvasLabel: () => cy.get('[data-ngie-testid="fill-image-to-canvas-checkbox"] .MuiFormControlLabel-label'),
     fillImageToCanvasCheckbox: () => cy.get('[data-ngie-testid="fill-image-to-canvas-checkbox"] input'),

package/cypress/pages/components/index.js

@@ -53,4 +53,5 @@ export * from './opacityComponent';
 export * from './imageActionsComponent';
 export * from './createCustomCategoryFlyout';
 export * from './customizeMathCharacterComponent';
-export * from './fillInTheGapsDragAndDropCommonComponents';
+export * from './fillInTheGapsDragAndDropCommonComponents';
+export * from './responseAreaSettingsPopupComponent';

package/cypress/pages/components/questionInputFieldComponent.js

@@ -98,6 +98,37 @@ const steps = {
         questionInputFieldComponent.addResponseAreaButton()
             .parent()
             .should('not.have.class', 'disabled');
+    },
+
+    /**
+     * Click on response area settings button
+     * @param {number} responseAreaIndex Index of response area in question input field
+     */
+    clickOnResponseAreaSettingsButton: (responseAreaIndex) => {
+        utilities.getNthElement(questionInputFieldComponent.responseAreaSettingsButton(), responseAreaIndex)
+            .click();
+    },
+
+    /**
+     * @description Verify width of response area in question input field
+     * @param {number} responseAreaIndex index of response area
+     * @param {string} width Width of response area in px
+     */
+    verifyResponseAreaWidth: (responseAreaIndex, width) => {
+        utilities.getNthElement(questionInputFieldComponent.responseArea(), responseAreaIndex)
+            .find('.add_response_element')
+            .should('have.css', 'width', width);
+    },
+
+    /**
+     * @description Verify height of response area in question input field
+     * @param {number} responseAreaIndex index of response area
+     * @param {string} height Height of response area in px
+     */
+    verifyResponseAreaHeight: (responseAreaIndex, height) => {
+        utilities.getNthElement(questionInputFieldComponent.responseArea(), responseAreaIndex)
+            .find('.add_response_element')
+            .should('have.css', 'height', height);
     }
 }