itemengine-cypress-automation 1.0.70 → 1.0.73

package/cypress/e2e/ILC/FillInTheGapsOverImageDropdown/fillInTheGapsOverImageDropdownAllOrNothingScoring.smoke.js

@@ -0,0 +1,361 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+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 optionsForResponse3 = ['Flower', 'Leaf', 'Stem', 'Roots'];  //Common answer
+const correctTabAnswerArray = ['Flower', 'Leaf', 'Stem'];
+const alternateTabAnswerArray = ['Petal', 'Leaves', 'Stem'];
+const incorrectAnswerArray = ['Branch', 'Seed', 'Roots'];
+const grepTags = Cypress.env('grepTags');
+
+describe('Create item page - Fill in the gaps over image - dropdown: All or nothing scoring', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Show correct 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.tests.verifyShowCorrectAnswerAndPointsInPreviewTabWhenNoCorrectAnswerIsSet();
+
+            it('When the user has set correct answer responses and alloted points \'Show correct answer\' checkbox should be displayed and it should be unchecked by default and points for the question should be displayed beside it', () => {
+                fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+                fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, optionsForResponse1[0]);
+                fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+                fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+                fillInTheGapsOverImageDropdownPage.steps.verifyDefaultShowCorrectAnswerCheckboxAndLabel();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+            });
+
+            it('When the user attempts question in preview tab and switches to edit tab, then on re-switching to the preview tab users response should not persist', () => {
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, optionsForResponse1[0]);
+                fillInTheGapsOverImageDropdownPage.steps.resetQuestionPreview();
+                fillInTheGapsOverImageDropdownPage.steps.verifyTextDisplayedInDropdownInPreviewTab(0, '​');
+            });
+        });
+    }
+
+    describe('Question preview: Auto scored - All or nothing', { tags: 'smoke' }, () => {
+        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.checkAllowStudentsToCheckAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.expandMinimumScoringDropdown();
+            fillInTheGapsOverImageDropdownPage.steps.selectMinimumScoringTypeListOption('Award minimum score only if attempted');
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user selects \'Show correct answer\' checkbox without attempting the question, correct/incorrect icons or label should not be displayed, correct answer container along with \'Correct answers:\' label and correct responses with numeric count should be displayed below the question preview', () => {
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectIconsDoesNotExist();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabelNotExists();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectBorderNotExists();
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerLabel(), 'Correct answers:');
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[0], correctTabAnswerArray[1]], ['1', '2']);
+        });
+
+        it('CSS of the correct answer container when \'Show correct answer\' checkbox is checked', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerLabel(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerContainer(), {
+                'border': `1px solid ${css.color.correctAnswerContainerBorder}`
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseNumeration(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerResponseWrapper(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border-left': `1px solid ${css.color.correctAnswerContainerResponseBlockBorder}`,
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerResponseWrapper().parent().find('fieldset'), {
+                'border': `1px solid ${css.color.correctAnswerContainerResponseBlockBorder}`
+            });
+        });
+
+        it('Accessibility of \'Correct answer container\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerContainer())
+            cy.log('Post step: unchecking the show correct answer checkbox')
+            fillInTheGapsOverImageDropdownPage.steps.uncheckShowCorrectAnswerCheckbox();
+        });
+
+        it('When the user selects \'Check answer\' button without attempting the question, then red cross-mark icon or green check-mark icons, correct/incorrect answer label and border and correct answer container should not be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectIconsDoesNotExist();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabelNotExists();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectBorderNotExists();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        it('When the user attempts the question incorrectly then on selecting \'Show correct answer\' checkbox, the user should be awarded 0 points and red cross-mark icons should be displayed beside all incorrect response dropdowns, a label \'Incorrect answer\' and incorrect answer border should be displayed below the question preview and the correct answer container with all correct answers along with numeration should be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[0], correctTabAnswerArray[1]], ['1', '2']);
+            fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            cy.log('When the user attempts the question incorrectly and clicks on the \'Check answer\' button, then red cross-mark icons should be displayed beside all incorrect the options, a label \'Incorrect answer\' and incorrect answer border should be displayed below the question preview and the correct answer container should not be displayed')
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCSSAndA11yOfIncorrectAnswerLabel('fill in the gaps over image - dropdown');
+
+        it('When the user attempts the question partially correct, then on selecting \'Show correct answer\' checkbox, the user should be awarded 0 points, green check-mark icons should be displayed beside the correct response dropdowns, red cross-mark icons should be displayed beside the incorrect response dropdowns, a label \'Incorrect answer\' and incorrect answer border should be displayed below the question preview and the correct answer container with correct answers for responses marked incorrect along with numeration should be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[1]], ['2']);
+            fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            cy.log('When user attempts the question partially correct and clicks on the \'Check answer\' button, green check-mark icons should be displayed beside the correct response dropdowns, red cross-mark icons should be displayed beside the incorrect response dropdowns, a label \'Incorrect answer\' and incorrect answer border should be displayed below the question preview and the correct answer container should not be displayed')
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        it('When user attempts the question correctly then on selecting \'Show correct answer\' checkbox, the user should be awarded full points and green check-mark icons should be displayed beside all the response dropdowns, a label \'Correct answer\' and correct answer border should be displayed below the question preview and the correct answer container should not be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(20, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabPointsBackgroundForCorrectAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            cy.log('When user attempts the question correctly and clicks on the \'Check answer\' button, green check-mark icons should be displayed beside the correct response dropdowns, a label \'Correct answer\' and correct answer border should be displayed below the question preview and the correct answer container should not be displayed')
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCSSAndA11yOfCorrectAnswerIcon();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCSSAndA11yOfFullScoreTextAndCorrectAnswerLabel('fill in the gaps over image - dropdown');
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyMinimumScoreAwardedIfAttemptedFunctionalityForIncorrectAnswer(1, 20);
+    });
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Question preview: Auto scored - All or nothing with alternate answer (Match from all responses - true)', () => {
+            abortEarlySetup();
+            before(() => {
+                cy.log('Navigate to fill in the gaps over image - text question type');
+                fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+                cy.barsPreLoaderWait();
+                fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+                fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+                fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+                fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+                fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+                fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse2);
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, correctTabAnswerArray[0]);
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(1, correctTabAnswerArray[1]);
+                fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+                fillInTheGapsOverImageDropdownPage.steps.addAlternateTab(1);
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, alternateTabAnswerArray[0]);
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(1, alternateTabAnswerArray[1]);
+                fillInTheGapsOverImageDropdownPage.steps.checkMatchFromAllResponsesCheckbox();
+                fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+                fillInTheGapsOverImageDropdownPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+                fillInTheGapsOverImageDropdownPage.steps.expandMinimumScoringDropdown();
+                fillInTheGapsOverImageDropdownPage.steps.selectMinimumScoringTypeListOption('Award minimum score only if attempted');
+                fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            });
+
+            it('When the user selects \'Show correct answer\' checkbox without attempting the question, correct answer container should be displayed with the correct responses from the correct tab', () => {
+                fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[0], correctTabAnswerArray[1]], ['1', '2']);
+                fillInTheGapsOverImageDropdownPage.steps.uncheckShowCorrectAnswerCheckbox();
+            });
+
+            it('When the user attempts the question with responses from the correct tab, then the user should be awarded with points specified for correct tab and on selecting \'Show correct answer\' checkbox, green check-mark icon should be displayed besides response dropdowns, label \'Correct answer\' and correct answer border should be displayed below the question preview and correct answer container should not be displayed', () => {
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, correctTabAnswerArray[0]);
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, correctTabAnswerArray[1]);
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(20, 20);
+                fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAttemptBorder();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+                fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+                cy.log('When the user clicks on \'Check answer\' button, green check-mark icon should be displayed besides response dropdowns and label \'Correct answer\' and correct answer border should be displayed below the question preview and correct answer container should not be displayed')
+                fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAttemptBorder();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            });
+
+            it('When the user attempts the question with responses from the alternate tab, then the user should be awarded with points specified for alternate tab (less than overall points) and on selecting \'Show correct answer\' checkbox, green check-mark icon should be displayed besides response dropdowns, label \'Correct answer\' and correct answer border should be displayed below the question preview and correct answer container should not be displayed', () => {
+                fillInTheGapsOverImageDropdownPage.steps.resetQuestionPreview();
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, alternateTabAnswerArray[0]);
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, alternateTabAnswerArray[1]);
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(20, 20);
+                fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAttemptBorder();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+                fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+                cy.log('When the user clicks on \'Check answer\' button, green check-mark icon should be displayed besides response dropdowns, label \'Correct answer\' and correct answer border should be displayed below the question preview and correct answer container should not be displayed')
+                fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAttemptBorder();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            });
+
+            it('When the user attempts the question with partially correct responses exclusively from the correct tab, then the user should be awarded with 0 points and on selecting \'Show correct answer\' checkbox, green check-mark icon should be displayed besides correct response dropdown, red cross-mark icon should be displayed besides the incorrect response dropdown, label \'Incorrect answer\' should be displayed below the question preview and the correct answer container should be displayed with the correct responses from the correct tab for the responses marked incorrect', () => {
+                fillInTheGapsOverImageDropdownPage.steps.resetQuestionPreview();
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, correctTabAnswerArray[0]);
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+                fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+                fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+                fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[1]], ['2']);
+                fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+                cy.log('When the user clicks on \'Check answer\' button, green check-mark icon should be displayed besides correct response dropdown, red cross-mark icon should be displayed besides the incorrect response dropdown, label \'Incorrect answer\' should be displayed below the question preview and the correct answer container should not be displayed')
+                fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+                fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(2);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+                fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            });
+
+            it('When the user attempts the question with partially correct responses exclusively from the alternate tab, then the user should be awarded with 0 points and on selecting \'Show correct answer\' checkbox, green check-mark icon should be displayed besides correct response dropdown, red cross-mark icon should be displayed besides the incorrect response dropdown, label \'Incorrect answer\' should be displayed below the question preview and the correct answer container should be displayed with the correct responses from the alternate tab for the responses marked incorrect', () => {
+                fillInTheGapsOverImageDropdownPage.steps.resetQuestionPreview();
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, alternateTabAnswerArray[0]);
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+                fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+                fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+                fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([alternateTabAnswerArray[1]], ['2']);
+                fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+                cy.log('When the user clicks on \'Check answer\' button, green check-mark icon should be displayed besides correct response dropdown, red cross-mark icon should be displayed besides the incorrect response dropdown, label \'Incorrect answer\' should be displayed below the question preview and the correct answer container should not be displayed')
+                fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+                fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+                fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            });
+
+            it('When the user attempts the question with a combination of correct responses from correct tab and alternate tab, then the user should be awarded with full points and on selecting \'Show correct answer\' checkbox, green check-mark icon should be displayed besides response dropdowns, label \'Correct answer\' should be displayed below the question preview and the correct answer container should not be displayed', () => {
+                fillInTheGapsOverImageDropdownPage.steps.resetQuestionPreview();
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, correctTabAnswerArray[0]);
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, alternateTabAnswerArray[1]);
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(20, 20);
+                fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAttemptBorder();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+                fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+                cy.log('When the user clicks on \'Check answer\' button, green check-mark icon should be displayed besides response dropdowns, label \'Correct answer\' should be displayed below the question preview and the correct answer container should not be displayed')
+                fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAttemptBorder();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            });
+
+            it('When the user attempts the question incorrectly then on selecting \'Show correct answer\' checkbox, the user should be awarded 0 points and red cross-mark icons should be displayed beside all incorrect response dropdowns, a label \'Incorrect answer\' and incorrect answer border should be displayed below the question preview and the correct answer container should be displayed with the correct responses from the correct tab', () => {
+                fillInTheGapsOverImageDropdownPage.steps.resetQuestionPreview();
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, correctTabAnswerArray[1]);
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, alternateTabAnswerArray[0]);
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+                fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+                fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+                fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+                fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[0], correctTabAnswerArray[1]], ['1', '2']);
+                fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+                cy.log('When the user attempts the question incorrectly and clicks on the \'Check answer\' button, then red cross-mark icons should be displayed beside all incorrect response dropdowns, a label \'Incorrect answer\' and incorrect answer border should be displayed below the question preview and the correct answer container should not be displayed')
+                fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+                fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+                fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+                fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            });
+
+            fillInTheGapsOverImageDropdownPage.tests.verifyMinimumScoreAwardedIfAttemptedFunctionalityForIncorrectAnswer(1, 20);
+        });
+    }
+});

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

