itemengine-cypress-automation 1.0.47 → 1.0.50

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextAdditionalSettingsBasic.js

@@ -0,0 +1,202 @@
+import { specialOrMathCharacters } from "../../../fixtures/specialAndMathCharacters";
+import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const correctTabAnswerArray = ['Flower', 'Leaf'];
+const incorrectAnswerArray = ['Root', 'Branch'];
+const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
+let symbolsString = specialOrMathCharacters['specialCharacters'].characters.map((icon) => icon.symbol);
+symbolsString = symbolsString.join('');
+
+describe('Fill In the gaps over image - text - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Font size - Contents and functionality in set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.allotPoints(10);
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyFontSizeSectionContents();
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the set correct answer section should change to ${option}`, () => {
+                fillInTheGapsOverImageTextPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
+                utilities.verifyInnerText(fillInTheGapsOverImageTextPage.fontSizeDropdown(), `${option}`);
+                utilities.verifyCSS(fillInTheGapsOverImageTextPage.responseFieldSetCorrectAnswerSection(), {
+                    'font-size': font[count]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageTextPage.highlightNumeration(), {
+                    'font-size': font[count]
+                });
+            });
+        });
+    });
+
+    describe('Additional settings: Font size - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.addQuestionInstructions();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.allotPoints(10);
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${option} accordingly`, () => {
+                fillInTheGapsOverImageTextPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
+                utilities.verifyInnerText(fillInTheGapsOverImageTextPage.fontSizeDropdown(), `${option}`);
+                fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                utilities.verifyCSS(fillInTheGapsOverImageTextPage.questionInstructionsText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageTextPage.responseFieldPreviewTab(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+                utilities.verifyCSS(fillInTheGapsOverImageTextPage.previewTabCorrectAnswerLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageTextPage.responseNumeration(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageTextPage.previewTabCorrectAnswerResponseWrapper(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                fillInTheGapsOverImageTextPage.steps.uncheckShowCorrectAnswerCheckbox();
+                fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: Check answer', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
+    });
+
+    describe('Additional settings: Check answer - Functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.allotPoints(20);
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.setMaximumCheckAnswerAttempts(2);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCheckAnswerButtonFunctionalityWhenQuestionIsUnattempted();
+
+        it('When the user attempts the question partially correct, then on clicking on the \'Check answer\' button, green check-mark icon should be displayed besides the correct response, red cross-mark should be displayed besides incorrect response and \'Incorrect answer\' label should be displayed below the question preview', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        it('When the user attempts the question correctly, then on clicking on the \'Check answer\' button, green check-mark icon should be displayed besides the correct response and \'Correct answer\' label should be displayed below the question preview', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyDisabledCheckAnswerButtonWithCSSAnda11y();
+
+        it('When the user updates the value of Maximum check answer attempts input field, it should get reflected on the Preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            fillInTheGapsOverImageTextPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(1);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyCheckAnswerButtonEnabled();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        it('When the \'Maximum check answer attempts\' input field is empty and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.clearMaximumCheckAnswerAttemptsInputField()
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCheckAnswerButtonEnabled();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+
+    describe('Additional settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyDetailsSection();
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextAdditionalSettingsCustomSpecialCharachters.js

@@ -0,0 +1,120 @@
+import { specialOrMathCharacters } from "../../../fixtures/specialAndMathCharacters";
+import { dialogBoxBase, fillInTheGapsOverImageTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+let customSpecialCharacters = [':', ')', '`']
+let symbolsString = specialOrMathCharacters['specialCharacters'].characters.map((icon) => icon.symbol);
+symbolsString = symbolsString.join('');
+
+describe('Fill In the gaps over image - text - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings: Custom special characters section - Contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyAdditionalSettingsCustomSpecialCharactersSection();
+
+        it('When the user has enabled the \'Display special characters\' functionality, then the \'Special characters\' button should be displayed when user focuses in any response field in \'Set correct answer\' section ', () => {
+            fillInTheGapsOverImageTextPage.steps.verifySpecialCharacterButtonNotVisibleInResponseFieldSetCorrectAnswerSection(0);
+            fillInTheGapsOverImageTextPage.steps.focusAndVerifySpecialCharactersButtonInResponseFieldSetCorrectAnswerSection(0);
+        });
+
+        it('When the user has added no input to the \'Custom special characters\' input field then the default Special characters flyout should be displayed on clicking the \'Special characters\' button in the response field', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnSpecialCharactersButtonSetCorrectAnswerSection(0);
+            fillInTheGapsOverImageTextPage.steps.verifySpecialCharactersFlyoutHeaderContents();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifySpecialCharactersFlyoutSymbols();
+
+        it(`When the user clicks on a symbol in the ${specialOrMathCharacters['specialCharacters'].popupTitle} popup, then that symbol should be inserted in the response field`, () => {
+            cy.log('Clicking on all symbols.');
+            fillInTheGapsOverImageTextPage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(0, symbolsString)
+        });
+
+        it('When the \'Display special characters\' checkbox is checked then user should be able to enter value in the \'Custom special characters\' input field', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInCustomSpecialCharactersInputField(':)`');
+        });
+
+        it('When the user clicks on the \'Special characters\' button in the response field, then a flyout with the title \'Special characters\' and close button should be displayed, the flyout should contain all the added Special characters entered in the \'Custom special characters\' input field', () => {
+            fillInTheGapsOverImageTextPage.steps.focusAndVerifySpecialCharactersButtonInResponseFieldSetCorrectAnswerSection(1);
+            fillInTheGapsOverImageTextPage.steps.clickOnSpecialCharactersButtonSetCorrectAnswerSection(1);
+            fillInTheGapsOverImageTextPage.steps.verifySpecialCharactersFlyoutHeaderContents();
+            fillInTheGapsOverImageTextPage.steps.verifySpecialCharactersFlyoutIcons(customSpecialCharacters);
+        });
+
+        it('When the user clicks on the characters then they should be added to the set correct answer response field', () => {
+            fillInTheGapsOverImageTextPage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(1, ':)`');
+        });
+    });
+
+    describe('Additional settings: Custom special characters section - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Custom special characters\' functionality is disabled then the \'Special characters\' button should not be displayed in the preview tab response field', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.previewTabResponseFieldSpecialCharactersButton(), 'notExist');
+        });
+
+        it('When the user has enabled the \'Custom special characters\' functionality then the \'Special characters\' button should be displayed when user focuses in any response field in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.checkDisplaySpecialCharactersCheckbox();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifySpecialCharacterButtonNotVisibleInResponseFieldPreviewTab(0);
+            fillInTheGapsOverImageTextPage.steps.focusAndVerifySpecialCharactersButtonInResponseFieldPreviewTab(0);
+        });
+
+        it('When the user has added no input to the \'Custom special characters\' input field then the default Special characters flyout should be displayed on clicking the \'Special characters\' button in the response field', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnSpecialCharactersButtonPreviewTab(0);
+            fillInTheGapsOverImageTextPage.steps.verifySpecialCharactersFlyoutHeaderContents();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifySpecialCharactersFlyoutSymbols()
+
+        it(`When the user clicks on a symbol in the ${specialOrMathCharacters['specialCharacters'].popupTitle} popup, then that symbol should be inserted in the response field`, () => {
+            fillInTheGapsOverImageTextPage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, symbolsString);
+        });
+
+        it('When the user specifies custom special characters and clicks on the \'Special characters\' button in the preview tab response field, then a flyout with the title \'Special characters\' and close button should be displayed, the flyout should contain all the added Special characters entered in the \'Custom special characters\' input field', () => {
+            cy.log('Adding custom special characters')
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInCustomSpecialCharactersInputField(':)`');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.focusAndVerifySpecialCharactersButtonInResponseFieldPreviewTab(1);
+            fillInTheGapsOverImageTextPage.steps.clickOnSpecialCharactersButtonPreviewTab(1);
+            fillInTheGapsOverImageTextPage.steps.verifySpecialCharactersFlyoutHeaderContents();
+            fillInTheGapsOverImageTextPage.steps.verifySpecialCharactersFlyoutIcons(customSpecialCharacters);
+        });
+
+        it('When the user clicks on the characters then they should be added to the preview tab input field', () => {
+            fillInTheGapsOverImageTextPage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(1, ':)`');
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextAdditionalSettingsMultilineResponse.js

@@ -0,0 +1,189 @@
+import { specialOrMathCharacters } from "../../../fixtures/specialAndMathCharacters";
+import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+let symbolsString = specialOrMathCharacters['specialCharacters'].characters.map((icon) => icon.symbol);
+symbolsString = symbolsString.join('');
+
+describe('Fill In the gaps over image - text - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings: Multiline response - Contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Multiline response\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.multilineResponseLabel(), 'Multiline response');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.multilineResponseLabel(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifyMultilineResponseCheckboxNotChecked();
+        });
+
+        it('CSS of \'Multiline response\' section - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.multilineResponseLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.multilineResponseCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        it('When the \'Multiline response\' functionality is disabled, the response fields should not have \'textarea\' field in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyMultilineResponseForResponseFieldSetCorrectAnswerSectionDisabled();
+        });
+
+        it('When \'Multiline response\' functionality is disabled then the user should not be able to enter a multiline response in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, 'l{enter}o{enter}r{enter}e{enter}m');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(0, 'lorem');
+        });
+
+        it('When the \'Multiline response\' functionality is enabled, the response field should have \'textarea\' field in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.checkMultilineResponseCheckbox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseFieldSetCorrectAnswerSection(), 'notExist');
+        });
+
+        it('When the \'Multiline response\' functionality is enabled then the user should be able to add Multiline responses in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInMultilineResponseAreaSetCorrectAnswerSection(0, 'l{enter}o{enter}r{enter}e{enter}m');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInMultilineResponseAreaSetCorrectAnswerSection(0, 'l\no\nr\ne\nm​');
+        });
+
+        it('CSS of \'Multiline response\' section - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.multilineResponseCheckbox().parent().find('svg g g'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Multiline response\' section - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.multilineResponseCheckbox().parents('.additional-settings-container'));
+        });
+
+        it('When the \'Multiline response\' functionality is enabled then the user should be able to enter multiline characters including the line breaks up to the set character limit', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInMultilineResponseAreaSetCorrectAnswerSection(0, 'l{enter}o{enter}r{enter}e{enter}m{enter}e{enter}s{enter}u{enter}m{enter}l{enter}nam');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInMultilineResponseAreaSetCorrectAnswerSection(0, 'l\no\nr\ne\nm\ne\ns\nu\nm\nl\n​');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/547598
+        it('When the user disables the Multiline response functionality, the added input in the response field should appear in a single line in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.uncheckMultilineResponseCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldSetCorrectAnswerSection(0, 'loremesuml');
+        });
+    });
+
+    describe('Additional settings: Multiline response - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Multiline response\' functionality is disabled, the response field should not have \'textarea\' field in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyMultilineResponseForResponseFieldPreviewTabDisabled();
+        });
+
+        it('When \'Multiline response\' functionality is disabled, the user should not be able to add multiline response in the preview tab response field', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, 'l{enter}o{enter}r{enter}e{enter}m');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, 'lorem');
+        });
+
+        it('When the \'Multiline response\' functionality is enabled, the response field should have \'textarea\' field in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.checkMultilineResponseCheckbox();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseFieldPreviewTab(), 'notExist');
+        });
+
+        it('When the \'Multiline response\' functionality is enabled then the user should be able to add Multiline responses in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInMultilineResponseAreaPreviewTab(0, 'l{enter}o{enter}r{enter}e{enter}m');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInMultilineResponseAreaPreviewTab(0, 'l\no\nr\ne\nm​');
+        });
+
+        it('When the \'Multiline response\' functionality is enabled then the user should be able to enter multiline characters including the line breaks up to the set character limit in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInMultilineResponseAreaPreviewTab(0, 'l{enter}o{enter}r{enter}e{enter}m{enter}e{enter}s{enter}u{enter}m{enter}l{enter}nam');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInMultilineResponseAreaPreviewTab(0, 'l\no\nr\ne\nm\ne\ns\nu\nm\nl\n​');
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/547600
+    describe('Additional settings: Scoring for multiline response', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.checkMultilineResponseCheckbox();
+        });
+
+        it('When the user has enabled the Multiline functionality then user should be able to set multiline correct answers and points in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInMultilineResponseAreaSetCorrectAnswerSection(0, 'R{enter}e{enter}s{enter}p{enter}o{enter}n{enter}s{enter}e{enter}1');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInMultilineResponseAreaSetCorrectAnswerSection(0, 'R\ne\ns\np\no\nn\ns\ne\n1​');
+            fillInTheGapsOverImageTextPage.steps.enterTextInMultilineResponseAreaSetCorrectAnswerSection(1, 'Response 2')
+            fillInTheGapsOverImageTextPage.steps.verifyTextInMultilineResponseAreaSetCorrectAnswerSection(1, 'Response 2​');
+            fillInTheGapsOverImageTextPage.steps.allotPoints(10);
+        });
+
+        it('When the user enters the correct multiline and single line response in the preview tab then full points should be awarded and on selecting show correct answer checkbox, correct icons should be displayed beside response areas, \'Correct answer\' label and correct answer border should be displayed below the question preview and no correct answer container should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInMultilineResponseAreaPreviewTab(0, 'R{enter}e{enter}s{enter}p{enter}o{enter}n{enter}s{enter}e{enter}1');
+            fillInTheGapsOverImageTextPage.steps.enterTextInMultilineResponseAreaPreviewTab(1, 'Response 2')
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabScoreText(10, 10);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.uncheckShowCorrectAnswerCheckbox();
+        });
+
+        it('When the user enters a single line response instead of a multiline response then 0 points should be awarded and on selecting show correct answer checkbox,  incorrect icons should be displayed beside response areas, \'Incorrect answer\' label and incorrect answer border should be displayed below the question preview and correct answer container along with correct answers for responses marked incorrect should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageTextPage.steps.enterTextInMultilineResponseAreaPreviewTab(0, 'Response 1');
+            fillInTheGapsOverImageTextPage.steps.enterTextInMultilineResponseAreaPreviewTab(1, 'Response 2');
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabScoreText(0, 10);
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount(['R\ne\ns\np\no\nn\ns\ne\n1'], ['1']);
+            fillInTheGapsOverImageTextPage.steps.uncheckShowCorrectAnswerCheckbox();
+        });
+
+        it('When the user enters a multiline response instead of a single line response then 0 points should be awarded and on selecting show correct answer checkbox,  incorrect icons should be displayed beside response areas, \'Incorrect answer\' label and incorrect answer border should be displayed below the question preview and correct answer container along with correct answers for responses marked incorrect should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageTextPage.steps.enterTextInMultilineResponseAreaPreviewTab(0, 'R{enter}e{enter}s{enter}p{enter}o{enter}n{enter}s{enter}e{enter}1');
+            fillInTheGapsOverImageTextPage.steps.enterTextInMultilineResponseAreaPreviewTab(1, 'R{enter}e{enter}s{enter}p{enter}o{enter}n{enter}s{enter}e{enter}2');
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabScoreText(0, 10);
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount(['Response 2'], ['2']);
+            fillInTheGapsOverImageTextPage.steps.uncheckShowCorrectAnswerCheckbox();
+        });
+    });
+});