itemengine-cypress-automation 1.0.72 → 1.0.73

package/cypress/e2e/ILC/EditTabSettingPage/ItemPreviewSettingsTabContent.js

@@ -0,0 +1,753 @@
+import { itemPreviewSettingsPage } from "../../../pages/itemPreviewSettingsPage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+const css = Cypress.env('css');
+const spacingOptions = ['Default', 'Double', 'Triple'];
+const labels = [itemPreviewSettingsPage.enableSectionsInLabel, itemPreviewSettingsPage.sectionsNavigationOrientationLabel, itemPreviewSettingsPage.sectionsNavigationStyleLabel, itemPreviewSettingsPage.sectionsNavigationAlignmentLabel];
+const contentLabels = [itemPreviewSettingsPage.leftPanelLabel, itemPreviewSettingsPage.rightPanelLabel, itemPreviewSettingsPage.horizontalLabel, itemPreviewSettingsPage.underlinedLabel, itemPreviewSettingsPage.separatedUsingDividersLabel, itemPreviewSettingsPage.numberedLabel, itemPreviewSettingsPage.leftAlignedLabel, itemPreviewSettingsPage.rightAlignedLabel, itemPreviewSettingsPage.centerAlignedLabel];
+const checkedCheckboxes = [itemPreviewSettingsPage.enableSectionsCheckbox, itemPreviewSettingsPage.leftPanelCheckbox];
+const checkedRadioButtons = [itemPreviewSettingsPage.horizontalRadioButton, itemPreviewSettingsPage.underlinedRadioButton, itemPreviewSettingsPage.leftAlignedRadioButton];
+const uncheckedCheckboxes = [itemPreviewSettingsPage.rightPanelCheckbox];
+const uncheckedRadioButtons = [itemPreviewSettingsPage.separatedUsingDividersRadioButton, itemPreviewSettingsPage.centerAlignedRadioButton, itemPreviewSettingsPage.rightAlignedRadioButton, itemPreviewSettingsPage.numberedRadioButton];
+const sectionsNavigationStyleSectionLabel = [itemPreviewSettingsPage.leftAlignedLabel, itemPreviewSettingsPage.rightAlignedLabel, itemPreviewSettingsPage.centerAlignedLabel];
+const miscellaneousSectionLabelsText = [itemPreviewSettingsPage.disableCutCopyAndPasteLabel, itemPreviewSettingsPage.randomizeQuestionsOrderLabel, itemPreviewSettingsPage.roundNegativeScoresToZeroLabel];
+const miscellaneousSectionCheckboxes = [itemPreviewSettingsPage.disableCutCopyAndPasteCheckbox, itemPreviewSettingsPage.randomizeQuestionsOrderCheckbox, itemPreviewSettingsPage.roundNegativeScoresToZeroCheckbox];
+
+describe('Item preview: Settings tab - Contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Setting tab: Header section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Item preview settings tab');
+            itemPreviewSettingsPage.steps.navigateToCreateItemPage();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+        });
+
+        it('When user navigates to the settings tab, then \'Settings\' label, \'Cancel\' and \'Apply changes\' buttons should be displayed', () => {
+            utilities.verifyInnerText(itemPreviewSettingsPage.settingsLabel(), 'Settings');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.settingsLabel(), 'visible');
+            utilities.verifyInnerText(itemPreviewSettingsPage.cancelLabel(), 'Cancel');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.cancelLabel(), 'visible');
+            utilities.verifyInnerText(itemPreviewSettingsPage.applyChangesLabel(), 'Apply changes');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.applyChangesLabel(), 'visible');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/553260?next_issue_id=553252
+        it('CSS of the header', () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.settingsLabel(), {
+                'color': css.color.panelLabel,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.cancelLabel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.applyChangesLabel(), {
+                'color': css.color.successBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.successBtnBg
+            });
+        });
+
+        it('Accessibility of the header', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(itemPreviewSettingsPage.headerWrapper().parents('.settings'));
+        });
+    });
+
+    describe('Setting tab: Side by side panels section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Item preview settings tab');
+            itemPreviewSettingsPage.steps.navigateToCreateItemPage();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+        });
+
+        it('When user has navigated to the settings tab, then \'Side by side panels\' label should be displayed', () => {
+            utilities.verifyInnerText(itemPreviewSettingsPage.sideBySidePanelsLabel(), 'Side by side panels');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.sideBySidePanelsLabel(), 'visible');
+        });
+
+        it('In \'Side by side panels\' section, \'Enable side by side panels\' label with checkbox should be displayed and \'Enable side by side panels\' checkbox should be unchecked by default', () => {
+            utilities.verifyInnerText(itemPreviewSettingsPage.enableSideBySidePanelsLabel(), 'Enable side by side panels');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.enableSideBySidePanelsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.enableSideBySidePanelsCheckbox(), 'exist');
+            itemPreviewSettingsPage.steps.verifyEnableSideBySidePanelsCheckboxUnchecked();
+        });
+
+        it('When user checks the \'Enable side by side panels\' checkbox then \'Vertical separator line between panels\' label and checkbox should be enabled', () => {
+            itemPreviewSettingsPage.steps.checkEnableSideBySidePanelsCheckbox();
+            itemPreviewSettingsPage.steps.verifyVerticalSeparatorIsEnabled();
+        });
+
+        it('When user has checked the \'Enable side by side panels\' checkbox then in \'Sections\' section, \'Left panel\' and \'Right panel\' labels and their checkboxes should be enabled', () => {
+            itemPreviewSettingsPage.steps.checkEnableSectionsCheckbox();
+            itemPreviewSettingsPage.steps.verifyLeftPanelLabelAndCheckboxIsEnabled();
+            itemPreviewSettingsPage.steps.verifyRightPanelLabelAndCheckboxIsEnabled();
+        });
+
+        it('When user has checked the \'Enable side by side panels\' checkbox then in \'Sections\' section, \'Vertical\' label and radio button should be disabled', () => {
+            itemPreviewSettingsPage.steps.verifyVerticalNavigationOrientationIsDisabled();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/553260?next_issue_id=553252
+        it('CSS of \'Side by side panels\' label, \'Enable side by side panels\' label and checked \'Enable side by side panels\' checkbox', { tags: 'css' }, () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.sideBySidePanelsLabel(), {
+                'color': css.color.panelLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.enableSideBySidePanelsLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.enableSideBySidePanelsCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('CSS of disabled \'Vertical\' label and its radio button', () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.verticalLabel().parent(), {
+                'opacity': '0.4'
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.verticalLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of the checked \'Enable side by side panels\' checkbox', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(itemPreviewSettingsPage.enableSideBySidePanelsCheckbox());
+        });
+
+        it('When user unchecks the \'Enable side by side panels\' checkbox then \'Vertical separator line between panels\' label and checkbox should be disabled', () => {
+            itemPreviewSettingsPage.steps.uncheckEnableSideBySidePanelsCheckbox();
+            itemPreviewSettingsPage.steps.verifyVerticalSeparatorIsDisabled();
+        });
+
+        it('When user has unchecked the \'Enable side by side panels\' checkbox then in \'Sections\' section, \'Left panel\' and \Right panel\' labels with checkboxes should be disabled', () => {
+            itemPreviewSettingsPage.steps.verifyLeftPanelLabelAndCheckboxIsDisabled();
+            itemPreviewSettingsPage.steps.verifyRightPanelLabelAndCheckboxIsDisabled();
+        });
+
+        it('When the user hovers over the disabled \'Left panel\' and \'Right panel\' checkboxes then, \'Please enable panels\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the checkbox', () => {
+            itemPreviewSettingsPage.steps.verifyDisabledLeftPanelTooltip();
+            itemPreviewSettingsPage.steps.verifyDisabledRightPanelTooltip();
+        });
+
+        it('When user has unchecked the \'Enable side by side panels\' checkbox then in \'Sections\' section, \'Vertical\' label and radio button should be enabled', () => {
+            itemPreviewSettingsPage.steps.verifyVerticalNavigationOrientationIsEnabled();
+        });
+
+        it('CSS of unchecked \'Enable side by side panels\' checkbox, disabled \'Vertical separator line between panels\' label and checkbox, disabled \'Left panel\' and \Right panel\' labels and checkboxes and enabled \'Vertical\' label and radio button', { tags: 'css' }, () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.enableSideBySidePanelsCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.verticalSeparatorsLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.verticalSeparatorsLabel().parent(), {
+                'opacity': '0.4'
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.leftPanelLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.leftPanelLabel().parent(), {
+                'opacity': '0.4'
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.rightPanelLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.rightPanelLabel().parent(), {
+                'opacity': '0.4'
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.verticalLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.verticalRadioButton().parents('.radio-option-not-checked').find('.radio-btn-deselected'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+            itemPreviewSettingsPage.steps.uncheckEnableSectionsCheckbox();
+        });
+    });
+
+    describe('Setting tab: Separators section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Item preview settings tab');
+            itemPreviewSettingsPage.steps.navigateToCreateItemPage();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+        });
+
+        it('When user has navigated to the settings tab, \'Separators\' label should be displayed', () => {
+            utilities.verifyInnerText(itemPreviewSettingsPage.separatorsLabel(), 'Separators');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.separatorsLabel(), 'visible');
+        });
+
+        it('In \'Separators\' section, \'Horizontal separator line between questions\' and \'Vertical separator line between panels\' labels with checkboxes and illustrator should be displayed', () => {
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.horizontalSeparatorsCheckbox(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.horizontalSeparatorLabel(), 'Horizontal separator line between questions');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.horizontalSeparatorLabel(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.horizontalIllustrator(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.verticalSeparatorsCheckbox(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.verticalSeparatorsLabel(), 'Vertical separator line between panels');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.verticalSeparatorsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.verticalSeparatorsIllustrator(), 'visible');
+        });
+
+        it('\'Horizontal separator line between questions\' and \'Vertical separator line between panels\' checkboxes should be unchecked by default', () => {
+            itemPreviewSettingsPage.steps.verifyHorizontalSeparatorCheckboxUnchecked();
+            itemPreviewSettingsPage.steps.verifyVerticalSeparatorCheckboxUnchecked();
+        });
+
+        it('When \'Enable side by side panels\' checkbox is unchecked then \'Vertical separator line between panels\' should be disabled by default', () => {
+            itemPreviewSettingsPage.steps.verifyVerticalSeparatorIsDisabled();
+        });
+
+        it('When user checks the \'Horizontal separator line between questions\' checkbox then \'Separator style\' label and three options \'Solid\', \'Dotted\' and \'Dashed\' should be displayed', () => {
+            itemPreviewSettingsPage.steps.checkHorizontalSeparatorCheckbox();
+            itemPreviewSettingsPage.steps.verifySeparatorStyleSectionContent();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/553260?next_issue_id=553252
+        it('CSS of \'Separators\' label, \'Horizontal separator line between questions\' label, checked \'Horizontal separator line between questions\' checkbox and \'Separator style\'', { tags: 'css' }, () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.separatorsLabel(), {
+                'color': css.color.panelLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.horizontalSeparatorLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.horizontalSeparatorsCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.separatorsStyleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.solidSeparatorStyleOption(), {
+                'border': `2px solid ${css.color.activeComponentBorder}`,
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.solidSeparatorStyleOption().find('svg line'), {
+                'stroke': css.color.activeComponentBorder
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.solidSeparatorStyleOption().find('.ngie-toggle-button-label'), {
+                'background-color': css.color.transparent,
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.dashedSeparatorStyleOption().find('.ngie-toggle-button-label'), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'fontWeight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.dottedSeparatorStyleOption().find('.ngie-toggle-button-label'), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of checked \'Horizontal separator line between questions\' checkbox and \'Separator style\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(itemPreviewSettingsPage.horizontalSeparatorsCheckbox());
+            cy.checkAccessibility(itemPreviewSettingsPage.separatorsStyleLabel().parent('[class*="SettingsTabstyles__SeparatorStyleWrapper"]'));
+        });
+
+        it('When user unchecks the  \'Horizontal separator line between questions\' checkbox then \'Separator style\' should disappear', () => {
+            itemPreviewSettingsPage.steps.uncheckHorizontalSeparatorCheckbox();
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.separatorStyleWrapper(), 'notExist');
+        });
+
+        it('When user checks the enabled \'Vertical separator line between panels\' checkbox then \'Separator style\' label and three options \'Solid\', \'Dotted\' and \'Dashed\' should be displayed', () => {
+            itemPreviewSettingsPage.steps.checkEnableSideBySidePanelsCheckbox();
+            itemPreviewSettingsPage.steps.checkVerticalSeparatorCheckbox();
+            itemPreviewSettingsPage.steps.verifySeparatorStyleSectionContent();
+        });
+
+        it('CSS of \'Vertical separator line between panels\' label and checked \'Vertical separator line between panels\' checkbox', () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.verticalSeparatorsLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.verticalSeparatorsCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('When user unchecks the enabled \'Vertical separator line between panels\' checkbox then \'Separator style\' should disappear', () => {
+            itemPreviewSettingsPage.steps.uncheckVerticalSeparatorCheckbox();
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.separatorStyleWrapper(), 'notExist');
+        });
+
+        it('CSS of the unchecked \'Horizontal separator line between questions\' checkbox and \'Vertical separator line between panels\'', { tags: 'css' }, () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.horizontalSeparatorsCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.verticalSeparatorsCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+    });
+
+    describe('Setting tab: Sections section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Item preview settings tab')
+            itemPreviewSettingsPage.steps.navigateToCreateItemPage();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+        });
+
+        it('When user has navigated to the settings tab, \'Sections\' label should be displayed', () => {
+            utilities.verifyInnerText(itemPreviewSettingsPage.sectionsLabel(), 'Sections');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.sectionsLabel(), 'visible');
+        });
+
+        it('In \'Sections\' section, \'Enable sections\' label and checkbox should be displayed', () => {
+            utilities.verifyInnerText(itemPreviewSettingsPage.enableSectionsLabel(), 'Enable sections');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.enableSectionsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.enableSectionsLabel(), 'exist');
+        });
+
+        it('\'Enable sections\' checkbox should be unchecked by default', () => {
+            itemPreviewSettingsPage.steps.verifyEnableSectionsCheckboxUnchecked();
+        });
+
+        it('When user checks the \'Enable sections\' checkbox then four sections \'Enable sections in\', \'Sections navigation orientation\', \'Sections navigation style\' and \'Sections navigation alignment\' should be displayed', () => {
+            itemPreviewSettingsPage.steps.checkEnableSectionsCheckbox();
+            utilities.verifyInnerText(itemPreviewSettingsPage.enableSectionsInLabel(), 'Enable sections in');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.enableSectionsInLabel(), 'visible');
+            utilities.verifyInnerText(itemPreviewSettingsPage.sectionsNavigationOrientationLabel(), 'Sections navigation orientation');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.sectionsNavigationOrientationLabel(), 'visible');
+            utilities.verifyInnerText(itemPreviewSettingsPage.sectionsNavigationStyleLabel(), 'Sections navigation style');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.sectionsNavigationStyleLabel(), 'visible');
+            utilities.verifyInnerText(itemPreviewSettingsPage.sectionsNavigationAlignmentLabel(), 'Sections navigation alignment');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.sectionsNavigationStyleLabel(), 'visible');
+        });
+
+        it('In \'Enable sections in\', two labels \'Left panel\' and \'Right panel\' should be displayed with their checkboxes and \'Left panel\' checkbox should be checked by default', () => {
+            itemPreviewSettingsPage.steps.checkEnableSideBySidePanelsCheckbox();
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.leftPanelCheckbox(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.leftPanelLabel(), 'Left panel');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.leftPanelLabel(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.rightPanelCheckbox(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.rightPanelLabel(), 'Right panel');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.rightPanelLabel(), 'visible');
+            itemPreviewSettingsPage.steps.verifyLeftPanelCheckboxIsSelected();
+        });
+
+        it('In \'Section navigation orientation\', two labels \'Horizontal\' and \'Vertical\' should be displayed with their radio buttons and \'Horizontal\' radio button should be selected by default', () => {
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.horizontalRadioButton(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.horizontalLabel(), 'Horizontal');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.horizontalLabel(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.verticalRadioButton(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.verticalLabel(), 'Vertical');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.verticalLabel(), 'visible');
+            itemPreviewSettingsPage.steps.verifyHorizontalRadioButtonIsSelected();
+        });
+
+        it('In \'Section Navigation style\',  three labels \'Underlined\', \'Separated using dividers\' and \'Numbered\' should be displayed with their radio button and \'Underlined\' radio button should be selected by default', () => {
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.underlinedRadioButton(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.underlinedLabel(), 'Underlined');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.underlinedLabel(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.separatedUsingDividersRadioButton(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.separatedUsingDividersLabel(), 'Separated using dividers');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.separatedUsingDividersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.numberedRadioButton(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.numberedLabel(), 'Numbered');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.numberedLabel(), 'visible');
+            itemPreviewSettingsPage.steps.verifyUnderlinedRadioButtonIsSelected();
+        });
+
+        it('In \'Sections navigation alignment\', two labels \'Left aligned\', \'Center aligned\' and \'Right aligned\' should be displayed with their radio buttons and \'Left aligned\' should be selected by default', () => {
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.leftAlignedRadioButton(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.leftAlignedLabel(), 'Left aligned');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.leftAlignedLabel(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.centerAlignedRadioButton(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.centerAlignedLabel(), 'Center aligned');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.centerAlignedLabel(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.rightAlignedRadioButton(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.rightAlignedLabel(), 'Right aligned');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.rightAlignedLabel(), 'visible');
+            itemPreviewSettingsPage.steps.verifyLeftAlignedRadioButtonIsSelected();
+        });
+
+        it('When user selects \'Vertical\' orientation radio button in \'Section navigation orientation\' section, then \'Sections navigation style\' section should be displayed in disabled state', () => {
+            itemPreviewSettingsPage.steps.uncheckEnableSideBySidePanelsCheckbox();
+            itemPreviewSettingsPage.steps.selectVerticalOrientationRadioButton();
+            itemPreviewSettingsPage.steps.verifySectionsNavigationStyleSectionIsDisabled();
+        })
+
+        it('CSS of \'Sections navigation style\' section in disabled state', { tags: 'css' }, () => {
+            sectionsNavigationStyleSectionLabel.forEach((option) => {
+                utilities.verifyCSS(option().parent(), {
+                    'opacity': '0.4'
+                });
+                utilities.verifyCSS(option(), {
+                    'color': css.color.labelText,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+        });
+
+        it('When user selects \'Horizontal\' orientation radio button in \'Section navigation orientation\' section, then \'Sections navigation style\' section should be displayed in enabled state', () => {
+            itemPreviewSettingsPage.steps.selectHorizontalOrientationRadioButton();
+            itemPreviewSettingsPage.steps.checkEnableSideBySidePanelsCheckbox();
+            itemPreviewSettingsPage.steps.verifySectionsNavigationStyleSectionIsEnabled();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/553260?next_issue_id=553252
+        it('CSS of the \'Sections\' label, \'Enable Sections\' label, checked \'Enable Sections\' checkbox, \'Enable sections in\', \'Sections navigation orientation\', \'Sections navigation style\' and \'Sections navigation alignment\'', { tags: 'css' }, () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.sectionsLabel(), {
+                'color': css.color.panelLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.enableSectionsLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            labels.forEach((checkinglabel) => {
+                utilities.verifyCSS(checkinglabel(), {
+                    'color': css.color.sectionHeading,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+            });
+            contentLabels.forEach((checkingcontentlabels) => {
+                utilities.verifyCSS(checkingcontentlabels(), {
+                    'color': css.color.labelText,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+            checkedCheckboxes.forEach((checkedCheckbox) => {
+                utilities.verifyCSS(checkedCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                    'fill': css.color.activeButtons
+                });
+            });
+            checkedRadioButtons.forEach((checkedRadio) => {
+                utilities.verifyCSS(checkedRadio().parents('.radio-option-checked').find('[data-name="Radio button - Selected"]'), {
+                    'fill': css.color.activeButtons
+                });
+            });
+            uncheckedCheckboxes.forEach((uncheckedCheckbox) => {
+                utilities.verifyCSS(uncheckedCheckbox().parent().find('svg'), {
+                    'fill': css.color.uncheckedCheckbox
+                });
+            });
+            uncheckedRadioButtons.forEach((uncheckedRadio) => {
+                utilities.verifyCSS(uncheckedRadio().parents('.radio-option-not-checked').find('.radio-btn-deselected'), {
+                    'fill': css.color.uncheckedCheckbox
+                });
+            });
+        });
+
+        it('Accessibility of \'Enable Sections\' checkbox, \'Enable sections in\', \'Sections navigation orientation\', \'Sections navigation style\' and \'Sections navigation alignment\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(itemPreviewSettingsPage.sectionsLabel().parents('[class*="SettingsTabstyles__SectionsWrapper"]'));
+        });
+
+        it('When user unchecks the \'Enable sections\' checkbox then four sections \'Enable sections in\', \'Sections navigation orientation\', \'Sections navigation style\' and \'Sections navigation alignment\' should disappear', () => {
+            itemPreviewSettingsPage.steps.uncheckEnableSectionsCheckbox();
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.enableSectionsContentWrapper(), 'notExist')
+        });
+
+        it('CSS of unchecked the \'Enable sections\' checkbox', { tags: 'css' }, () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.enableSectionsCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+    });
+
+    describe('Setting tab: Space between questions section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Item preview settings tab');
+            itemPreviewSettingsPage.steps.navigateToCreateItemPage();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+        });
+
+        it('When user has navigated to the settings tab, \'Space between questions\' label should be displayed', () => {
+            utilities.verifyInnerText(itemPreviewSettingsPage.spaceBetweenQuestionsLabel(), 'Space between questions');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.spaceBetweenQuestionsLabel(), 'visible');
+        });
+
+        it('In \'Space between questions\' section, \'Spacing\' label and dropdown should be displayed and \'Default\' spacing should be selected for the dropdown by default', () => {
+            utilities.verifyInnerText(itemPreviewSettingsPage.spacingLabel(), 'Spacing');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.spacingLabel(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.spacingDropdown(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.spacingDropdown(), 'Default');
+        });
+
+        it('When user clicks on the \'Spacing\' dropdown then list with three options \'Default\', \'Double\' and \'Triple\' should be displayed', () => {
+            itemPreviewSettingsPage.steps.clickSpacingDropdownList();
+            itemPreviewSettingsPage.steps.verifySpacingDropdownListOptions(spacingOptions);
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/553260?next_issue_id=553252
+        it('CSS of \'Space between questions\' label, \'Spacing\' label and \'Spacing\' dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.spaceBetweenQuestionsLabel(), {
+                'color': css.color.panelLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.spacingLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.spacingDropdownListOptions().eq(0), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.spacingDropdownListOptions().eq(1), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Spacing\' dropdown', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(itemPreviewSettingsPage.spacingDropdownListOptions());
+        });
+
+        it('When user selects an option from the dropdown list, then dropdown list should disappear and selected option should be the active selection for the dropdown', () => {
+            itemPreviewSettingsPage.steps.selectOptionFromSpacingDropdown('Triple');
+            utilities.verifyInnerText(itemPreviewSettingsPage.spacingDropdown(), 'Triple')
+        });
+
+        it('CSS of \'Spacing\' dropdown in collapsed state', { tags: 'css' }, () => {
+            itemPreviewSettingsPage.spacingDropdown()
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+            utilities.verifyCSS(itemPreviewSettingsPage.spacingDropdown(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            })
+        });
+    });
+
+    describe('Setting tab: Multi-language support section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Item preview settings tab');
+            itemPreviewSettingsPage.steps.navigateToCreateItemPage();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+        });
+
+        it('When user has navigated to the settings tab, \'Multi-language support\' label should be displayed', () => {
+            utilities.verifyInnerText(itemPreviewSettingsPage.multiLanguageSupportLabel(), 'Multi-language support');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.multiLanguageSupportLabel(), 'visible');
+        });
+
+        it('In \'Multi-language support\' section, \'This item is also available in other languages\' label with checkbox should be displayed and \'This item is also available in other languages\' checkbox should be unchecked by default', () => {
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.languagesCheckbox(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.languagesLabel(), 'This item is also available in other languages');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.languagesLabel(), 'visible');
+            itemPreviewSettingsPage.steps.verifyThisItemIsAlsoAvailableInOtherLanguagesCheckboxIsUnchecked();
+        });
+
+        it('User should be able to check the \'This item is also available in other languages\' checkbox', () => {
+            itemPreviewSettingsPage.steps.checkThisItemIsAlsoAvailableInOtherLanguagesCheckbox();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/553260?next_issue_id=553252
+        it('CSS of \'Multi-language support\' label, \'This item is also available in other languages\' label and checked \'This item is also available in other languages\' checkbox', { tags: 'css' }, () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.multiLanguageSupportLabel(), {
+                'color': css.color.panelLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.languagesLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.languagesCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of checked \'This item is also available in other languages\' checkbox', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(itemPreviewSettingsPage.languagesCheckbox());
+        });
+
+        it('User should be able to uncheck the \'This item is also available in other languages\' checkbox', () => {
+            itemPreviewSettingsPage.steps.uncheckThisItemIsAlsoAvailableInOtherLanguagesCheckbox();
+        });
+
+        it('CSS of unchecked \'This item is also available in other languages\' checkbox', { tags: 'css' }, () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.languagesCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+    });
+
+    describe('Setting tab: Accessibility section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Item preview settings tab');
+            itemPreviewSettingsPage.steps.navigateToCreateItemPage();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+        });
+
+        it('When user has navigated to the settings tab, \'Accessibility\' label should be displayed', () => {
+            utilities.verifyInnerText(itemPreviewSettingsPage.accessibilityLabel(), 'Accessibility');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.accessibilityLabel(), 'visible');
+        });
+
+        it('In \'Accessibility\' section, \'Flag this item as non accessible\' label with checkbox should be displayed and \'Flag this item as non accessible\' checkbox should be unchecked by default', () => {
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.flagNonAccessibleCheckbox(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.flagNonAccessibleLabel(), 'Flag this item as non accessible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.flagNonAccessibleLabel(), 'visible');
+            itemPreviewSettingsPage.steps.verifyFlagThisItemNonAccessibleCheckboxIsUnchecked();
+        });
+
+        it('When user checks \'Flag this item as non accessible\' checkbox, then \'Alternate accessible item id\' label and input field should be displayed', () => {
+            itemPreviewSettingsPage.steps.checkFlagThisItemNonAccessibleCheckbox();
+            utilities.verifyInnerText(itemPreviewSettingsPage.alternateAccessibleIdLabel(), 'Alternate accessible item ID');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.alternateAccessibleIdLabel(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.alternateAccessibleIdInputField(), 'exist');
+        });
+
+        it('User should be able to add text inside \'Alternate accessible item id\' input field', () => {
+            itemPreviewSettingsPage.steps.verifyAlternateAccessibleIdInputFieldText('This text');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/553260?next_issue_id=553252
+        it('CSS of \'Accessibility\' label, \'Flag this item as non accessible\' label and checked \'Flag this item as non accessible\' checkbox', { tags: 'css' }, () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.accessibilityLabel(), {
+                'color': css.color.panelLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.flagNonAccessibleLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(itemPreviewSettingsPage.flagNonAccessibleCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of checked \'Flag this item as non accessible\' checkbox and \'Alternate accessible item id\' input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(itemPreviewSettingsPage.flagNonAccessibleCheckbox());
+        });
+
+        it('When user unchecks \'Flag this item as non accessible\' then \'Alternate accessible item id\' label and input field should disappear ', () => {
+            itemPreviewSettingsPage.steps.uncheckFlagThisItemNonAccessibleCheckbox();
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.alternateAccessibleIdLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.alternateAccessibleIdInputField(), 'notExist');
+        });
+
+        it('CSS of unchecked \'Flag this item as non accessible\' checkbox', { tags: 'css' }, () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.languagesCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+    });
+
+    describe('Setting tab: Miscellaneous section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Item preview settings tab');
+            itemPreviewSettingsPage.steps.navigateToCreateItemPage();
+            itemPreviewSettingsPage.steps.clickOnSettingsButton();
+        });
+
+        it('When user has navigated to the settings tab, \'Miscellaneous\' label should be displayed', () => {
+            utilities.verifyInnerText(itemPreviewSettingsPage.miscellaneousLabel(), 'Miscellaneous');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.miscellaneousLabel(), 'visible');
+        });
+
+        it('In \'Miscellaneous\' section, \'Disable cut, copy and paste for all questions\',  \'Randomize questions order\' and  \'Round negative scores to zero\' labels and their checkboxes should be displayed', () => {
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.disableCutCopyAndPasteCheckbox(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.disableCutCopyAndPasteLabel(), 'Disable cut, copy and paste for all questions');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.disableCutCopyAndPasteLabel(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.randomizeQuestionsOrderCheckbox(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.randomizeQuestionsOrderLabel(), 'Randomize questions order');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.randomizeQuestionsOrderLabel(), 'visible');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.roundNegativeScoresToZeroCheckbox(), 'exist');
+            utilities.verifyInnerText(itemPreviewSettingsPage.roundNegativeScoresToZeroLabel(), 'Round negative scores to zero');
+            utilities.verifyElementVisibilityState(itemPreviewSettingsPage.roundNegativeScoresToZeroLabel(), 'visible');
+        });
+
+        it('\'Disable cut, copy and paste for all questions\', \'Randomize questions order\' and \'Round negative scores to zero\' checkboxes should be unchecked by default', () => {
+            itemPreviewSettingsPage.steps.verifyDisableCutCopyAndPasteCheckboxIsUnchecked();
+            itemPreviewSettingsPage.steps.verifyRandomizeQuestionsOrderCheckboxIsUnchecked();
+            itemPreviewSettingsPage.steps.verifyRoundNegativeScoresCheckboxIsUnchecked();
+        });
+
+        it('User should be able to check \'Disable cut, copy and paste for all questions\', \'Randomize questions order\' and \'Round negative scores to zero\' checkboxes', () => {
+            itemPreviewSettingsPage.steps.checkDisableCutCopyAndPasteCheckbox();
+            itemPreviewSettingsPage.steps.checkRandomizeQuestionsOrderCheckbox();
+            itemPreviewSettingsPage.steps.checkRoundNegativeScoresCheckbox();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/553260?next_issue_id=553252
+        it('CSS of \'Miscellaneous\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(itemPreviewSettingsPage.miscellaneousLabel(), {
+                'color': css.color.panelLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            miscellaneousSectionLabelsText.forEach((labels) => {
+                utilities.verifyCSS(labels(), {
+                    'color': css.color.labelText,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+            miscellaneousSectionCheckboxes.forEach((checkbox) => {
+                utilities.verifyCSS(checkbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                    'fill': css.color.activeButtons
+                });
+            });
+        });
+
+        it('Accessibility of checked \'Disable cut, copy and paste for all questions\', \'Randomize questions order\' and \'Round negative scores to zero\' checkboxes', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(itemPreviewSettingsPage.disableCutCopyAndPasteCheckbox().parents('[class*="SettingsTabstyles__MiscellaneousWrapper"]'));
+        });
+
+        it('User should be able to uncheck \'Disable cut, copy and paste for all questions\', \'Randomize questions order\' and \'Round negative scores to zero\' checkboxes', () => {
+            itemPreviewSettingsPage.steps.uncheckDisableCutCopyAndPasteCheckbox();
+            itemPreviewSettingsPage.steps.uncheckRandomizeQuestionsOrderCheckbox();
+            itemPreviewSettingsPage.steps.uncheckRoundNegativeScoresCheckbox();
+        });
+
+        it('CSS of unchecked \'Disable cut, copy and paste for all questions\', \'Randomize questions order\' and \'Round negative scores to zero\' checkboxes', { tags: 'css' }, () => {
+            miscellaneousSectionCheckboxes.forEach((checkbox) => {
+                utilities.verifyCSS(checkbox().parent().find('svg'), {
+                    'fill': css.color.uncheckedCheckbox
+                });
+            });
+        });
+    });
+});