@@ -39,6 +39,8 @@ describe('Create item page - Fill in the gaps over image - dropdown: All or noth
             });
             fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
             fillInTheGapsOverImageDropdownPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.expandMinimumScoringDropdown();
+            fillInTheGapsOverImageDropdownPage.steps.selectMinimumScoringTypeListOption('Award minimum score only if attempted');
             fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
         });
 
@@ -241,6 +243,8 @@ describe('Create item page - Fill in the gaps over image - dropdown: All or noth
             });
             fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
             fillInTheGapsOverImageDropdownPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.expandMinimumScoringDropdown();
+            fillInTheGapsOverImageDropdownPage.steps.selectMinimumScoringTypeListOption('Award minimum score only if attempted');
             fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
         });
 
@@ -443,6 +447,8 @@ describe('Create item page - Fill in the gaps over image - dropdown: All or noth
             });
             fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
             fillInTheGapsOverImageDropdownPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.expandMinimumScoringDropdown();
+            fillInTheGapsOverImageDropdownPage.steps.selectMinimumScoringTypeListOption('Award minimum score only if attempted');
             fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
         });
 

package/cypress/e2e/ILC/FillInTheGapsOverImageDropdown/fillInTheGapsOverImageDropdownEditAriaLabelCheckbox.smoke.js

