itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/e2e/ILC/DesmosGraphing/previewTabContent.smoke.js

@@ -0,0 +1,67 @@
+import { desmosGraphingPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+let previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Student view'];
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+
+describe('Create item page - Desmos graphing: Preview contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        cy.log('Navigating to Fill in the gaps over image - text question type');
+                        desmosGraphingPage.steps.navigateToCreateQuestion('Desmos graphing');
+                        cy.barsPreLoaderWait();
+                        desmosGraphingPage.steps.addQuestionInstructions();
+                        desmosGraphingPage.steps.clickOnDesmosToolKeypadButton();
+                        desmosGraphingPage.steps.clickOnDesmosToolKeypadKeys('5');
+                        desmosGraphingPage.steps.clickOnDesmosToolKeypadKeys('Squared');
+                        desmosGraphingPage.steps.allotPoints(10);
+                        desmosGraphingPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        desmosGraphingPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            after(() => {
+                if (view === 'Question preview') {
+                    desmosGraphingPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+            });
+
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(desmosGraphingPage.questionInstructionsText(), 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+                utilities.verifyElementVisibilityState(desmosGraphingPage.questionInstructionsText(), 'visible');
+            });
+
+            it('The Graphing tool and pre-defined expression should be displayed', () => {
+                utilities.verifyElementVisibilityState(desmosGraphingPage.desmosGraphingTool(), 'visible');
+                utilities.verifyElementVisibilityState(desmosGraphingPage.previewTabDesmosToolGraph(), 'visible');
+                utilities.verifyElementVisibilityState(desmosGraphingPage.previewTabDesmosToolKeypadButton(), 'visible');
+                desmosGraphingPage.steps.verifyInputInTextAreaField('52');
+                desmosGraphingPage.steps.verifyDesmosGraphingOutput('25');
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/DesmosGraphing/studentViewSettings.js

@@ -0,0 +1,232 @@
+import { desmosGraphingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create Item page - Desmos graphing: Student view settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Desmos graphing: Student view settings label', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Desmos graphing question type');
+            desmosGraphingPage.steps.navigateToCreateQuestion('Desmos graphing');
+        });
+
+        it('\'Student view settings\' label should be displayed', () => {
+            utilities.verifyTextContent(desmosGraphingPage.studentViewSettingsLabel(), 'Student view settings');
+            utilities.verifyElementVisibilityState(desmosGraphingPage.studentViewSettingsLabel(), 'visible');
+        });
+
+        it('CSS of \'Student view settings\'', { tags: 'css' }, () => {
+            utilities.verifyCSS(desmosGraphingPage.studentViewSettingsLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of \'Student view settings\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(desmosGraphingPage.studentViewSettingsLabel());
+        });
+    });
+
+    describe('Student view settings: Hide expression list Specify predefined expression', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Desmos graphing question type');
+            desmosGraphingPage.steps.navigateToCreateQuestion('Desmos graphing');
+        });
+
+        it('\'Hide expression list\' label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(desmosGraphingPage.hideExpressionListLabel(), 'Hide expression list');
+            utilities.verifyElementVisibilityState(desmosGraphingPage.hideExpressionListLabel(), 'visible');
+            desmosGraphingPage.steps.verifyHideExpressionListCheckboxUnchecked();
+        });
+
+        it('When \'Hide expression list\' checkbox is unchecked then the expression list should be displayed in the Specify predefined expression section', () => {
+            desmosGraphingPage.steps.verifyExpressionListPanelVisible();
+        });
+
+        it('When the user checks the \'Hide expression list\' checkbox then the expression list should be displayed in Specify predefined expression section', () => {
+            desmosGraphingPage.steps.checkHideExpressionListCheckbox();
+            desmosGraphingPage.steps.verifyExpressionListPanelVisible();
+        });
+
+        it('CSS of hide expression list checkbox and label', { tags: 'css' }, () => {
+            utilities.verifyCSS(desmosGraphingPage.hideExpressionListLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(desmosGraphingPage.hideExpressionListCheckbox().parents('[data-ngie-testid="hide-expression-list-checkbox"]').find('svg g').eq(1), {
+                'fill': css.color.primaryBtnBg
+            });
+        });
+
+        it('Accessibility of hide expression list', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(desmosGraphingPage.hideExpressionListCheckbox().parents('[data-ngie-testid="hide-expression-list-checkbox"]'))
+        });
+    });
+
+    describe('Student view settings: Hide expression list Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Desmos graphing question type');
+            desmosGraphingPage.steps.navigateToCreateQuestion('Desmos graphing');
+        });
+
+        it('When \'Hide expression list\' checkbox is unchecked then the expression list should be displayed in the preview tab', () => {
+            desmosGraphingPage.steps.verifyHideExpressionListCheckboxUnchecked();
+            desmosGraphingPage.steps.switchToPreviewTab();
+            desmosGraphingPage.steps.verifyPreviewTabExpressionListPanelVisible();
+        });
+
+        it('When the user checks the \'Hide expression list\' checkbox then the expression list should not be displayed in the preview tab', () => {
+            desmosGraphingPage.steps.switchToEditTab();
+            desmosGraphingPage.steps.checkHideExpressionListCheckbox();
+            desmosGraphingPage.steps.switchToPreviewTab();
+            desmosGraphingPage.steps.verifyPreviewTabExpressionListPanelHidden();
+        });
+
+        it('Accessibility of hide expression list', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(desmosGraphingPage.previewTabQuestionWrapper());
+        });
+
+        it('User should be able to expand the expression list using the \'Show list\' button', () => {
+            desmosGraphingPage.steps.showHideList();
+            desmosGraphingPage.steps.verifyPreviewTabExpressionListPanelVisible();
+        });
+
+        it('When the user unchecks the \'Hide expression list\' checkbox then the expression list should be displayed in the preview tab', () => {
+            desmosGraphingPage.steps.switchToEditTab();
+            desmosGraphingPage.steps.uncheckHideExpressionListCheckbox();
+            desmosGraphingPage.steps.switchToPreviewTab();
+            desmosGraphingPage.steps.verifyPreviewTabExpressionListPanelVisible();
+        });
+    });
+
+    describe('Student view settings: Width and height specify pre-defined expression', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Desmos graphing question type');
+            desmosGraphingPage.steps.navigateToCreateQuestion('Desmos graphing');
+        });
+
+        it('\'Width of the graph (px)\' and \'Height of the graph (px)\' label and input fields should be displayed and by default the input field should have value \'500\'', () => {
+            utilities.verifyInnerText(desmosGraphingPage.desmosGraphingWidthLabel(), 'Width of the graph (px)');
+            desmosGraphingPage.steps.verifyDesmosGraphingWidthInputField('500');
+            utilities.verifyInnerText(desmosGraphingPage.desmosGraphingHeightLabel(), 'Height of the graph (px)');
+            desmosGraphingPage.steps.verifyDesmosGraphingHeightInputField('500');
+        });
+
+        it('\'Aspect ratio\' and \'Reset dimension\' icons should be displayed and by default aspect ratio should be unlocked and reset dimension should be disabled', () => {
+            utilities.verifyElementVisibilityState(desmosGraphingPage.buttonAspectRatio(), 'visible');
+            utilities.verifyElementVisibilityState(desmosGraphingPage.buttonResetDimensions(), 'visible');
+            desmosGraphingPage.steps.verifyButtonAspectRatioUnlocked();
+            desmosGraphingPage.steps.verifyButtonResetDimensionsDisabled();
+        });
+
+        it('The width and height of the graphing tool should be 500 by 500 pixels', () => {
+            desmosGraphingPage.steps.verifyDesmosGraphingDimensions('500', '500');
+        });
+
+        it('When aspect ratio is locked and user changes the value in width input field, the height input field should also be updated accordingly and the dimensions should be updated for the graphing tool', () => {
+            desmosGraphingPage.steps.lockAspectRatio();
+            desmosGraphingPage.steps.enterInputInDesmosGraphingWidthInputField(200);
+            desmosGraphingPage.steps.verifyDesmosGraphingHeightInputField('200');
+            desmosGraphingPage.steps.verifyDesmosGraphingDimensions('200', '200');
+        });
+
+        it('When user unlocks the aspect ratio button and changes the value in the width input field, the height input field should not change', () => {
+            desmosGraphingPage.steps.unlockAspectRatio();
+            desmosGraphingPage.steps.enterInputInDesmosGraphingWidthInputField(400);
+            desmosGraphingPage.steps.verifyDesmosGraphingHeightInputField('200');
+            desmosGraphingPage.steps.verifyDesmosGraphingDimensions('400', '200');
+        });
+
+        it('When user locks the aspect ratio button and changes the value in the width input field, the height input field should be updated accordingly to maintain the updated aspect ratio', () => {
+            desmosGraphingPage.steps.lockAspectRatio();
+            desmosGraphingPage.steps.enterInputInDesmosGraphingWidthInputField(300);
+            desmosGraphingPage.steps.verifyDesmosGraphingHeightInputField('150');
+            desmosGraphingPage.steps.verifyDesmosGraphingDimensions('300', '150');
+        });
+
+        it('When user edits the height or width of the image the \'Reset dimensions\' button should be enabled', () => {
+            desmosGraphingPage.steps.verifyButtonResetDimensionsEnabled();
+        });
+
+        it('When user selects the \'Reset dimensions\' button the height and width should be reset to the original value and graphing tool should have default dimensions', () => {
+            desmosGraphingPage.steps.resetDimensions();
+            desmosGraphingPage.steps.verifyDesmosGraphingWidthInputField('500');
+            desmosGraphingPage.steps.verifyDesmosGraphingHeightInputField('500');
+            desmosGraphingPage.steps.verifyDesmosGraphingDimensions('500', '500');
+        });
+
+
+        it('CSS of height and width section', { tags: 'css' }, () => {
+            utilities.verifyCSS(desmosGraphingPage.desmosGraphingWidthLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(desmosGraphingPage.desmosGraphingWidthInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(desmosGraphingPage.desmosGraphingHeightLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(desmosGraphingPage.desmosGraphingHeightInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(desmosGraphingPage.buttonAspectRatio().find('svg'), {
+                'fill': css.color.activeButtons,
+            });
+            utilities.verifyCSS(desmosGraphingPage.buttonResetDimensions().find('path').eq(1), {
+                'fill': css.color.activeButtons,
+            });
+        });
+
+        it('Accessibility of height and width section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(desmosGraphingPage.buttonResetDimensions().parents('[class*="GraphConfigurationWrapper"]'))
+        });
+    });
+
+    describe('Student view settings: Width and height preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Desmos graphing question type');
+            desmosGraphingPage.steps.navigateToCreateQuestion('Desmos graphing');
+            desmosGraphingPage.steps.switchToPreviewTab();
+        });
+
+        it('The width and height of the graphing tool should be 500 by 500 pixels', () => {
+            desmosGraphingPage.steps.verifyPreviewTabDesmosGraphingDimensions('500', '500');
+        });
+
+        it('When user changes the value in width and height input field the dimensions should be updated for the graphing tool in preview tab', () => {
+            desmosGraphingPage.steps.switchToEditTab();
+            desmosGraphingPage.steps.enterInputInDesmosGraphingWidthInputField(200);
+            desmosGraphingPage.steps.verifyDesmosGraphingHeightInputField('500');
+            desmosGraphingPage.steps.switchToPreviewTab();
+            desmosGraphingPage.steps.verifyPreviewTabDesmosGraphingDimensions('200', '500');
+        });
+
+        it('When user selects the \'Reset dimensions\' button the height and width should be reset to the original value and graphing tool should have default dimensions in preview tab', () => {
+            desmosGraphingPage.steps.switchToEditTab();
+            desmosGraphingPage.steps.resetDimensions();
+            desmosGraphingPage.steps.verifyDesmosGraphingWidthInputField('500');
+            desmosGraphingPage.steps.verifyDesmosGraphingHeightInputField('500');
+            desmosGraphingPage.steps.switchToPreviewTab();
+            desmosGraphingPage.steps.verifyPreviewTabDesmosGraphingDimensions('500', '500');
+        });
+    });
+});

