itemengine-cypress-automation 1.0.27 → 1.0.28

package/cypress/e2e/ILC/FillInTheGapsDropdown/fillInTheGapsDropdownAdditionalSettings.js

@@ -0,0 +1,1164 @@
+import { commonComponents } from "../../../pages/components";
+import { fillInTheGapsDropdownPage } from "../../../pages/fillInTheGapsDropdownPage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+let optionsForResponse1 = ['changing', 'progressively', 'healthy', 'new'];
+let optionsForResponse2 = ['increasingly', 'decreasingly', 'extensively', 'exclusively'];
+
+describe('Fill In the Gaps Additional settings and Responses accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional Settings: Advanced settings for all response areas', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyAdvanceSettingsForAllResponsesLabelAndCSS();
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional Settings: Placeholder text', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1)
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyPlaceholderTextLabelInputFieldAndCSS()
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        //Placeholder test cases for Set correct answer section response dropdown
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the set correct answer response dropown', () => {
+            fillInTheGapsDropdownPage.placeholderTextInputField()
+                .should('have.value', '');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .should('not.exist');
+                });
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the set correct answer response dropdown', () => {
+            fillInTheGapsDropdownPage.placeholderTextInputField()
+                .type('Lorem Ipsum')
+                .should('have.value', 'Lorem Ipsum');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .verifyInnerText('Lorem Ipsum')
+                        .should('be.visible');
+                });
+        });
+
+        it('CSS of \'Placeholder text\'', { tags: 'css' }, () => {
+            fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                .verifyCSS(css.color.placeholderText, css.fontSize.normal, css.fontWeight.regular);
+        });
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection());
+        });
+
+        it('When the user sets an answer using the response dropdown, then the placeholder text should disappear in \'Set correct answer\' section', () => {
+            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, 'changing')
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .should('not.exist');
+                });
+        });
+
+        it('When the user removes the added \'Placeholder text\' then the placeholder text should not be displayed in \'Set correct answer\' section', () => {
+            cy.log('Clearing the placeholder text')
+            fillInTheGapsDropdownPage.placeholderTextInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .should('not.exist');
+                });
+        });
+
+        //Placeholder test cases for Preview tab response dropdown
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the preview tab response dropdown', () => {
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .should('not.exist');
+                });
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the preview tab response dropdown', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.placeholderTextInputField()
+                .type('Lorem Ipsum')
+                .should('have.value', 'Lorem Ipsum');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .verifyInnerText('Lorem Ipsum')
+                        .should('be.visible');
+                });
+        });
+
+        it('CSS of \'Placeholder text\'', { tags: 'css' }, () => {
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .verifyCSS(css.color.placeholderText, css.fontSize.normal, css.fontWeight.regular);
+                });
+        });
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper())
+        });
+
+        it('When the user sets an answer using the response dropdown, then the placeholder text should disappear in the preview tab', () => {
+            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'changing')
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .should('not.exist');
+                });
+        });
+
+        it('When the user removes the added \'Placeholder text\' then the placeholder text should not be displayed in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            cy.log('Clearing the placeholder text and switching to Preview tab')
+            fillInTheGapsDropdownPage.placeholderTextInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .should('not.exist');
+                });
+        });
+    });
+
+    describe('Additional Settings: Height and Width', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1)
+            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyHeightAndWidthLabelInputFieldWithCSSAnda11y()
+
+        //Height and width test cases for set correct answer section  response dropdowns
+        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the response dropdown should be (200x34)px in \'Set correct answer\' section response dropdown', () => {
+            fillInTheGapsDropdownPage.heightInputField()
+                .should('have.value', '');
+            fillInTheGapsDropdownPage.widthInputField()
+                .should('have.value', '');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .should('have.attr', 'height', '34px')
+                .and('have.attr', 'width', '200px');
+        });
+
+        it('When the user adds \'Height\' for the response dropdown then the height of the response dropdown should get updated accordingly in \'Set correct answer\' section', () => {
+            fillInTheGapsDropdownPage.heightInputField()
+                .type('100')
+                .should('have.value', '100');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .should('have.attr', 'height', '100px');
+        });
+
+        it('When the user adds \'Width\' for the response dropdown then the Width of the response dropdown should get updated accordingly in \'Set correct answer\' section', () => {
+            fillInTheGapsDropdownPage.heightInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsDropdownPage.widthInputField()
+                .type('100')
+                .should('have.value', '100');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .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', () => {
+            fillInTheGapsDropdownPage.widthInputField()
+                .clear()
+                .type('50')
+                .should('have.value', '50');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .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', () => {
+            fillInTheGapsDropdownPage.widthInputField()
+                .clear()
+                .type('500')
+                .should('have.value', '500');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .should('have.attr', 'width', '400px');
+        });
+
+        //Height and width test cases for preview tab response dropdowns
+        //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 dropdown should be (200x34)px for the preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.widthInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .should('have.attr', 'height', '34px')
+                .and('have.attr', 'width', '200px');
+        });
+
+        it('When the user adds \'Height\' for the response dropdown then the height of the response dropdown should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.heightInputField()
+                .type('100')
+                .should('have.value', '100');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .should('have.attr', 'height', '100px');
+        });
+
+        it('When the user adds \'Width\' for the response dropdown then the response dropdowns should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.widthInputField()
+                .type('100')
+                .should('have.value', '100');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .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 dropdowns', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.widthInputField()
+                .clear()
+                .type('50')
+                .should('have.value', '50');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .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')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.widthInputField()
+                .clear()
+                .type('500')
+                .should('have.value', '500');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .should('have.attr', 'width', '400px');
+        });
+    });
+
+    describe('Additional Settings : Response accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsDropdownPage.steps.addResponseTokenInQuestionField();
+            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyAdditionalSettingsResponseAccordionLabelCSSAndA11y();
+    });
+
+    describe('Response Accordions: ARIA label', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsDropdownPage.steps.addResponseTokenInQuestionField();
+            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsDropdownPage.steps.expandResponseAccordion(0);
+            fillInTheGapsDropdownPage.steps.expandResponseAccordion(1);
+        });
+
+        fillInTheGapsDropdownPage.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 dropdown', () => {
+            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'aria-label', `Add answer for response ${index + 1}`);
+                });
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('ARIA label');
+
+        it('When the user has set \'ARIA label\' in the response accordion then it should be present for the response dropdown in \'Set correct answer\' section and for the other response dropdown, value of the aria-label should remain the same', () => {
+            fillInTheGapsDropdownPage.steps.setAriaLabelInResponseAccordion(0, 'Custom ARIA label');
+            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .eq(0)
+                .should('have.attr', 'aria-label', `Custom ARIA label`);
+            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .eq(1)
+                .should('have.attr', 'aria-label', `Add answer for response 2`);
+        });
+
+        //https://redmine.zeuslearning.com/issues/529768
+        fillInTheGapsDropdownPage.tests.verifyCustomLabelVisibleOnResponseAccordion('ARIA label');
+
+        fillInTheGapsDropdownPage.tests.verifyCustomLabelOnResponseAccordionCSS();
+
+        it('Accessibility of dropdown in set correct answer section when custom \'ARIA label\' is set and Custom label', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection())
+            cy.checkAccessibility(fillInTheGapsDropdownPage.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 dropdown in the \'Set correct answer\' section', () => {
+            fillInTheGapsDropdownPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.ariaLabelInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'aria-label', `Add answer for response ${index + 1}`);
+                });
+        });
+
+        //ARIA label test cases for preview tab
+        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 dropdown in the preview tab', () => {
+            cy.log('Pre step: Switch to Preview tab')
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'aria-label', `Add answer for response ${index + 1}`);
+                });
+        });
+
+        it('When the user has set \'ARIA label\' in the response accordion then it should be present for the response dropdown in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.setAriaLabelInResponseAccordion(0, 'Custom Aria label');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .eq(0)
+                .should('have.attr', 'aria-label', 'Custom Aria label');
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .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(fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection());
+        });
+
+        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 dropdown in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.ariaLabelInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'aria-label', `Add answer for response ${index + 1}`);
+                });
+        });
+    });
+
+    describe('Response Accordions: Placeholder text', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsDropdownPage.steps.addResponseTokenInQuestionField();
+            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsDropdownPage.steps.expandResponseAccordion(0)
+            fillInTheGapsDropdownPage.steps.expandResponseAccordion(1)
+        });
+
+        fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                                .should('not.exist');
+                        });
+                });
+        });
+
+        fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .verifyInnerText('Lorem Ipsum')
+                        .should('be.visible');
+                });
+        });
+
+        fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.placeholderTextInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .should('not.exist');
+                });
+        });
+
+        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 \'Set correct answer\' section', () => {
+            fillInTheGapsDropdownPage.placeholderTextInputField()
+                .type('Global placeholder')
+                .should('have.value', 'Global placeholder');
+            fillInTheGapsDropdownPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .verifyInnerText('Lorem Ipsum')
+                        .should('be.visible');
+                });
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .eq(1)
+                .verifyInnerText('Global placeholder\n​\n​')
+                .should('be.visible');
+        });
+
+        it('Accessibility of \'Placeholder text\' in set correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection());
+        });
+
+        it('When the user selects an option from the response dropdown, then the placeholder text should disappear from the response dropdown from the set correct answer section', () => {
+            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, 'new')
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .should('not.exist');
+                });
+        });
+
+        //TODO: need to add or update above case for query: https://redmine.zeuslearning.com/issues/529774
+
+        //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 dropdowns', () => {
+            cy.log('Pre step: Clearing the set Placeholder text')
+            fillInTheGapsDropdownPage.placeholderTextInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsDropdownPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.placeholderTextInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                                .should('not.exist');
+                        });
+                });
+        });
+
+        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', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab()
+            fillInTheGapsDropdownPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .verifyInnerText('Lorem Ipsum')
+                        .should('be.visible');
+                });
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .should('not.exist');
+                });
+        });
+
+        it('When the user removes the Placeholder text from individual responses the Placeholders should get updated accordingly for both the responses in preview tab', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab()
+            fillInTheGapsDropdownPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.placeholderTextInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab()
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .should('not.exist');
+                });
+        });
+
+        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 dropdowns', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab()
+            fillInTheGapsDropdownPage.placeholderTextInputField()
+                .type('Global placeholder')
+                .should('have.value', 'Global placeholder');
+            fillInTheGapsDropdownPage.steps.setPlaceholderTextInResponseAccordion(0, 'Lorem Ipsum');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .verifyInnerText('Lorem Ipsum')
+                        .should('be.visible');
+                });
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .eq(1)
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .verifyInnerText('Global placeholder');
+                });
+        });
+
+        it('Accessibility of \'Placeholder text\' in preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper());
+        });
+
+        it('When the user selects an option from the response dropdown, then the placeholder text should disappear', () => {
+            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'new')
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDropdownPage.responseDropdownPlaceholderText()
+                        .should('not.exist');
+                });
+        });
+
+        //TODO: need to add or update above case for query: https://redmine.zeuslearning.com/issues/529774
+    });
+
+    describe('Response Accordions: Height and Width', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsDropdownPage.steps.addResponseTokenInQuestionField();
+            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsDropdownPage.steps.expandResponseAccordion(0);
+            fillInTheGapsDropdownPage.steps.expandResponseAccordion(1);
+        });
+
+        fillInTheGapsDropdownPage.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 dropdowns then the default dimension of the response dropdown in \'Set correct answer\' section response dropdowns should be (200x34)px', () => {
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .should('have.attr', 'height', '34px')
+                .and('have.attr', 'width', '200px');
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('Height and Width');
+
+        it('When the user has set \'Height\' for the response dropdown then the height of the response dropdown should get updated accordingly in \'Set correct answer\' section', () => {
+            fillInTheGapsDropdownPage.steps.setHeightInResponseAccordion(0, '100');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .eq(0)
+                .should('have.attr', 'height', '100px');
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Height and Width');
+
+        it('When the user has set \'Width\' for the response dropdown then the Width of the response dropdown should get updated accordingly in \'Set correct answer\' section', () => {
+            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '100');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .eq(0)
+                .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', () => {
+            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '60');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .eq(0)
+                .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', () => {
+            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '600');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .eq(0)
+                .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 \'Set correct answer\' section', () => {
+            fillInTheGapsDropdownPage.widthInputField()
+                .clear()
+                .type('250')
+                .should('have.value', '250');
+            fillInTheGapsDropdownPage.heightInputField()
+                .clear()
+                .type('180')
+                .should('have.value', '180');
+            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '175');
+            fillInTheGapsDropdownPage.steps.setHeightInResponseAccordion(0, '120');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .eq(0)
+                .should('have.attr', 'width', '175px')
+                .and('have.attr', 'height', '120px');
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .eq(1)
+                .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 dropdown in the preview tab response dropdown should be (200x34)px', () => {
+            cy.log('Pre step: clearing the set values of height and width to bring back the dimensions of the response dropdown to default dimensions')
+            fillInTheGapsDropdownPage.widthInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsDropdownPage.heightInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsDropdownPage.responseAccordionWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            fillInTheGapsDropdownPage.heightInputField()
+                                .clear()
+                                .should('have.value', '');
+                            fillInTheGapsDropdownPage.widthInputField()
+                                .clear()
+                                .should('have.value', '');
+                        });
+                })
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'height', '34px')
+                        .and('have.attr', 'width', '200px');
+                });
+        });
+
+        it('When the user has set \'Height\' for the response field then the height of the preview tab response dropdown should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.setHeightInResponseAccordion(0, '100');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .should('have.attr', 'height', '100px');
+        });
+
+        it('When the user has set \'Width\' for the response dropdown then the width of the preview tab response dropdown should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '100');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .eq(0)
+                .should('have.attr', 'width', '100px');
+        });
+
+        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')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.widthInputField()
+                .clear()
+                .type('250')
+                .should('have.value', '250');
+            fillInTheGapsDropdownPage.heightInputField()
+                .clear()
+                .type('180')
+                .should('have.value', '180');
+            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '175');
+            fillInTheGapsDropdownPage.steps.setHeightInResponseAccordion(0, '120');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .eq(0)
+                .should('have.attr', 'width', '175px')
+                .and('have.attr', 'height', '120px');
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .eq(1)
+                .should('have.attr', 'width', '250px')
+                .and('have.attr', 'height', '180px')
+        });
+
+        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 dropdowns', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '50');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .eq(0)
+                .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', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.setWidthInResponseAccordion(0, '500');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                .eq(0)
+                .should('have.attr', 'width', '400px');
+        });
+    });
+
+    describe('Additional Settings: Answer numeration (only while grading) dropdown', () => {
+        const dropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+        const numbers = ['1', '2', '3', '4'];
+        const lowercase = ['a', 'b', 'c', 'd'];
+        const uppercase = ['A', 'B', 'C', 'D'];
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            fillInTheGapsDropdownPage.steps.addResponseTokenInQuestionField();
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse2);
+            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, 'new');
+            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(1, 'exclusively');
+            fillInTheGapsDropdownPage.steps.allotPoints(20);
+            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsDropdownPage.allowStudentsToCheckAnswerCheckbox()
+                .click();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyAnswerNumerationContents();
+
+        //Answer numeration cases for Edit tab
+        it(`When the user selects any option from the Answer numeration dropdown then it should not affect the Options for response numeration as well as set correct answer response dropdown`, () => {
+            cy.log('Selecting an option from the dropdown')
+            fillInTheGapsDropdownPage.steps.selectAnswerNumerationDropdownOption('Lowercase alphabet')
+            cy.log('The numerical option numeration for the Options for response fields should not be affected by the Answer numeration dropdown')
+            fillInTheGapsDropdownPage.optionsSectionWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            fillInTheGapsDropdownPage.optionWrapper()
+                                .each(($el, index) => {
+                                    cy.wrap($el)
+                                        .within(() => {
+                                            fillInTheGapsDropdownPage.optionNumeration()
+                                                .should('have.text', numbers[index]);
+                                        });
+                                });
+                        });
+                });
+            cy.log('The option numeration should not be displayed in the set correct answer section')
+            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .contains(uppercase[index])
+                        .should('not.exist');
+                });
+        });
+
+        //Answer numeration cases for preview tab
+        dropdownOptions.forEach((option) => {
+            it(`When the user selects ${option} option from the Answer numeration dropdown then it should not be displayed in the Preview tab response dropdown`, () => {
+                fillInTheGapsDropdownPage.answerNumerationDropdown()
+                    .click();
+                fillInTheGapsDropdownPage.answerNumerationDropdownListOptions(option)
+                    .click();
+                fillInTheGapsDropdownPage.answerNumerationDropdown()
+                    .verifyInnerText(`${option}`);
+                fillInTheGapsDropdownPage.steps.switchToPreviewTab()
+                fillInTheGapsDropdownPage.steps.verifyAnswerNumerationShouldNotExistInPreviewTabResponseDropdown()
+            });
+
+            it(`When the user clicks on Show correct answer checkbox then ${option} numeration should be displayed in the Preview tab response dropdown and the correct answer container`, () => {
+                fillInTheGapsDropdownPage.showCorrectAnswerCheckbox()
+                    .click()
+                    .should('be.checked');
+                cy.log('Checking answer numeration for response dropdown')
+                fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                    .each(($el, index) => {
+                        cy.wrap($el)
+                            .within(() => {
+                                switch (option) {
+                                    case 'Numerical':
+                                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
+                                            .should('have.text', numbers[index])
+                                            .should('be.visible');
+                                        break;
+                                    case 'Uppercase alphabet':
+                                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
+                                            .should('have.text', uppercase[index])
+                                            .should('be.visible');
+                                        break;
+                                    case 'Lowercase alphabet':
+                                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
+                                            .should('have.text', lowercase[index])
+                                            .should('be.visible');
+                                        break;
+                                    default:
+                                        throw new Error('Invalid numeration option');
+                                }
+                            });
+                    });
+                cy.log('Checking the answer numeration should be displayed in the correct answer container')
+                fillInTheGapsDropdownPage.previewTabCorrectAnswerResponseWrapper()
+                    .each(($el, index) => {
+                        cy.wrap($el)
+                            .parents('.response-dropdown-wrapper')
+                            .within(() => {
+                                switch (option) {
+                                    case 'Numerical':
+                                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
+                                            .should('have.text', numbers[index])
+                                            .should('be.visible');
+                                        break;
+                                    case 'Uppercase alphabet':
+                                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
+                                            .should('have.text', uppercase[index])
+                                            .should('be.visible');
+                                        break;
+                                    case 'Lowercase alphabet':
+                                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
+                                            .should('have.text', lowercase[index])
+                                            .should('be.visible');
+                                        break;
+                                    default:
+                                        throw new Error('Invalid numeration option');
+                                }
+                            });
+                    });
+            });
+
+            it('CSS of option numeration in response dropdown and correct answer container', { tags: 'css' }, () => {
+                cy.log('CSS of Response dropdown numeration')
+                fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                    .eq(0)
+                    .within(() => {
+                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
+                            .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+                    });
+                cy.log('CSS of Correct answer container dropdown numeration')
+                fillInTheGapsDropdownPage.previewTabCorrectAnswerResponseWrapper()
+                    .eq(0)
+                    .parents('.response-dropdown-wrapper')
+                    .within(() => {
+                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
+                            .eq(0)
+                            .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+                    });
+            });
+
+            it('Accessibility of option numeration in response dropdown and correct answer container', { tags: 'a11y' }, () => {
+                cy.log('Accessibility of Response dropdown numeration')
+                cy.checkAccessibility(fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper());
+                cy.log('Accessibility of Correct answer container dropdown numeration')
+                cy.checkAccessibility(fillInTheGapsDropdownPage.previewTabCorrectAnswerResponseWrapper().parents('.response-dropdown-wrapper'));
+            });
+
+            it(`When user clicks on Check answer button then ${option} numeration should not be displayed in the preview tab Response dropdown`, () => {
+                cy.log('Pre step: Unchecking the show correct answer checkbox')
+                fillInTheGapsDropdownPage.showCorrectAnswerCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                fillInTheGapsDropdownPage.checkAnswerButton()
+                    .click();
+                fillInTheGapsDropdownPage.steps.verifyAnswerNumerationShouldNotExistInPreviewTabResponseDropdown()
+                cy.log('Post step: Swicthing to Edit tab')
+                fillInTheGapsDropdownPage.steps.switchToEditTab()
+            });
+        });
+
+        //TODO: We have not checked the Response numeration in Grading view
+    });
+
+    describe('Additional Settings: Font Size dropdown', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps - dropdown type, adding question instructions and options, alloting points and expanding additional settings accordion')
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            fillInTheGapsDropdownPage.questionInstructionsInputField()
+                .type('Question Instructions');
+            fillInTheGapsDropdownPage.pointsInputField()
+                .type('4');
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, 'new')
+            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsDropdownPage.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`, () => {
+                fillInTheGapsDropdownPage.fontSizeDropdown()
+                    .click();
+                fillInTheGapsDropdownPage.fontSizeListOptions(count)
+                    .click();
+                fillInTheGapsDropdownPage.fontSizeDropdown()
+                    .verifyInnerText(`${option}`);
+                cy.log('Checking correct answer section font size')
+                fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
+                    .should('have.css', 'font-size', font[count])
+                fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
+                    .click();
+                fillInTheGapsDropdownPage.responseDropdownOptions()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .find('span')
+                            .should('have.css', 'font-size', font[count]);
+                    });
+                cy.log('Closing the dropdown')
+                cy.get('body')
+                    .click();
+                cy.log('Switching to Preview tab')
+                fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+                cy.log('Checking Preview section font size')
+                fillInTheGapsDropdownPage.questionInstructionsText()
+                    .should('have.css', 'font-size', font[count]);
+                fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                    .click();
+                cy.log('Checking font size of options')
+                fillInTheGapsDropdownPage.responseDropdownOptions()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .find('span')
+                            .should('have.css', 'font-size', font[count]);
+                    });
+                cy.log('selecting an option to collapse the response dropdown')
+                fillInTheGapsDropdownPage.steps.selectOptionFromResponseDropdown('new');
+                cy.log('Checking font size of response dropdown')
+                fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
+                    .should('have.css', 'font-size', font[count]);
+                fillInTheGapsDropdownPage.previewTabQuestionContainer()
+                    .should('have.css', 'font-size', font[count]);
+                cy.log('Post step: Switch to Edit tab')
+                fillInTheGapsDropdownPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional Settings: Check Answer', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            fillInTheGapsDropdownPage.questionInstructionsInputField()
+                .type('Question Instructions');
+            fillInTheGapsDropdownPage.pointsInputField()
+                .type('4');
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, 'new')
+            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
+    });
+
+    describe('Additional Settings: Check Answer - Functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            fillInTheGapsDropdownPage.questionInstructionsInputField()
+                .type('Question Instructions');
+            fillInTheGapsDropdownPage.pointsInputField()
+                .type('6');
+            fillInTheGapsDropdownPage.questionInputField()
+                .click();
+            fillInTheGapsDropdownPage.ckEditorAddResponseButton()
+                .click();
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, 'new')
+            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse2);
+            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(1, 'extensively')
+            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsDropdownPage.steps.setMaximumCheckAnswerAttempts(2);
+            fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.previewTabResponseDropdown()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('not.have.text')
+                });
+            fillInTheGapsDropdownPage.checkAnswerButton()
+                .click();
+            fillInTheGapsDropdownPage.correctIcon()
+                .should('not.exist');
+            fillInTheGapsDropdownPage.incorrectIcon()
+                .should('not.exist');
+            fillInTheGapsDropdownPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'new');
+            fillInTheGapsDropdownPage.checkAnswerButton()
+                .click();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotVisible(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            fillInTheGapsDropdownPage.steps.verifyIncorrectAttemptBorder()
+        });
+
+        it('When the user has added both 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', () => {
+            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(1, 'extensively');
+            fillInTheGapsDropdownPage.checkAnswerButton()
+                .click();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0)
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1)
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Correct')
+            fillInTheGapsDropdownPage.steps.verifyCorrectAttemptBorder()
+        });
+
+
+        fillInTheGapsDropdownPage.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')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.maximumCheckAnswerAttemptsInputField()
+                .clear()
+                .type(1)
+                .should('have.value', '1');
+            cy.log('Switching to Preview tab');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.checkAnswerButton()
+                .should('be.enabled');
+            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'new');
+            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(1, 'extensively');
+            fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            fillInTheGapsDropdownPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(0);
+            cy.log('Switching to Preview tab')
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.checkAnswerButton()
+                .should('be.enabled');
+            cy.log('Clicking on \'Check Answer\' to check state of \'Check Answer\' to be enabled')
+            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'changing');
+            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(1, 'decreasingly');
+            fillInTheGapsDropdownPage.checkAnswerButton()
+                .click();
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1)
+            fillInTheGapsDropdownPage.checkAnswerButton()
+                .should('be.enabled');
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            fillInTheGapsDropdownPage.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')
+            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'healthy');
+            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(1, 'extensively');
+            fillInTheGapsDropdownPage.checkAnswerButton()
+                .click();
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1)
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            fillInTheGapsDropdownPage.steps.verifyIncorrectAttemptBorder()
+            fillInTheGapsDropdownPage.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')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.maximumCheckAnswerAttemptsInputField()
+                .clear()
+                .should('have.value', '');
+            cy.log('Switching to Preview tab');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.checkAnswerButton()
+                .should('be.enabled');
+            cy.log('Clicking on \'Check Answer\' to check state of \'Check Answer\' to be enabled')
+            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'changing');
+            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(1, 'decreasingly');
+            fillInTheGapsDropdownPage.checkAnswerButton()
+                .click();
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1)
+            fillInTheGapsDropdownPage.checkAnswerButton()
+                .should('be.enabled');
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            fillInTheGapsDropdownPage.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')
+            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'healthy');
+            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(1, 'extensively');
+            fillInTheGapsDropdownPage.checkAnswerButton()
+                .click();
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1)
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            fillInTheGapsDropdownPage.steps.verifyIncorrectAttemptBorder()
+            fillInTheGapsDropdownPage.checkAnswerButton()
+                .should('be.enabled');
+        });
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyDetailsSection();
+    });
+});