itemengine-cypress-automation 1.0.565 → 1.0.566

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/Scoring/partialEqualWeightsBasic.js

@@ -142,4 +142,185 @@ describe('Create item page - Fill in the gaps over image with text: Partial equa
             fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(2, 20);
         });
     });
+
+    describe('Question preview: Auto scored - Partial equal weights: Rounding', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(30);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageTextPage.steps.selectAutoScoredScoringSubtype('Partial equal weights');
+            fillInTheGapsOverImageTextPage.steps.allotPoints(15);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }, { responseIndex: 2, responseText: 'Stem' }]);
+            fillInTheGapsOverImageTextPage.steps.selectAutoScoredScoringSubtype('Partial equal weights');
+        });
+
+        it('When the user sets \'Rounding\' to \'Round down if <=0.99\', attempts the question partially correct with an response such that points of the correctly attempted responses has decimal value greater than 0.5 and less than 0.99, then the points awarded should be rounded down to the nearest integer value', () => {
+            fillInTheGapsOverImageTextPage.steps.expandRoundingDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectOptionFromRoundingDropdown('round down if <= 0.99');
+            fillInTheGapsOverImageTextPage.steps.allotPoints(11);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(3, 11);
+        });
+
+        it('When the user has set \'Rounding\' to \'Round down if <=0.99\', attempts the question partially correct with an response such that points of the correctly attempted responses has decimal value equal to 0.99, then the points awarded should be rounded down to the nearest integer value', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.allotPoints(8.97);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Leaf' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(2, 8.97);
+        });
+
+        it('When the user sets \'Rounding\' to \'Round down if <=0.50\', attempts the question partially correct with an response such that points of the correctly attempted responses has decimal value less than 0.50, then the points awarded should be rounded down to the nearest integer value', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.expandRoundingDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectOptionFromRoundingDropdown('round down if <= 0.50');
+            fillInTheGapsOverImageTextPage.steps.allotPoints(10);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 2, responseText: 'Stem' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(3, 10);
+        });
+
+        it('When the user has set \'Rounding\' to \'Round down if <=0.50\', attempts the question partially correct with an response such that points of the correctly attempted responses has decimal value equal to 0.50, then the points awarded should be rounded down to the nearest integer value', () => {
+            cy.log('Points allocation based on the test case requirements.');
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.allotPoints(4.5);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 2, responseText: 'Stem' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(1, 4.5);
+        });
+
+        it('When the user sets \'Rounding\' to \'Round down if <=0.50, Round up if > 0.50\', attempts the question partially correct with an response such that points of the correctly attempted responses has decimal value less than 0.50, then the points awarded should be rounded down to the nearest integer value', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.expandRoundingDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectOptionFromRoundingDropdown('round down if <= 0.50; Round up if > 0.50');
+            fillInTheGapsOverImageTextPage.steps.allotPoints(10);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 2, responseText: 'Stem' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(3, 10);
+        });
+
+        it('When the user has set \'Rounding\' to \'Round down if <=0.50, Round up if > 0.50\', attempts the question partially correct with an response such that points of the correctly attempted responses has decimal value equal to 0.50, then the points awarded should be rounded down to the nearest integer value', () => {
+            cy.log('Points allocation based on the test case requirements.');
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.allotPoints(4.5);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Leaf' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(1, 4.5);
+        });
+
+        it('When the user has set \'Rounding\' to \'Round down if <=0.50, Round up if > 0.50\', attempts the question partially correct with an response such that points of the correctly attempted responses has decimal value greater than 0.50, then the points awarded should be rounded down to the nearest integer value', () => {
+            cy.log('Points allocation based on the test case requirements.');
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.allotPoints(11);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Leaf' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(4, 11);
+        });
+
+        it('When \'Round negative score to zero\' is in checked state and the user attempts the question incorrectly, then the user should be awarded with 0 points', () => {
+            cy.log('Pre-step: Setting penalty scoring to \'Penalty points for the entire question\', allotting penalty points')
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.expandPenaltyScoringDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectOptionFromPenaltyScoringDropdown('Penalty points for the entire question');
+            fillInTheGapsOverImageTextPage.steps.allotPenaltyPoints(4);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Roots' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(0, 11);
+        });
+
+        it('When the user unchecks \'Round negative score to zero\' checkbox and the user attempts the question incorrectly, then the user should be awarded with negative points', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.uncheckRoundNegativeScoresToZeroCheckbox();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Roots' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(-4, 11);
+        });
+    });
+
+    describe('Question preview: Auto scored - Partial equal weights: Penalty scoring with \'Round negative score to zero\' unchecked', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(30);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }, { responseIndex: 2, responseText: 'Stem' }]);
+            fillInTheGapsOverImageTextPage.steps.selectAutoScoredScoringSubtype('Partial equal weights');
+            fillInTheGapsOverImageTextPage.steps.allotPoints(27);
+        });
+
+        //Penalty points for the entire question
+        it('When the user sets penalty scoring to \'Penalty points for the entire question\', allots penalty points and attempts the question incorrectly, then the user should be awarded with negative points', () => {
+            fillInTheGapsOverImageTextPage.steps.expandPenaltyScoringDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectOptionFromPenaltyScoringDropdown('Penalty points for the entire question');
+            fillInTheGapsOverImageTextPage.steps.uncheckRoundNegativeScoresToZeroCheckbox();
+            fillInTheGapsOverImageTextPage.steps.allotPenaltyPoints(2);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Roots' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(-2, 27);
+        });
+
+        it('When the user attempts the question correctly along with an incorrect response, then penalty points should get deducted from the awarded points', () => {
+            fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Roots' }]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Leaf' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(7, 27);
+        });
+
+        it('When the user attempts the question correctly along with multiple incorrect responses, then penalty points should get deducted from the awarded points only once, the deducted penalty points should not increase as per number of attempted incorrect responses', () => {
+            fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Leaf' }]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'leaves' }]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 2, responseText: 'apple' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(7, 27);
+        });
+
+        it('When the user has defined penalty points and also sets minimum scoring to \'Award minimum score only if attempted\' and allots minimum points, then on attempting the question incorrectly, minimum points should be awarded', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.expandMinimumScoringDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectOptionFromMinimumScoringDropdown('Award minimum score only if attempted');
+            fillInTheGapsOverImageTextPage.steps.allotMinimumPoints(3);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'leaves' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(3, 27);
+            cy.log('Post step: Switching to edit tab and resetting minimum scoring to "No minimum score"')
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.expandMinimumScoringDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectOptionFromMinimumScoringDropdown('No minimum score');
+        });
+
+        //Penalty points for each incorrect cell - Specify total penalty points
+        it('When the user sets penalty scoring to \'Penalty points for each incorrect text container\', and \'Specify total penalty points\' radio button in checked state, allots total penalty points and attempts the question incorrectly, then the user should be awarded with negative points of incorrect response', () => {
+            fillInTheGapsOverImageTextPage.steps.expandPenaltyScoringDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectOptionFromPenaltyScoringDropdown('Penalty points for each incorrect text container');
+            fillInTheGapsOverImageTextPage.steps.allotTotalPenaltyPoints(4);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'leaves' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(-4, 27);
+        });
+
+        it('When the user attempts the question correctly along with an incorrect response, then penalty points should get deducted from the awarded points', () => {
+            fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'leaves' }]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Leaf' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(6.3333, 27);
+        });
+
+        it('When the user attempts the question correctly along with multiple incorrect responses, then penalty points for each incorrect response should get deducted from the awarded points', () => {
+            fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Leaf' }]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'leaves' }]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 2, responseText: 'apple' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewScore(6.3333, 27);
+        });
+    });
 });

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/additionalSettingsBasic.js

