itemengine-cypress-automation 1.0.165-migrationScripts-e27d6f2.0 → 1.0.166

package/cypress/e2e/ILC/FeedbackScaleNew/thumbsFeedbackScaleStyle.js

@@ -0,0 +1,214 @@
+import { feedbackScalePage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const thumbsDefaultColor = "rgba(0, 0, 0, 1)";
+const css = Cypress.env('css');
+const legendTexts = ['Satisfied', 'Not satisfied'];
+const optionsTextArray = ['Thumbs down', 'Thumbs up'];
+describe('Create item page: Feedback scale - Thumbs feedback scale style - Edit and preview tab contents and functionality ', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Thumbs feedback scale style - Edit tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        it('The user should be able to select "Thumbs" feedback scale style from the feedback scale style dropdown', () => {
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Thumbs');
+        });
+
+        it('The options stepper count input field should not be displayed for "Thumbs" feedback scale style', () => {
+            utilities.verifyElementVisibilityState(feedbackScalePage.optionsStepperInputField(), 'notExist');
+        })
+
+        it('2 option accordions should be displayed with label "Option #" (# being a number from 1 to 2), Option text and Points, "Delete option" icon button should not be displayed, by default all option accordions should be in collapsed state', () => {
+            for (let index = 0; index < 2; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionPropertiesForThumbsScale(index, { optionLabel: `Option ${index + 1}\n:\n${optionsTextArray[index]}`, Points: `${index + 1}` });
+                feedbackScalePage.steps.verifyOptionAccordionCollapsedState(index);
+            }
+        });
+
+        it('The user should be able to expand option accordions, an "Options text" label and input field and "Legend text" label and empty input field with placeholder text, "Enter legend text" should be displayed. For the Option 1 accordion, the options text input field should be pre-populated with "Thumbs down".', () => {
+            feedbackScalePage.steps.expandOptionAccordion(0);
+            feedbackScalePage.steps.verifyOptionTextLabel(0);
+            feedbackScalePage.steps.verifyOptionInputFieldText(0, 'Thumbs down');
+            utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.legendTextLabel(), 0), 'Legend text');
+            feedbackScalePage.steps.verifyLegendTextInputFieldPlaceholder(0);
+        });
+
+        it('On expanding the "Option 2" accordion, the previously expanded accordion should continue to stay in expanded state. For Option 2 accordion, the options text input field should be pre-populated with "Thumbs up"', () => {
+            feedbackScalePage.steps.expandOptionAccordion(1);
+            feedbackScalePage.steps.verifyOptionAccordionExpandedState(0);
+            feedbackScalePage.steps.verifyOptionAccordionExpandedState(1);
+            feedbackScalePage.steps.verifyOptionTextLabel(1);
+            feedbackScalePage.steps.verifyOptionInputFieldText(1, 'Thumbs up');
+            utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.legendTextLabel(), 1), 'Legend text');
+            feedbackScalePage.steps.verifyLegendTextInputFieldPlaceholder(1);
+        });
+
+        it('The user should be able to enter text in the legend text input field, the placeholder text should disappear on entering the text', () => {
+            feedbackScalePage.steps.addLegendText(0, 'I am uncomfortable with the learning target.');
+            feedbackScalePage.steps.verifyLegendTextInputFieldPlaceholderNotExists(0);
+        });
+
+        it('When the user removes the added text from the legend input field, the placeholder text should appear again', () => {
+            feedbackScalePage.steps.clearLegendTextInputField(0);
+            feedbackScalePage.steps.verifyLegendTextInputFieldPlaceholder(0);
+        });
+
+        it('When the user modifies the option text input field, the updated option text should reflect on the respective option accordion', () => {
+            feedbackScalePage.steps.enterTextInOptionTextInputField(0, ' - Not satisfied');
+            feedbackScalePage.steps.verifyTextInOptionTextInputField(0, 'Thumbs down - Not satisfied');
+            feedbackScalePage.steps.verifyOptionsAccordionLabel(0, 'Option 1\n:\nThumbs down - Not satisfied')
+        });
+
+        it('For "Thumbs" feedback scale style, "+Add option" button should not be displayed', () => {
+            utilities.verifyElementVisibilityState(feedbackScalePage.addOptionButton(), 'notExist');
+        });
+    });
+
+    describe('Thumbs feedback scale style - Preview tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Thumbs');
+            feedbackScalePage.steps.switchToPreviewTab();
+        });
+
+        it('By default 2 buttons, "Thumbs down" and "Thumbs up" should be displayed in the preview tab', () => {
+            utilities.verifyElementVisibilityState(feedbackScalePage.thumbsDownFeedbackButton(), 'visible');
+            utilities.verifyElementVisibilityState(feedbackScalePage.thumbsUpFeedbackButton(), 'visible');
+        });
+
+        feedbackScalePage.tests.verifyLegendAccordionDefaultState();
+
+        feedbackScalePage.tests.verifyLegendAccordionCollapsedAndExpandedState();
+
+        it('The legend text accordion should display the two thumb buttons and options text, legend text should not be displayed for the thumb buttons', () => {
+            feedbackScalePage.steps.verifyThumbsDownButtonInLegendAccordion('Thumbs down');
+            feedbackScalePage.steps.verifyThumbsUpButtonInLegendAccordion('Thumbs up');
+            utilities.verifyElementVisibilityState(feedbackScalePage.legendTextPreviewTab(), 'notExist');
+        });
+
+        it('When the user switches to edit tab and adds legend text, then the added legend text should be displayed besides the respective thumbs button in the legend text accordion', () => {
+            feedbackScalePage.steps.switchToEditTab();
+            legendTexts.forEach((legendText, index) => {
+                feedbackScalePage.steps.expandOptionAccordion(index);
+                feedbackScalePage.steps.addLegendText(index, legendText);
+            });
+            feedbackScalePage.steps.switchToPreviewTab();
+            legendTexts.forEach((legendText, buttonIndex) => {
+                feedbackScalePage.steps.verifyLegendTextInLegendAccordion(buttonIndex, legendText);
+            });
+        });
+
+        it('CSS of number buttons - unselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.legendTextFeedbackButtonLabel(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(feedbackScalePage.legendTextPreviewTab(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular,
+            });
+           /*  cy.log('Hover state CSS')
+            utilities.hoverOverElement(feedbackScalePage.thumbsUpFeedbackButton());
+            utilities.verifyCSS(feedbackScalePage.thumbsUpFeedbackButton(), {
+                'background-color': css.color.transparent,
+                'border': '2px solid rgb(102, 102, 102)'
+            });
+            utilities.hoverAwayFromElement(); */
+        });
+
+        it('Accessibility of number buttons - unselected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.thumbsDownFeedbackButton().parents('[class*="question-preview-wrapper"]'));
+        });
+
+        it('The user should be able to mark feedback by clicking on any thumb button', () => {
+            feedbackScalePage.steps.clickOnThumbsDownButton();
+            feedbackScalePage.steps.verifyThumbsDownButtonSelectedState();
+        });
+
+        it('The user should be able to update the feedback by selecting other button, previously selected button should get unselected', () => {
+            feedbackScalePage.steps.clickOnThumbsUpButton();
+            feedbackScalePage.steps.verifyThumbsUpButtonSelectedState();
+        });
+
+        it('CSS of number buttons - selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.thumbsUpFeedbackButton().find('circle').eq(1), {
+                'fill': 'rgb(0, 0, 0)'
+            });
+        });
+
+        it('Accessibility of number buttons - selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.thumbsDownFeedbackButton().parents('[class*="question-preview-wrapper"]'));
+        });
+    });
+
+    describe('Thumbs feedback scale style - Colors section contents', () => {
+        const modifiedColor = 'rgba(255, 0, 0, 0.7)'
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Thumbs');
+        });
+
+        it('For "Thumbs" feedback scale style, in the color section, a color block with "rgba(0, 0, 0, 1)" color should be displayed. An edit icon and "Edit color" label should be displayed besides the color block"', () => {
+            feedbackScalePage.steps.verifyColorPickerBlockColor(0, 'rgb(0, 0, 0)');
+            utilities.verifyInnerText(feedbackScalePage.editColorButton(), 'Edit color');
+            utilities.verifyElementVisibilityState(feedbackScalePage.editColorButton(), 'visible');
+        });
+
+        it('When the user clicks on the "Edit color" button, a "Select color" popup should be displayed and the default selected color block should be in the selected state in the color popup', () => {
+            feedbackScalePage.steps.editColor(0);
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(0, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHexValue('#000000');
+            colorPopupComponent.steps.verifyOpacityInputFieldValue('100');
+            colorPopupComponent.steps.verifyOpacitySliderValue('100');
+            colorPopupComponent.steps.verifySelectedColorBlock(thumbsDefaultColor);
+            colorPopupComponent.steps.verifyRecommendedColorBlockSelectedState(8);
+        });
+
+        it('When the user modifies the selected color, the updated color should be displayed in the color block of the "Colors" section', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.addInputToOpacityInputField('70');
+            colorPopupComponent.steps.clickOnOkButton();
+            feedbackScalePage.steps.verifyColorPickerBlockColor(0, modifiedColor);
+        })
+    });
+
+    describe('Thumbs feedback scale style - Colors : Preview tab functionality', () => {
+        const modifiedColor = 'rgba(255, 0, 0, 0.1)'
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Thumbs');
+        });
+
+        it('When the user modifies the selected color for number buttons, then on marking the feedback in the preview tab, the feedback button should get highlighted with the modified color', () => {
+            feedbackScalePage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.addInputToOpacityInputField('70');
+            colorPopupComponent.steps.clickOnOkButton();
+            feedbackScalePage.steps.switchToPreviewTab();
+            feedbackScalePage.steps.clickOnThumbsUpButton();
+            feedbackScalePage.steps.verifyThumbsUpButtonSelectedState();
+            feedbackScalePage.steps.verifyThumbsUpButtonSelectedStateColor(modifiedColor);
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsDragAndDrop/fillInTheGapsDragAndDropAdditionalSettings.js

@@ -0,0 +1,356 @@
+import { fillInTheGapsDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Fill In the Gaps Additional settings and Responses accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyAdditionalSettingsAccordionProperties();
+    });
+
+    describe('Additional Settings: Height and Width', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyHeightAndWidthLabelInputFieldWithCSSAnda11y()
+
+        //Height and width test cases for set correct answer section response fields
+        //TODO: We will need to revisit below case as it will fail for mobile view
+        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the response field should be (197x46)px in the \'Set correct answer\' section response field', () => {
+            fillInTheGapsDragAndDropPage.heightInputField()
+                .should('have.value', '');
+            fillInTheGapsDragAndDropPage.widthInputField()
+                .should('have.value', '');
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'height', '46.000')
+                    .and('have.attr', 'width', '197.000px');
+            };
+        });
+
+        it('When the user adds \'Height\' for the response field then the height of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsDragAndDropPage.heightInputField()
+                .type('100')
+                .should('have.value', '100')
+                .blur();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'height', '100.000')
+            };
+        });
+
+        it('When the user adds \'Width\' for the response field then the Width of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsDragAndDropPage.heightInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsDragAndDropPage.widthInputField()
+                .type('100')
+                .should('have.value', '100')
+                .blur();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'width', '100.000px')
+            };
+        });
+
+        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', () => {
+            fillInTheGapsDragAndDropPage.widthInputField()
+                .clear()
+                .type('20')
+                .should('have.value', '20')
+                .blur();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'width', '80.000px')
+            };
+        });
+
+        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', () => {
+            fillInTheGapsDragAndDropPage.widthInputField()
+                .clear()
+                .type('800')
+                .should('have.value', '800')
+                .blur();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'width', '400.000px')
+            };
+        });
+
+        //Height and width test cases for preview tab response fields
+        //TODO: We will need to revisit below case as it will fail for mobile view
+        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the response field should be (197x46)px for the preview tab', () => {
+            fillInTheGapsDragAndDropPage.widthInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'height', '46.000')
+                    .and('have.attr', 'width', '197.000px');
+            };
+        });
+
+        it('When the user adds \'Height\' for the response field then the height of the response field should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.heightInputField()
+                .type('100')
+                .should('have.value', '100');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'height', '100.000');
+            };
+        });
+
+        it('When the user adds \'Width\' for the response field then the response fields should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.heightInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsDragAndDropPage.widthInputField()
+                .type('100')
+                .should('have.value', '100');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'width', '100.000px');
+            };
+        });
+
+        it('When the user enters a value below 80px in the \'Width\' input field then the input field should remain 80px for the preview tab response fields', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.widthInputField()
+                .clear()
+                .type('20')
+                .should('have.value', '20');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'width', '80.000px');
+            };
+        });
+
+        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')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.widthInputField()
+                .clear()
+                .type('800')
+                .should('have.value', '800');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'width', '400.000px');
+            };
+        });
+    });
+
+    describe('Additional Settings : Response accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyAdditionalSettingsResponseAccordionLabelCSSAndA11y();
+    });
+
+    describe('Additional Settings: Check Answer', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.addOptionButton()
+                .click();
+            fillInTheGapsDragAndDropPage.addOptionButton()
+                .click();
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsForDragAndDropFields(['Correct answer for response 1', 'Correct answer for response 2', 'Incorrect answer 1', 'Incorrect answer 2']);
+            fillInTheGapsDragAndDropPage.pointsInputField()
+                .type('4');
+            fillInTheGapsDragAndDropPage.steps.setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea('Correct answer for response 1', 0);
+            fillInTheGapsDragAndDropPage.steps.setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea('Correct answer for response 2', 1);
+            fillInTheGapsDragAndDropPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
+    });
+
+    describe('Additional Settings: Check Answer - Functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.addOptionButton()
+                .click();
+            fillInTheGapsDragAndDropPage.addOptionButton()
+                .click();
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsForDragAndDropFields(['Correct answer for response 1', 'Correct answer for response 2', 'Incorrect answer 1', 'Incorrect answer 2']);
+            fillInTheGapsDragAndDropPage.pointsInputField()
+                .type('4');
+            fillInTheGapsDragAndDropPage.steps.setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea('Correct answer for response 1', 0);
+            fillInTheGapsDragAndDropPage.steps.setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea('Correct answer for response 2', 1);
+            fillInTheGapsDragAndDropPage.steps.expandAdditionalSettings();
+            fillInTheGapsDragAndDropPage.steps.setMaximumCheckAnswerAttempts(2);
+            fillInTheGapsDragAndDropPage.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', () => {
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                    .eq(index)
+                    .should('have.value', '');
+            };
+            fillInTheGapsDragAndDropPage.checkAnswerButton()
+                .click();
+            fillInTheGapsDragAndDropPage.correctIcon()
+                .should('not.exist');
+            fillInTheGapsDragAndDropPage.incorrectIcon()
+                .should('not.exist');
+            fillInTheGapsDragAndDropPage.correctIncorrectAnswerLabel()
+                .should('not.exist');
+            fillInTheGapsDragAndDropPage.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', () => {
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 1', 0);
+            fillInTheGapsDragAndDropPage.checkAnswerButton()
+                .click();
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectIconNotVisible(1);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectAttemptBorder();
+        });
+
+        it('When the user has added correct responses then on clicking on the Check Answer button, green checkmark icon should be displayed besides the responses and \'Correct Answer\' label should be displayed below the box', () => {
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 2', 1);
+            fillInTheGapsDragAndDropPage.checkAnswerButton()
+                .click();
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAttemptBorder();
+        });
+
+
+        fillInTheGapsDragAndDropPage.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')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.maximumCheckAnswerAttemptsInputField()
+                .clear()
+                .type(1)
+                .should('have.value', '1');
+            cy.log('Switching to Preview tab');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.checkAnswerButton()
+                .should('be.enabled');
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 1', 0);
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 2', 1);
+            fillInTheGapsDragAndDropPage.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', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            fillInTheGapsDragAndDropPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(0);
+            cy.log('Switching to Preview tab');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.checkAnswerButton()
+                .should('be.enabled');
+            cy.log('Clicking on \'Check Answer\' to check state of \'Check Answer\' to be enabled')
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Incorrect answer 1', 0);
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Incorrect answer 2', 1);
+            fillInTheGapsDragAndDropPage.checkAnswerButton()
+                .click();
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionCrossmarkIcon(1)
+            fillInTheGapsDragAndDropPage.checkAnswerButton()
+                .should('be.enabled');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            fillInTheGapsDragAndDropPage.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')
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 1', 0);
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 2', 1);
+            fillInTheGapsDragAndDropPage.checkAnswerButton()
+                .click();
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('Correct')
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAttemptBorder()
+            fillInTheGapsDragAndDropPage.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')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.maximumCheckAnswerAttemptsInputField()
+                .clear()
+                .should('have.value', '');
+            cy.log('Switching to Preview tab');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.checkAnswerButton()
+                .should('be.enabled');
+            cy.log('Clicking on \'Check Answer\' to check state of \'Check Answer\' to be enabled')
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Incorrect answer 1', 0);
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Incorrect answer 2', 1);
+            fillInTheGapsDragAndDropPage.checkAnswerButton()
+                .click();
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionCrossmarkIcon(1)
+            fillInTheGapsDragAndDropPage.checkAnswerButton()
+                .should('be.enabled');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            fillInTheGapsDragAndDropPage.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')
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 1', 0);
+            fillInTheGapsDragAndDropPage.steps.previewTabClickAndDropDraggableOptionInResponseArea('Correct answer for response 2', 1);
+            fillInTheGapsDragAndDropPage.checkAnswerButton()
+                .click();
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('Correct')
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAttemptBorder()
+            fillInTheGapsDragAndDropPage.checkAnswerButton()
+                .should('be.enabled');
+        });
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyDetailsSection();
+    });
+});