itemengine-cypress-automation 1.0.50 → 1.0.62

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

@@ -0,0 +1,624 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+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'];
+
+describe('Create item page - Fill in the gaps over image - dropdown: All or nothing scoring', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question preview: Auto scored - All or nothing with alternate answer (Match from all responses - false): When \'Correct answer\' points are more than \'Alternate answer\' points', () => {
+        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.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse2);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(2, optionsForResponse3);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            correctTabAnswerArray.forEach((dropdownOption, dropdownIndex) => {
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(dropdownIndex, dropdownOption);
+            });
+            fillInTheGapsOverImageDropdownPage.steps.clickOnAddAlternateAnswerButton();
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(10);
+            alternateTabAnswerArray.forEach((dropdownOption, dropdownIndex) => {
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(dropdownIndex, dropdownOption);
+            });
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            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], correctTabAnswerArray[2]], ['1', '2', '3']);
+            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.selectResponseFromDropdownInPreviewTab(2, correctTabAnswerArray[2]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(20, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(2);
+            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.verifyCorrectOptionCheckmarkIcon(2);
+            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.selectResponseFromDropdownInPreviewTab(2, alternateTabAnswerArray[2]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(10, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(2);
+            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.verifyCorrectOptionCheckmarkIcon(2);
+            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.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[1], correctTabAnswerArray[2]], ['2', '3']);
+            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.verifyCheckmarkOrCrossmarkNotVisible(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 correct 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.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[1], correctTabAnswerArray[2]], ['2', '3']);
+            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.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        it('When the user attempts the question with equal number of correct responses from correct tab and 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 response dropdown with correct tab answer, red cross-mark icon should be displayed beside response dropdown with alternate tab answer, 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, alternateTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[1], correctTabAnswerArray[2]], ['2', '3']);
+            fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            cy.log('When the user clicks on \'Check answer\' button, green check-mark icon should be displayed besides response dropdown with correct tab answer, red cross-mark icon should be displayed beside response dropdown with alternate tab answer, 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.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        it('Race condition : When the user attempts the question with the common response between correct tab and alternate tab, then the user should be awarded with 0 points and on selecting \'Show correct answer\' checkbox, green check-mark icon should be besides the common response, 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(2, correctTabAnswerArray[2]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(2);
+            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 clicks on \'Check answer\' button, green check-mark icon should be besides the common response, label \'Incorrect answer\' should be displayed below the question preview and the correct answer container should not be displayed');
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            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, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(2, incorrectAnswerArray[2]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[0], correctTabAnswerArray[1], correctTabAnswerArray[2]], ['1', '2', '3']);
+            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.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+    });
+
+    describe('Question preview: Auto scored - All or nothing with alternate answer (Match from all responses - false): When \'Alternate answer\' points are more than \'Correct answer\' points', () => {
+        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.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse2);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(2, optionsForResponse3);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(10);
+            correctTabAnswerArray.forEach((dropdownOption, dropdownIndex) => {
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(dropdownIndex, dropdownOption);
+            });
+            fillInTheGapsOverImageDropdownPage.steps.clickOnAddAlternateAnswerButton();
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            alternateTabAnswerArray.forEach((dropdownOption, dropdownIndex) => {
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(dropdownIndex, dropdownOption);
+            });
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            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 alternate tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([alternateTabAnswerArray[0], alternateTabAnswerArray[1], alternateTabAnswerArray[2]], ['1', '2', '3']);
+            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 (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.selectResponseFromDropdownInPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(2, correctTabAnswerArray[2]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(10, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(2);
+            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.verifyCorrectOptionCheckmarkIcon(2);
+            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 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.selectResponseFromDropdownInPreviewTab(2, alternateTabAnswerArray[2]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(20, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(2);
+            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.verifyCorrectOptionCheckmarkIcon(2);
+            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\' 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 alternate 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.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([alternateTabAnswerArray[1], alternateTabAnswerArray[2]], ['2', '3']);
+            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.verifyCheckmarkOrCrossmarkNotVisible(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\' 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 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.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([alternateTabAnswerArray[1], alternateTabAnswerArray[2]], ['2', '3']);
+            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.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        it('When the user attempts the question with equal number of correct responses from correct tab and 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 response dropdown with alternate tab answer, red cross-mark icon should be displayed beside response dropdown with correct tab answer, 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, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, alternateTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([alternateTabAnswerArray[0], alternateTabAnswerArray[2]], ['1', '3']);
+            fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            cy.log('When the user clicks on \'Check answer\' button, green check-mark icon should be displayed besides response dropdown with correct tab answer, red cross-mark icon should be displayed beside response dropdown with alternate tab answer, 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.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        it('Race condition : When the user attempts the question with the common response between correct tab and alternate tab, then the user should be awarded with 0 points and on selecting \'Show correct answer\' checkbox, green check-mark icon should be besides the common response, 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(2, alternateTabAnswerArray[2]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([alternateTabAnswerArray[0], alternateTabAnswerArray[1]], ['1', '2']);
+            fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            cy.log('When the user clicks on \'Check answer\' button, green check-mark icon should be besides the common response, label \'Incorrect answer\' should be displayed below the question preview and the correct answer container should not be displayed');
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            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 alternate tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(2, incorrectAnswerArray[2]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([alternateTabAnswerArray[0], alternateTabAnswerArray[1], alternateTabAnswerArray[2]], ['1', '2', '3']);
+            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.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+    });
+
+    describe('Question preview: Auto scored - All or nothing with alternate answer (Match from all responses - false): When \'Correct answer\' points are equal to \'Alternate answer\' points', () => {
+        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.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse2);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(2, optionsForResponse3);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            correctTabAnswerArray.forEach((dropdownOption, dropdownIndex) => {
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(dropdownIndex, dropdownOption);
+            });
+            fillInTheGapsOverImageDropdownPage.steps.clickOnAddAlternateAnswerButton();
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            alternateTabAnswerArray.forEach((dropdownOption, dropdownIndex) => {
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(dropdownIndex, dropdownOption);
+            });
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            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], correctTabAnswerArray[2]], ['1', '2', '3']);
+            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.selectResponseFromDropdownInPreviewTab(2, correctTabAnswerArray[2]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(20, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(2);
+            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.verifyCorrectOptionCheckmarkIcon(2);
+            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 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.selectResponseFromDropdownInPreviewTab(2, alternateTabAnswerArray[2]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(20, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(2);
+            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.verifyCorrectOptionCheckmarkIcon(2);
+            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.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[1], correctTabAnswerArray[2]], ['2', '3']);
+            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.verifyCheckmarkOrCrossmarkNotVisible(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.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([alternateTabAnswerArray[1], alternateTabAnswerArray[2]], ['2', '3']);
+            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.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        it('When the user attempts the question with equal number of correct responses from correct tab and 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 response dropdown with correct tab answer, red cross-mark icon should be displayed beside response dropdown with alternate tab answer, 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, alternateTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[1], correctTabAnswerArray[2]], ['2', '3']);
+            fillInTheGapsOverImageDropdownPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            cy.log('When the user clicks on \'Check answer\' button, green check-mark icon should be displayed besides response dropdown with correct tab answer, red cross-mark icon should be displayed beside response dropdown with alternate tab answer, 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.verifyCheckmarkOrCrossmarkNotVisible(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        it('Race condition : When the user attempts the question with the common response between correct tab and alternate tab, then the user should be awarded with 0 points and on selecting \'Show correct answer\' checkbox, green check-mark icon should be besides the common response, 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(2, correctTabAnswerArray[2]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(2);
+            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 clicks on \'Check answer\' button, green check-mark icon should be besides the common response, label \'Incorrect answer\' should be displayed below the question preview and the correct answer container should not be displayed');
+            fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCheckmarkOrCrossmarkNotVisible(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            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, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(2, incorrectAnswerArray[2]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(0, 20);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[0], correctTabAnswerArray[1], correctTabAnswerArray[2]], ['1', '2', '3']);
+            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.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageDropdownPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyMinimumScoreAwardedIfAttemptedFunctionalityForIncorrectAnswer(1, 20);
+    });
+});