@@ -1,7 +1,8 @@
-import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import { fillInTheGapsOverImageTextPage, itemPreviewPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const fontSizes = { 'Tiny': '12px', 'Small': '14px', 'Default': '16px', 'Normal': '18px', 'Big': '22px', 'Huge': '26px' };
+let itemReferenceID = "";
 
 describe('Fill In the gaps over image with text - Additional settings', () => {
     before(() => {
@@ -15,6 +16,15 @@ describe('Fill In the gaps over image with text - Additional settings', () => {
         });
 
         fillInTheGapsOverImageTextPage.tests.verifyAdditionalSettingsAccordionProperties();
+
+        it('When the user expands the Additional settings accordion make some changes and collapse and re-expand it, the changes should persist', () => {
+            fillInTheGapsOverImageTextPage.steps.checkCustomizePlaceholderTextCheckbox();
+            fillInTheGapsOverImageTextPage.steps.selectEnumerationType('without enumeration');
+            fillInTheGapsOverImageTextPage.steps.collapsedAdditionalSettings();
+            fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
+            fillInTheGapsOverImageTextPage.steps.verifyWithoutEnumerationRadioButtonCheckedState();
+            fillInTheGapsOverImageTextPage.steps.verifyCustomizePlaceholderTextCheckboxChecked();
+        });
     });
 
     describe('Additional settings: Font size - Contents in edit tab', () => {
@@ -73,7 +83,7 @@ describe('Fill In the gaps over image with text - Additional settings', () => {
             });
         });
     });
-    
+
     describe('Additional settings: Accessibility section', () => {
         abortEarlySetup();
         before(() => {
@@ -95,4 +105,29 @@ describe('Fill In the gaps over image with text - Additional settings', () => {
 
         fillInTheGapsOverImageTextPage.tests.verifyDetailsSection();
     });
+
+    describe('Additional settings: Details section Grading view', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.addTextInQuestionInstructionsInputField('Navigating to fill in the gaps over image with text');
+            fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
+            fillInTheGapsOverImageTextPage.steps.enterTextInTeacherGuidelinesInputField('Teacher scoring guidelines');
+            fillInTheGapsOverImageTextPage.steps.enterTextInSampleAnswerInputField('Sample answer');
+            fillInTheGapsOverImageTextPage.steps.enterTextInAcknowledgementsInputField('Acknowledgements');
+        });
+
+        it('When the user navigates to the grading view, the Details section information should be displayed correctly', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+            fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+            utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+            cy.wrap(itemPreviewPage.steps.getItemReferenceID()).then((referenceId) => {
+                itemReferenceID = referenceId;
+                cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                fillInTheGapsOverImageTextPage.steps.verifyTeacherGuidelinesLabelInGradingView('Teacher Guidelines');
+                fillInTheGapsOverImageTextPage.steps.verifyTeacherGuidelinesDescriptionInGradingView('Teacher scoring guidelines');
+            });
+        });
+    });
 });

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/additionalSettingsForAnswerInputFields.js

