itemengine-cypress-automation 1.0.30 → 1.0.31

package/cypress/e2e/ILC/DragAndDropIntoCategories/dragAndDropIntoCategoriesAdditionalSettings.js

@@ -0,0 +1,963 @@
+import { dragAndDropIntoCategoriesPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const optionsArray = ['Bat', 'Eagle', 'Parrot', 'Whale'];
+const answerNumerationDropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+const numbers = ['1', '2', '3', '4'];
+const lowercase = ['a', 'b', 'c', 'd'];
+const uppercase = ['A', 'B', 'C', 'D'];
+const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
+
+describe('Create item page: Drag and drop into categories: Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyStudentResponseAreaAndLayoutLabelAndCSS();
+
+        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: Response option placement - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Response option placement\' label and dropdown should be displayed. By default \'Bottom\' option should be selected in \'Response option placement\'', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.responseOptionPlacementLabel(), 'Response option placement');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.responseOptionPlacementLabel(), 'visible');
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.responseOptionPlacementDropdown(), 'Bottom');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.responseOptionPlacementDropdown(), 'visible');
+        });
+
+        it('CSS of \'Response option placement\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.responseOptionPlacementDropdown(), {
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'background-color': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.responseOptionPlacementDropdown().find('.dropdown-label-text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+        });
+
+        it('When user clicks on \'Response option placement\' dropdown, a list of 4 options should open - Top, Bottom, Left, Right', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnResponseOptionPlacementDropdown();
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.responseOptionPlacementDropdownListOption(), 'visible');
+            dragAndDropIntoCategoriesPage.steps.verifyResponseOptionPlacementDropdownOptions();
+        });
+
+        it('CSS of \'Response option placement\' dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.responseOptionPlacementDropdownListOption().eq(1), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.responseOptionPlacementDropdownListOption().eq(0), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of \'Response option placement\' dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.dropdownList());
+        });
+    });
+
+    describe('Additional settings: Response option placement - Preview tab', () => {
+        const dropdownOptions = ['Top', 'Bottom', 'Left', 'Right'];
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            cy.barsPreLoaderWait();
+        });
+
+        dropdownOptions.forEach((dropdownOption) => {
+            it(`When the user selects ${dropdownOption} from the \'Response option placement\' dropdown, then the response options container should be displayed at the \'${dropdownOption}\' in the question preview`, () => {
+                dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+                dragAndDropIntoCategoriesPage.steps.clickOnResponseOptionPlacementDropdown();
+                dragAndDropIntoCategoriesPage.steps.selectResponseOptionPlacementDropdownOption(dropdownOption);
+                dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+                dragAndDropIntoCategoriesPage.steps.verifyResponseOptionPlacementPreviewTab(dropdownOption);
+            });
+        })
+    });
+
+    describe('Additional settings: \'Answer numeration\' (only while grading) - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyAnswerNumerationContents();
+    });
+
+    describe('Additional settings: \'Answer numeration\' (only while grading) - Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[0]} option from the \'Answer numeration\' dropdown, then category cell numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`)
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.categoryCellNumeration(), 'notExist');
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[1]} option from the \'Answer numeration\' dropdown, then category cell numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            dragAndDropIntoCategoriesPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.categoryCellNumeration(), 'notExist');
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[2]} option from the \'Answer numeration\' dropdown, then category cell numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            dragAndDropIntoCategoriesPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.categoryCellNumeration(), 'notExist');
+        });
+    });
+
+    describe('Additional settings: \'Answer numeration\' (only while grading) - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[0]} option from the \'Answer numeration\' dropdown and has not selected show correct answer checkbox or check answer button then category cell numeration should not be displayed in the preview tab`, () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`)
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.categoryCellNumeration(), 'notExist');
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyCategoryCellsAndCorrectAnswerContainerNumerationWhenShowCorrectAnswerCheckboxIsChecked(numbers);
+
+        dragAndDropIntoCategoriesPage.tests.verifyCategoryCellsNumerationNotDisplayedWhenCheckAnswerIsSelected(numbers)
+
+        it(`When the user selects ${answerNumerationDropdownOptions[1]} option from the \'Answer numeration\' dropdown and has not selected show correct answer checkbox or check answer button then category cell numeration should not be displayed in the preview tab`, () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.categoryCellNumeration(), 'notExist');
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyCategoryCellsAndCorrectAnswerContainerNumerationWhenShowCorrectAnswerCheckboxIsChecked(uppercase);
+
+        dragAndDropIntoCategoriesPage.tests.verifyCategoryCellsNumerationNotDisplayedWhenCheckAnswerIsSelected(uppercase)
+
+        it(`When the user selects ${answerNumerationDropdownOptions[2]} option from the \'Answer numeration\' dropdown and has not selected show correct answer checkbox or check answer button then category cell numeration should not be displayed in the preview tab`, () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.categoryCellNumeration(), 'notExist');
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyCategoryCellsAndCorrectAnswerContainerNumerationWhenShowCorrectAnswerCheckboxIsChecked(lowercase);
+
+        dragAndDropIntoCategoriesPage.tests.verifyCategoryCellsNumerationNotDisplayedWhenCheckAnswerIsSelected(lowercase)
+    });
+
+    describe('Additional settings: \'Row title width (px)\' - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowInputField(0, 'Can fly');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Row title width (px)\' label and input field should be displayed. By default, the \'Row title width\' input field should be empty', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.rowTitleWidthLabel(), 'Row title width (px)');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowTitleWidthLabel(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowTitleWidthInputField(), 'visible');
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue('');
+        });
+
+        it('CSS of \'Row title width (px)\' contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowTitleWidthLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowTitleWidthInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
+
+        it('The user should only be able to enter only numeric value in the \'Row title width\' input field', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowTitleWidthInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowTitleWidthInputField('a!1b#c4d0');
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue(140);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthSetCorrectAnswerSection(140);
+        });
+    });
+
+    //https://redmine.zeuslearning.com/issues/547937
+    describe('Additional settings: \'Row title width (px)\' - Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+        });
+
+        it('When the user has not set any value in the \'Row title width\' input field, the width of the row title should be 64px by default', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthSetCorrectAnswerSection(64);
+        });
+
+        it('When the user enters a numeric value in the \'Row title width\' input field, the row title width should get updated accordingly', () => {
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowTitleWidthInputField(100);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue(100);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthSetCorrectAnswerSection(100);
+        });
+
+        it('When the users adds a value greater than 400, the entered value should automatically update to 400 and the row title width should change to 400px', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowTitleWidthInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowTitleWidthInputField(500);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue(400);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthSetCorrectAnswerSection(400);
+        });
+
+        it('When user clears the \'Row title width\' input field, the row title width should change back to the default value', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowTitleWidthInputField();
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthSetCorrectAnswerSection(64);
+        });
+
+        it('When the users adds a value less than 64, the entered value should automatically update to 64 and the row title width should change to 64px', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowTitleWidthInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowTitleWidthInputField(50);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue(64);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthSetCorrectAnswerSection(64);
+        });
+    });
+
+    describe('Additional settings: \'Row title width (px)\' - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+        });
+
+        it('When the user has not set any value in the \'Row title width\' input field, the width of the row title should be 64px by default in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthPreviewTab(64);
+        });
+
+        it('When the user enters a numeric value in the \'Row title width\' input field, the row title width should get updated accordingly in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowTitleWidthInputField(100);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue(100);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthPreviewTab(100);
+        });
+
+        it('When user clears the \'Row title width\' input field, the row title width should change back to the default value in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowTitleWidthInputField();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthPreviewTab(64);
+        });
+
+        it('When the users adds a value greater than 400, the entered value should automatically update to 400 and the row title width should change to 400px in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowTitleWidthInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowTitleWidthInputField(500);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue(400);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthPreviewTab(400);
+        });
+
+        it('When the users adds a value less than 64, the entered value should automatically update to 64 and the row title width should change to 64px in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowTitleWidthInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowTitleWidthInputField(50);
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthInputFieldValue(64);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowTitleWidthPreviewTab(64);
+        });
+    });
+
+    describe('Additional settings: \'Row minimum height (px)\' - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Row minimum height (px)\' label and input field should be displayed. By default, the \'Row minimum height\' input field should be empty', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.rowMinHeightLabel(), 'Row minimum height (px)');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowMinHeightLabel(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowMinHeightInputField(), 'visible');
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue('');
+        });
+
+        it('CSS of \'Row minimum height (px)\' contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowMinHeightLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowMinHeightInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
+
+        it('The user should only be able to enter only numeric value in the \'Row minimum height\' input field', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowMinHeightInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowMinHeightInputField('a!1b#c4d0');
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue(140);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightSetCorrectAnswerSection(140);
+        });
+    });
+
+    describe('Additional settings: \'Row minimum height (px)\' - Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Row minimum height (px)\' label and input field should be displayed. By default, the \'Row minimum height\' input field should be empty', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.rowMinHeightLabel(), 'Row minimum height (px)');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowMinHeightLabel(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowMinHeightInputField(), 'visible');
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue('');
+        });
+
+        it('When the user has not set any value in the \'Row minimum height\' input field, the minimum row height should be 100px by default', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightSetCorrectAnswerSection(100);
+        });
+
+        it('When the user enters a numeric value in the \'Row minimum height\' input field, the minimum row height should get updated accordingly', () => {
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowMinHeightInputField(200);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue(200);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightSetCorrectAnswerSection(200);
+        });
+
+        it('When user clears the \'Row minimum height\' input field, the minimum row height should change back to the default value', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowMinHeightInputField();
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightSetCorrectAnswerSection(100);
+        });
+
+        it('When the users adds a value greater than 400, the entered value should automatically update to 400 and the minimum row height should change to 400px', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowMinHeightInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowMinHeightInputField(500);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue(400);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightSetCorrectAnswerSection(400);
+        });
+
+        it('When the users adds a value less than 50, the entered value should automatically update to 50 and the minimum row height should change to 50px', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowMinHeightInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowMinHeightInputField(40);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue(50);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightSetCorrectAnswerSection(50);
+        });
+    });
+
+    describe('Additional settings: \'Row minimum height (px)\' - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        it('When the user has not set any value in the \'Row minimum height\' input field, the minimum row height should be 100px by default in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightPreviewTab(100);
+        });
+
+        it('When the user enters a numeric value in the \'Row minimum height\' input field, the minimum row height should get updated accordingly in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowMinHeightInputField(200);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightPreviewTab(200);
+        });
+
+        it('When user clears the \'Row minimum height\' input field, the minimum row height should change back to the default value in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowMinHeightInputField();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightPreviewTab(100);
+        });
+
+        it('When the users adds a value greater than 400, the entered value should automatically update to 400 and the minimum row height should change to 400px in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowMinHeightInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowMinHeightInputField(500);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue(400);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightPreviewTab(400);
+        });
+
+        it('When the users adds a value less than 50, the entered value should automatically update to 50 and the minimum row height should change to 50px in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowMinHeightInputField();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowMinHeightInputField(40);
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightInputFieldValue(50);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyRowMinHeightPreviewTab(50);
+        });
+    });
+
+    describe('Additional settings: \'Row heading\' - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Row heading\' label and input field should be displayed. By default, the \'Row heading\' input field should be empty', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.rowHeadingLabel(), 'Row heading');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingLabel(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingInputField(), 'visible');
+            dragAndDropIntoCategoriesPage.steps.verifyRowHeadingInputFieldValue('');
+        });
+
+        it('CSS of \'Row heading\' contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowHeadingLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowHeadingInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: \'Row heading\' - Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+        });
+
+        it('When the user has not entered any value in the \'Row heading\' input field, Row heading should not be displayed', () => {
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingSetCorrectAnswerSection(), 'notExist');
+        });
+
+        it('When the user enters text in the \'Row heading\' input field, a Row heading should be displayed', () => {
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowHeadingInputField('Row heading');
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.rowHeadingSetCorrectAnswerSection(), 'Row heading');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingSetCorrectAnswerSection(), 'visible');
+        });
+
+        it('When user clears the \'Row heading\' input field, the Row heading should disappear', () => {
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowHeadingInputField();
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingSetCorrectAnswerSection(), 'notExist');
+        });
+    });
+
+    describe('Additional settings: \'Row heading\' - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+        });
+
+        it('When the user has not entered any value in the \'Row heading\' input field, Row heading should not be displayed in the preview tab', () => {
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingPreviewTab(), 'notExist');
+        });
+
+        it('When the user enters text in the \'Row heading\' input field, a Row heading should be displayed in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowHeadingInputField('Row heading');
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.rowHeadingPreviewTab(), 'Row heading');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingPreviewTab(), 'visible');
+        });
+
+        it('When user clears the \'Row heading\' input field, the Row heading should disappear from the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInRowHeadingInputField();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.rowHeadingPreviewTab(), 'notExist');
+        });
+    });
+
+    describe('Additional settings: \'Maximum responses per cell\' - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Maximum responses per cell\' label and input field should be displayed. By default, the \'Maximum responses per cell\' input field should be empty', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.maxResponsePerCellLabel(), 'Maximum responses per cell');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.maxResponsePerCellLabel(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.maxResponsePerCellInputField(), 'visible');
+            dragAndDropIntoCategoriesPage.steps.verifyMaxResponsePerCellInputFieldValue('');
+        });
+
+        it('CSS of \'Maximum responses per cell\' contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.maxResponsePerCellLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.maxResponsePerCellInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    });
+
+    describe('Additional settings: \'Maximum responses per cell\' - Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+        });
+
+        it('When the user has not entered any value in the \'Maximum response per cell\' input field, the user should be able to set any number of options in a category cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(0, ['Bat', 'Eagle', 'Whale', 'Platypus']);
+        });
+
+        it('When the user sets a value in the \'Maximum response per cell\' input field, the user should be able to set only the specified number of options in a category cell, the additional options from the previously filled category cells should be automatically removed', () => {
+            dragAndDropIntoCategoriesPage.steps.setMaxResponsePerCell('2');
+            dragAndDropIntoCategoriesPage.steps.verifyMaxResponsePerCellInputFieldValue('2');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Falcon', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Peacock', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Ostrich', 1);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(1, ['Falcon', 'Peacock']);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(0, ['Bat', 'Eagle']);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableResponsesSetCorrectAnswer('drag and drop into categories', ['Platypus', 'Ostrich', 'Whale', 'Parrot', 'Flying squirrel']);
+        });
+
+        it('When user clears the \'Maximum response per cell\' input field, the user should be able to set any number of options in a category cell ', () => {
+            dragAndDropIntoCategoriesPage.steps.clearMaxResponsePerCellInputField();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Parrot', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(2, ['Parrot', 'Platypus', 'Whale']);
+        });
+
+        it('The user should only be able to enter only numeric values in the \'Maximum response per cell\' input field', () => {
+            dragAndDropIntoCategoriesPage.steps.setMaxResponsePerCell('a!1b#c4d');
+            dragAndDropIntoCategoriesPage.steps.verifyMaxResponsePerCellInputFieldValue('14');
+        });
+    });
+
+    describe('Additional settings: \'Maximum responses per cell\' - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints('20');
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not entered any value in the \'Maximum response per cell\' input field, the user should be able to attempt with any number of options in a category cell in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Eagle', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(0, ['Bat', 'Eagle', 'Whale', 'Platypus']);
+        });
+
+        it('When the user sets a value in the \'Maximum response per cell\' input field, the user should be able to attempt with only the specified number of options in a category cell in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.setMaxResponsePerCell('2');
+            dragAndDropIntoCategoriesPage.steps.verifyMaxResponsePerCellInputFieldValue('2');
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Falcon', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Peacock', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Ostrich', 1);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(1, ['Falcon', 'Peacock']);
+        });
+
+        it('When user clears the \'Maximum response per cell\' input field, the user should be able to attempt with any number of options in a category cell in the preview tab ', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearMaxResponsePerCellInputField();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Falcon', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Peacock', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Ostrich', 1);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(1, ['Falcon', 'Peacock', 'Ostrich']);
+        });
+    });
+
+    describe('Additional settings: Font size - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.addOption();
+            dragAndDropIntoCategoriesPage.steps.addOption();
+            dragAndDropIntoCategoriesPage.steps.addInputToOptionsForDragAndDropFields(optionsArray);
+            dragAndDropIntoCategoriesPage.steps.allotPoints(20);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyFontSizeSectionContents();
+    });
+
+    //Note: Will need to work on the font size describes after https://redmine.zeuslearning.com/issues/543473 gets resolved
+    describe('Additional settings: Font size - Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints(20);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.enterTextInRowHeadingInputField('Row heading');
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the set correct answer section (options, labels) should be changed to ${option}`, () => {
+                dragAndDropIntoCategoriesPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex)
+                dragAndDropIntoCategoriesPage.fontSizeDropdown()
+                    .verifyInnerText(`${option}`);
+                dragAndDropIntoCategoriesPage.setCorrectAnswerDraggableOptionsWrapper('drag and drop into categories')
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryGrid()
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryTitle(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.setCorrectAnswerSectionRowTitle(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowHeadingSetCorrectAnswerSection(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+            });
+        });
+    });
+
+    describe('Additional settings: Font size - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints(20);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview (options, question instructions question stems) should be changed to ${option} in the preview tab Answer table`, () => {
+                dragAndDropIntoCategoriesPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex);
+                utilities.verifyInnerText(dragAndDropIntoCategoriesPage.fontSizeDropdown(), `${option}`);
+                dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.questionInstructionsText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                dragAndDropIntoCategoriesPage.previewTabDraggableOptionsWrapper('drag and drop into categories')
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
+                dragAndDropIntoCategoriesPage.previewTabCategoryGrid()
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.previewTabCategoryTitle(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.previewTabRowTitle(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.rowHeadingPreviewTab(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                cy.log('Font size of answer numeration and correct answer container when show correct answer is checked')
+                dragAndDropIntoCategoriesPage.steps.checkShowCorrectAnswerCheckbox();
+                dragAndDropIntoCategoriesPage.previewTabCategoryGrid()
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.categoryCellNumeration(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                utilities.verifyCSS(dragAndDropIntoCategoriesPage.correctAnswerLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                dragAndDropIntoCategoriesPage.correctAnswerContainer()
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.categoryCellNumeration(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                dragAndDropIntoCategoriesPage.correctAnswerContainer()
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.correctAnswerOption(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                cy.log('Uncheck show correct answer checkbox')
+                dragAndDropIntoCategoriesPage.steps.uncheckShowCorrectAnswerCheckbox()
+                cy.log('Font size of answer numeration when check answer is selected')
+                dragAndDropIntoCategoriesPage.steps.checkAnswer()
+                dragAndDropIntoCategoriesPage.previewTabCategoryGrid()
+                    .within(() => {
+                        utilities.verifyCSS(dragAndDropIntoCategoriesPage.categoryCellNumeration(), {
+                            'font-size': fontSizes[fontsIndex]
+                        });
+                    });
+                dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: Check answer', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints(20);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
+    });
+
+    describe('Additional settings: Check answer - Functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setQuestion();
+            dragAndDropIntoCategoriesPage.steps.allotPoints(20);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+            dragAndDropIntoCategoriesPage.steps.setMaximumCheckAnswerAttempts(2);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyCheckAnswerButtonFunctionalityWhenQuestionIsUnattempted();
+
+        it('When the user attempts the question partially correct, then on clicking on the \'Check answer\' button, green check-mark icon should be displayed besides the correct response, red cross-mark should be displayed besides incorrect response and \'Incorrect answer\' label should be displayed below the question preview', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 3);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 2);
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionCrossmarkIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionCrossmarkIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectAttemptBorder();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotVisible();
+            cy.log('Dropping the options back to the options container')
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfPreviewTab('Whale');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfPreviewTab('Platypus');
+        });
+
+        it('When the user attempts the question correctly, then on clicking on the \'Check answer\' button, green check-mark icon should be displayed besides the correct response and \'Correct answer\' label should be displayed below the question preview', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAttemptBorder();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotVisible();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyDisabledCheckAnswerButtonWithCSSAnda11y();
+
+        it('When the user updates the value of Maximum check answer attempts input field, it should get reflected on the Preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            dragAndDropIntoCategoriesPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(1);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyCheckAnswerButtonEnabled();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 3);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 2);
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        it('When the \'Maximum check answer attempts\' input field has value \'0\' and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            dragAndDropIntoCategoriesPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(0);
+            cy.log('Switching to Preview tab')
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 3);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 2);
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCheckAnswerButtonEnabled();
+            cy.log('Dropping the options back to the options container')
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfPreviewTab('Whale');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfPreviewTab('Platypus');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the \'Maximum check answer attempts\' input field is empty and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearMaximumCheckAnswerAttemptsInputField()
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Eagle', 1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 3);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 2);
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCheckAnswerButtonEnabled();
+            cy.log('Dropping the options back to the options container')
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfPreviewTab('Whale');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfPreviewTab('Platypus');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 2);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 3);
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+
+    describe('Additional settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.expandAdditonalSettings();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyDetailsSection();
+    });
+});