itemengine-cypress-automation 1.0.131-updateILCrepo6March-02c78d1.0 → 1.0.132

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/minimumScoringPenaltyPointsAndRoundingDropdown.js

@@ -0,0 +1,194 @@
+import { fillInTheGapsDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const penaltyScoringTypeArray = ['No penalty points', 'Penalty points for the entire question', 'Penalty points for each incorrect dropzone'];
+
+describe('Create item page - Fill in the gaps with drag and drop: Minimum scoring, Penalty scoring, Rounding - Edit tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Scoring section: Minimum scoring - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.allotPoints(10);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyMinimumScoringDropdown();
+
+        fillInTheGapsDragAndDropPage.tests.verifyMinimumPointsLabelAndInputField();
+
+        fillInTheGapsDragAndDropPage.tests.verifyMinimumPointsFieldErrorState();
+    });
+
+    describe('Scoring section: Penalty scoring - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.allotPoints(10);
+            fillInTheGapsDragAndDropPage.steps.selectAutoScoredScoringSubtype('Partial equal weights');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyPenaltyScoringDropdown(penaltyScoringTypeArray);
+
+        fillInTheGapsDragAndDropPage.tests.verifyPenaltyPointsLabelAndInputField();
+
+        fillInTheGapsDragAndDropPage.tests.verifyPenaltyPointsErrorState();
+
+        it('When the user selects \'Penalty points for each incorrect dropzone\' from the penalty scoring dropdown, \'Automatically set penalty for each incorrect dropzone to total points / no. of incorrect dropzones\' label and checkbox should be displayed, by default the checkbox should be unchecked. Two radio buttons with labels - \'Specify total penalty points\' and \'Specify points for each incorrect option\' should be displayed. By default, \'Specify total penalty points\' radio button should be checked', () => {
+            fillInTheGapsDragAndDropPage.steps.expandPenaltyScoringDropdown();
+            fillInTheGapsDragAndDropPage.steps.selectOptionFromPenaltyScoringDropdown('Penalty points for each incorrect dropzone');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.automaticallySetPenaltyPointsCheckboxLabel(), 'Automatically set penalty for each incorrect dropzone to total points / no. of incorrect dropzones');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.specifyTotalPenaltyPointsRadioButtonLabel(), 'Specify total penalty points');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.specifyPointsForEachIncorrectOptionRadioButtonLabel(), 'Specify points for each incorrect dropzone');
+            fillInTheGapsDragAndDropPage.steps.verifyAutomaticallySetPenaltyPointsCheckboxUncheckedState();
+            fillInTheGapsDragAndDropPage.steps.verifySpecifyTotalPenaltyPointsRadioButtonCheckedState();
+            fillInTheGapsDragAndDropPage.steps.verifySpecifyPointsForEachIncorrectOptionRadioButtonUncheckedState();
+        });
+
+        it('When \'Specify total penalty points\' is selected, a penalty points detail section with \'Total penalty points\' label and empty input field, \'Penalty points for each incorrect dropzone: -\' label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.penaltyPointsDetailsSectionInputFieldLabel(), 'Total penalty points');
+            fillInTheGapsDragAndDropPage.steps.verifyTotalPenaltyPointsValue('');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.penaltyPointsDetailsSectionAllottedPointsLabel(), 'Penalty points for each incorrect dropzone: -');
+        });
+
+        it('When the user allots total penalty points, then \'points for each incorrect option\' should get updated as per the count of incorrect options available', () => {
+            fillInTheGapsDragAndDropPage.steps.allotTotalPenaltyPoints(5);
+            fillInTheGapsDragAndDropPage.steps.verifyPenaltyPointsForEachIncorrectDropzone(2.5);
+        });
+
+        it('When the user adds a new dropzone, then \'points for each incorrect option\' should get updated accordingly', () => {
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            fillInTheGapsDragAndDropPage.steps.verifyPenaltyPointsForEachIncorrectDropzone(1.67);
+        });
+
+        it('When the user deletes a dropzone, then \'points for each incorrect option\' should get updated accordingly', () => {
+            fillInTheGapsDragAndDropPage.steps.deleteAResponseArea(0);
+            fillInTheGapsDragAndDropPage.steps.verifyPenaltyPointsForEachIncorrectDropzone(2.5);
+        });
+
+        it('CSS of the penalty points section - Total penalty points', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.automaticallySetPenaltyPointsCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.automaticallySetPenaltyPointsCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.specifyTotalPenaltyPointsRadioButton().parent().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.specifyPointsForEachIncorrectOptionRadioButton().parent().find('svg path'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.specifyTotalPenaltyPointsRadioButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.specifyPointsForEachIncorrectOptionRadioButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.penaltyPointsDetailsSectionInputFieldLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.totalPenaltyPointsInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.penaltyPointsDetailsSectionAllottedPointsLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of the penalty points section - Total penalty points', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.automaticallySetPenaltyPointsCheckboxLabel().parents('.penalty-score-for-each-incorrect-wrapper'));
+        });
+
+        it('When the user selects \'Specify points for each incorrect answer\', a penalty points detail section with \'Penalty points for each incorrect dropzone:\' label and empty input field, \'Total penalty points: -\' label should be displayed', () => {
+            cy.log('Pre-step: Clearing the total penalty points input field')
+            fillInTheGapsDragAndDropPage.steps.clearTotalPenaltyPointsInputField();
+            fillInTheGapsDragAndDropPage.steps.selectPenaltyPointsForEachIncorrectOptionType('Specify points for each incorrect option');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.penaltyPointsDetailsSectionInputFieldLabel(), 'Penalty points for each incorrect dropzone');
+            fillInTheGapsDragAndDropPage.steps.verifyPenaltyPointsForEachIncorrectDropzoneValue('');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.penaltyPointsDetailsSectionAllottedPointsLabel(), 'Total penalty points: -');
+        });
+
+        it('When the user allots Penalty points for each incorrect dropzone, then \'Total penalty points\' should get updated as per the count of incorrect options available', () => {
+            fillInTheGapsDragAndDropPage.steps.allotPenaltyPointsForEachIncorrectDropzone(1);
+            fillInTheGapsDragAndDropPage.steps.verifyTotalPenaltyPoints(2);
+        });
+
+        it('When the user adds a new option, then \'Total penalty points\' should get updated accordingly', () => {
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            fillInTheGapsDragAndDropPage.steps.verifyTotalPenaltyPoints(3);
+        });
+
+        it('When the user deletes an option, then \'points for each incorrect option\' should get updated accordingly', () => {
+            fillInTheGapsDragAndDropPage.steps.deleteAResponseArea(0);
+            fillInTheGapsDragAndDropPage.steps.verifyTotalPenaltyPoints(2);
+        });
+
+        it('CSS of the penalty points section - Penalty points for each incorrect dropzone', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.penaltyPointsDetailsSectionInputFieldLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.penaltyPointsForEachIncorrectOptionInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.penaltyPointsDetailsSectionAllottedPointsLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of the penalty points section - Penalty points for each incorrect dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.automaticallySetPenaltyPointsCheckboxLabel().parents('.penalty-score-for-each-incorrect-wrapper'));
+        });
+
+        it('When the user switches to the \'Specify total penalty points\' option, the total penalty points input field should be filled as per the total penalty points in \'Specify points for each incorrect option\'', () => {
+            fillInTheGapsDragAndDropPage.steps.selectPenaltyPointsForEachIncorrectOptionType('Specify total penalty points');
+            fillInTheGapsDragAndDropPage.steps.verifyTotalPenaltyPointsValue(2);
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.penaltyPointsDetailsSectionAllottedPointsLabel(), 'Penalty points for each incorrect dropzone: 1');
+        });
+
+        it('When the user checks the \'Automatically set penalty for each incorrect dropzone to total points / no. of incorrect dropzones\' checkbox, both radio buttons should get disabled, \'Specify points for each incorrect option\' should get checked, in the penalty points details section, \'Penalty points for each incorrect dropzone: #\' and \'Total penalty points: #\' should be displayed as per the alloted points and available incorrect options', () => {
+            fillInTheGapsDragAndDropPage.steps.checkAutomaticallySetPenaltyPointsCheckbox();
+            fillInTheGapsDragAndDropPage.steps.verifySpecifyTotalPenaltyPointsDisabledState();
+            fillInTheGapsDragAndDropPage.steps.verifySpecifyPointsForEachIncorrectOptionRadioButtonSelectedAndDisabledState();
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDragAndDropPage.penaltyPointsDetailsSectionAllottedPointsLabel(), 0), 'Penalty points for each incorrect dropzone: 5');
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDragAndDropPage.penaltyPointsDetailsSectionAllottedPointsLabel(), 1), 'Total penalty points: 10');
+        });
+    });
+
+    describe('Scoring section: Rounding - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.allotPoints(10);
+            fillInTheGapsDragAndDropPage.steps.selectAutoScoredScoringSubtype('Partial equal weights')
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyRoundingDropdown();
+
+        fillInTheGapsDragAndDropPage.tests.verifyRoundNegativeScoreToZeroLabelAndCheckbox();
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/previewContentsForAllViews.smoke.js

@@ -21,6 +21,11 @@ describe('Preview tab contents for all views', () => {
                         fillInTheGapsDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop the options in appropriate dropzone');
                         fillInTheGapsDragAndDropPage.steps.addMultipleOptionFields(1);
                         fillInTheGapsDragAndDropPage.steps.addResponseArea();
+                        cy.log('Add equation to option input field')
+                        fillInTheGapsDragAndDropPage.steps.enterTextInOptionInputField(2, 'Solve the following');
+                        fillInTheGapsDragAndDropPage.steps.focusInOptionsInputField(2);
+                        fillInTheGapsDragAndDropPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
+                        fillInTheGapsDragAndDropPage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
                         cy.log('Add image to option input field')
                         fillInTheGapsDragAndDropPage.steps.focusInOptionsInputField(0);
                         fillInTheGapsDragAndDropPage.steps.selectImageOptionFromCKEditorToolbar();
@@ -30,12 +35,7 @@ describe('Preview tab contents for all views', () => {
                         fillInTheGapsDragAndDropPage.steps.focusInOptionsInputField(1);
                         fillInTheGapsDragAndDropPage.steps.selectBoldOptionFromCKEditorToolbar();
                         fillInTheGapsDragAndDropPage.steps.enterTextInOptionInputField(1, 'This is a bold option');
-                        cy.log('Add equation to option input field')
-                        fillInTheGapsDragAndDropPage.steps.enterTextInOptionInputField(2, 'Solve the following');
-                        fillInTheGapsDragAndDropPage.steps.focusInOptionsInputField(2);
-                        fillInTheGapsDragAndDropPage.steps.selectEquationEditorOptionFromCKEditorToolbar();
-                        fillInTheGapsDragAndDropPage.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
-                        fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'This is a bold option': 0, 'Solve the following': 1 , 'Petals': 2});
+                        fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Solve the following': 1, 'Petals': 2, 'This is a bold option': 0 });
                         fillInTheGapsDragAndDropPage.steps.allotPoints(10);
                         fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
                         break;
@@ -85,7 +85,7 @@ describe('Preview tab contents for all views', () => {
                     fillInTheGapsDragAndDropPage.steps.verifyDropzoneTextPreviewTab(1, '');
                     fillInTheGapsDragAndDropPage.steps.verifyDropzoneTextPreviewTab(2, '');
                 });
-                
+
                 it(`When the user has added image, equation, bold text to the options input fields, then they should be displayed in the options container in ${view}`, () => {
                     fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionWithImageInPreviewTab(0);
                     fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionWithBoldTextInPreviewTab(1);
@@ -97,7 +97,7 @@ describe('Preview tab contents for all views', () => {
                 });
 
                 it('User should be able to drag and drop image, bold text and equation options in the dropzone', () => {
-                    fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'This is a bold option': 0, 'Solve the following': 1 , 'Petals': 2});
+                    fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'This is a bold option': 0, 'Solve the following': 1, 'Petals': 2 });
                     fillInTheGapsDragAndDropPage.steps.verifyDropzoneTextPreviewTab(2, 'Petals');
                     fillInTheGapsDragAndDropPage.steps.verifyDropzoneWithImageInPreviewTab(2);
                     fillInTheGapsDragAndDropPage.steps.verifyDropzoneTextPreviewTab(0, 'This is a bold option');

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/studentViewSettings.js

@@ -0,0 +1,341 @@
+
+import { fillInTheGapsDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const options = ['Petals', 'Leaves', 'Roots', 'Stem', 'Seeds', 'Flower'];
+
+describe('Create Item page - Fill in the gaps with drag and drop: Student view settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Randomize options : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            fillInTheGapsDragAndDropPage.steps.addMultipleOptionFields(4);
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsInputField(options);
+            fillInTheGapsDragAndDropPage.steps.allotPoints(5);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyStudentViewSettingsLabelAndCSS();
+
+        it('\'Randomize options\' checkbox and label should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.randomizeOptionsLabel(), 'Randomize options');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.randomizeOptionsCheckbox(), 'exist');
+            fillInTheGapsDragAndDropPage.steps.verifyRandomizeOptionsCheckboxUnchecked();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyRandomizeOptionsCheckboxAndLabelUncheckedCSS();
+
+        it('When the \'Randomize options\' functionality is disabled, the options in the specify correct answer section should be displayed in the order in which the user has set them in the \'Options\' section', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyRandomizeOptionsCheckboxUnchecked();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+        });
+
+        it('When the user enables the \'Randomize options\' functionality, then the options in the specify correct answer section should be in the order in which the user has set them in the \'Options\' section', () => {
+            fillInTheGapsDragAndDropPage.steps.checkRandomizeOptionsCheckbox();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyRandomizeOptionsCheckboxCheckedCSSAndA11y();
+    });
+
+    describe('Randomize options : Preview tab', () => {
+        let optionsArray = [];
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            fillInTheGapsDragAndDropPage.steps.addMultipleOptionFields(4);
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsInputField(options);
+            fillInTheGapsDragAndDropPage.steps.allotPoints(5);
+        });
+
+        it('When the \'Randomize options\' functionality is disabled, options in the preview tab should be displayed in the order in which the user has set them in the \'Draggable options\' section', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyRandomizeOptionsCheckboxUnchecked();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+
+        it('When the user enables the \'Randomize options\' functionality, then options in preview tab should be displayed in a random order', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.checkRandomizeOptionsCheckbox();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyRandomizeOptionOrder(options);
+            optionsArray = fillInTheGapsDragAndDropPage.steps.getOptionsArray();
+        });
+
+        it('When the user switches to \'Edit tab\' and does not modify any question properties, then the order of the options should not change in the preview tab', () => {
+            fillInTheGapsDragAndDropPage.steps.resetQuestionPreview();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(optionsArray);
+        });
+
+        it('When the user switches to \'Edit tab\' and modifies any of question properties, then the order of the options should change from the previous random order', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.allotPoints(12);
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyRandomizeOptionOrder(options);
+            fillInTheGapsDragAndDropPage.steps.verifyOptionsAreRerandomized(optionsArray);
+        });
+
+        it('When the user disables the \'Randomize options\' functionality, then the options in the preview tab should be displayed in the order in which the user has set them in the \'Options\' section', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab()
+            fillInTheGapsDragAndDropPage.steps.uncheckRandomizeOptionsCheckbox();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+    });
+
+    describe('Enable outer border : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyEnableOuterBorderContents();
+    });
+
+    describe('Enable outer border : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Enable outer border\' checkbox is in checked state, an outer border over the question preview should be visible', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.questionBorderPreviewTab(), 'visible');
+        });
+
+        it('CSS of the outer border', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.questionBorderPreviewTab(), {
+                'border': `1px solid ${css.color.draggableOptionsContainerBorder}`
+            });
+        });
+
+        it('When the user unchecks the \'Enable outer border\' checkbox, then the outer border over the question preview should not be displayed', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.uncheckEnableOuterBorderCheckbox();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab()
+            fillInTheGapsDragAndDropPage.steps.verifyQuestionBorderNotExist();
+        });
+
+        it('CSS of \'Enable outer border\' checkbox - unchecked state', { tags: 'css' }, () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.enableOuterBorderCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('Accessibility of \'Enable outer border\' checkbox - unchecked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.enableOuterBorderCheckbox().parents('[data-ngie-testid="enable-outer-border-checkbox"]'));
+        });
+    });
+
+    describe('Allow multiple instances of same draggable option : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            fillInTheGapsDragAndDropPage.steps.addMultipleOptionFields(4);
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsInputField(options);
+        });
+
+        it('When the \'Allow multiple instances of same draggable option\' functionality is disabled, then on dropping the option in a dropzone, the draggable options should get removed from the options container', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Flower': 0 });
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Petals', 'Leaves', 'Roots', 'Stem', 'Seeds']);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyAllowMultipleInstancesOfSameDraggableOptionCheckboxAndLabelUncheckedCSS();
+
+        it('When the user enables the \'Allow multiple instances of same draggable option\' functionality, then on setting correct answer in a dropzone, the draggable options should persist in the options container', () => {
+            fillInTheGapsDragAndDropPage.steps.checkAllowMultipleInstancesOfSameDraggableOptionCheckbox();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Seeds': 1 });
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyAllowMultipleInstancesOfSameDraggableOptionCheckboxCheckedCSSAndA11y();
+
+        it('The user should be able to use the same draggable option for multiple dropzone', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Seeds': 2 });
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(1, ['Seeds']);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(2, ['Seeds']);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+        });
+
+        it('When the user removes the draggable option and moves it into the options container, only one option should be displayed in the options container', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Seeds');
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Seeds');
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+        });
+
+        it('When the user disables the \'Allow multiple instances of same draggable option\' functionality, the duplicate option set as correct answer should get removed from a dropzone and the draggable option should also not exist in the options container of the \'Specify correct answer\' section', () => {
+            cy.log('Pre step: Setting identical options as correct responses')
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Seeds': 1 });
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Seeds': 2 });
+            fillInTheGapsDragAndDropPage.steps.uncheckAllowMultipleInstancesOfSameDraggableOptionCheckbox();
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(1, ['Seeds']);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneTextSpecifyCorrectAnswerSection(2, '');
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Petals', 'Leaves', 'Roots', 'Stem']);
+        });
+    });
+
+    describe('Allow multiple instances of same draggable option : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            fillInTheGapsDragAndDropPage.steps.addMultipleOptionFields(4);
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsInputField(options);
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Allow multiple instances of same draggable option\' functionality is disabled, then on dropping the option in a dropzone, the draggable options should get removed from the options container', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Flower': 0 });
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Petals', 'Leaves', 'Roots', 'Stem', 'Seeds']);
+        });
+
+        it('When the user enables the \'Allow multiple instances of same draggable option\' functionality, then on setting correct answer in a dropzone, the draggable options should persist in the options container', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.checkAllowMultipleInstancesOfSameDraggableOptionCheckbox();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Seeds': 1 });
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+
+        it('The user should be able to use the same draggable option for multiple dropzones', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Seeds': 2 });
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(1, ['Seeds']);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(2, ['Seeds']);
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+
+        it('When the user removes the draggable option and moves it into the options container, only one option should be displayed in the options container', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInPreviewTab('Seeds');
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInPreviewTab('Seeds');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneTextPreviewTab(1, '');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneTextPreviewTab(2, '');
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+    });
+
+    describe('Allow multiple instances of same draggable option - Scoring', () => {
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            fillInTheGapsDragAndDropPage.steps.addMultipleOptionFields(2);
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsInputField(options.slice(0, 4));
+            fillInTheGapsDragAndDropPage.steps.checkAllowMultipleInstancesOfSameDraggableOptionCheckbox();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0 });
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 1 });
+            fillInTheGapsDragAndDropPage.steps.allotPoints(5);
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has set same answer options in the \'Set correct answer\' section, then the user should be awarded full points on attempting the question with reused options', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 1 });
+            fillInTheGapsDragAndDropPage.steps.verifyPreviewScore(5, 5);
+            fillInTheGapsDragAndDropPage.steps.verifyPreviewTabPointsBackgroundForCorrectAnswer();
+        });
+    });
+
+    describe('Allow students to check answer: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsDragAndDropPage.steps.addMultipleOptionFields(4);
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsInputField(options);
+            fillInTheGapsDragAndDropPage.steps.allotPoints(5);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyAllowStudentsToCheckAnswerLabelAndCheckboxCSS();
+
+        fillInTheGapsDragAndDropPage.tests.verifyMaximumAttemptsDropdownDisplayedWhenAllowStudentsToCheckAnswerIsChecked();
+
+        fillInTheGapsDragAndDropPage.tests.verifyMaxCheckAnswerAttemptsDropdown();
+
+        fillInTheGapsDragAndDropPage.tests.verifyAllowStudentsToCheckAnswerContentsCSSAndA11y();
+    });
+
+    describe('Allow students to check answer: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            fillInTheGapsDragAndDropPage.steps.addMultipleOptionFields(4);
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsInputField(options);
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0, 'Flower': 1, 'Leaves': 2 });
+            fillInTheGapsDragAndDropPage.steps.allotPoints(20);
+        });
+
+        it('When the user has added options and specified correct answer and points then on checking the \'Allow students to check answer\' checkbox the Check answer button should be displayed in the preview tab', () => {
+            fillInTheGapsDragAndDropPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.checkAnswerButton(), 'Check answer');
+        });
+
+        it('When the user drops an option in the dropzone and checks the answer then an icon should be displayed beside the selected option and the check answer button should be in enabled state', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
+            fillInTheGapsDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDragAndDropPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the user selects an option from the Maximum check answer attempts dropdown then the user should be able to check answer only those many times in the preview tab', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            fillInTheGapsDragAndDropPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('1');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
+            fillInTheGapsDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsDragAndDropPage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyDisabledCheckAnswerButtonWithCSSAndA11y();
+
+        it('When the user updates the value of \'Maximum check answer attempts\' dropdown, it should get reflected on the Preview tab', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            fillInTheGapsDragAndDropPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('3');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyCheckAnswerButtonEnabled();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
+            fillInTheGapsDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsDragAndDropPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the user selects \'No limit\' option from the dropdown then user should be able to check answer multiple times', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            fillInTheGapsDragAndDropPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('no limit');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyCheckAnswerButtonEnabled();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
+            fillInTheGapsDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsDragAndDropPage.steps.verifyCheckAnswerButtonEnabled();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Flower': 1 });
+            fillInTheGapsDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsDragAndDropPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+});