@@ -1,4 +1,4 @@
-import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import { fillInTheGapsOverImageTextPage, itemPreviewPage, studentViewPage, dialogBoxBase } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const enumerationOptions = {
@@ -9,6 +9,9 @@ const enumerationOptions = {
     'Roman numeral (lowercase)': ['i', 'ii'],
 };
 const css = Cypress.env('css');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Grading view'];
+const views = utilities.getViews(correctAnswerViews);
+let itemReferenceID = "";
 
 describe('Fill In the gaps over image with text - Additional settings : Placeholder text, Grading view, ARIA label for text containers', () => {
     before(() => {
@@ -110,7 +113,7 @@ describe('Fill In the gaps over image with text - Additional settings : Placehol
             fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
             fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }]);
             fillInTheGapsOverImageTextPage.steps.allotPoints(20);
-             //fillInTheGapsOverImageTextPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            //fillInTheGapsOverImageTextPage.steps.checkAllowStudentToCheckAnswerCheckbox();
             fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
         });
 
@@ -154,12 +157,11 @@ describe('Fill In the gaps over image with text - Additional settings : Placehol
                         'font-weight': css.fontWeight.regular
                     });
                     utilities.verifyCSS(fillInTheGapsOverImageTextPage.correctAnswerResponseWrapperWithoutEnumeration().parents('.response-input-field'), {
-                        'border': `1px solid ${css.color.correctAnswer}`
+                        'border': `1px solid ${css.color.primaryBtnBg}`
                     });
                 })
         });
 
-        
         it('Accessibility of correct answer section', { tags: 'a11y' }, () => {
             cy.checkAccessibility(fillInTheGapsOverImageTextPage.correctAnswerSectionWithoutEnumerationWrapper().parents('[class*="question-preview-wrapper"]'));
         });
@@ -248,4 +250,70 @@ describe('Fill In the gaps over image with text - Additional settings : Placehol
             fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldAriaLabelPreviewTab(1, 'Add answer for response 2');
         });
     });
+
+    views.forEach((view) => {
+        describe(`${view}: Additional Settings: Grading view style with numeration`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(2);
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(30);
+                        fillInTheGapsOverImageTextPage.steps.allotPoints(20);
+                        fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }]);
+                        fillInTheGapsOverImageTextPage.steps.expandAdditionalSettings();
+                        fillInTheGapsOverImageTextPage.steps.selectIdentifierToggleButton('Alphabet (uppercase)');
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        fillInTheGapsOverImageTextPage.steps.switchToGradingView();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        fillInTheGapsOverImageTextPage.steps.switchToGradingView();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        fillInTheGapsOverImageTextPage.steps.switchToGradingView();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            if (view === 'Grading view') {
+                it(`When the user selected with numeration radio button, then the numeration should be displayed in the answer input fields in the ${view}`, () => {
+                    fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldEnumeration(['A', 'B']);
+                });
+            }
+
+            if (view === 'Item preview' || view === 'Question preview') {
+                it(`When the user selected with numeration radio button, then the numeration should be displayed in the answer input fields as well as correct answer options in the correct answer section in the ${view}`, () => {
+                    fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldEnumeration(['A', 'B']);
+                    fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesEnumeration(['A', 'B']);
+                });
+            }
+        });
+    });
 });

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/backgroundImageAndCanvasProperties.js

@@ -72,6 +72,12 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
 
         fillInTheGapsOverImageTextPage.tests.verifyInsertTextTooltip();
 
+        it('When user insert text container, then it should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(50);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageTextPage.steps.undoAction();
+        });
+
         fillInTheGapsOverImageTextPage.tests.verifyUndoRedoClearAllButtons();
     });
 