@@ -0,0 +1,137 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const grepTags = Cypress.env('grepTags');
+
+describe('Create item page - Fill in the gaps over image - dropdown: Edit aria-label checkbox', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Edit aria-label in edit 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.addQuestionInstructions();
+                fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+                fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            });
+
+            it('When the user uploads an image in image section, then \'Edit aria-labels for response containers\' checkbox and label should be displayed in the image properties in disabled state', () => {
+                fillInTheGapsOverImageDropdownPage.steps.verifyDisabledStateOfEditAriaLabelsForResponseContainersCheckbox();
+            });
+
+            it('When the user adds a response container in the image, then \'Edit aria-labels for response containers\' checkbox should be enabled and by default it should be unchecked', () => {
+                fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+                fillInTheGapsOverImageDropdownPage.steps.verifyDefaultEnabledStateOfEditAriaLabelsForResponseContainersCheckbox();
+            });
+
+            it('CSS of \'Edit aria-labels for response containers\' label', { tags: 'css' }, () => {
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.editAriaLabelForResponseContainersLabel(), {
+                    'color': css.color.labelText,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+
+            it('Accessibility of \'Edit aria-labels for response containers\' checkbox', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.editAriaLabelForResponseContainersCheckbox());
+            });
+
+            it('When the user checks the \'Edit aria-labels for response containers\' checkbox, then a label \'ARIA labels\' and an input field with numeration and placeholder text \'Enter label\' should be displayed', () => {
+                fillInTheGapsOverImageDropdownPage.steps.checkEditAriaLabelCheckbox();
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.ariaLabelsLabel(), 'visible');
+                utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.ariaLabelsLabel(), 'ARIA labels');
+                fillInTheGapsOverImageDropdownPage.steps.verifyEditAriaLabelInputFieldContents(1);
+            });
+
+            it('CSS of \'ARIA labels\' label and input fields', { tags: 'css' }, () => {
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.ariaLabelsLabel(), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.ariaLabelsInputFieldNumeration(), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.semibold
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.ariaLabelsInputField(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+
+            it('Accessibility of \'ARIA labels\' input fields', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.ariaLabelsInputField());
+            });
+
+            it('When the user adds another response container to the uploaded image, a input field should be added in the \'Edit aria-labels for response container section\' with the numeration \'2\'', () => {
+                fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+                fillInTheGapsOverImageDropdownPage.steps.verifyEditAriaLabelInputFieldContents(2);
+            });
+
+            it('When the user removes a response container from the uploaded image, the edit aria-label response field corresponding to the removed response container should not be displayed and the remaining edit aria-label input field should be displayed with updated numeration', () => {
+                fillInTheGapsOverImageDropdownPage.steps.clickOnResponseContainerCloseButton(0);
+                fillInTheGapsOverImageDropdownPage.steps.verifyEditAriaLabelInputFieldContents(1);
+            });
+
+            //Failing due to https://redmine.zeuslearning.com/issues/547409
+            it('When the user has not given any input to the edit aria-label input field, the aria-label attribute for response container in image section should be \'Response #\' and aria-label attribute for response dropdown in set correct answer section should be \'Add answer for Response #\'', () => {
+                fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerAriaLabelAttribute(0, 'Response 1');
+                fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelAttributeInSetCorrectAnswerSection(0, 'Add answer for Response 1');
+            });
+
+            it('When the user enters text in the edit aria-label input field, the added text should appear as the aria-label attribute of the response container in the uploaded image and response dropdown in the set correct answer section', () => {
+                fillInTheGapsOverImageDropdownPage.steps.enterTextInEditAriaLabelInputField(0, 'Custom aria-label');
+                fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerAriaLabelAttribute(0, 'Custom aria-label');
+                fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelAttributeInSetCorrectAnswerSection(0, 'Custom aria-label');
+            });
+
+            it('When the user clears the text in the edit aria-label input field, the aria-label attribute of the response container in the uploaded image should again appear as \'Response #\' and aria-label attribute of the response dropdown in the set correct answer section should again appear as \'Add answer for Response #\'', () => {
+                fillInTheGapsOverImageDropdownPage.steps.clearEditAriaLabelInputField(0);
+                fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerAriaLabelAttribute(0, 'Response 1');
+                fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelAttributeInSetCorrectAnswerSection(0, 'Add answer for Response 1');
+            });
+        });
+    }
+
+    describe('Edit aria-label in preview tab', { tags: 'smoke' }, () => {
+        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.addQuestionInstructions();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/547409
+        it('When the user has not given any input to the edit aria-label input field, the aria-label attribute for response dropdown in preview tab should be \'Response #\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelAttributeInPreviewTab(0, 'Response 1');
+        });
+
+        it('When the user enters text in the edit aria-label input field, the added text should appear as the aria-label attribute of the response dropdown in preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.checkEditAriaLabelCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.enterTextInEditAriaLabelInputField(0, 'Custom aria-label');
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelAttributeInPreviewTab(0, 'Custom aria-label');
+        });
+
+        it('When the user clears the text in the edit aria-label input field, the aria-label attribute of the response dropdown in preview tab should again appear as \'Response #\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.clearEditAriaLabelInputField(0);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelAttributeInPreviewTab(0, 'Response 1');
+        });
+    });
+});