itemengine-cypress-automation 1.0.46 → 1.0.48

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextAdditionalSettingsStudentResponseAreaAndLayout.js

@@ -0,0 +1,262 @@
+import { specialOrMathCharacters } from "../../../fixtures/specialAndMathCharacters";
+import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const correctTabAnswerArray = ['Flower', 'Leaf'];
+const incorrectAnswerArray = ['Root', 'Branch'];
+const numbers = ['1', '2'];
+const lowercase = ['a', 'b'];
+const uppercase = ['A', 'B'];
+const answerNumerationDropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+let symbolsString = specialOrMathCharacters['specialCharacters'].characters.map((icon) => icon.symbol);
+symbolsString = symbolsString.join('');
+
+describe('Fill In the gaps over image - text - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings: Student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Student response area and layout\' label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.studentResponseAreaAndLayoutLabel(), 'Student response area and layout');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.studentResponseAreaAndLayoutLabel(), 'visible');
+        });
+
+        it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.studentResponseAreaAndLayoutLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: \'Answer numeration\' (only while grading) - Contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyAnswerNumerationContents();
+
+        it(`When the user selects ${answerNumerationDropdownOptions[0]} option from the \'Answer numeration\' dropdown, then correct response numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`)
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseNumeration(), 'notExist');
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[1]} option from the \'Answer numeration\' dropdown, then correct response numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            fillInTheGapsOverImageTextPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseNumeration(), 'notExist');
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[2]} option from the \'Answer numeration\' dropdown, then correct response numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            fillInTheGapsOverImageTextPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseNumeration(), 'notExist');
+        });
+    });
+
+    describe('Additional settings: \'Answer numeration\' (only while grading) - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.allotPoints(10);
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it(`When the user attempts the question when ${answerNumerationDropdownOptions[0]} is selected and selects \'Show correct answer\' checkbox then the correct answer section should have ${answerNumerationDropdownOptions[0]} numeration`, () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabResponseFieldAndCorrectAnswerNumeration(numbers);
+        });
+
+        it(`When the user attempts the question when ${answerNumerationDropdownOptions[1]} is selected and selects \'Show correct answer\' checkbox then the correct answer section should have ${answerNumerationDropdownOptions[1]} numeration`, () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabResponseFieldAndCorrectAnswerNumeration(uppercase);
+        });
+
+        it(`When the user attempts the question when ${answerNumerationDropdownOptions[2]} is selected and selects \'Show correct answer\' checkbox then the correct answer section should have ${answerNumerationDropdownOptions[2]} numeration`, () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabResponseFieldAndCorrectAnswerNumeration(lowercase);
+        });
+    });
+
+    describe('Additional settings: Display answer numeration to students - Contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Display answer numeration to students\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.displayAnswerNumerationToStudentsLabel(), 'Display answer numeration to students');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.displayAnswerNumerationToStudentsLabel(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifyDisplayAnswerNumerationToStudentsCheckboxNotChecked();
+        });
+
+        it('CSS of \'Display answer numeration to students\' section - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.displayAnswerNumerationToStudentsLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.displayAnswerNumerationToStudentsCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('When \'Display answer numeration to students\' checkbox is unchecked, answer numeration should not be displayed in set correct answer section response fields', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseNumeration(), 'notExist');
+        });
+
+        it('When the user checks the \'Display answer numeration to students\' checkbox, answer numeration should not be displayed in set correct answer section response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.checkDisplayAnswerNumerationToStudentsCheckbox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseNumeration(), 'notExist');
+        });
+
+        it('CSS of \'Display answer numeration to students\' section - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.displayAnswerNumerationToStudentsCheckbox().parent().find('svg g g'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Display answer numeration to students\' section - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.displayAnswerNumerationToStudentsCheckbox().parents('.additional-settings-container'));
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/548127
+    describe('Additional settings: Display answer numeration to students - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Display answer numeration to students\' checkbox is unchecked, answer numeration should not be displayed in preview tab response fields', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseNumeration(), 'notExist');
+        });
+
+        it('When the user checks the \'Display answer numeration to students\' checkbox, answer numeration should not be displayed in preview tab response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.checkDisplayAnswerNumerationToStudentsCheckbox();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyResponseFieldNumeration(['1', '2']);
+        });
+    });
+
+    describe('Additional settings: Spell check - Contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Spell check\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.spellCheckLabel(), 'Spell check');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.spellCheckLabel(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifySpellCheckCheckboxNotChecked();
+        });
+
+        it('CSS of \'Spell check\' section - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.spellCheckLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.spellCheckCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        //Spell check test cases for set correct answer section response fields
+        it('When the \'Spell check\' functionality is disabled, the response field should have \'spellcheck\' attribute set as \'false\' in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.verifySpellCheckOfResponseFieldSetCorrectAnswerSectionDisabled(0);
+        });
+
+        it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.checkSpellCheckCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifySpellCheckOfResponseFieldSetCorrectAnswerSectionEnabled(0);
+        });
+
+        it('CSS of \'Spell check\' section - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.spellCheckCheckbox().parent().find('svg g g'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Spell check\' section - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.spellCheckCheckbox().parents('.additional-settings-container'));
+        });
+    });
+
+    describe('Additional settings: Spell check - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+        it('When the \'Spell check\' functionality is disabled, the response field should have \'spellcheck\' attribute set as \'false\' in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.verifySpellCheckOfResponseFieldPreviewTabDisabled(0);
+        });
+
+        it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.checkSpellCheckCheckbox();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifySpellCheckOfResponseFieldPreviewTabEnabled(0);
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextAllOrNothingScoring.js