@@ -217,7 +223,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
                 'border': `1px solid ${css.color.activeComponentBorder}`
             });
             utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageTextPage.responseArea(), 0), {
-                'border': `1px dashed ${css.color.activeComponentBorder}`
+                'border': `1px solid ${css.color.activeComponentBorder}`
             });
         });
 
@@ -410,4 +416,16 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
 
         fillInTheGapsOverImageTextPage.tests.verifyImageNotExistPreviewTab();
     });
+
+    describe('Print layout settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyPrintLayoutSettingsAccordionProperties();
+
+        fillInTheGapsOverImageTextPage.tests.verifyPrintLayoutSettingsAccordionContents();
+    });
 });

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/responseAnswersAndAcceptedStudentInput.js

@@ -1,7 +1,10 @@
-import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import { fillInTheGapsOverImageTextPage, itemPreviewPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Student view'];
+const views = utilities.getViews(correctAnswerViews);
+let itemReferenceID = "";
 
 describe('Create Item page - Fill in the gaps over image - text: ', () => {
     before(() => {
@@ -67,4 +70,56 @@ describe('Create Item page - Fill in the gaps over image - text: ', () => {
             fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: 'Flower232&*' }]);
         });
     });
+
+    views.forEach((view) => {
+        describe(`${view}: Accepted student input`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(50);
+                        fillInTheGapsOverImageTextPage.steps.selectAcceptedStudentInputType(0, 'Number');
+                        fillInTheGapsOverImageTextPage.steps.selectAcceptedStudentInputType(1, 'Integer');
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it(`When the user try to insert text in the response field  where the accepted student input type set to number , then it should show a warning message in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }]);
+                utilities.verifyInnerText(fillInTheGapsOverImageTextPage.limitReachedWarningMessageContainer(), 'Only number can be typed.');
+            });
+        });
+    });
 });

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/setLimitSection.js

@@ -1,6 +1,10 @@
-import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import { fillInTheGapsOverImageTextPage, itemPreviewPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Student view'];
+const views = utilities.getViews(correctAnswerViews);
+let itemReferenceID = "";
 
 describe('Create item page - Fill in the gaps over image with text: Set limit section', () => {
     before(() => {
@@ -49,7 +53,7 @@ describe('Create item page - Fill in the gaps over image with text: Set limit se
 
         //Uncomment below code once https://redmine.zeuslearning.com/issues/566930 is resolved
         // fillInTheGapsOverImageTextPage.tests.verifyMaximumCharacterLimitWarningConditionsSpecifyCorrectAnswerSection();
-        
+
         //Uncomment below code once https://redmine.zeuslearning.com/issues/566930 is resolved
         // fillInTheGapsOverImageTextPage.tests.verifyMinimumCharacterLimitWarningConditionsSpecifyCorrectAnswerSection();
     });
@@ -79,11 +83,61 @@ describe('Create item page - Fill in the gaps over image with text: Set limit se
         it('User should able to enter characters in the response field', () => {
             fillInTheGapsOverImageTextPage.steps.addTextInAnswerInputFieldsPreviewTab(0, 'Flower');
         });
-        
+
         //Uncomment below code oncee https://redmine.zeuslearning.com/issues/566930 is resolved
         // fillInTheGapsOverImageTextPage.tests.verifyMaximumCharacterLimitWarningConditionsPreviewTab();
 
         //Uncomment below code once https://redmine.zeuslearning.com/issues/566930 is resolved
         // fillInTheGapsOverImageTextPage.tests.verifyMinimumCharacterLimitWarningConditionsPreviewTab();
     });
+
+    views.forEach((view) => {
+        describe(`${view}: Student view settings`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.setMaximumLimit(30)
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it(`When the user sets the maximum character limit for the response field, it should be reflected in the ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyMaximumCharacterLimitInPreviewTab(0, 30);
+            });
+        });
+    });
 });

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/specialCharactersSection.js

