itemengine-cypress-automation 1.0.77 → 1.0.79

package/cypress/e2e/ILC/DragAndDropIntoCategories/{dragAndDropIntoCategoriesClickAndDrop.js → clickAndDrop.js}

@@ -1,35 +1,33 @@
 import { dragAndDropIntoCategoriesPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
-const optionsArray = ['Bat', 'Eagle', 'Parrot', 'Whale'];
-const groupedOptions = [['Bat', 'Eagle', 'Whale', 'Platypus'], ['Peacock', 'Parrot', 'Ostrich', 'Flying squirrel']];
-
 const css = Cypress.env('css');
 
-describe('Create Item Page: Drag and drop into categories: Click and drop cases for \'Standard\' and \'Grouped\' response options layouts in \'Set correct answer\' section and \'Preview tab\'', () => {
+const groupedOptions = [['Bat', 'Eagle', 'Whale', 'Platypus'], ['Peacock', 'Parrot', 'Ostrich', 'Flying squirrel']];
+
+describe('Create Item Page: Drag and drop into categories: Click and drop cases for \'Standard\' and \'Grouped\' response options layouts in \'Specify correct answer\' section and \'Preview tab\'', () => {
     before(() => {
         cy.loginAs('admin');
     });
 
-    describe('Click and drop cases for \'Standard\' response options layout in \'Set correct answer\' section', () => {
+    describe('Click and drop cases for \'Standard\' response options layout in \'Specify correct answer\' section', () => {
         abortEarlySetup();
         before(() => {
             cy.log('Navigate to Drag and drop into categories question type, add input to option input fields');
             dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
             cy.barsPreLoaderWait();
-            dragAndDropIntoCategoriesPage.addOptionButton()
-                .click();
-            dragAndDropIntoCategoriesPage.addOptionButton()
-                .click();
-            dragAndDropIntoCategoriesPage.steps.addInputToOptionsForDragAndDropFields(optionsArray);
+            dragAndDropIntoCategoriesPage.steps.addMultipleOptionFields(2);
+            dragAndDropIntoCategoriesPage.steps.addInputToOptionsInputField(['Bat', 'Eagle', 'Parrot', 'Whale']);
+            dragAndDropIntoCategoriesPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            dragAndDropIntoCategoriesPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
         });
 
-        it('When the user has not selected any option, the options and category cells should be in inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('drag and drop into categories');
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        it('When the user has not selected any option, the options and dropzone cells should be in inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInSpecifyCorrectAnswerSection();
         });
 
-        it('CSS of inactive state of options and category cells', { tags: 'css' }, () => {
+        it('CSS of inactive state of options and dropzone cells', { tags: 'css' }, () => {
             utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
                 'border': `1px solid ${css.color.figDefaultComponentBorder}`,
                 'background-color': css.color.defaultBackground,
@@ -39,66 +37,66 @@ describe('Create Item Page: Drag and drop into categories: Click and drop cases
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular,
             });
-            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon().find('g path').eq(1), {
                 'fill': css.color.secondaryBtn
             });
-            utilities.verifyCSS(dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryGrid(), {
-                'border': `1px dashed ${css.color.figDefaultComponentBorder}`
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection().eq(0), {
+                'border-left': `1px dashed ${css.color.activeComponentBorder}`
             });
         });
 
-        it('Accessibility of inactive state of options and category cells', { tags: 'a11y' }, () => {
+        it('Accessibility of inactive state of options and dropzone cells', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user selects an option, it should get in selected state and all the category cells should get in active state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('drag and drop into categories', 'Bat');
+        it('When the user selects an option, it should get in selected state and all the dropzone cells should get in active state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInSpecifyCorrectAnswerSection('Bat');
             cy.log('checking active state of selected option')
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionInSetCorrectAnswerSection(0, 'drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionInSpecifyCorrectAnswerSection(0);
             cy.log('checking default state of unselected option(s)')
-            dragAndDropIntoCategoriesPage.steps.verifyDefaultStateOfUnselectedDraggableOptionsInSetCorrectAnswerSection([1, 2, 3], 'drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfUnselectedDraggableOptionsInSpecifyCorrectAnswerSection([1, 2, 3]);
             cy.log('checking active state of all category cells');
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllDropzonesInSpecifyCorrectAnswerSection();
         });
 
-        it('CSS of active state of options and category cells', { tags: 'css' }, () => {
+        it('CSS of active state of options and dropzone cells', { tags: 'css' }, () => {
             utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
-                'border': `1px solid ${css.color.dragOptionActiveBorder}`,
-                'background-color': css.color.figActiveComponentBg
+                'border': `1px solid ${css.color.activeComponentBorder}`,
+                'background-color': css.color.defaultBackground
             });
-            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon().find('g path').eq(1), {
                 'fill': css.color.activeButtons
             });
-            utilities.verifyCSS(dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryGrid(), {
-                'border': `1px solid ${css.color.activeComponentBorder}`
+            utilities.verifyCSS(utilities.getNthElement(dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection(), 0), {
+                'border-left': `1px solid ${css.color.activeComponentBorder}`
             });
         });
 
-        it('Accessibility of active state of options and category cells', { tags: 'a11y' }, () => {
+        it('Accessibility of active state of options and dropzone cells', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user deselects the option, it should get in deselected state and the category cells should return to the inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('drag and drop into categories', 'Bat');
+        it('When the user deselects the option, it should get in deselected state and the dropzone cells should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInSpecifyCorrectAnswerSection('Bat');
             cy.log('Checking default state of deselected option')
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
             cy.log('Checking default inactive state of category cells')
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInSpecifyCorrectAnswerSection();
         });
 
-        it('When the user drops an option in one of the category cells, the option should get removed from the response container, the category cell should get filled with that option and the other category cells should return to inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(0, ['Bat']);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableResponsesSetCorrectAnswer('drag and drop into categories', ['Eagle', 'Parrot', 'Whale']);
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        it('When the user drops an option in one of the dropzone cells, the option should get removed from the response container, the dropzone cell should get filled with that option and the other dropzone cells should return to inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Bat': 0 });
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInDropzoneCellOfSpecifyCorrectAnswerSection(0, ['Bat']);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Eagle', 'Parrot', 'Whale']);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInSpecifyCorrectAnswerSection();
         });
 
-        it('When the user has dropped an option inside a category cell, drag handle should not be displayed in the category cell', () => {
-            dragAndDropIntoCategoriesPage.steps.verifyDragHandleNotVisibleInFilledCategoryCellOfSetCorrectAnswerSection(0);
+        it('When the user has dropped an option inside a dropzone cell, drag handle should not be displayed in the dropzone cell', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyDragHandleNotVisibleInFilledDropzoneCellOfSpecifyCorrectAnswerSection(0);
         });
 
-        it('CSS of filled category cell', { tags: 'css' }, () => {
-            dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryCell()
+        it('CSS of filled dropzone cell', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection()
                 .eq(0)
                 .within(() => {
                     utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
@@ -113,88 +111,87 @@ describe('Create Item Page: Drag and drop into categories: Click and drop cases
                 });
         });
 
-        it('Accessibility of filled category cell', { tags: 'a11y' }, () => {
+        it('Accessibility of filled dropzone cell', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user drops an option on a filled category cell, the existing option should persist in the category cell', () => {
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 0);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(0, ['Bat', 'Eagle']);
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableResponsesSetCorrectAnswer('drag and drop into categories', ['Parrot', 'Whale']);
+        it('When the user drops an option on a filled dropzone cell, the existing option should persist in the dropzone cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Eagle': 0 });
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInDropzoneCellOfSpecifyCorrectAnswerSection(0, ['Bat', 'Eagle']);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInSpecifyCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Parrot', 'Whale']);
         });
 
-        it('When the user selects an option from the filled category cell, the response container as well as all category cells should get active for dropping the option', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat');
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionsContainerInSetCorrectAnswerSection('drag and drop into categories');
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInSetCorrectAnswerSection(1);
+        it('When the user selects an option from the filled dropzone cell, the response container as well as all dropzone cells should get active for dropping the option', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInDropzoneCellOfSpecifyCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionsContainerInSpecifyCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllDropzonesInSpecifyCorrectAnswerSection();
         });
 
-        it('CSS of option from the filled category cell in selected state', { tags: 'css' }, () => {
-            dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryCell()
+        it('CSS of option from the filled dropzone cell in selected state', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection()
                 .eq(0)
                 .within(() => {
                     utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
-                        'border': `1px solid ${css.color.dragOptionActiveBorder}`,
-                        'background-color': css.color.figActiveComponentBg
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
                     });
                 });
         });
 
-        it('Accessibility of option from the filled category cell in selected state', { tags: 'a11y' }, () => {
+        it('Accessibility of option from the filled dropzone cell in selected state', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user deselects an option from the filled category cell, the option should return to the inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat');
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('drag and drop into categories');
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        it('When the user deselects an option from the filled dropzone cell, the option should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInDropzoneCellOfSpecifyCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInSpecifyCorrectAnswerSection();
         });
 
         it('When the user selects a filled option and clicks in the response container, the selected option should get back in the response container and \'Error: Please set a correct answer\' error message should be displayed', () => {
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfSetCorrectAnswerSection('Bat');
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfSetCorrectAnswerSection('Eagle');
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableResponsesSetCorrectAnswer('drag and drop into categories', ['Bat', 'Eagle', 'Parrot', 'Whale']);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionFromDropzoneToOptionContainerSpecifyCorrectAnswerSection('Bat');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionFromDropzoneToOptionContainerSpecifyCorrectAnswerSection('Eagle');
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Bat', 'Eagle', 'Parrot', 'Whale']);
             utilities.verifyInnerText(dragAndDropIntoCategoriesPage.errorMessage(), 'Error: Please set a correct answer.');
             utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.errorMessage(), 'visible');
         });
 
-        dragAndDropIntoCategoriesPage.tests.verifyCSSAnda11yOfErrorMessage();
+        dragAndDropIntoCategoriesPage.tests.verifyErrorMessageCSSAndA11y();
 
-        it('When the user fills a category cell, the category cell should get filled with the option and the \'Error: Please set a correct answer\' error message should disappear', () => {
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+        it('When the user fills a dropzone cell, the dropzone cell should get filled with the option and the \'Error: Please set a correct answer\' error message should disappear', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Bat': 0 });
             dragAndDropIntoCategoriesPage.steps.verifyErrorMessageIsNotDisplayed();
         });
 
-        it('The user should be able to move an option from one category cell to another category cell', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat');
-            dragAndDropIntoCategoriesPage.steps.clickOnCategoryCellInCategoryCellOfSetCorrectAnswerSection(1);
-            dragAndDropIntoCategoriesPage.steps.verifyEmptyStateOfCategoryCellInSetCorrectAnswerSection(0);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(1, ['Bat']);
+        it('The user should be able to move an option from one dropzone cell to another dropzone cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInDropzoneCellOfSpecifyCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickOnDropzoneCellInDropzoneOfSpecifyCorrectAnswerSection(1);
+            dragAndDropIntoCategoriesPage.steps.verifyEmptyStateOfDropzoneCellInSpecifyCorrectAnswerSection(0);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInDropzoneCellOfSpecifyCorrectAnswerSection(1, ['Bat']);
         });
     });
 
     describe('Click and drop cases for \'Standard\' response options layout in \'Preview tab\'', () => {
         abortEarlySetup();
         before(() => {
-            cy.log('Navigate to Drag and drop into categories question type, add input to option input fields and switch to preview tab');
+            cy.log('Navigate to Drag and drop into categories question type, add input to option input fields');
             dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
             cy.barsPreLoaderWait();
-            dragAndDropIntoCategoriesPage.addOptionButton()
-                .click();
-            dragAndDropIntoCategoriesPage.addOptionButton()
-                .click();
-            dragAndDropIntoCategoriesPage.steps.addInputToOptionsForDragAndDropFields(optionsArray);
+            dragAndDropIntoCategoriesPage.steps.addMultipleOptionFields(2);
+            dragAndDropIntoCategoriesPage.steps.addInputToOptionsInputField(['Bat', 'Eagle', 'Parrot', 'Whale']);
+            dragAndDropIntoCategoriesPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            dragAndDropIntoCategoriesPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
             dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
         });
 
-        it('When the user has not selected any option, the options and category cells should be in inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('drag and drop into categories');
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+        it('When the user has not selected any option, the options and dropzone cells should be in inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInPreviewTab();
         });
 
-        it('CSS of inactive state of options and category cells', { tags: 'css' }, () => {
-            dragAndDropIntoCategoriesPage.previewTabDraggableOptionsWrapper('drag and drop into categories')
+        it('CSS of inactive state of options and dropzone cells', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.optionsContainerPreviewTab()
                 .within(() => {
                     utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
                         'border': `1px solid ${css.color.figDefaultComponentBorder}`,
@@ -205,70 +202,70 @@ describe('Create Item Page: Drag and drop into categories: Click and drop cases
                         'font-size': css.fontSize.default,
                         'font-weight': css.fontWeight.regular,
                     });
-                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon().find('g path').eq(1), {
                         'fill': css.color.secondaryBtn
                     });
                 });
-            utilities.verifyCSS(dragAndDropIntoCategoriesPage.previewTabCategoryGrid(), {
-                'border': `1px dashed ${css.color.figDefaultComponentBorder}`
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab().eq(0), {
+                'border-left': `1px dashed ${css.color.activeComponentBorder}`
             });
         });
 
-        it('Accessibility of inactive state of options and category cells', { tags: 'a11y' }, () => {
+        it('Accessibility of inactive state of options and dropzone cells', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user selects an option, it should get in selected state and all the category cells should get in active state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInPreviewTab('drag and drop into categories', 'Bat');
+        it('When the user selects an option, it should get in selected state and all the dropzone cells should get in active state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInPreviewTab('Bat');
             cy.log('checking active state of selected option')
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionInPreviewTab(0, 'drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionInPreviewTab(0);
             cy.log('checking default state of unselected option(s)')
-            dragAndDropIntoCategoriesPage.steps.verifyDefaultStateOfUnselectedDraggableOptionsInPreviewTab([1, 2, 3], 'drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfUnselectedDraggableOptionsInPreviewTab([1, 2, 3]);
             cy.log('checking active state of all category cells');
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllDropzonesInPreviewTab();
         });
 
-        it('CSS of active state of options and category cells', { tags: 'css' }, () => {
-            dragAndDropIntoCategoriesPage.previewTabDraggableOptionsWrapper('drag and drop into categories')
+        it('CSS of active state of options and dropzone cells', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.optionsContainerPreviewTab()
                 .within(() => {
                     utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
-                        'border': `1px solid ${css.color.dragOptionActiveBorder}`,
-                        'background-color': css.color.figActiveComponentBg
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
                     });
-                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon().find('g path').eq(1), {
                         'fill': css.color.activeButtons
                     });
                 });
-            utilities.verifyCSS(dragAndDropIntoCategoriesPage.previewTabCategoryGrid(), {
-                'border': `1px solid ${css.color.activeComponentBorder}`
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab().eq(0), {
+                'border-left': `1px solid ${css.color.activeComponentBorder}`
             });
         });
 
-        it('Accessibility of active state of options and category cells', { tags: 'a11y' }, () => {
+        it('Accessibility of active state of options and dropzone cells', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user deselects the option, it should get in deselected state and the category cells should return to the inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInPreviewTab('drag and drop into categories', 'Bat');
+        it('When the user deselects the option, it should get in deselected state and the dropzone cells should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInPreviewTab('Bat');
             cy.log('Checking default state of deselected option')
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
             cy.log('Checking default inactive state of category cells')
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInPreviewTab();
         });
 
-        it('When the user drops an option in one of the category cells, the option should get removed from the response container, the category cell should get filled with that option and the other category cells should return to inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(0, ['Bat']);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableResponsesPreviewTab('drag and drop into categories', ['Eagle', 'Parrot', 'Whale']);
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+        it('When the user drops an option in one of the dropzone cells, the option should get removed from the response container, the dropzone cell should get filled with that option and the other dropzone cells should return to inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Bat': 0 });
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Bat']);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Eagle', 'Parrot', 'Whale']);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInPreviewTab();
         });
 
-        it('When the user has dropped an option inside a category cell, drag handle should not be displayed in the category cell', () => {
-            dragAndDropIntoCategoriesPage.steps.verifyDragHandleNotVisibleInFilledCategoryCellOfPreviewTab(0);
+        it('When the user has dropped an option inside a dropzone cell, drag handle should not be displayed in the dropzone cell', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyDragHandleNotVisibleInFilledDropzoneCellOfPreviewTab(0);
         });
 
-        it('CSS of filled category cell', { tags: 'css' }, () => {
-            dragAndDropIntoCategoriesPage.previewTabCategoryCell()
+        it('CSS of filled dropzone cell', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab()
                 .eq(0)
                 .within(() => {
                     utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
@@ -283,72 +280,73 @@ describe('Create Item Page: Drag and drop into categories: Click and drop cases
                 });
         });
 
-        it('Accessibility of filled category cell', { tags: 'a11y' }, () => {
+        it('Accessibility of filled dropzone cell', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user drops an option on a filled category cell, the existing option should persist in the category cell', () => {
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Eagle', 0);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(0, ['Bat', 'Eagle']);
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableResponsesPreviewTab('drag and drop into categories', ['Parrot', 'Whale']);
+        it('When the user drops an option on a filled dropzone cell, the existing option should persist in the dropzone cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Eagle': 0 });
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Bat', 'Eagle']);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Parrot', 'Whale']);
         });
 
-        it('When the user selects an option from the filled category cell, the response container as well as all category cells should get active for dropping the option', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfPreviewTab('Bat');
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionsContainerInPreviewTab('drag and drop into categories');
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInPreviewTab(1);
+        it('When the user selects an option from the filled dropzone cell, the response container as well as all dropzone cells should get active for dropping the option', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInDropzoneCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionsContainerInPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllDropzonesInPreviewTab();
         });
 
-        it('CSS of option from the filled category cell in selected state', { tags: 'css' }, () => {
-            dragAndDropIntoCategoriesPage.previewTabCategoryCell()
+        it('CSS of option from the filled dropzone cell in selected state', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab()
                 .eq(0)
                 .within(() => {
                     utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
-                        'border': `1px solid ${css.color.dragOptionActiveBorder}`,
-                        'background-color': css.color.figActiveComponentBg
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
                     });
                 });
         });
 
-        it('Accessibility of option from the filled category cell in selected state', { tags: 'a11y' }, () => {
+        it('Accessibility of option from the filled dropzone cell in selected state', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user deselects an option from the filled category cell, the option should return to the inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfPreviewTab('Bat');
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('drag and drop into categories');
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+        it('When the user deselects an option from the filled dropzone cell, the option should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInDropzoneCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInPreviewTab();
         });
 
-        it('The user should be able to move an option from one category cell to another category cell', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfPreviewTab('Bat');
-            dragAndDropIntoCategoriesPage.steps.clickOnCategoryCellInCategoryCellOfPreviewTab(1);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(0, ['Eagle']);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(1, ['Bat']);
+        it('The user should be able to move an option from one dropzone cell to another dropzone cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInDropzoneCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickOnDropzoneCellInDropzoneOfPreviewTab(1);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Eagle']);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(1, ['Bat']);
         });
     });
 
-    describe('Click and drop cases for \'Grouped\' response options layout in \'Set correct answer\' section', () => {
+    describe('Click and drop cases for \'Grouped\' response options layout in \'Specify correct answer\' section', () => {
         abortEarlySetup();
         before(() => {
-            cy.log('Navigate to Drag and drop into categories question type, add input to option input fields');
             dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
             cy.barsPreLoaderWait();
-            dragAndDropIntoCategoriesPage.steps.selectResponseOptionsLayout('Grouped');
-            dragAndDropIntoCategoriesPage.steps.addGroupTitle(0, 'Group A');
-            dragAndDropIntoCategoriesPage.steps.addOption();
-            dragAndDropIntoCategoriesPage.steps.addOption();
-            dragAndDropIntoCategoriesPage.steps.addInputToOptionsForDragAndDropFields(groupedOptions[0]);
-            dragAndDropIntoCategoriesPage.steps.addGroupWithTitleAndOptionsInResponseOptionsSection(1, 'Group B', groupedOptions[1]);
+            dragAndDropIntoCategoriesPage.steps.expandDraggableOptionsLayoutDropdown();
+            dragAndDropIntoCategoriesPage.steps.selectOptionFromDraggableOptionsLayoutDropdown('Grouped');
+            dragAndDropIntoCategoriesPage.steps.addGroupTitle('Group A');
+            dragAndDropIntoCategoriesPage.steps.addMultipleOptionFields(2);
+            dragAndDropIntoCategoriesPage.steps.addInputToOptionsInputField(groupedOptions[0]);
+            dragAndDropIntoCategoriesPage.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection('Group A', groupedOptions[1]);
+            dragAndDropIntoCategoriesPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            dragAndDropIntoCategoriesPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
         });
 
-        it('When the user has not selected any option, the options and category cells should be in inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('drag and drop into categories');
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        it('When the user has not selected any option, the options and dropzone cells should be in inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInSpecifyCorrectAnswerSection();
         });
 
-        it('CSS of inactive state of options and category cells', { tags: 'css' }, () => {
+        it('CSS of inactive state of options and dropzone cells', { tags: 'css' }, () => {
             utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
                 'border': `1px solid ${css.color.figDefaultComponentBorder}`,
                 'background-color': css.color.defaultBackground,
@@ -356,69 +354,69 @@ describe('Create Item Page: Drag and drop into categories: Click and drop cases
             utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().find('.question-text-wrapper'), {
                 'color': css.color.text,
                 'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular,
+                'font-weight': css.fontWeight.regular
             });
-            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon().find('g path').eq(1), {
                 'fill': css.color.secondaryBtn
             });
-            utilities.verifyCSS(dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryGrid(), {
-                'border': `1px dashed ${css.color.figDefaultComponentBorder}`
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection().eq(0), {
+                'border-left': `1px dashed ${css.color.activeComponentBorder}`
             });
         });
 
-        it('Accessibility of inactive state of options and category cells', { tags: 'a11y' }, () => {
+        it('Accessibility of inactive state of options and dropzone cells', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user selects an option, it should get in selected state and all the category cells should get in active state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('drag and drop into categories', 'Bat');
+        it('When the user selects an option, it should get in selected state and all the dropzone cells should get in active state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInSpecifyCorrectAnswerSection('Bat');
             cy.log('checking active state of selected option')
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionInSetCorrectAnswerSection(0, 'drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionInSpecifyCorrectAnswerSection(0);
             cy.log('checking default state of unselected option(s)')
-            dragAndDropIntoCategoriesPage.steps.verifyDefaultStateOfUnselectedDraggableOptionsInSetCorrectAnswerSection([1, 2, 3, 4, 5, 6, 7], 'drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfUnselectedDraggableOptionsInSpecifyCorrectAnswerSection([1, 2, 3, 4, 5, 6, 7]);
             cy.log('checking active state of all category cells');
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllDropzonesInSpecifyCorrectAnswerSection();
         });
 
-        it('CSS of active state of options and category cells', { tags: 'css' }, () => {
+        it('CSS of active state of options and dropzone cells', { tags: 'css' }, () => {
             utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
-                'border': `1px solid ${css.color.dragOptionActiveBorder}`,
-                'background-color': css.color.figActiveComponentBg
+                'border': `1px solid ${css.color.activeComponentBorder}`,
+                'background-color': css.color.defaultBackground
             });
-            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon().find('g path').eq(1), {
                 'fill': css.color.activeButtons
             });
-            utilities.verifyCSS(dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryGrid(), {
-                'border': `1px solid ${css.color.activeComponentBorder}`
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection().eq(0), {
+                'border-left': `1px solid ${css.color.activeComponentBorder}`
             });
         });
 
-        it('Accessibility of active state of options and category cells', { tags: 'a11y' }, () => {
+        it('Accessibility of active state of options and dropzone cells', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user deselects the option, it should get in deselected state and the category cells should return to the inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('drag and drop into categories', 'Bat');
+        it('When the user deselects the option, it should get in deselected state and the dropzone cells should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInSpecifyCorrectAnswerSection('Bat');
             cy.log('Checking default state of deselected option')
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
             cy.log('Checking default inactive state of category cells')
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInSpecifyCorrectAnswerSection();
         });
 
-        it('When the user drops an option in one of the category cells, the option should get removed from the respective group of the response container, the category cell should get filled with that option and the other category cells should return to inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(0, ['Bat']);
-            dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Eagle', 'Whale', 'Platypus']);
-            dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(1, groupedOptions[1]);
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        it('When the user drops an option in one of the dropzone cells, the option should get removed from the respective group of the response container, the dropzone cell should get filled with that option and the other dropzone cells should return to inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Bat': 0 });
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInDropzoneCellOfSpecifyCorrectAnswerSection(0, ['Bat']);
+            dragAndDropIntoCategoriesPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, ['Eagle', 'Whale', 'Platypus']);
+            dragAndDropIntoCategoriesPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(1, groupedOptions[1]);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInSpecifyCorrectAnswerSection();
         });
 
-        it('When the user has dropped an option inside a category cell, drag handle should not be displayed in the category cell', () => {
-            dragAndDropIntoCategoriesPage.steps.verifyDragHandleNotVisibleInFilledCategoryCellOfSetCorrectAnswerSection(0);
+        it('When the user has dropped an option inside a dropzone cell, drag handle should not be displayed in the dropzone cell', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyDragHandleNotVisibleInFilledDropzoneCellOfSpecifyCorrectAnswerSection(0);
         });
 
-        it('CSS of filled category cell', { tags: 'css' }, () => {
-            dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryCell()
+        it('CSS of filled dropzone cell', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection()
                 .eq(0)
                 .within(() => {
                     utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
@@ -433,98 +431,97 @@ describe('Create Item Page: Drag and drop into categories: Click and drop cases
                 });
         });
 
-        it('Accessibility of filled category cell', { tags: 'a11y' }, () => {
+        it('Accessibility of filled dropzone cell', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user drops an option on a filled category cell, the existing option should persist in the category cell', () => {
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 0);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(0, ['Bat', 'Eagle']);
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
-            dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Whale', 'Platypus']);
+        it('When the user drops an option on a filled dropzone cell, the existing option should persist in the dropzone cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Eagle': 0 });
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInDropzoneCellOfSpecifyCorrectAnswerSection(0, ['Bat', 'Eagle']);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInSpecifyCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, ['Whale', 'Platypus']);
         });
 
-        it('When the user selects an option from the filled category cell, the response container as well as all category cells should get active for dropping the option', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat');
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionsContainerInSetCorrectAnswerSection('drag and drop into categories');
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInSetCorrectAnswerSection(1);
+        it('When the user selects an option from the filled dropzone cell, the response container as well as all dropzone cells should get active for dropping the option', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInDropzoneCellOfSpecifyCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionsContainerInSpecifyCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllDropzonesInSpecifyCorrectAnswerSection();
         });
 
-        it('CSS of option from the filled category cell in selected state', { tags: 'css' }, () => {
-            dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryCell()
+        it('CSS of option from the filled dropzone cell in selected state', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.dropzoneCellSpecifyCorrectAnswerSection()
                 .eq(0)
                 .within(() => {
                     utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
-                        'border': `1px solid ${css.color.dragOptionActiveBorder}`,
-                        'background-color': css.color.figActiveComponentBg
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
                     });
                 });
         });
 
-        it('Accessibility of option from the filled category cell in selected state', { tags: 'a11y' }, () => {
+        it('Accessibility of option from the filled dropzone cell in selected state', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user deselects an option from the filled category cell, the option should return to the inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat');
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('drag and drop into categories');
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        it('When the user deselects an option from the filled dropzone cell, the option should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInDropzoneCellOfSpecifyCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInSpecifyCorrectAnswerSection();
         });
 
         it('When the user selects a filled option and clicks in the response container, the selected option should get back in the response container and \'Error: Please set a correct answer\' error message should be displayed', () => {
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInGroupedResponseContainerOfSetCorrectAnswerSection('Bat');
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInGroupedResponseContainerOfSetCorrectAnswerSection('Eagle');
-            dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, groupedOptions[0]);
-            dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(1, groupedOptions[1]);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionFromDropzoneToOptionContainerPreviewTab('Bat');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionFromDropzoneToOptionContainerPreviewTab('Eagle');
+            dragAndDropIntoCategoriesPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, groupedOptions[0]);
+            dragAndDropIntoCategoriesPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(1, groupedOptions[1]);
             utilities.verifyInnerText(dragAndDropIntoCategoriesPage.errorMessage(), 'Error: Please set a correct answer.');
             utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.errorMessage(), 'visible');
         });
 
-        dragAndDropIntoCategoriesPage.tests.verifyCSSAnda11yOfErrorMessage();
+        dragAndDropIntoCategoriesPage.tests.verifyErrorMessageCSSAndA11y();
 
-        it('When the user fills a category cell, the category cell should get filled with the option and the \'Error: Please set a correct answer\' error message should disappear', () => {
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+        it('When the user fills a dropzone cell, the dropzone cell should get filled with the option and the \'Error: Please set a correct answer\' error message should disappear', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Bat': 0 });
             dragAndDropIntoCategoriesPage.steps.verifyErrorMessageIsNotDisplayed();
         });
 
-        it('The user should be able to move an option from one category cell to another category cell', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat');
-            dragAndDropIntoCategoriesPage.steps.clickOnCategoryCellInCategoryCellOfSetCorrectAnswerSection(1);
-            dragAndDropIntoCategoriesPage.steps.verifyEmptyStateOfCategoryCellInSetCorrectAnswerSection(0);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(1, ['Bat']);
+        it('The user should be able to move an option from one dropzone cell to another dropzone cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInDropzoneCellOfSpecifyCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickOnDropzoneCellInDropzoneOfSpecifyCorrectAnswerSection(1);
+            dragAndDropIntoCategoriesPage.steps.verifyEmptyStateOfDropzoneCellInSpecifyCorrectAnswerSection(0);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInDropzoneCellOfSpecifyCorrectAnswerSection(1, ['Bat']);
         });
 
         it('When user has dropped all the options from a group in the response areas, then empty group should be displayed in the options container', () => {
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 0);
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 0);
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 0);
-            dragAndDropIntoCategoriesPage.steps.verifyGroupTitleInSetCorrectAnswerSection(0, 'Group A')
-            dragAndDropIntoCategoriesPage.steps.verifyEmptyGroupInSetCorrectAnswerSection(0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Eagle': 0, 'Whale': 0, 'Platypus': 0 });
+            dragAndDropIntoCategoriesPage.steps.verifyGroupedOptionsTitleSpecifyCorrectAnswerSection(0, 'Group A')
+            dragAndDropIntoCategoriesPage.steps.verifyEmptyGroupInSpecifyCorrectAnswerSection(0);
         });
     });
 
     describe('Click and drop cases for \'Grouped\' response options layout in \'Preview tab\'', () => {
         abortEarlySetup();
         before(() => {
-            cy.log('Navigate to Drag and drop into categories question type, add input to option input fields and switch to preview tab');
             dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
             cy.barsPreLoaderWait();
-            dragAndDropIntoCategoriesPage.steps.selectResponseOptionsLayout('Grouped');
-            dragAndDropIntoCategoriesPage.steps.addGroupTitle(0, 'Group A');
-            dragAndDropIntoCategoriesPage.steps.addOption();
-            dragAndDropIntoCategoriesPage.steps.addOption();
-            dragAndDropIntoCategoriesPage.steps.addInputToOptionsForDragAndDropFields(groupedOptions[0]);
-            dragAndDropIntoCategoriesPage.steps.addGroupWithTitleAndOptionsInResponseOptionsSection(1, 'Group B', groupedOptions[1]);
+            dragAndDropIntoCategoriesPage.steps.expandDraggableOptionsLayoutDropdown();
+            dragAndDropIntoCategoriesPage.steps.selectOptionFromDraggableOptionsLayoutDropdown('Grouped');
+            dragAndDropIntoCategoriesPage.steps.addGroupTitle('Group A');
+            dragAndDropIntoCategoriesPage.steps.addMultipleOptionFields(2);
+            dragAndDropIntoCategoriesPage.steps.addInputToOptionsInputField(groupedOptions[0]);
+            dragAndDropIntoCategoriesPage.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection('Group A', groupedOptions[1]);
+            dragAndDropIntoCategoriesPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            dragAndDropIntoCategoriesPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
             dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
         });
 
-        it('When the user has not selected any option, the options and category cells should be in inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('drag and drop into categories');
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+        it('When the user has not selected any option, the options and dropzone cells should be in inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInPreviewTab();
         });
 
-        it('CSS of inactive state of options and category cells', { tags: 'css' }, () => {
-            dragAndDropIntoCategoriesPage.previewTabDraggableOptionsWrapper('drag and drop into categories')
+        it('CSS of inactive state of options and dropzone cells', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.optionsContainerPreviewTab()
                 .within(() => {
                     utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
                         'border': `1px solid ${css.color.figDefaultComponentBorder}`,
@@ -535,71 +532,71 @@ describe('Create Item Page: Drag and drop into categories: Click and drop cases
                         'font-size': css.fontSize.default,
                         'font-weight': css.fontWeight.regular,
                     });
-                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon().find('g path').eq(1), {
                         'fill': css.color.secondaryBtn
                     });
                 });
-            utilities.verifyCSS(dragAndDropIntoCategoriesPage.previewTabCategoryGrid(), {
-                'border': `1px dashed ${css.color.figDefaultComponentBorder}`
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab().eq(0), {
+                'border-left': `1px dashed ${css.color.activeComponentBorder}`
             });
         });
 
-        it('Accessibility of inactive state of options and category cells', { tags: 'a11y' }, () => {
+        it('Accessibility of inactive state of options and dropzone cells', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user selects an option, it should get in selected state and all the category cells should get in active state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInPreviewTab('drag and drop into categories', 'Bat');
+        it('When the user selects an option, it should get in selected state and all the dropzone cells should get in active state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInPreviewTab('Bat');
             cy.log('checking active state of selected option')
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionInPreviewTab(0, 'drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionInPreviewTab(0);
             cy.log('checking default state of unselected option(s)')
-            dragAndDropIntoCategoriesPage.steps.verifyDefaultStateOfUnselectedDraggableOptionsInPreviewTab([1, 2, 3, 4, 5, 6, 7], 'drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfUnselectedDraggableOptionsInPreviewTab([1, 2, 3, 4, 5, 6, 7]);
             cy.log('checking active state of all category cells');
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllDropzonesInPreviewTab();
         });
 
-        it('CSS of active state of options and category cells', { tags: 'css' }, () => {
-            dragAndDropIntoCategoriesPage.previewTabDraggableOptionsWrapper('drag and drop into categories')
+        it('CSS of active state of options and dropzone cells', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.optionsContainerPreviewTab()
                 .within(() => {
                     utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
-                        'border': `1px solid ${css.color.dragOptionActiveBorder}`,
-                        'background-color': css.color.figActiveComponentBg
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
                     });
-                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon().find('g path').eq(1), {
                         'fill': css.color.activeButtons
                     });
                 });
-            utilities.verifyCSS(dragAndDropIntoCategoriesPage.previewTabCategoryGrid(), {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab().eq(0), {
                 'border': `1px solid ${css.color.activeComponentBorder}`
             });
         });
 
-        it('Accessibility of active state of options and category cells', { tags: 'a11y' }, () => {
+        it('Accessibility of active state of options and dropzone cells', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user deselects the option, it should get in deselected state and the category cells should return to the inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInPreviewTab('drag and drop into categories', 'Bat');
+        it('When the user deselects the option, it should get in deselected state and the dropzone cells should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInPreviewTab('Bat');
             cy.log('Checking default state of deselected option')
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
             cy.log('Checking default inactive state of category cells')
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInPreviewTab();
         });
 
-        it('When the user drops an option in one of the category cells, the option should get removed from the respective group of the response container, the category cell should get filled with that option and the other category cells should return to inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(0, ['Bat']);
+        it('When the user drops an option in one of the dropzone cells, the option should get removed from the respective group of the response container, the dropzone cell should get filled with that option and the other dropzone cells should return to inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Bat': 0 });
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Bat']);
             dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Eagle', 'Whale', 'Platypus']);
             dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(1, groupedOptions[1]);
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInPreviewTab();
         });
 
-        it('When the user has dropped an option inside a category cell, drag handle should not be displayed in the category cell', () => {
-            dragAndDropIntoCategoriesPage.steps.verifyDragHandleNotVisibleInFilledCategoryCellOfPreviewTab(0);
+        it('When the user has dropped an option inside a dropzone cell, drag handle should not be displayed in the dropzone cell', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyDragHandleNotVisibleInFilledDropzoneCellOfPreviewTab(0);
         });
 
-        it('CSS of filled category cell', { tags: 'css' }, () => {
-            dragAndDropIntoCategoriesPage.previewTabCategoryCell()
+        it('CSS of filled dropzone cell', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab()
                 .eq(0)
                 .within(() => {
                     utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
@@ -614,54 +611,53 @@ describe('Create Item Page: Drag and drop into categories: Click and drop cases
                 });
         });
 
-        it('Accessibility of filled category cell', { tags: 'a11y' }, () => {
+        it('Accessibility of filled dropzone cell', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user drops an option on a filled category cell, the existing option should persist in the category cell', () => {
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Eagle', 0);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(0, ['Bat', 'Eagle']);
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+        it('When the user drops an option on a filled dropzone cell, the existing option should persist in the dropzone cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Eagle': 0 });
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Bat', 'Eagle']);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInPreviewTab();
             dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Whale', 'Platypus']);
         });
 
-        it('When the user selects an option from the filled category cell, the response container as well as all category cells should get active for dropping the option', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfPreviewTab('Bat');
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionsContainerInPreviewTab('drag and drop into categories');
-            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInPreviewTab(1);
+        it('When the user selects an option from the filled dropzone cell, the response container as well as all dropzone cells should get active for dropping the option', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInDropzoneCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionsContainerInPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllDropzonesInPreviewTab(1);
         });
 
-        it('CSS of option from the filled category cell in selected state', { tags: 'css' }, () => {
-            dragAndDropIntoCategoriesPage.previewTabCategoryCell()
+        it('CSS of option from the filled dropzone cell in selected state', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.dropzoneCellPreviewTab()
                 .eq(0)
                 .within(() => {
                     utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
-                        'border': `1px solid ${css.color.dragOptionActiveBorder}`,
-                        'background-color': css.color.figActiveComponentBg
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
                     });
                 });
         });
 
-        it('Accessibility of option from the filled category cell in selected state', { tags: 'a11y' }, () => {
+        it('Accessibility of option from the filled dropzone cell in selected state', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
         });
 
-        it('When the user deselects an option from the filled category cell, the option should return to the inactive state', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfPreviewTab('Bat');
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('drag and drop into categories');
-            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+        it('When the user deselects an option from the filled dropzone cell, the option should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInDropzoneCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDropzonesInPreviewTab();
         });
 
-        it('The user should be able to move an option from one category cell to another category cell', () => {
-            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfPreviewTab('Bat');
-            dragAndDropIntoCategoriesPage.steps.clickOnCategoryCellInCategoryCellOfPreviewTab(1);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(0, ['Eagle']);
-            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(1, ['Bat']);
+        it('The user should be able to move an option from one dropzone cell to another dropzone cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInDropzoneCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.clickOnDropzoneCellInDropzoneOfPreviewTab(1);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Eagle']);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(1, ['Bat']);
         });
 
         it('When user has dropped all the options from a group in the response areas, then empty group should be displayed in the options container', () => {
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 0);
-            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Whale': 0, 'Platypus': 0 });
             dragAndDropIntoCategoriesPage.steps.verifyGroupTitleInPreviewTab(0, 'Group A')
             dragAndDropIntoCategoriesPage.steps.verifyEmptyGroupInPreviewTab(0);
         });