@@ -0,0 +1,188 @@
+import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const correctTabAnswerArray = ['Flower', 'Leaf', 'Stem'];
+const incorrectAnswerArray = ['Root', 'Branch', 'Seed'];
+
+describe('Create item page - Fill in the gaps over image - text: All or nothing scoring', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Show correct answer', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+        });
+
+        fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.allotPoints(20);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyDefaultShowCorrectAnswerCheckboxAndLabel();
+            fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, '');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(1, '');
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/545382, https://redmine.zeuslearning.com/issues/542590
+    describe('Question preview: Auto scored - All or nothing', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.allotPoints(20);
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectIconsDoesNotExist();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabelNotExists();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectBorderNotExists();
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.previewTabCorrectAnswerLabel(), 'Correct answers:');
+            fillInTheGapsOverImageTextPage.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(fillInTheGapsOverImageTextPage.previewTabCorrectAnswerLabel(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.previewTabCorrectAnswerContainer(), {
+                'border': `1px solid ${css.color.correctAnswerContainerBorder}`
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.responseNumeration(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.previewTabCorrectAnswerResponseWrapper(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border-left': `1px solid ${css.color.correctAnswerContainerResponseBlockBorder}`,
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.previewTabCorrectAnswerResponseWrapper().parent().find('fieldset'), {
+                'border': `1px solid ${css.color.correctAnswerContainerResponseBlockBorder}`
+            });
+        });
+
+        it('Accessibility of \'Correct answer container\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.previewTabCorrectAnswerContainer())
+            cy.log('Post step: unchecking the show correct answer checkbox')
+            fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectIconsDoesNotExist();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabelNotExists();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectBorderNotExists();
+            fillInTheGapsOverImageTextPage.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 fields, 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', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabScoreText(0, 20);
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[0], correctTabAnswerArray[1]], ['1', '2']);
+            fillInTheGapsOverImageTextPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            fillInTheGapsOverImageTextPage.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')
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCSSAndA11yOfIncorrectAnswerLabel('fill in the gaps over image - text');
+
+        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 fields, red cross-mark icons should be displayed beside the incorrect response fields, 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', () => {
+            fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabScoreText(0, 20);
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[1]], ['2']);
+            fillInTheGapsOverImageTextPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+            fillInTheGapsOverImageTextPage.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 fields, red cross-mark icons should be displayed beside the incorrect response fields, a label \'Incorrect answer\' and incorrect answer border should be displayed below the question preview and the correct answer container should not be displayed')
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.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 fields, a label \'Correct answer\' and correct answer border should be displayed below the question preview and the correct answer container should not be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabScoreText(20, 20);
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabPointsBackgroundForCorrectAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            fillInTheGapsOverImageTextPage.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 fields, a label \'Correct answer\' and correct answer border should be displayed below the question preview and the correct answer container should not be displayed')
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectAttemptBorder();
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCSSAndA11yOfCorrectAnswerIcon();
+
+        fillInTheGapsOverImageTextPage.tests.verifyCSSAndA11yOfFullScoreTextAndCorrectAnswerLabel('fill in the gaps over image - text');
+
+        fillInTheGapsOverImageTextPage.tests.verifyMinimumScoreAwardedIfAttemptedFunctionalityForIncorrectAnswer(1, 20);
+    });
+});