package/cypress/e2e/ILC/DragAndDropIntoCategories/Scoring/allOrNothingAlternativePointsGreaterThanCorrectPoints.js

@@ -0,0 +1,228 @@
+import { dragAndDropIntoCategoriesPage } from "../../../../pages";
+import abortEarlySetup from "../../../../support/helpers/abortEarly";
+
+describe('Create item page - Drag and drop into categories: All or nothing with alternative answers', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question preview: Auto scored - All or nothing with alternative answer - When \'Alternative answer\' points are more than \'Correct answer\' points', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setRowsAndColumnsForQuestion();
+            dragAndDropIntoCategoriesPage.steps.addMultipleOptionFields(6);
+            dragAndDropIntoCategoriesPage.steps.addInputToOptionsInputField(['Bat', 'Eagle', 'Parrot', 'Whale', 'Platypus', 'Ostrich', 'Flying squirrel', 'Peacock']);
+            dragAndDropIntoCategoriesPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            dragAndDropIntoCategoriesPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Bat': 0, 'Eagle': 1, 'Parrot': 1, 'Platypus': 2, 'Ostrich': 3, 'Whale': 4 });
+            dragAndDropIntoCategoriesPage.steps.allotPoints(10);
+            dragAndDropIntoCategoriesPage.steps.addAlternativeAnswerAccordion(1);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Flying squirrel': 0, 'Eagle': 1, 'Peacock': 1, 'Ostrich': 3, 'Platypus': 4 });
+            dragAndDropIntoCategoriesPage.steps.allotPoints(20);
+            dragAndDropIntoCategoriesPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user selects \'Grading\' view without attempting the question, cell numeration should be displayed, correct answers section should be displayed with correct answers from the alternative accordion and respective cell numeration', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToGradingView();
+            dragAndDropIntoCategoriesPage.steps.verifyDropzoneCellNumeration(['1', '2', '3', '4', '5', '6']);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Flying squirrel'], ['Eagle', 'Peacock'], ['Ostrich'], ['Platypus']], ['1', '2', '4', '5']);
+        });
+
+        it('When the user attempts the question with responses from the correct accordion, then the user should be awarded with points specified for correct accordion (less than full points) and on switching to \'Grading\' view, correct icons should be displayed beside all the correct responses, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' and correct answer section should not be displayed', () => {
+            dragAndDropIntoCategoriesPage.steps.resetQuestionPreview();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Bat': 0, 'Eagle': 1, 'Parrot': 1, 'Platypus': 2, 'Ostrich': 3, 'Whale': 4 });
+            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(10, 20);
+            dragAndDropIntoCategoriesPage.steps.switchToGradingView();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(4);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(5);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotExists();
+            dragAndDropIntoCategoriesPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with responses from the correct accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' and correct answer section should not be displayed')
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(4);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(5);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question with responses from the alternative accordion, then the user should be awarded with full points and on switching to \'Grading\' view, correct icons should be displayed beside all the correct responses, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' and correct answer section should not be displayed', () => {
+            dragAndDropIntoCategoriesPage.steps.resetQuestionPreview();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Flying squirrel': 0, 'Eagle': 1, 'Peacock': 1, 'Ostrich': 3, 'Platypus': 4 });
+            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(20, 20);
+            dragAndDropIntoCategoriesPage.steps.switchToGradingView();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(4);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotExists();
+            dragAndDropIntoCategoriesPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with responses from the alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' and correct answer section should not be displayed')
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(4);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question with partially correct options exclusively from the correct accordion, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion along with dropzone cell numeration should be displayed', () => {
+            dragAndDropIntoCategoriesPage.steps.resetQuestionPreview();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Bat': 0, 'Parrot': 1 });
+            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(0, 20);
+            dragAndDropIntoCategoriesPage.steps.switchToGradingView();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Flying squirrel'], ['Eagle', 'Peacock'], ['Ostrich'], ['Platypus']], ['1', '2', '4', '5']);
+            dragAndDropIntoCategoriesPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with partially correct options exclusively from the correct accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question with partially correct options exclusively from the alternative accordion, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion along with dropzone cell numeration should be displayed', () => {
+            dragAndDropIntoCategoriesPage.steps.resetQuestionPreview();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Flying squirrel': 0, 'Peacock': 1 });
+            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(0, 20);
+            dragAndDropIntoCategoriesPage.steps.switchToGradingView();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Flying squirrel'], ['Eagle', 'Peacock'], ['Ostrich'], ['Platypus']], ['1', '2', '4', '5']);
+            dragAndDropIntoCategoriesPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with partially correct options exclusively from the alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question partially correct with all the cells correct as per the correct accordion but one cell incomplete, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the responses common across both accordions, incorrect icons should be displayed besides correct accordion responses, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion along with dropzone cell numeration should be displayed', () => {
+            dragAndDropIntoCategoriesPage.steps.resetQuestionPreview();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Bat': 0, 'Eagle': 1, 'Parrot': 1, 'Platypus': 2, 'Ostrich': 3 });
+            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(0, 20);
+            dragAndDropIntoCategoriesPage.steps.switchToGradingView();
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Flying squirrel'], ['Eagle', 'Peacock'], ['Ostrich'], ['Platypus']], ['1', '2', '4', '5']);
+            dragAndDropIntoCategoriesPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question partially correct with all the cells correct as per the correct accordion but one cell incomplete and clicks on \'Check answer\' button, then correct icon should be displayed besides the responses common across both accordions, incorrect icons should be displayed besides correct accordion responses, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question partially correct with more number of options exclusively from the correct accordion but with one option common across both accordion, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the response common across both accordions, incorrect icon should be displayed besides the responses from the correct accordion, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion along with dropzone cell numeration should be displayed', () => {
+            dragAndDropIntoCategoriesPage.steps.resetQuestionPreview();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Bat': 0, 'Ostrich': 3, 'Platypus': 2 });
+            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(0, 20);
+            dragAndDropIntoCategoriesPage.steps.switchToGradingView();
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Flying squirrel'], ['Eagle', 'Peacock'], ['Ostrich'], ['Platypus']], ['1', '2', '4', '5']);
+            dragAndDropIntoCategoriesPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question partially correct with more number of options exclusively from the correct accordion but with one option common across both accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the responses common across both accordions, incorrect icons should be displayed besides correct accordion responses, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question partially correct with all the cells correctly attempted as per the correct accordion but with an extra incorrect option, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the response common across both accordions, incorrect icon should be displayed besides the responses from the correct accordion, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion along with dropzone cell numeration should be displayed', () => {
+            dragAndDropIntoCategoriesPage.steps.resetQuestionPreview();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Bat': 0, 'Eagle': 1, 'Parrot': 1, 'Platypus': 2, 'Ostrich': 3, 'Whale': 4, 'Flying squirrel': 5 });
+            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(0, 20);
+            dragAndDropIntoCategoriesPage.steps.switchToGradingView();
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(4);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(5);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(6);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Flying squirrel'], ['Eagle', 'Peacock'], ['Ostrich'], ['Platypus']], ['1', '2', '4', '5']);
+            dragAndDropIntoCategoriesPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question partially correct with all the cells correctly attempted as per the correct accordion but with an extra incorrect option and clicks on \'Check answer\' button, then correct icon should be displayed besides the responses common across both accordions, incorrect icons should be displayed besides correct accordion responses, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(4);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(5);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(6);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question partially correct such that more number of correct options are exclusively from the correct accordion but with one option exclusively from the alternative accordion in the same cell, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the response common across both accordions, incorrect icon should be displayed besides the responses from the correct accordion, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion along with dropzone cell numeration should be displayed', () => {
+            dragAndDropIntoCategoriesPage.steps.resetQuestionPreview();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Bat': 0, 'Flying squirrel': 0, 'Parrot': 1, 'Platypus': 2 });
+            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(0, 20);
+            dragAndDropIntoCategoriesPage.steps.switchToGradingView();
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Flying squirrel'], ['Eagle', 'Peacock'], ['Ostrich'], ['Platypus']], ['1', '2', '4', '5']);
+            dragAndDropIntoCategoriesPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question partially correct such that more number of correct options are exclusively from the correct accordion but with one option exclusively from the alternative accordion in the same cell and clicks on \'Check answer\' button, then correct icon should be displayed besides the responses common across both accordions, incorrect icons should be displayed besides correct accordion responses, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icons should be displayed besides all incorrect responses, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from alternative accordion along with dropzone cell numeration should be displayed', () => {
+            dragAndDropIntoCategoriesPage.steps.resetQuestionPreview();
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Platypus': 0 });
+            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(0, 20);
+            dragAndDropIntoCategoriesPage.steps.switchToGradingView();
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Flying squirrel'], ['Eagle', 'Peacock'], ['Ostrich'], ['Platypus']], ['1', '2', '4', '5']);
+            dragAndDropIntoCategoriesPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question incorrectly and clicks on \'Check answer\' button, then incorrect icons should be displayed besides all incorrect responses, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            dragAndDropIntoCategoriesPage.steps.checkAnswer();
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+    });
+});