itemengine-cypress-automation 1.0.51 → 1.0.63

package/cypress/e2e/ILC/FillInTheGapsOverImageDropdown/fillInTheGapsOverImageDropdownAdditionalSettingsAnswerNumeration.js

@@ -0,0 +1,206 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const optionsForResponse1 = ['Flower', 'Petal', 'Stem', 'Branch'];
+const optionsForResponse2 = ['Leaf', 'Leaves', 'Stem', 'Seed'];
+const answerNumerationDropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+const correctTabAnswerArray = ['Flower', 'Leaf'];
+const incorrectAnswerArray = ['Branch', 'Seed'];
+const numbers = ['1', '2'];
+const lowercase = ['a', 'b'];
+const uppercase = ['A', 'B'];
+
+describe('Fill In the gaps over image - dropdown - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings: Student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Student response area and layout\' label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.studentResponseAreaAndLayoutLabel(), 'Student response area and layout');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.studentResponseAreaAndLayoutLabel(), 'visible');
+        });
+
+        it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.studentResponseAreaAndLayoutLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: \'Answer numeration\' (only while grading) - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyAnswerNumerationContents();
+    });
+
+    describe('Additional settings: \'Answer numeration\' (only while grading) - Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[0]} option from the \'Answer numeration\' dropdown, then correct response numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`)
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseNumeration(), 'notExist');
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[1]} option from the \'Answer numeration\' dropdown, then correct response numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseNumeration(), 'notExist');
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[2]} option from the \'Answer numeration\' dropdown, then correct response numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseNumeration(), 'notExist');
+        });
+    });
+
+    describe('Additional settings: \'Answer numeration\' (only while grading) - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse2);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        it(`When the user attempts the question when ${answerNumerationDropdownOptions[0]} is selected and selects \'Show correct answer\' checkbox then the correct answer section should have ${answerNumerationDropdownOptions[0]} numeration`, () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount(correctTabAnswerArray, numbers);
+        });
+
+        it(`When the user attempts the question when ${answerNumerationDropdownOptions[1]} is selected and selects \'Show correct answer\' checkbox then the correct answer section should have ${answerNumerationDropdownOptions[1]} numeration`, () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount(correctTabAnswerArray, uppercase);
+        });
+
+        it(`When the user attempts the question when ${answerNumerationDropdownOptions[2]} is selected and selects \'Show correct answer\' checkbox then the correct answer section should have ${answerNumerationDropdownOptions[2]} numeration`, () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount(correctTabAnswerArray, lowercase);
+        });
+    });
+
+    describe('Additional settings: Display answer numeration to students - Contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Display answer numeration to students\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.displayAnswerNumerationToStudentsLabel(), 'Display answer numeration to students');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.displayAnswerNumerationToStudentsLabel(), 'visible');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDisplayAnswerNumerationToStudentsCheckboxNotChecked();
+        });
+
+        it('CSS of \'Display answer numeration to students\' section - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.displayAnswerNumerationToStudentsLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.displayAnswerNumerationToStudentsCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('When \'Display answer numeration to students\' checkbox is unchecked, answer numeration should not be displayed in set correct answer section response dropdown', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseNumeration(), 'notExist');
+        });
+
+        it('When the user checks the \'Display answer numeration to students\' checkbox, answer numeration should not be displayed in set correct answer section response dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.checkDisplayAnswerNumerationToStudentsCheckbox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseNumeration(), 'notExist');
+        });
+
+        it('CSS of \'Display answer numeration to students\' section - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.displayAnswerNumerationToStudentsCheckbox().parent().find('svg g g'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Display answer numeration to students\' section - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.displayAnswerNumerationToStudentsCheckbox().parents('.additional-settings-container'));
+        });
+    });
+
+    describe('Additional settings: Display answer numeration to students - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Display answer numeration to students\' checkbox is unchecked, answer numeration should not be displayed in preview tab response dropdown', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseNumeration(), 'notExist');
+        });
+
+        it('When the user checks the \'Display answer numeration to students\' checkbox, answer numeration should be displayed in preview tab response dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.checkDisplayAnswerNumerationToStudentsCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownNumeration(['1', '2']);
+        });
+
+        it('When the user unchecks the \'Display answer numeration to students\' checkbox, answer numeration should not be displayed in preview tab response dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.uncheckDisplayAnswerNumerationToStudentsCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseNumeration(), 'notExist');
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageDropdown/fillInTheGapsOverImageDropdownAdditionalSettingsBasic.js

@@ -0,0 +1,222 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const optionsForResponse1 = ['Flower', 'Petal', 'Stem', 'Branch'];
+const optionsForResponse2 = ['Leaf', 'Leaves', 'Stem', 'Seed'];
+const correctTabAnswerArray = ['Flower', 'Leaf'];
+const incorrectAnswerArray = ['Branch', 'Seed'];
+const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
+
+describe('Fill In the gaps over image - dropdown - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Font size dropdown - Contents and functionality in set correct section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps over image - dropdown type, adding question instructions and options, alloting points and expanding additional settings accordion')
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyFontSizeSectionContents();
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font size dropdown, then font size of the contents in the \'Set correct answer\' section should be changed to ${option}, but the response field label \'Response #\' should remain unchanged`, () => {
+                fillInTheGapsOverImageDropdownPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
+                utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.fontSizeDropdown(), `${option}`);
+                cy.log('Checking correct answer section font size')
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseDropdownWrapperSetCorrectAnswerSection(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseFieldLabelSetCorrectAnswerSection(), {
+                    'font-size': css.fontSize.default
+                });
+                fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInSetCorrectAnswerSection(0);
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseDropdownOptionText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                cy.log('Selecting option to close dropdown');
+                fillInTheGapsOverImageDropdownPage.steps.selectOptionFromResponseDropdown(optionsForResponse1[0]);
+            });
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/548210
+    describe('Additional settings: Font size dropdown - Functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps over image - dropdown type, adding question instructions and options, alloting points and expanding additional settings accordion')
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.addQuestionInstructions('Question Instructions');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(4);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, optionsForResponse1[0]);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${option} accordingly`, () => {
+                fillInTheGapsOverImageDropdownPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
+                utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.fontSizeDropdown(), `${option}`);
+                fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.questionInstructionsText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInPreviewTab(0);
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseDropdownOptionText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                cy.log('Selecting option to close dropdown');
+                fillInTheGapsOverImageDropdownPage.steps.selectOptionFromResponseDropdown(optionsForResponse1[1]);
+                fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseNumeration(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerResponseWrapper(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                fillInTheGapsOverImageDropdownPage.steps.uncheckShowCorrectAnswerCheckbox();
+                fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: Check answer', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse2);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
+    });
+
+    describe('Additional settings: Check answer - Functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse2);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.setMaximumCheckAnswerAttempts(2);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/548211 
+        fillInTheGapsOverImageDropdownPage.tests.verifyCheckAnswerButtonFunctionalityWhenQuestionIsUnattempted();
+
+        it('When the user attempts the question partially correct, then on clicking on the \'Check answer\' button, green check-mark icon should be displayed besides the correct response, red cross-mark should be displayed besides incorrect response and \'Incorrect answer\' label should be displayed below the question preview', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        it('When the user attempts the question correctly, then on clicking on the \'Check answer\' button, green check-mark icon should be displayed besides the correct response and \'Correct answer\' label should be displayed below the question preview', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyDisabledCheckAnswerButtonWithCSSAnda11y();
+
+        it('When the user updates the value of Maximum check answer attempts input field, it should get reflected on the Preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(1);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckAnswerButtonEnabled();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        it('When the \'Maximum check answer attempts\' input field is empty and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.clearMaximumCheckAnswerAttemptsInputField()
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckAnswerButtonEnabled();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+
+    describe('Additional settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyDetailsSection();
+    });
+});