itemengine-cypress-automation 1.0.23 → 1.0.24

package/cypress/e2e/ILC/FillInTheGapsText/fillInTheGapsTextAdditionalSettings.js

@@ -0,0 +1,2060 @@
+import { specialOrMathCharacters } from "../../../fixtures/specialAndMathCharacters";
+import { dialogBoxBase, fillInTheGapsTextPage } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+let customSpecialCharacters = [':', ')', '`']
+
+describe('Fill In the Gaps Additional settings and Responses accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+        });
+
+        fillInTheGapsTextPage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional Settings: Advanced settings for all response areas', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyAdvanceSettingsForAllResponsesLabelAndCSS();
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional Settings: Placeholder text', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyPlaceholderTextLabelInputFieldAndCSS()
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        //Placeholder test cases for Set correct answer section response fields
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the set correct answer response field', () => {
+            fillInTheGapsTextPage.placeholderTextInputField()
+                .should('have.value', '');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('not.have.attr', 'placeholder');
+                });
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the set correct answer response field', () => {
+            fillInTheGapsTextPage.placeholderTextInputField()
+                .type('Lorem Ipsum')
+                .should('have.value', 'Lorem Ipsum');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'placeholder', 'Lorem Ipsum');
+                });
+        });
+
+        //Comment: not possible to check css of placeholder since it is added as an attribute, properties of placeholder is not visible in dev tools
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.setCorrectAnswerResponseField().parents('.response-input-field'));
+        });
+
+        it('When the user starts typing in the response field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear for the set correct answer section response fields', () => {
+            //TODO: Need to update script after https://redmine.zeuslearning.com/issues/527580 is resolved
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .type('Response')
+                .should('have.value', 'Response')
+                .should('not.have.attr', 'placeholder')
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .clear()
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+        });
+
+        //Placeholder test cases for Preview tab response fields
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the preview tab response field', () => {
+            cy.log('Pre step: Clearinng the placeholder text and switching to Preview tab')
+            fillInTheGapsTextPage.placeholderTextInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('not.have.attr', 'placeholder');
+                });
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the preview tab response field', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.placeholderTextInputField()
+                .type('Lorem Ipsum')
+                .should('have.value', 'Lorem Ipsum');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'placeholder', 'Lorem Ipsum');
+                });
+        });
+
+        //Comment: not possible to check css of placeholder since it is added as an attribute, properties of placeholder is not visible in dev tools
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.previewTabResponseField().parents('.response-input-field'))
+        });
+
+        it('When the user starts typing in the response field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear for the preview tab response fields', () => {
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .type('Response')
+                .should('have.value', 'Response')
+                .should('not.have.attr', 'placeholder');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .clear()
+                .blur()
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+        });
+    });
+
+    describe('Additional Settings: Type of answer input', () => {
+        const typeOfAnswers = ['Text', 'Number'];
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Type of answer\' label and dropdown should be displayed and in \'Type of answer\' dropdown \'Text\' option should be selected by default', () => {
+            fillInTheGapsTextPage.typeOfAnswerInputLabel()
+                .verifyInnerText('Type of answer input');
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .verifyInnerText('Text');
+        });
+
+        it('CSS of \'Type of answer\' dropdown', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.typeOfAnswerInputLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        it(`Clicking on Type of answer dropdown should open a list of 2 options - ${typeOfAnswers}`, () => {
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .should('be.visible');
+            typeOfAnswers.forEach((index, count) => {
+                fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(count)
+                    .verifyInnerText(index);
+            });
+        });
+
+        it('CSS of Type of answer dropdown in Active state', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .should('have.css', 'background-color', css.color.transparent);
+        });
+
+        it('Accessibility of Type of answer dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.dropdownList());
+        });
+
+        //Type of answer input test cases for set correct answer section response fields
+        it('When \'Text\' option is set in the dropdown, then user should be able to add alpha-numeric characters in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .verifyInnerText('Text');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('Response 1')
+                        .should('have.value', 'Response 1');
+                });
+        });
+
+        it('When the user selects \'Number\' option from the dropdown the the user should be able to add only numeric characters in the set correct answer response field', () => {
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .click();
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('Response 1')
+                        .should('have.value', '1');
+                });
+        });
+
+        //Type of answer input test cases for preview tab response fields
+        it('When \'Text\' option is set in the dropdown, then user should be able to add alpha-numeric characters in preview tab response fields', () => {
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .click();
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('Response 1')
+                        .should('have.value', 'Response 1');
+                });
+        });
+
+        it('When the user selects \'Number\' option from the dropdown then the user should be able to add only numeric characters in the preview tab input field', () => {
+            cy.log('Switching to edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .click();
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('Response 1')
+                        .should('have.value', '1');
+                });
+        })
+    });
+
+    describe('Additional Settings: Set character limit', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Set character limit\' label and input field should be displayed and in \'Set character limit\' input field the default value should be \'20\'', () => {
+            fillInTheGapsTextPage.setCharacterLimitLabel()
+                .verifyInnerText('Set character limit')
+                .should('be.visible');
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .should('have.value', '20')
+                .and('be.visible');
+        });
+
+        it('User should not be able to Set character limit value below 1', () => {
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .clear()
+                .type('0')
+                .should('have.value', '0');
+            cy.get('body')
+                .click();
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .should('not.have.value', '0')
+                .and('have.value', '1');
+        });
+
+        it('When the user removes the default set characters limit then user should be able to enter \'20\' characters', () => {
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .clear()
+                .blur();
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .focus()
+                .type('ut placerat orci nulla')
+                .should('have.value', 'ut placerat orci nulla');
+            cy.log('Post step: Setting character limit to 20 and clearing the added text')
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .type('20')
+                .should('have.value', '20');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .clear();
+        });
+
+        //Set character limit test cases for set correct answer section response fields
+        it('User should not be able to add characters more than the default Set character limit value in the Set correct answer response fields', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('ut placerat orci nulla')
+                        .should('have.value', 'ut placerat orci nul');
+                });
+        });
+
+        it('When tries to enter a response using Enter key in the repsonse fields then the user should not be able to do so and should be able to enter the specified number of characters only for the set correct answer section response fields', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .clear()
+                        .type('at i{enter}n{enter}t{enter}e{enter}llu{enter}s in{enter}te gers')
+                        .should('have.value', 'at intellus inte ger');
+                });
+        });
+
+        it('User should be able to edit the \'Set character limit\' input field', () => {
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .clear()
+                .type('45')
+                .should('have.value', '45');
+        });
+
+        it('User should not be able to add characters more than the Set character limit value in the Set correct answers', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .clear()
+                        .type('ut placerat orci nulla pellentesque dignissim e')
+                        .should('have.value', 'ut placerat orci nulla pellentesque dignissim');
+                });
+        });
+
+        //Type of answer input test cases for preview tab response fields
+        it('User should not be able to add characters more than the default Set character limit value in the preview tab response fields', () => {
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .clear()
+                .type('20')
+                .should('have.value', '20');
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('ut placerat orci nulla')
+                        .should('have.value', 'ut placerat orci nul');
+                });
+        });
+
+        it('When tries to enter a response using Enter key in the response fields then the user should not be able to do so and should be able to enter the specified number of characters only for the preview tab response fields', () => {
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .clear()
+                        .type('at i{enter}n{enter}t{enter}e{enter}llu{enter}s in{enter}te gers')
+                        .should('have.value', 'at intellus inte ger');
+                });
+        });
+
+        it('User should be able to edit the \'Set character limit\' input field', () => {
+            cy.log('Switching to edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .clear()
+                .type('45')
+                .should('have.value', '45');
+        });
+
+        it('User should not be able to add characters more than the Set character limit value in the preview tab response fields', () => {
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('ut placerat orci nulla pellentesque dignissim e')
+                        .should('have.value', 'ut placerat orci nulla pellentesque dignissim');
+                });
+        });
+    });
+
+    describe('Additional Settings: Height and Width', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyHeightAndWidthLabelInputFieldWithCSSAnda11y()
+
+        //Height and width test cases for set correct answer section response fields
+        //TODO: We will need to revisit below case as it will fail for mobile view
+        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the response field should be (197x46)px in the \'Set correct answer\' section response field', () => {
+            fillInTheGapsTextPage.heightInputField()
+                .should('have.value', '');
+            fillInTheGapsTextPage.widthInputField()
+                .should('have.value', '');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'height', '46px')
+                        .and('have.attr', 'width', '13.7em')
+                });
+        });
+
+        it('When the user adds \'Height\' for the response field then the height of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.heightInputField()
+                .type('100')
+                .should('have.value', '100');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'height', '100px');
+                });
+        });
+
+        it('When the user adds \'Width\' for the response field then the Width of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.heightInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsTextPage.widthInputField()
+                .type('100')
+                .should('have.value', '100');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'width', '100px');
+                });
+        });
+
+        it('When the user enters a value below 80px in the \'Width\' input field then the width of the input field should remain 80px in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .type('20')
+                .should('have.value', '20');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'width', '80px');
+                });
+        });
+
+        it('When the user enters a value above 400px in the \'Width\' input field then the width of the input field should remain 400px in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .type('800')
+                .should('have.value', '800');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'width', '400px');
+                });
+        });
+
+        //Height and width test cases for preview tab response fields
+        //TODO: We will need to revisit below case as it will fail for mobile view
+        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the response field should be (197x46)px for the preview tab', () => {
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'height', '46px')
+                        .and('have.attr', 'width', '13.7em')
+                });
+        });
+
+        it('When the user adds \'Height\' for the response field then the height of the response field should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.heightInputField()
+                .type('100')
+                .should('have.value', '100');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'height', '100px');
+                });
+        });
+
+        it('When the user adds \'Width\' for the response field then the response fields should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.heightInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsTextPage.widthInputField()
+                .type('100')
+                .should('have.value', '100');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'width', '100px');
+                });
+        });
+
+        it('When the user enters a value below 80px in the \'Width\' input field then the input field should remain 80px for the preview tab response fields', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .type('20')
+                .should('have.value', '20');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'width', '80px');
+                });
+        });
+
+        it('When the user enters a value above 400px in the \'Width\' input field then the input field should remain 400px for preview tab repsonse field', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .type('800')
+                .should('have.value', '800');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'width', '400px');
+                });
+        });
+    });
+
+    describe('Additional Settings : Response accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyAdditionalSettingsResponseAccordionLabelCSSAndA11y();
+    });
+
+    describe('Response Accordions: ARIA label', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsTextPage.steps.expandResponseAccordion(0);
+            fillInTheGapsTextPage.steps.expandResponseAccordion(1);
+        });
+
+        fillInTheGapsTextPage.tests.verifyDefaultStateOfAriaLabelInputFieldInResponseAccordionAndCSS();
+
+        //Note: a11y covered in Additional Settings: Response accordion
+
+        //ARIA label test cases for set correct answer section
+        it('When the user has not set \'ARIA label\' input field then the default \'ARIA label\' should be present for the \'Set correct answer\' section response field', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el, count) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'aria-label', `Add answer for response ${count + 1}`);
+                });
+        });
+
+        fillInTheGapsTextPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('ARIA label');
+
+        it('When the user has set \'ARIA label\' in the response accordion then it should be present for the \'Set correct answer\' section response field and for the other response field, value of the aria-label should remain the same', () => {
+            fillInTheGapsTextPage.steps.setAriaLabelInResponseAccordion(0, 'Custom Aria Label');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .should('have.attr', 'aria-label', 'Custom Aria Label');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(1)
+                .should('have.attr', 'aria-label', 'Add answer for response 2');
+        });
+
+        fillInTheGapsTextPage.tests.verifyCustomLabelVisibleOnResponseAccordion('ARIA label');
+
+        fillInTheGapsTextPage.tests.verifyCustomLabelOnResponseAccordionCSS();
+
+        it('Accessibility of input field in \'Set correct answer\' section when custom \'ARIA label\' is set and Custom label', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.setCorrectAnswerResponseField().parents('.response-input-field'))
+            cy.checkAccessibility(fillInTheGapsTextPage.responseAccordionCustomLabel())
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default \'ARIA label\' should be present for the response fields in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.ariaLabelInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el, count) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'aria-label', `Add answer for response ${count + 1}`);
+                });
+        });
+
+        //ARIA label test cases for preview tab
+        //https://redmine.zeuslearning.com/issues/537797
+        it('When the user has not set \'ARIA label\' input field then in the preview tab default \'ARIA label\' should be present for the response field in the preview tab', () => {
+            cy.log('Pre step: Switch to Preview tab')
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el, count) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'aria-label', `Add answer for response ${count + 1}`);
+                });
+        });
+
+        it('When the user has set \'ARIA label\' in the response accordion then it should be present for the response field in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.setAriaLabelInResponseAccordion(0, 'Custom Aria Label');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .should('have.attr', 'aria-label', 'Custom Aria Label');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(1)
+                .should('have.attr', 'aria-label', 'Add answer for response 2');
+        });
+
+        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.previewTabResponseField().parents('.response-input-field'))
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default \'ARIA label\' should be present for the response field in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.ariaLabelInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el, count) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'aria-label', `Add answer for response ${count + 1}`);
+                });
+        });
+    });
+
+    describe('Response Accordions: Placeholder text', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsTextPage.steps.expandResponseAccordion(0)
+            fillInTheGapsTextPage.steps.expandResponseAccordion(1)
+        });
+
+        fillInTheGapsTextPage.tests.verifyDefaultStateOfPlaceholderTextInputFieldInResponseAccordionAndCSS();
+
+        //Note: a11y covered in Additional Settings: Response accordion
+
+        //Placeholder test cases for Set correct answer section
+        it('When the user has not set Placeholder text in the Response accordion then placeholder should not be displayed in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('not.have.attr', 'placeholder');
+                });
+        });
+
+        fillInTheGapsTextPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('Placeholder text');
+
+        it('When the user has set a Placeholder text in either response accordion then a placeholder text should be displayed for the respective response in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+        });
+
+        fillInTheGapsTextPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Placeholder text');
+
+        it('When the user removes the Placeholder text from the individual responses the Placeholders should get updated accordingly in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.placeholderTextInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .should('not.have.attr', 'placeholder');
+        });
+
+        it('When the user has set placeholder text in the individual response areas, then it should override the placeholder text set in the \'Advanced settings for all response areas\' in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.placeholderTextInputField()
+                .type('Global placeholder')
+                .should('have.value', 'Global placeholder');
+            fillInTheGapsTextPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(1)
+                .should('have.attr', 'placeholder', 'Global placeholder');
+        });
+
+        //Comment: not possible to check css of placeholder since it is added as an attribute, properties of placeholder is not visible in dev tools
+
+        it('Accessibility of \'Placeholder text\' in \'Set correct answer\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.setCorrectAnswerResponseField().parents('.response-input-field'));
+        });
+
+        it('When the user enters text in the response field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear for the set correct answer section', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .type('Response')
+                .should('have.value', 'Response')
+                .should('not.have.attr', 'placeholder');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .clear()
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+        });
+
+        //Placeholder test cases for preview tab
+        it('When the user has not set Placeholder text in the Response accordion then placeholder should not be displayed in preview tab response fields', () => {
+            cy.log('Pre step: Clearing the set Placeholder text')
+            fillInTheGapsTextPage.placeholderTextInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.placeholderTextInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('not.have.attr', 'placeholder');
+                });
+        });
+
+        it('When the user has set a Placeholder text in either individual response accordion a placeholder text should be displayed for the respective response in preview tab', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(1)
+                .should('not.have.attr', 'placeholder');
+        });
+
+        it('When the user removes the Placeholder text from individual responses the Placeholders should get updated accordingly for both the responses in preview tab', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.placeholderTextInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .should('not.have.attr', 'placeholder');
+        });
+
+        it('When the user has set placeholder text in the individual response area, then it should override the placeholder text set in the \'Advanced settings for all response areas\' in the preview tab response fields', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.placeholderTextInputField()
+                .type('Global placeholder')
+                .should('have.value', 'Global placeholder');
+            fillInTheGapsTextPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(1)
+                .should('have.attr', 'placeholder', 'Global placeholder');
+        });
+
+        //Comment: not possible to check css of placeholder since it is added as an attribute, properties of placeholder is not visible in dev tools
+
+        it('Accessibility of \'Placeholder text\' in preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.previewTabResponseField().parents('.response-input-field'))
+        });
+
+        //https://redmine.zeuslearning.com/issues/529544
+        it('When the user enters text in the response field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear in the preview tab', () => {
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .type('Response')
+                .should('have.value', 'Response')
+                .should('not.have.attr', 'placeholder');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .clear()
+                .blur()
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+        });
+    });
+
+    describe('Response Accordions: Type of answer input', () => {
+        abortEarlySetup();
+        const typeOfAnswers = ['Text', 'Number'];
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsTextPage.steps.expandResponseAccordion(0);
+            fillInTheGapsTextPage.steps.expandResponseAccordion(1);
+        });
+
+        it('\'Type of answer\' label and dropdown should be displayed and by default in the \'Type of answer\' dropdown \'Text\' option should be selected for both response accordions', () => {
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            fillInTheGapsTextPage.typeOfAnswerInputLabel()
+                                .verifyInnerText('Type of answer input');
+                            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                                .verifyInnerText('Text');
+                        });
+                })
+        });
+
+        it('CSS of \'Type of answer\' dropdown', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputLabel()
+                        .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+                });
+        });
+
+        //Note: a11y covered in Additional Settings: Response accordion
+
+        it(`Clicking on Type of answer dropdown should open a list of 2 options - ${typeOfAnswers}`, () => {
+            cy.log('Checking dropdown contents for Response 1 accordion')
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .click();
+                });
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .should('be.visible');
+            typeOfAnswers.forEach((index, count) => {
+                fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(count)
+                    .verifyInnerText(index);
+            });
+            cy.get('body')
+                .click();
+            cy.log('Checking dropdown contents for Response 2 accordion')
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .click();
+                });
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .should('be.visible');
+            typeOfAnswers.forEach((index, count) => {
+                fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(count)
+                    .verifyInnerText(index);
+            });
+        });
+
+        it('CSS of Type of answer input dropdown in Active state', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .should('have.css', 'background-color', css.color.transparent);
+        });
+
+        it('Accessibility of Type of answer input dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.dropdownList());
+        });
+
+        it('When the user has not set the Type of answer input in the response accordion then the custom label should not be displayed', () => {
+            fillInTheGapsTextPage.responseAccordionCustomLabel()
+                .should('not.exist');
+        });
+
+        //Type of answer input test cases for set correct answer section
+        it('When the user has set \'Text\' option in the response accordion, then user should be able to enter alpha-numeric characters in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .type('Response 1')
+                .should('have.value', 'Response 1');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(1)
+                .type('Response 1')
+                .should('have.value', 'Response 1');
+        });
+
+        it('When the user has set \'Number\' option the response accordion, then user should be able to enter only numeric characters in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .click();
+                });
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .click();
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .verifyInnerText('Number');
+                });
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(1)
+                .type('Response 1')
+                .should('have.value', '1');
+        });
+
+        it('When the user has set \'Number\' option in the \'Advanced settings for all response areas\' then both the options in the Response accordions should change to \'Number\'', () => {
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .verifyInnerText('Number');
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                                .verifyInnerText('Number');
+                        });
+                });
+        });
+
+        it('When the user has set \'Text\' option in Response accordion then it should override the \'Number\' option set in the \'Advanced settings for all response areas\' and user should be able to enter responses accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .click();
+                });
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .click();
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .verifyInnerText('Text');
+                });
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .click()
+                .type('1 Response', { delay: 1000 })
+                .should('have.value', '1 Response');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(1)
+                .clear()
+                .type('Response 1')
+                .should('have.value', '1');
+        });
+
+        it('When the user has set a Type of answer input in Response accordion then Custom label should be displayed', () => {
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.responseAccordionCustomLabel()
+                        .should('be.visible');
+                });
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.responseAccordionCustomLabel()
+                        .should('not.exist');
+                });
+        });
+
+        //Type of answer input test cases for preview tab
+        it('When the user has set \'Text\' option in the response accordion, then user should be able to enter alpha-numeric characters in preview tab response fields', () => {
+            cy.log('Pre step: Set the Type of answer input dropdowns to \'Text\'')
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .verifyInnerText('Text');
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                                .verifyInnerText('Text');
+                        });
+                });
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('Response 1')
+                        .should('have.value', 'Response 1');
+                });
+        });
+
+        it('When the user has set \'Number\' option in the response accordion, then the user should be able to enter only numeric characters in preview tab response fields', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .click();
+                });
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .click();
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .verifyInnerText('Number');
+                });
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(1)
+                .type('Response 1')
+                .should('have.value', '1');
+        });
+
+        it('When the user has set \'Text\' option in Response accordion then it should override the \'Number\' option set in \'Advanced settings for all response areas\' and user should be able to enter responses accordingly in the preview tab section', () => {
+            cy.log('Pre step:Setting \'Number\' option in \'Advanced settings for all response areas\'')
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .verifyInnerText('Number');
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .click();
+                });
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .click();
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                        .verifyInnerText('Text');
+                });
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .type('Response 1')
+                .should('have.value', 'Response 1');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(1)
+                .type('Response 1')
+                .should('have.value', '1');
+        });
+    });
+
+    describe('Response Accordions: Height and Width', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsTextPage.steps.expandResponseAccordion(0);
+            fillInTheGapsTextPage.steps.expandResponseAccordion(1);
+        });
+
+        fillInTheGapsTextPage.tests.verifyDefaultStateOfHeightAndWidthInputFieldInResponseAccordionAndCSS();
+
+        //Note: a11y covered in Additional Settings: Response accordion
+
+        //Height and width test cases for Set correct answer section
+        //TODO: We will need to revisit below case as it will fail for mobile view
+        it('When the user has not set \'Height\' and \'Width\' for response fields then the default dimension of the response field in the \'Set correct answer\' section response fields should be (197x46)px', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'height', '46px')
+                        .and('have.attr', 'width', '13.7em');
+                });
+        });
+
+        fillInTheGapsTextPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('Height and Width');
+
+        it('When the user has set \'Height\' for the response field then the Height of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.steps.setHeightInResponseAccordion(0, '100');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'height', '100px');
+        });
+
+        fillInTheGapsTextPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Height and Width');
+
+        it('When the user has set \'Width\' for the response field then the Width of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '100');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '100px');
+        });
+
+        it('When the user has set width below 80px then the width should remain 80px in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '20');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '80px');
+        });
+
+        it('When the user has set width above 400px then the width should remain 400px in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '800');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '400px');
+        });
+
+        it('When the user has set \'Height\' and \'Width\' in the individual responses accordion then it should override the \'Height\' and \'Width\'set in the \'Advanced settings for all response areas\' in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .type('250')
+                .should('have.value', '250');
+            fillInTheGapsTextPage.heightInputField()
+                .clear()
+                .type('180')
+                .should('have.value', '180');
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '175');
+            fillInTheGapsTextPage.steps.setHeightInResponseAccordion(0, '120');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '175px')
+                .and('have.attr', 'height', '120px');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(1)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '250px')
+                .and('have.attr', 'height', '180px');
+        });
+
+        //Height and width test cases for preview tab
+        //TODO: We will need to revisit below case as it will fail for mobile view
+        it('When the user has not set \'Height\' and \'Width\' for the response accordion then the default dimension of the response field in the preview tab response field should be (197x46)px', () => {
+            cy.log('Pre step: clearing the set values of height and width to bring back the dimensions of the response field to default dimensions')
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsTextPage.heightInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsTextPage.responseAccordionWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            fillInTheGapsTextPage.heightInputField()
+                                .clear()
+                                .should('have.value', '');
+                            fillInTheGapsTextPage.widthInputField()
+                                .clear()
+                                .should('have.value', '');
+                        });
+                })
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'height', '46px')
+                        .and('have.attr', 'width', '13.7em');
+                });
+        });
+
+        it('When the user has set \'Height\' for the response field then the height of the preview tab response field should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.setHeightInResponseAccordion(0, '100');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'height', '100px');
+        });
+
+        it('When the user has set \'Width\' for the response field then the width of the preview tab response field should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '100');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '100px');
+        });
+
+        it('When the user has set width below 80px then the width should remain 80px in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '20');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '80px');
+        });
+
+        it('When the user has set width above 400px then the width should remain 400px in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '800');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '400px');
+        });
+
+        it('When the user has set \'Height\' and \'Width\' in the individual responses accordion then it should override the \'Height\' and \'Width\'set in the \'Advanced settings for all response areas\' in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .type('250')
+                .should('have.value', '250');
+            fillInTheGapsTextPage.heightInputField()
+                .clear()
+                .type('180')
+                .should('have.value', '180');
+            fillInTheGapsTextPage.steps.setWidthInResponseAccordion(0, '175');
+            fillInTheGapsTextPage.steps.setHeightInResponseAccordion(0, '120');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '175px')
+                .and('have.attr', 'height', '120px');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(1)
+                .parents('.response-input-field')
+                .should('have.attr', 'width', '250px')
+                .and('have.attr', 'height', '180px')
+        });
+    });
+
+    describe('Additional Settings: Answer numeration (only while grading) dropdown', () => {
+        let dropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        fillInTheGapsTextPage.tests.verifyAnswerNumerationContents();
+
+        it(`User should be able to select any option other than ${dropdownOptions[0]}`, () => {
+            fillInTheGapsTextPage.steps.selectAnswerNumerationDropdownOption(`${dropdownOptions[2]}`)
+        });
+
+        //TODO: We have not checked the Response numeration in Grading view
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/535989
+    describe('Additional Settings: Font Size dropdown', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps - text type, adding question instructions and options, allotting points and expanding additional settings accordion')
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.questionInstructionsInputField()
+                .type('Question Instructions');
+            fillInTheGapsTextPage.pointsInputField()
+                .type('4');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($element) => {
+                    cy.wrap($element)
+                        .type('Answer input');
+                });
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyFontSizeSectionContents();
+
+        const fontsizes = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+        const font = ['16px', '12px', '14px', '17px', '20px', '24px'];
+        fontsizes.forEach((option, count) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab contents should be changed to ${option} in the \'Set Correct Answer\' section as well as in the \'Preview\' tab`, () => {
+                fillInTheGapsTextPage.fontSizeDropdown()
+                    .click();
+                fillInTheGapsTextPage.fontSizeListOptions(count)
+                    .click();
+                fillInTheGapsTextPage.fontSizeDropdown()
+                    .verifyInnerText(`${option}`);
+                cy.log('Checking correct answer section font size')
+                fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                    .each(($element) => {
+                        cy.wrap($element)
+                            .parent()
+                            .should('have.attr', 'font-size', font[count]);
+                    });
+                cy.log('Switching to Preview tab')
+                fillInTheGapsTextPage.steps.switchToPreviewTab();
+                cy.log('Checking Preview section font size')
+                fillInTheGapsTextPage.questionInstructionsText()
+                    .should('have.css', 'font-size', font[count]);
+                commonComponents.previewTabQuestionWrapper()
+                    .within(() => {
+                        fillInTheGapsTextPage.previewTabResponseField()
+                            .each(($element) => {
+                                cy.wrap($element)
+                                    .parent()
+                                    .should('have.attr', 'font-size', font[count]);
+                            });
+                    });
+                fillInTheGapsTextPage.previewTabQuestionContainer()
+                    .should('have.css', 'font-size', font[count]);
+                cy.log('Post step: Switch to Edit tab')
+                fillInTheGapsTextPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional Settings: Multiline response', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Multiline response\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            fillInTheGapsTextPage.multilineResponseLabel()
+                .verifyInnerText('Multiline response');
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .should('not.be.checked');
+        });
+
+        it('CSS of \'Multiline response\' section - unchecked state', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .parent()
+                .find('svg')
+                .should('have.css', 'fill', css.color.uncheckedCheckbox);
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        //Multiline response test cases for set correct answer section response fields
+        it('When the \'Multiline response\' functionality is disabled, the response fields should not have \'textarea\' field in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .should('not.be.checked');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('not.have.class', 'response-multiline-input-field')
+                        .find('input[type="text"]')
+                        .should('exist')
+                        .parents('.response-input-field')
+                        .find('textarea')
+                        .should('not.exist');
+                });
+        });
+
+        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', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('l{enter}o{enter}r{enter}e{enter}m')
+                        .should('have.value', 'lorem');
+                });
+        });
+
+        it('When the \'Multiline response\' functionality is enabled, the response field should have \'textarea\' field in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .click()
+                .should('be.checked');
+            fillInTheGapsTextPage.setCorrectAnswerMultilineTextArea()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('exist')
+                        .find('textarea')
+                        .should('exist')
+                        .parents('.response-multiline-input-field')
+                        .find('input[type="text"]')
+                        .should('not.exist');
+                });
+        });
+
+        it('When the \'Multiline response\' functionality is enabled then the user should be able to add Multiline responses in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.setCorrectAnswerMultilineTextArea()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .clear()
+                        .type('l{enter}o{enter}r{enter}e{enter}m')
+                        .should('have.text', 'l\no\nr\ne\nm​');
+                });
+        });
+
+        it('CSS of \'Multiline response\' section - checked state', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.multilineResponseLabel()
+                .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .parent()
+                .find('g[data-name*="Rectangle"]')
+                .should('have.css', 'fill', css.color.activeButtons);
+        });
+
+        it('Accessibility of \'Multiline response\' section - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.multilineResponseLabel().parents('.MuiFormGroup-root'))
+        });
+
+        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', () => {
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .should('have.value', '20');
+            fillInTheGapsTextPage.setCorrectAnswerMultilineTextArea()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .clear()
+                        .type('l{enter}o{enter}r{enter}e{enter}m{enter}e{enter}s{enter}u{enter}m{enter}l{enter}nam')
+                        .should('have.text', 'l\no\nr\ne\nm\ne\ns\nu\nm\nl\n​');
+                });
+        });
+
+        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', () => {
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .click()
+                .should('not.be.checked');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.value', 'loremesuml');
+                });
+        });
+
+        //Multiline response test cases for preview tab response fields
+        it('When the \'Multiline response\' functionality is disabled, the response field should not have \'textarea\' field in preview tab', () => {
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('not.have.class', 'response-multiline-input-field')
+                        .find('input[type="text"]')
+                        .should('exist')
+                        .parents('.response-input-field')
+                        .find('textarea')
+                        .should('not.exist')
+                });
+        });
+
+        it('When \'Multiline response\' functionality is disabled, the user should not be able to add multiline response in the preview tab response field', () => {
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('l{enter}o{enter}r{enter}e{enter}m')
+                        .should('have.value', 'lorem');
+                });
+        });
+
+        it('When the \'Multiline response\' functionality is enabled, the response field should have \'textarea\' field in the preview tab', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .click()
+                .should('be.checked');
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('exist')
+                        .find('textarea')
+                        .should('exist')
+                        .parents('.response-multiline-input-field')
+                        .find('input[type="text"]')
+                        .should('not.exist');
+                });
+        });
+
+        it('When the \'Multiline response\' functionality is enabled then the user should be able to add Multiline responses in the preview tab', () => {
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('l{enter}o{enter}r{enter}e{enter}m')
+                        .should('have.text', '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', () => {
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .clear()
+                        .type('l{enter}o{enter}r{enter}e{enter}m{enter}e{enter}s{enter}u{enter}m{enter}l{enter}nam')
+                        .should('have.text', 'l\no\nr\ne\nm\ne\ns\nu\nm\nl\n​');
+                });
+        });
+    });
+
+    describe('Additional Settings: Scoring for Multiline response', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsTextPage.multilineResponseCheckbox()
+                .click()
+                .should('be.checked');
+        });
+
+        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', () => {
+            fillInTheGapsTextPage.setCorrectAnswerMultilineTextArea()
+                .eq(0)
+                .type('R{enter}e{enter}s{enter}p{enter}o{enter}n{enter}s{enter}e{enter}1')
+                .should('have.text', 'R\ne\ns\np\no\nn\ns\ne\n1​');
+            fillInTheGapsTextPage.setCorrectAnswerMultilineTextArea()
+                .eq(1)
+                .type('Response 2')
+                .should('have.text', 'Response 2​');
+            fillInTheGapsTextPage.pointsInputField()
+                .type('10');
+        });
+
+        it('When the user enters the correct multiline and single line response in the preview tab then full points should be awarded', () => {
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .eq(0)
+                .type('R{enter}e{enter}s{enter}p{enter}o{enter}n{enter}s{enter}e{enter}1')
+                .should('have.text', 'R\ne\ns\np\no\nn\ns\ne\n1​');
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .eq(1)
+                .type('Response 2')
+                .should('have.text', 'Response 2​');
+            fillInTheGapsTextPage.previewScoreText()
+                .verifyInnerText('10/10');
+            fillInTheGapsTextPage.previewTabCorrectAnswerContainer()
+                .should('not.exist');
+            cy.log('When the user selects show correct answer checkbox then correct icons and label should be displayed')
+            fillInTheGapsTextPage.showCorrectAnswerCheckbox()
+                .click();
+            fillInTheGapsTextPage.previewTabResponseFieldWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            fillInTheGapsTextPage.correctIcon()
+                                .should('be.visible');
+                        });
+                });
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsTextPage.steps.verifyCorrectAttemptBorder();
+            cy.log('Post step: Uncheck Show correct answer checkbox')
+            fillInTheGapsTextPage.showCorrectAnswerCheckbox()
+                .click()
+                .should('not.be.checked');
+        });
+
+        it('When the user enters a single line response instead of a multiline response then no points should be awarded', () => {
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .eq(0)
+                .clear()
+                .type('Response 1')
+                .should('have.text', 'Response 1​');
+            fillInTheGapsTextPage.previewScoreText()
+                .verifyInnerText('0/10');
+            cy.log('When the user selects show correct answer checkbox then incorrect icon should be displayed beside Response 1 and correct icon beside the Response 2 and Incorrect label should be displayed')
+            fillInTheGapsTextPage.showCorrectAnswerCheckbox()
+                .click();
+            fillInTheGapsTextPage.previewTabResponseFieldWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.incorrectIcon()
+                        .should('be.visible');
+                });
+            fillInTheGapsTextPage.previewTabResponseFieldWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.correctIcon()
+                        .should('be.visible');
+                });
+            fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount('fill in the gaps - text', ['R\ne\ns\np\no\nn\ns\ne\n1']);
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsTextPage.steps.verifyIncorrectAttemptBorder()
+            cy.log('Post step: Uncheck Show correct answer checkbox')
+            fillInTheGapsTextPage.showCorrectAnswerCheckbox()
+                .click()
+                .should('not.be.checked');
+        });
+
+        it('When the user enters a multiline response instead of a single line response then no points should be awarded', () => {
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .eq(0)
+                .clear()
+                .type('R{enter}e{enter}s{enter}p{enter}o{enter}n{enter}s{enter}e{enter}1')
+                .should('have.text', 'R\ne\ns\np\no\nn\ns\ne\n1​');
+            fillInTheGapsTextPage.previewTabMultilineTextArea()
+                .eq(1)
+                .clear()
+                .type('R{enter}e{enter}s{enter}p{enter}o{enter}n{enter}s{enter}e{enter}2')
+                .should('have.text', 'R\ne\ns\np\no\nn\ns\ne\n2​');
+            fillInTheGapsTextPage.previewScoreText()
+                .verifyInnerText('0/10');
+            cy.log('When the user selects show correct answer checkbox then incorrect icon should be displayed beside Response 1 and correct icon beside the Response 2 and Incorrect label should be displayed')
+            fillInTheGapsTextPage.showCorrectAnswerCheckbox()
+                .click();
+            fillInTheGapsTextPage.previewTabResponseFieldWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsTextPage.correctIcon()
+                        .should('be.visible');
+                });
+            fillInTheGapsTextPage.previewTabResponseFieldWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsTextPage.incorrectIcon()
+                        .should('be.visible');
+                });
+            fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount('fill in the gaps - text', ['Response 2']);
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsTextPage.steps.verifyIncorrectAttemptBorder();
+        });
+    });
+
+    describe('Additional Settings: Spell check section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Spell check\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            fillInTheGapsTextPage.spellCheckLabel()
+                .verifyInnerText('Spell check');
+            fillInTheGapsTextPage.spellCheckCheckbox()
+                .should('not.be.checked');
+        });
+
+        it('CSS of \'Spell check\' section - unchecked state', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.spellCheckCheckbox()
+                .parent()
+                .find('svg')
+                .should('have.css', 'fill', css.color.uncheckedCheckbox);
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        //Spell check test cases for set correct answer section response fields
+        it('When the \'Spell check\' functionality is disabled, the response field should have \'spellcheck\' attribute set as \'false\' in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'spellcheck', 'false');
+                });
+        });
+
+        it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.spellCheckCheckbox()
+                .click()
+                .should('be.checked');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'spellcheck', 'true');
+                });
+        });
+
+        it('CSS of \'Spell check\' section - checked state', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.spellCheckLabel()
+                .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
+            fillInTheGapsTextPage.spellCheckCheckbox()
+                .parent()
+                .find('g[data-name*="Rectangle"]')
+                .should('have.css', 'fill', css.color.activeButtons);
+        });
+
+        it('Accessibility of \'Spell check\' section - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.spellCheckLabel().parents('.MuiFormGroup-root'))
+        });
+
+        //Spell check test cases for preview tab response fields
+        it('When the \'Spell check\' functionality is disabled, the response field should have \'spellcheck\' attribute set as \'false\' in preview tab', () => {
+            fillInTheGapsTextPage.spellCheckCheckbox()
+                .click()
+                .should('not.be.checked');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'spellcheck', 'false');
+                });
+        });
+
+        it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in the preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.spellCheckCheckbox()
+                .click()
+                .should('be.checked');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'spellcheck', 'true');
+                });
+        });
+    });
+
+    describe('Additional Settings: Custom special characters section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyAdditionalSettingsCustomSpecialCharactersSection();
+
+        it('When the user checks the \'Display special characters\' checkbox then the \'Special characters\' button should be displayed when user focuses in any response field in \'Set correct answer\' section ', () => {
+            cy.log('Checking Custom characters button is not visible before focusing any option')
+            fillInTheGapsTextPage.setCorrectAnsResponseFieldSpecialCharactersButton()
+                .eq(0)
+                .should('not.have.class', 'active-response-input-field')
+                .should('not.be.visible');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .click();
+            fillInTheGapsTextPage.setCorrectAnsResponseFieldSpecialCharactersButton()
+                .eq(0)
+                .should('have.class', 'active-response-input-field')
+                .should('be.visible');
+        });
+
+        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', () => {
+            fillInTheGapsTextPage.setCorrectAnsResponseFieldSpecialCharactersButton()
+                .eq(0)
+                .should('be.visible')
+                .click();
+            fillInTheGapsTextPage.steps.verifySpecialCharactersFlyoutHeaderContents();
+        });
+
+        fillInTheGapsTextPage.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.');
+            let symbolsString = specialOrMathCharacters['specialCharacters'].characters.map((icon) => icon.symbol);
+            symbolsString = symbolsString.join('');
+            fillInTheGapsTextPage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .should('have.value', symbolsString);
+            cy.log('Post step: Clearing the set correct answer input field')
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .clear();
+        });
+
+        it('When the \'Display special characters\' checkbox is checked then user should be able to enter value in the \'Custom special characters\' input field', () => {
+            fillInTheGapsTextPage.customSpecialCharactersInputField()
+                .type(':)`')
+                .should('have.value', ':)`');
+        });
+
+        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', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .focus();
+            fillInTheGapsTextPage.setCorrectAnsResponseFieldSpecialCharactersButton()
+                .eq(0)
+                .should('be.visible')
+                .click();
+            fillInTheGapsTextPage.steps.verifySpecialCharactersFlyoutHeaderContents();
+        });
+
+        it('The flyout should contain all the added Special characters entered in the \'Custom special characters\' input field', () => {
+            fillInTheGapsTextPage.specialCharactersFlyoutIcon()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .should('have.text', `${customSpecialCharacters[index]}`)
+                });
+        });
+
+        it('When the user clicks on the characters then they should be added to the set correct answer response field', () => {
+            fillInTheGapsTextPage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .should('have.value', ':)`');
+        });
+
+        //Special custom characters test cases for preview tab response fields
+        it('When the \'Custom special characters\' functionality is disabled then the \'Special characters\' button should not be displayed in the preview tab response field', () => {
+            fillInTheGapsTextPage.customSpecialCharactersInputField()
+                .clear();
+            fillInTheGapsTextPage.displaySpecialCharactersCheckbox()
+                .click()
+                .should('not.be.checked');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseFieldSpecialCharactersButton()
+                .should('not.exist');
+        });
+
+        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', () => {
+            cy.log('Pre step: Enable the Custom special characters')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.displaySpecialCharactersCheckbox()
+                .click()
+                .should('be.checked');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseFieldSpecialCharactersButton()
+                .should('not.have.class', 'active-response-input-field')
+                .and('not.be.visible');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .click();
+            fillInTheGapsTextPage.previewTabResponseFieldSpecialCharactersButton()
+                .eq(0)
+                .should('have.class', 'active-response-input-field')
+                .should('be.visible');
+        });
+
+        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', () => {
+            fillInTheGapsTextPage.previewTabResponseFieldSpecialCharactersButton()
+                .eq(0)
+                .should('be.visible')
+                .click();
+            fillInTheGapsTextPage.steps.verifySpecialCharactersFlyoutHeaderContents();
+        });
+
+        fillInTheGapsTextPage.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.');
+            let symbolsString = specialOrMathCharacters['specialCharacters'].characters.map((icon) => icon.symbol);
+            symbolsString = symbolsString.join('');
+            fillInTheGapsTextPage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .should('have.value', 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', () => {
+            cy.log('Pre step: Swicth to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.customSpecialCharactersInputField()
+                .type(':)`')
+                .should('have.value', ':)`');
+            cy.log('Post step: Switch to Preview tab')
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+        });
+
+        it('When the user clicks on the \'Special characters\' button then a flyout with the title \'Special characters\' and close button should be displayed in the preview tab', () => {
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .focus();
+            fillInTheGapsTextPage.previewTabResponseFieldSpecialCharactersButton()
+                .eq(0)
+                .should('be.visible')
+                .click();
+            fillInTheGapsTextPage.steps.verifySpecialCharactersFlyoutHeaderContents();
+        });
+
+        it('The flyout should contain all the added Special characters entered in the \'Custom special characters\' input field', () => {
+            fillInTheGapsTextPage.specialCharactersFlyoutIcon()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .should('have.text', `${customSpecialCharacters[index]}`)
+                });
+        });
+
+        it('When the user clicks on the characters then they should be added to the preview tab input field', () => {
+            fillInTheGapsTextPage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .should('have.value', ':)`');
+        });
+    });
+
+    describe('Additional Settings: Student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Student response area and layout\' label should be displayed', () => {
+            fillInTheGapsTextPage.studentResponseAreaAndLayoutLabel()
+                .verifyInnerText('Student response area and layout')
+                .should('be.visible');
+        });
+
+        it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.studentResponseAreaAndLayoutLabel()
+                .verifyCSS(css.color.labels, css.fontSize.default, css.fontWeight.semibold);
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional Settings: Check Answer', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.questionInstructionsInputField()
+                .type('Question Instructions');
+            fillInTheGapsTextPage.pointsInputField()
+                .type('4');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($element) => {
+                    cy.wrap($element)
+                        .type('Answer input');
+                });
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
+    });
+
+    describe('Additional Settings: Check Answer - Functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.questionInstructionsInputField()
+                .type('Question Instructions');
+            fillInTheGapsTextPage.pointsInputField()
+                .type('4');
+            fillInTheGapsTextPage.steps.setCorrectAnswerResponses(['Response 1', 'Response 2']);
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsTextPage.steps.setMaximumCheckAnswerAttempts(2);
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set any responses then on clicking on the Check Answer button icons should not be displayed beside both empty responses, label should not be displayed below the box', () => {
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.value', '');
+                });
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click();
+            fillInTheGapsTextPage.correctIcon()
+                .should('not.exist');
+            fillInTheGapsTextPage.incorrectIcon()
+                .should('not.exist');
+            fillInTheGapsTextPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            fillInTheGapsTextPage.previewTabCorrectAnswerContainer()
+                .should('not.exist')
+        });
+
+        it('When the user has added correct response for one option then on clicking on the Check Answer button, green checkmark icon should be displayed besides the correct response, red crossmark should not be displayed beside empty response and \'Incorrect Answer\' label should be displayed below the box', () => {
+            fillInTheGapsTextPage.steps.enterAnswerResponsesInPreviewTab(['Response 1']);
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click();
+            fillInTheGapsTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectIconNotVisible(1);
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            fillInTheGapsTextPage.steps.verifyIncorrectAttemptBorder();
+        });
+
+        it('When the user has added correct responses then on clicking on the Check Answer button, green checkmark icon should be displayed besides the responses and \'Correct Answer\' label should be displayed below the box', () => {
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(1)
+                .type('Response 2')
+                .should('have.value', 'Response 2');
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click();
+            fillInTheGapsTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsTextPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsTextPage.steps.verifyCorrectAttemptBorder();
+        });
+
+
+        fillInTheGapsTextPage.tests.verifyDisabledCheckAnswerButtonWithCSSAnda11y()
+
+        it('When the user updates the value of Maximum check answer attempts input field, it should get reflected on the Preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.maximumCheckAnswerAttemptsInputField()
+                .clear()
+                .type(1)
+                .should('have.value', '1');
+            cy.log('Switching to Preview tab');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.checkAnswerButton()
+                .should('be.enabled');
+            fillInTheGapsTextPage.steps.enterAnswerResponsesInPreviewTab(['Response 1', 'Response 2']);
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click()
+                .should('be.disabled');
+        });
+
+        it('When the \'Maximum check answer attempts\' input field has value \'0\' and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            fillInTheGapsTextPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(0);
+            cy.log('Switching to Preview tab')
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.checkAnswerButton()
+                .should('be.enabled');
+            cy.log('Clicking on \'Check Answer\' to check state of \'Check Answer\' to be enabled')
+            fillInTheGapsTextPage.steps.enterAnswerResponsesInPreviewTab(['Incorrect Answer', 'Incorrect Answer'])
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click();
+            fillInTheGapsTextPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
+            fillInTheGapsTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1)
+            fillInTheGapsTextPage.checkAnswerButton()
+                .should('be.enabled');
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            fillInTheGapsTextPage.steps.verifyIncorrectAttemptBorder()
+            cy.log('As the user is able to check answer multiple times, verifying state of \'Check Answer\' to be enabled by adding another response')
+            fillInTheGapsTextPage.steps.enterAnswerResponsesInPreviewTab(['Response 1', 'Response 2'])
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click();
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct')
+            fillInTheGapsTextPage.steps.verifyCorrectAttemptBorder()
+            fillInTheGapsTextPage.checkAnswerButton()
+                .should('be.enabled');
+        });
+
+        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', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.maximumCheckAnswerAttemptsInputField()
+                .clear()
+                .should('have.value', '');
+            cy.log('Switching to Preview tab');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.checkAnswerButton()
+                .should('be.enabled');
+            cy.log('Clicking on \'Check Answer\' to check state of \'Check Answer\' to be enabled')
+            fillInTheGapsTextPage.steps.enterAnswerResponsesInPreviewTab(['Incorrect Answer', 'Incorrect Answer'])
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click();
+            fillInTheGapsTextPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
+            fillInTheGapsTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1)
+            fillInTheGapsTextPage.checkAnswerButton()
+                .should('be.enabled');
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            fillInTheGapsTextPage.steps.verifyIncorrectAttemptBorder()
+            cy.log('As the user is able to check answer multiple times, verifying state of \'Check Answer\' to be enabled by adding another response')
+            fillInTheGapsTextPage.steps.enterAnswerResponsesInPreviewTab(['Response 1', 'Response 2'])
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click();
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct')
+            fillInTheGapsTextPage.steps.verifyCorrectAttemptBorder()
+            fillInTheGapsTextPage.checkAnswerButton()
+                .should('be.enabled');
+        });
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyDetailsSection();
+    });
+});