@@ -82,21 +82,21 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
 
         it('CSS of special characters section', { tags: 'css' }, () => {
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersLabel(), {
-                'color': css.color.labels,
+                'color': css.color.codeBlockText,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.semibold
             });
             //checked state of enable special characters checkbox
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.enableSpecialCharactersCheckbox().find('rect').eq(1), {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.enableSpecialCharactersCheckboxWrapper().find('svg g g').eq(0), {
                 'fill': css.color.activeButtons
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.groupByLanguageLabel(), {
-                'color': css.color.labels,
+                'color': css.color.labelText,
                 'font-size': css.fontSize.normal,
                 'font-weight': css.fontWeight.regular
             });
             //selected state of radio button
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.showOnlyCustomSpecialCharactersRadioButton().find('svg'), {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.showOnlyCustomSpecialCharactersRadioButtonWrapper().find('svg'), {
                 'fill': css.color.activeButtons
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.customSpecialCharactersLabel(), {
@@ -109,7 +109,7 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular
             });
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.customSpecialCharactersInputField().find('fieldset'), {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.customSpecialCharactersInputFieldWrapper().find('fieldset'), {
                 'border': `1px solid ${css.color.figDefaultComponentBorder}`
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.customizeSpecialCharactersPreviewButton(), {
@@ -150,13 +150,10 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
             });
             //Category tiles in de-selected state
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileIcon().eq(0).find('svg'), {
-                'fill': css.color.secondaryBtn
-            });
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileSectionCategoriesDragIcon().eq(0).parent(), {
-                'fill': css.color.secondaryBtn
+                'fill': css.color.optionColor
             });
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileSectionCategoriesDragIcon().eq(0).parent(), {
-                'fill': css.color.defaultBackground
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileSectionCategoriesDragIcon().eq(0).find('svg'), {
+                'fill': css.color.optionColor
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharacterTileCategoryName().eq(0), {
                 'color': css.color.secondaryBtn,
@@ -172,18 +169,18 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
             utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
                 'color': css.color.flyoutTitle,
                 'font-size': css.fontSize.heading,
-                'font-weight': css.fontWeight.bold
+                'font-weight': css.fontWeight.semibold
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupCategoryLabel().eq(0), {
                 'color': css.color.accordionLabel,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.semibold
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
             });
             utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupCategoryAccordionExpandIcon().last().find('svg'), {
                 'fill': css.color.activeButtons
             });
-            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupSymbol().eq(0).find('svg'), {
-                'fill': css.color.defaultBackground
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.specialCharactersPreviewPopupSymbol().eq(0).find('svg path'), {
+                'fill': css.color.activeButtons
             });
         });
 
@@ -191,10 +188,10 @@ describe('Create item page - Fill in the gaps over image - text - Special charac
             cy.checkAccessibility(dialogBoxBase.dialogBox());
             cy.log('Closing preview popup');
             dialogBoxBase.steps.closeWarningPopup();
-            cy.checkAccessibility(fillInTheGapsOverImageTextPage.specialCharactersLabel().parent());
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.specialCharactersLabel());
             cy.log('Selecting show only custom special characters radio button');
             fillInTheGapsOverImageTextPage.steps.selectShowOnlyCustomSpecialCharactersRadioButton();
-            cy.checkAccessibility(fillInTheGapsOverImageTextPage.specialCharactersLabel().parent());
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.customSpecialCharactersInputFieldWrapper());
         });
     });
 

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/studentViewSettings.js

@@ -1,7 +1,10 @@
-import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import { fillInTheGapsOverImageTextPage, itemPreviewPage, studentViewPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Student view'];
+const views = utilities.getViews(correctAnswerViews);
+let itemReferenceID = "";
 
 describe('Create Item page - drag and drop into categories: Student view settings', () => {
     before(() => {
@@ -34,6 +37,56 @@ describe('Create Item page - drag and drop into categories: Student view setting
         fillInTheGapsOverImageTextPage.tests.verifySpellCheckFunctionalityPreviewTab();
     });
 
+    views.forEach((view) => {
+        describe(`${view}: Student view settings`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.checkSpellCheckCheckbox();
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in the preview tab', () => {
+                fillInTheGapsOverImageTextPage.steps.verifySpellCheckOfResponseFieldPreviewTabEnabled(0);
+            });
+        });
+    });
+
     /*describe('Allow students to check answer: Edit tab', () => {
         abortEarlySetup();
         before(() => {

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/styleAndLayoutCustomization.js

@@ -399,6 +399,18 @@ describe('Create Item page - Fill in the gaps over image with text: Style and la
             fillInTheGapsOverImageTextPage.steps.verifyResponseAreaDimensions(30, 118);
         });
 
+        it('User should only be able to enter numeric values in the \'Height (px)\' and \'Width (px)\' input fields', () => {
+            fillInTheGapsOverImageTextPage.steps.setTextContainerHeight('1*2');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerWidth('2%1');
+            fillInTheGapsOverImageTextPage.steps.verifyValueInTextContainerWidthAndHeightInputField('12', '21');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerHeight('apple');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerWidth('news');
+            fillInTheGapsOverImageTextPage.steps.verifyValueInTextContainerWidthAndHeightInputField('', '');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerHeight('54!@');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerWidth('@12');
+            fillInTheGapsOverImageTextPage.steps.verifyValueInTextContainerWidthAndHeightInputField('54', '12');
+        });
+
         it('When the user specifies the height and width, the dimensions of the text containers should update accordingly', () => {
             fillInTheGapsOverImageTextPage.steps.setTextContainerHeight(100);
             fillInTheGapsOverImageTextPage.steps.setTextContainerWidth(200);

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/styleAndLayoutCustomizationAllViews.js

@@ -0,0 +1,156 @@
+import { fillInTheGapsOverImageTextPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { colorPopupComponent } from "../../../pages/components";
+let correctAnswerViews = ['Question preview', 'Item preview', 'Student view', 'Grading view', 'Correct answer view'];
+const views = utilities.getViews(correctAnswerViews);
+const css = Cypress.env('css');
+let itemReferenceID = "";
+const modifiedColor = 'rgb(121, 60, 60)';
+
+describe('Create Item page - Drag and drop into categories: Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`${view}: Style and Layout Customization - Default State`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.selectResponseArea(0);
+                        fillInTheGapsOverImageTextPage.steps.selectResponseAreaPointerStyle('left');
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        fillInTheGapsOverImageTextPage.steps.switchToGradingView();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Correct answer view':
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        fillInTheGapsOverImageTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        itemPreviewPage.steps.resetQuestionPreview();
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it(`Text container should have default border color, fill color, and border style in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldFillColor(0, css.color.optionsBg);
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderColor(0, `1px solid ${css.color.activeComponentBorder}`);
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderStyle(0, 'solid');
+            });
+
+            it(`text container connector style should be displayed in default state in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyResponseAreaConnectorEndPointShapePreviewTab('Circle');
+            });
+        });
+    });
+
+    views.forEach((view) => {
+        describe(`${view}: Style and Layout Customization - modified State`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.selectResponseArea(0);
+                        fillInTheGapsOverImageTextPage.steps.selectResponseAreaPointerStyle('left');
+                        fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+                        fillInTheGapsOverImageTextPage.steps.selectEndPointShapeButton('Square');
+                        fillInTheGapsOverImageTextPage.steps.editColor(0);
+                        colorPopupComponent.steps.clickInColorSaturationPalette();
+                        colorPopupComponent.steps.clickOnOkButton();
+                        fillInTheGapsOverImageTextPage.steps.editColor(1);
+                        colorPopupComponent.steps.clickInColorSaturationPalette();
+                        colorPopupComponent.steps.clickOnOkButton();
+                        fillInTheGapsOverImageTextPage.steps.selectBorderStyleToggleButton('Dotted');
+                        fillInTheGapsOverImageTextPage.steps.checkSetHeightAndWidthForAllTextContainersCheckbox();
+                        fillInTheGapsOverImageTextPage.steps.setTextContainerHeight(100);
+                        fillInTheGapsOverImageTextPage.steps.setTextContainerWidth(200);
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        fillInTheGapsOverImageTextPage.steps.switchToGradingView();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        fillInTheGapsOverImageTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        itemPreviewPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it(`Text container should have default border color, fill color, and border style in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldFillColor(0, modifiedColor);
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderColor(0, `1px dotted ${modifiedColor}`);
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderStyle(0, 'dotted');
+            });
+
+            it(`text container connector style should be displayed in default state in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyResponseAreaConnectorEndPointShapePreviewTab('Square');
+            });
+
+            it(`Text containers should have modified height and width in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldHeightAndWidthInAllViews(0, '100px', '200px');
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/supportedFileTypes.js

@@ -43,7 +43,5 @@ describe('Create item page - Fill in the gaps over image with text: Supported fi
             utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.errorMessage(), 'notExist');
             utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.canvasUploadedImage(), 'notExist');
         });
-
-        fillInTheGapsOverImageTextPage.tests.verifyErrorMessageCSSAndA11y();
     });
 });

package/cypress/pages/components/additionalSettingsPanel.js

@@ -39,6 +39,15 @@ const steps = {
             .should('have.attr', 'aria-expanded', 'true');
     },
 
+    collapsedAdditionalSettings: () => {
+        additionalSettingsPanel.additionalSettingsPanel()
+            .click();
+        cy.log('Need this wait in order for the font size dropdown to render properly');
+        cy.wait(2000);
+        additionalSettingsPanel.additionalSettingsPanel()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
     //V3 - Need to be updated in all files
     selectFontSizeOptionFromFontSizeDropdown: (dropdownOption) => {
         additionalSettingsPanel.steps.expandFontSizeDropdown();

package/cypress/pages/components/backgroundImageUploadComponent.js

@@ -147,7 +147,7 @@ const tests = {
                 .trigger('mouseover');
             utilities.verifyCSS(commonComponents.tooltipText(), {
                 'color': css.color.whiteText,
-                'font-size': css.fontSize.normal,
+                'font-size': css.fontSize.small,
                 'font-weight': css.fontWeight.regular,
                 'background-color': css.color.tooltipBg
             });

package/cypress/pages/components/colorPopupComponent.js

@@ -23,7 +23,7 @@ const selectors = {
     opacityLabel: () => cy.get('[class*="ColorPickerstyles__SliderWrapper"]'),
     //Need to update when feedback scale is available
     opacitySlider: () => cy.get('[class*="ColorPickerstyles__SliderWrapper"] .color-slider'),
-    opacityInputField: () => cy.get('.opacity-wrapper [aria-label="Opacity"]'),
+    opacityInputField: () => cy.get('.opacity-wrapper [aria-label="Opacity"],.opacity-wrapper input[type*="Text"]'),
     recommendedColorsLabel: () => cy.get('.color-picker-footer-wrapper'),
     recommendedColorBlock: () => cy.get('[class*="ColorPickerstyles__ColorBlockWrapper"] .color-picker-block'),
     recommendedColorBlockSelectedIcon: () => cy.get('.selected-button-icon'),

package/cypress/pages/components/figCommonStyleAndLayoutComponent.js

@@ -260,15 +260,9 @@ const tests = {
                 'font-weight': css.fontWeight.regular,
                 'border': `1px solid ${css.color.figDefaultComponentBorder}`
             });
-            let selectedToggleButton;
-            if (selectedStyle == 'Solid') {
-                selectedToggleButton = figCommonStyleAndLayoutComponent.solidBorderStyleToggleButton();
-            } else {
-                selectedToggleButton = figCommonStyleAndLayoutComponent.dashedBorderStyleToggleButton();
-            }
-            utilities.verifyCSS(selectedToggleButton, {
-                'color': css.color.defaultBackground,
-                'background-color': css.color.secondaryBtnBg,
+            utilities.verifyCSS(figCommonStyleAndLayoutComponent.solidBorderStyleToggleButton(), {
+                'color': css.color.primaryBtn,
+                'background-color': css.color.primaryBtn,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular,
                 'border': `2px solid ${css.color.secondaryBtnActive}`
@@ -304,7 +298,7 @@ const tests = {
                 'background-color': css.color.secondaryBtnBg,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular,
-                'border': `2px solid ${css.color.secondaryBtnBorder}`
+                'border': `2px solid ${css.color.figDefaultComponentBorder}`
             });
             utilities.hoverAwayFromElement();
         });

package/cypress/pages/components/fillInTheGapsTextCommonComponent.js

@@ -299,7 +299,7 @@ const steps = {
      */
     verifyMaximumCharacterLimitInPreviewTab: (responseIndex, maxlen) => {
         utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab(), responseIndex)
-            .should('have.attr', 'maxlength', maxlen);
+            .should('have.attr', 'maxLength', maxlen);
     },
 
     /**
@@ -897,6 +897,19 @@ const steps = {
         });
     },
 
+    /**
+     * Verifies the height and width of the answer input field at the specified index.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} Height - The expected height value in CSS format.
+     * @param {string} Width - The expected width value in CSS format.
+     */
+    verifyAnswerInputFieldHeightAndWidthInAllViews: (responseAreaIndex, Height, Width) => {
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab().parent('.response-input-field'), responseAreaIndex), {
+            'height': Height,
+            'width': Width,
+        });
+    },
+
     /**
      * Verifies the border color of the answer input field at the specified index.
      * @param {number} responseAreaIndex - The index of the response area to verify.

package/cypress/pages/components/gradingViewEnumerationComponent.js

@@ -20,6 +20,11 @@ const selectors = {
 }
 
 const steps = {
+    verifyWithoutEnumerationRadioButtonCheckedState: () => {
+        gradingViewEnumerationComponent.withoutEnumerationRadioButton()
+            .should('be.checked');
+    },
+
     verifyWithEnumerationRadioButtonCheckedState: () => {
         gradingViewEnumerationComponent.withEnumerationRadioButton()
             .should('be.checked');

package/cypress/pages/components/imageCanvasComponent.js

@@ -653,8 +653,6 @@ const steps = {
     },
 
     verifyResponseAreaConnectorEndPointShapePreviewTab: (endPointShape) => {
-        commonComponents.previewTabQuestionWrapper()
-            .within(() => {
                 imageCanvasComponent.responseAreaPointer()
                     .each($element => {
                         switch (endPointShape) {
@@ -680,7 +678,6 @@ const steps = {
                                 throw new Error('Invalid end point shape')
                         }
                     });
-            });
     },
 
     /**

package/cypress/pages/components/placeholderTextSectionComponent.js

@@ -53,6 +53,11 @@ const steps = {
             .should('be.checked');
     },
 
+    verifyCustomizePlaceholderTextCheckboxChecked: () => {
+        placeholderTextSectionComponent.customizePlaceholderTextCheckbox()
+            .should('be.checked');
+    },
+
     
     verifyIndividualPlaceholderTextInputFields: (inputFieldIndex) => {
         placeholderTextSectionComponent.individualPlaceholderTextInputField()
@@ -78,6 +83,11 @@ const tests = {
             placeholderTextSectionComponent.steps.verifyCustomizePlaceholderTextCheckboxUnchecked();
         });
 
+        it('Placeholder text input field should accept text,special characters and numeric values', () => {
+            placeholderTextSectionComponent.steps.addInputToPlaceholderTextInputField('Test 123 !@#');
+            placeholderTextSectionComponent.steps.verifyPlaceholderTextInputFieldValue('Test 123 !@#');
+        });
+
         it('CSS of placeholder text section', { tags: 'css' }, () => {
             utilities.verifyCSS(placeholderTextSectionComponent.placeholderTextSectionLabel(), {
                 'color': css.color.labels,

package/cypress/pages/fillInTheGapsOverImageTextPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, commonComponents, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, backgroundImageUploadComponent, optionsWrapperComponent, imageCanvasComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, acceptedStudentInputComponent, customizeSpecialCharacterComponent, fillInTheGapsTextCommonComponent, additionalSettingsPanel, gradingViewEnumerationComponent, additionalSettingsAccessibilitySectionComponent, ariaLabelSectionComponent, placeholderTextSectionComponent, styleAndLayoutCustomizationAccordionComponent, figCommonStyleAndLayoutComponent, connectorStyleStyleAndLayoutCustomizationComponent } from "./components";
+import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, commonComponents, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, backgroundImageUploadComponent, optionsWrapperComponent, imageCanvasComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, acceptedStudentInputComponent, customizeSpecialCharacterComponent, fillInTheGapsTextCommonComponent, additionalSettingsPanel, gradingViewEnumerationComponent, additionalSettingsAccessibilitySectionComponent, ariaLabelSectionComponent, placeholderTextSectionComponent, styleAndLayoutCustomizationAccordionComponent, figCommonStyleAndLayoutComponent, connectorStyleStyleAndLayoutCustomizationComponent, printPreviewComponent } from "./components";
 import { createItemPage } from "./createItemPage";
 import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
@@ -25,6 +25,7 @@ const selectors = {
     ...figCommonStyleAndLayoutComponent,
     ...connectorStyleStyleAndLayoutCustomizationComponent,
     ...dialogBoxBase,
+    ...printPreviewComponent,
     //TODO: Update below selectors after https://redmine.zeuslearning.com/issues/557945 is resolved
 
     responseContainerInPreviewTab: () => cy.get('[class*="AddTextResponseOnImagestyles__DraggableInput"]'),
@@ -72,6 +73,7 @@ const steps = {
     ...figCommonStyleAndLayoutComponent.steps,
     ...connectorStyleStyleAndLayoutCustomizationComponent.steps,
     ...createItemPage.steps,
+    ...printPreviewComponent.steps,
     /**
      * Verify that the incorrect option icon is displayed for a specific answer input field.
      * @param {number} inputFieldIndex - The index of the answer input field to verify.
@@ -272,6 +274,8 @@ const steps = {
     * @param {string} height - The height to set for the text container.
     */
     setTextContainerHeight: (height) => {
+        fillInTheGapsOverImageTextPage.textContainerHeightInputField()
+            .clear()
         fillInTheGapsOverImageTextPage.textContainerHeightInputField()
             .type(height)
         cy.wait(1000)
@@ -285,6 +289,8 @@ const steps = {
      * @param {string} width - The width to set for the text container.
      */
     setTextContainerWidth: (width) => {
+        fillInTheGapsOverImageTextPage.textContainerWidthInputField()
+            .clear()
         fillInTheGapsOverImageTextPage.textContainerWidthInputField()
             .type(width)
         cy.wait(1000)
@@ -293,6 +299,19 @@ const steps = {
             .blur();
     },
 
+    /**
+     * Verifies the values in the text container width and height input fields.
+     * @param {string} width - The width of the text container.
+     * @param {string} height - The height of the text container.
+     */
+    verifyValueInTextContainerWidthAndHeightInputField: (height, width) => {
+        fillInTheGapsOverImageTextPage.textContainerWidthInputField()
+            .should('have.value', width);
+        fillInTheGapsOverImageTextPage.textContainerHeightInputField()
+            .should('have.value', height);
+    },
+
+
     verifySetHeightAndWidthForAllTextContainersCheckboxUncheckedState: () => {
         fillInTheGapsOverImageTextPage.setHeightAndWidthForAllTextContainersCheckbox()
             .should('not.be.checked');
@@ -371,6 +390,7 @@ const tests = {
     ...placeholderTextSectionComponent.tests,
     ...styleAndLayoutCustomizationAccordionComponent.tests,
     ...figCommonStyleAndLayoutComponent.tests,
+    ...printPreviewComponent.tests,
 }
 
 export const fillInTheGapsOverImageTextPage = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.565",
+  "version": "1.0.566",
   "description": "",
   "main": "index.js",
   "scripts": {