itemengine-cypress-automation 1.0.165-migrationScripts-e27d6f2.0 → 1.0.166

package/cypress/pages/feedbackScalePage.js

@@ -1,56 +1,80 @@
-import constants from "../fixtures/constants";
-import { additionalSettingsPanel, ckEditorToolbar, colorPopupComponent, commonComponents, createQuestionBasePage, questionInstructionsComponent } from "./components"
-import { dialogBoxBase } from "./dialogBoxBase";
+import { additionalSettingsPanel, commonComponents, createQuestionBasePage, questionInstructionsComponent, autoScoredScoringPreviewTab } from "./components"
 import utilities from "../support/helpers/utilities";
-import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
 const css = Cypress.env('css');
 
 const selectors = {
     ...questionInstructionsComponent,
     ...commonComponents,
-    ...ckEditorToolbar,
     ...additionalSettingsPanel,
-    ...dialogBoxBase,
-    ...createQuestionBasePage,
-    feedbackLayoutStyleLabel: () => cy.get('#feedback-layout-style-dropdown-label'),
-    feedbackLayoutStyleDropdown: () => cy.get('#feedback-layout-style-select'),
-    feedbackLayoutStyleDropdownOptions: (ariaLabel = null) => {
+    specifyFeedbackScaleOptionsLabel: () => cy.get('[class*="FeedbackScalestyles__SpecifyFeedbackLabel"]'),
+    feedbackScaleStyleDropdownLabel: () => cy.get('#feedback-scale-style-dropdown-label'),
+    feedbackScaleStyleDropdown: () => cy.get('#feedback-scale-style-select'),
+    feedbackScaleStyleDropdownListOptions: (ariaLabel = null) => {
         if (ariaLabel) {
-            return cy.get(`[aria-labelledby*="feedback-layout-style-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
+            return cy.get(`[aria-labelledby*="feedback-scale-style-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
         } else {
-            return cy.get('[aria-labelledby*="feedback-layout-style-dropdown-label"] [role="option"]')
+            return cy.get('[aria-labelledby*="feedback-scale-style-dropdown-label"] [role="option"]')
+        }
+    },
+    optionsStepperInputFieldLabel: () => cy.get('.input-stepper-label'),
+    optionsStepperInputField: () => cy.get('.input-stepper-textfield'),
+    optionsStepperDecreaseButton: () => cy.get('.input-stepper-button[aria-label="Decrease count"]'),
+    optionsStepperIncreaseButton: () => cy.get('.input-stepper-button[aria-label="Increase count"]'),
+    defaultTextDropdownLabel: () => cy.get('#Default-text-dropdown-label'),
+    defaultTextDropdown: () => cy.get('#Default-text-select'),
+    defaultTextDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Default-text-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Default-text-dropdown-label"] [role="option"]')
         }
     },
-    feedbackScaleLabel: () => cy.get('.feedback-scale-panel-heading'),
     optionAccordion: () => cy.get('.feedback-scale-panel .ngie-accordion-summary'),
+    optionAccordionWrapper: () => cy.get('.feedback-scale-panel'),
     optionAccordionLabel: () => cy.get('.feedback-scale-panel-label'),
+    optionAccordionPointsLabel: () => cy.get('.feedback-scale-points'),
     deleteOptionAccordionButton: () => cy.get('[aria-label*="Delete Option"]'),
-    labelsLabel: () => cy.get('[class*="InlineTextFieldWithDebouncestyles__PropertyLabel"]'),
-    labelsInputField: () => cy.get('input[aria-label="Label"]'),
-    colorLabel: () => cy.get('[class*="FeedbackScalePanelstyle__ColorPickerWrapper"][class*="text-label"]'),
-    tooltipLabel: () => cy.get('[class*="FeedbackScalePanelstyle__FeedbackScaleOptionWrapper"] [class*="InlineRichTextComponentstyles__LabelWarpper"]').eq(0),
-    tooltipInputField: () => cy.get('[role="textbox"][aria-label*="tooltip"]'),
-    descriptionLabel: () => cy.get('[class*="FeedbackScalePanelstyle__FeedbackScaleOptionWrapper"] [class*="InlineRichTextComponentstyles__LabelWarpper"]').eq(1),
-    descriptionInputField: () => cy.get('[role="textbox"][aria-label*="description"]'),
+    optionTextInputField: () => cy.get('input[aria-label="Option text"]'),
+    legendTextLabel: () => cy.get('.legend-wrapper [class*="LabelWrapper"]'),
+    legendTextInputField: () => cy.get('.legend-wrapper input'),
+    optionTextLabel: () => cy.get('[class*="FeedbackScaleOptionWrapper"] [class*="LabelWrapper"]'),
     addOptionButton: () => cy.get('.feedback-scale-add-option button'),
-    optionAccordionPanel: () => cy.get('.feedback-scale-panel'),
-    //Preview tab
+    colorSectionLabel: () => cy.get('[class*="FeedbackScalestyles__ColorLabelWrapper"]'),
+    defaultColorSchemeRadioButton: () => cy.get('[type="radio"][aria-label="Default color scheme"]'),
+    defaultColorSchemeRadioButtonLabel: () => cy.get('label[aria-label="Default color scheme"]'),
+    customColorsRadioButton: () => cy.get('[type="radio"][aria-label="Custom colors"]'),
+    customColorsRadioButtonLabel: () => cy.get('label[aria-label="Custom colors"]'),
+    colorLabel: () => cy.get('[class*="FeedbackScalestyles__RightHeader"]'),
+    optionLabel: () => cy.get('[class*="FeedbackScalestyles__LeftHeader"]'),
+    colorItemLabel: () => cy.get('.feedback-left-wrapper'),
+    colorSectionListItem: () => cy.get('.feedback-color-row'),
     feedbackButton: () => cy.get('.feedback-scale-label-btn'),
-    previewTabColorBlock: () => cy.get('[class*="ColorDiv"]'),
-    moreInfoOptionsList: () => cy.get('.options-list-item'),
-    moreInfoButton: () => cy.get('.feedback-layout-accordion .ngie-accordion-summary'),
-    moreInfoFeedbackLabel: () => cy.get('[class*="MoreInfostyles__LabelDiv"]'),
-    moreInfoTooltipText: () => cy.get('.tooltip-text'),
-    moreInfoDescriptionText: () => cy.get('.description-text'),
+    feedbackButtonLabelText: () => cy.get('[class*="FeedbackScalestyles__LabelText"]'),
+    feedbackButtonNumberText: () => cy.get('[class*="FeedbackScalestyles__NumberBox"]'),
+    colorPickerBlock: () => cy.get('.color-picker-block'),
+    feedbackButtonColorBlock: () => cy.get('[class*="FeedbackScalestyles__ColorBlock"]'),
+    legendTextOptionsList: () => cy.get('.more-info-wrapper .options-list-item'),
+    legendAccordion: () => cy.get('.more-info-wrapper .ngie-accordion-summary'),
+    legendTextFeedbackButtonLabel: () => cy.get('[class*="MoreInfostyles__OptionText"]'),
+    legendTextColorBlock: () => cy.get('[class*="ColorDiv"]'),
+    legendTextPreviewTab: () => cy.get('[class*="MoreInfostyles__LegendText"]'),
+    legendTextNumberBlock: () => cy.get('[class*="MoreInfostyles__NumberBox"]'),
+    legendTextStarIcon: () => cy.get('[class*="MoreInfostyles__StarWrapper"] svg'),
+    legendTextHeartIcon: () => cy.get('[class*="MoreInfostyles__StarWrapper"] svg'),
+    editColorButton: () => cy.get('.icon-pencil'),
+    thumbsUpFeedbackButton: () => cy.get('[role="button"][aria-label="Thumbs-Up"]'),
+    thumbsDownFeedbackButton: () => cy.get('[role="button"][aria-label="Thumbs-Down"]'),
+    thumbsUpButtonIcon: () => cy.get('[data-name="Thumbs up button"]'),
+    thumbsDownButtonIcon: () => cy.get('[data-name="Thumbs down button"]'),
+    feedbackScaleUILabel: () => cy.get('.feedback-scale-ui .options-label'),
+    starsFeedbackScaleUIButton: () => cy.get('[data-ngie-testid="stars-toggle-button"]'),
+    heartsFeedbackScaleUIButton: () => cy.get('[data-ngie-testid="hearts-toggle-button"]'),
     feedbackStarButton: () => cy.get('.feedback-scale-label-star-btn'),
-    moreInfoStarIcon: () => cy.get('[class*="MoreInfostyles__IconWrapper"] svg'),
-    studentResponseAreaAndLayoutLabel: () => cy.get('[class*="AdditionalOptionstyles__LayoutText"]'),
-    displayAdditionalInformationCheckboxLabel: () => cy.get('[data-ngie-testid="display-additional-information-checkbox"] .MuiFormControlLabel-label'),
-    displayAdditionalInformationCheckbox: () => cy.get('[data-ngie-testid="display-additional-information-checkbox"] input'),
-    allowStudentsToAddCommentCheckboxLabel: () => cy.get('[data-ngie-testid="allow-students-to-add-comment-checkbox"] .MuiFormControlLabel-label'),
+    feedbackHeartButton: () => cy.get('.feedback-scale-label-star-btn'),
+    editColorButton: () => cy.get('.icon-pencil'),
     allowStudentsToAddCommentCheckbox: () => cy.get('[data-ngie-testid="allow-students-to-add-comment-checkbox"] input'),
-    describeYourExperienceLabel: () => cy.get('.describe-your-experience .inline-text-property-label'),
-    describeYourExperienceInputField: () => cy.get('.describe-your-experience input')
+    commentLabel: () => cy.get('.describe-your-experience .inline-text-property-label'),
+    commentInputField: () => cy.get('input[aria-label="Comment"]'),
 }
 
 const steps = {
@@ -58,72 +82,42 @@ const steps = {
     ...questionInstructionsComponent.steps,
     ...commonComponents.steps,
     ...additionalSettingsPanel.steps,
-    ...ckEditorToolbar.steps,
-    ...additionalSettingsPanel.steps,
-    ...dialogBoxBase.steps,
-    clickOnFeedbackStyleLayoutDropdown: () => {
-        feedbackScalePage.feedbackLayoutStyleDropdown()
-            .click();
-    },
-
+    ...questionInstructionsComponent.steps,
+    ...autoScoredScoringPreviewTab.steps,
     /**
-     * @param {string} dropdownOptionName option from the feedback layout style dropdown. Should be one of 'Button' or 'Star'
-     * @description this function selects an option from the feedback layout style dropdown
+     * Adds legend text to a specific option in the Legend Text accordion.
+     * @param {number} optionIndex - The index of the option in the Legend Text accordion.
+     * @param {string} text - The legend text to be added.
      */
-    selectFeedbackStyleLayoutDropdown: (dropdownOptionName) => {
-        feedbackScalePage.feedbackLayoutStyleDropdownOptions(dropdownOptionName)
-            .click();
+    addLegendText: (optionIndex, text) => {
+        utilities.getNthElement(feedbackScalePage.legendTextInputField(), optionIndex)
+            .type(text)
+            .blur();
     },
 
-    /**
-     * @param {string[]} dropdownOptions array of options of the feedback layout style dropdown
-     * @description this function verifies the list options of the feedback layout style dropdown
-     */
-    verifyFeedbackStyleLayoutOptions: (dropdownOptions) => {
-        dropdownOptions.forEach((option, count) => {
-            feedbackScalePage.feedbackLayoutStyleDropdownOptions()
-                .eq(count)
-                .verifyInnerText(option);
-        });
+    clearLegendTextInputField: (optionIndex) => {
+        utilities.getNthElement(feedbackScalePage.legendTextInputField(), optionIndex)
+            .clear();
     },
 
     /**
-     * @param {number} optionAccordionIndex index of the option accordion
-     * @description this function verifies if an option accordion is in expanded state
+     * @param {number} buttonIndex index of the feedback button
+     * @param {string} buttonText text content of the feedback button
+     * @description this function verifies the visibility and text content of a feedback button in the preview tab
      */
-    verifyOptionAccordionInExpandedState: (optionAccordionIndex) => {
-        feedbackScalePage.optionAccordion()
-            .eq(optionAccordionIndex)
-            .should('have.attr', 'aria-expanded', 'true');
+    verifyFeedbackButtonInPreviewTab: (buttonIndex, buttonText) => {
+        utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex), buttonText);
+        utilities.verifyElementVisibilityState(utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex), 'visible');
     },
 
     /**
-     * @param {number} optionAccordionIndex index of the option accordion
-     * @description this function verifies if an option accordion is in collapsed state
+     * Verifies the color block of a feedback button in the preview tab.
+     * @param {number} buttonIndex - The index of the feedback button.
+     * @param {string} colorBlock - The expected background color of the color block.
      */
-    verifyOptionAccordionInCollapsedState: (optionAccordionIndex) => {
-        feedbackScalePage.optionAccordion()
-            .eq(optionAccordionIndex)
-            .should('have.attr', 'aria-expanded', 'false');
-    },
-
-    /**
-     * @param {number} optionAccordionIndex index of the option accordion
-     * @param {string} optionAccordionLabelText label of the option accordion. for example: Option 1
-     * @description this function verifies the contents that appear on an option accordion
-     */
-    verifyOptionAccordionPanelContents: (optionAccordionIndex, optionAccordionLabelText) => {
-        feedbackScalePage.optionAccordion()
-            .eq(optionAccordionIndex)
-            .within(($element) => {
-                feedbackScalePage.optionAccordionLabel()
-                    .verifyInnerText(optionAccordionLabelText);
-                feedbackScalePage.deleteOptionAccordionButton()
-                    .should('be.visible');
-                cy.wrap($element)
-                    .find('svg')
-                    .should('be.visible');
-            });
+    verifyFeedbackButtonColorBlockPreviewTab: (buttonIndex, colorBlock) => {
+        utilities.getNthElement(feedbackScalePage.feedbackButtonColorBlock(), buttonIndex)
+            .should('have.css', 'background-color', colorBlock);
     },
 
     /**
@@ -131,219 +125,176 @@ const steps = {
      * @description this function expands an option accordion
      */
     expandOptionAccordion: (optionAccordionIndex) => {
-        feedbackScalePage.optionAccordion()
-            .eq(optionAccordionIndex)
+        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
             .click()
             .should('have.attr', 'aria-expanded', 'true');
     },
 
-    /**
-     * @param {number} optionAccordionIndex index of the option accordion
-     * @description this function collapses an option accordion
-     */
-    collapseOptionAccordion: (optionAccordionIndex) => {
-        feedbackScalePage.optionAccordion()
-            .eq(optionAccordionIndex)
-            .click()
+    verifyLegendAccordionExpandedState: () => {
+        feedbackScalePage.legendAccordion()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    verifyLegendAccordionCollapsedState: () => {
+        feedbackScalePage.legendAccordion()
             .should('have.attr', 'aria-expanded', 'false');
     },
 
     /**
-     * @param {number} optionAccordionIndex index of the option accordion
-     * @param {string[]} contents array of labels, color, tooltip and description of an option accordion
-     * @description this function verifies the contents in the input fields of an option accordion
-     * @example verifyOptionAccordionInputFieldContents(0, {'labels': 'Comfortable', 'color': 'rgba(9, 179, 33, 1)', 'tooltip': 'I\'m feeling confident.', 'description': 'I am comfortable with the learning target.'})
+     * @param {number} buttonIndex index of the feedback button
+     * @description this function is used to click on a feedback button
      */
-    verifyOptionAccordionInputFieldContents: (optionAccordionIndex, contents) => {
-        feedbackScalePage.optionAccordionPanel()
-            .eq(optionAccordionIndex)
-            .within(() => {
-                feedbackScalePage.labelsInputField()
-                    .should('have.value', contents['labels']);
-                utilities.verifyCSS(colorPopupComponent.colorBlock(), {
-                    'background-color': contents['color']
-                });
-                feedbackScalePage.tooltipInputField()
-                    .should('have.text', contents['tooltip']);
-                feedbackScalePage.descriptionInputField()
-                    .should('have.text', contents['description']);
-            });
+    clickOnFeedbackButton: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex)
+            .click();
     },
 
     /**
      * @param {number} buttonIndex index of the feedback button
-     * @param {string} buttonText text content of the feedback button
-     * @description this function verifies the visibility and text content of a feedback button in the preview tab
+     * @description this function verifies the selected state of a feedback button
      */
-    verifyFeedbackButtonInPreviewTab: (buttonIndex, buttonText) => {
-        feedbackScalePage.feedbackButton()
-            .eq(buttonIndex)
-            .should('have.text', buttonText)
-            .and('be.visible');
+    verifyFeedbackButtonSelectedState: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex)
+            .should('have.class', 'selected-button');
     },
 
     /**
      * @param {number} buttonIndex index of the feedback button
-     * @param {string} tooltipText text that appears on tooltip of the feedback button
-     * @description this function verifies the tooltip text of a feedback button in the preview tab
-     */
-    verifyTooltipFeedbackButton: (buttonIndex, tooltipText) => {
-        feedbackScalePage.feedbackButton()
-            .eq(buttonIndex)
-            .trigger('mouseover')
-        commonComponents.tooltipText()
-            .should('have.text', tooltipText)
-            .and('be.visible')
-            .within(() => {
-                feedbackScalePage.previewTabColorBlock()
-                    .should('be.visible');
-            });
-        feedbackScalePage.feedbackButton()
-            .eq(buttonIndex)
-            .trigger('mouseout')
-        commonComponents.tooltipText()
-            .should('not.exist')
-    },
-
-    verifyMoreInfoAccordionInCollapsedState: () => {
-        feedbackScalePage.moreInfoButton()
-            .should('have.attr', 'aria-expanded', 'false');
-    },
-
-    verifyMoreInfoAccordionInExpandedState: () => {
-        feedbackScalePage.moreInfoButton()
-            .should('have.attr', 'aria-expanded', 'true');
+     * @description this function verifies the unselected state of a feedback button
+     */
+    verifyFeedbackButtonUnselectedState: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex)
+            .should('not.have.class', 'selected-button');
     },
 
-    expandMoreInfoAccordion: () => {
-        feedbackScalePage.moreInfoButton()
-            .click()
-            .should('have.attr', 'aria-expanded', 'true');
+    /**
+     * Verifies the disabled state of a feedback button.
+     * @param {number} buttonIndex - The index of the feedback button.
+     */
+    verifyFeedbackButtonDisabledState: (buttonIndex) => {
+        utilities.verifyElementDisabledClass(utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex));
     },
 
     /**
-     * @param {number} itemIndex index of the more info list of a feedback button
-     * @param {string[]} contents array of labels, tooltip and description of the more info list of a feedback button
-     * @description this function verifies the label, tooltip and description texts of the more info accordion option list for a feedback button
+     * Verifies the color block, feedback button label, and legend text in the Legend Text accordion.
+     * @param {number} itemIndex - The index of the item in the Legend Text accordion.
+     * @param {Object} options - An object containing properties for colorBlock, buttonText, and legendText.
+     * @param {string} options.colorBlock - The expected background color of the color block.
+     * @param {string} options.buttonText - The expected text of the feedback button label.
+     * @param {string} options.legendText - The expected text of the legend text.
      */
-    verifyMoreInfoAccordionOptionsListLabelTooltipAndDescription: (itemIndex, contentsArray) => {
-        feedbackScalePage.moreInfoOptionsList()
-            .eq(itemIndex)
+    verifyColorBlockFeedbackButtonLabelLegendTextInLegendAccordion: (itemIndex, { colorBlock, buttonText, legendText }) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), itemIndex)
             .within(() => {
-                feedbackScalePage.moreInfoFeedbackLabel()
-                    .should('have.text', contentsArray[0]);
-                feedbackScalePage.moreInfoTooltipText()
-                    .should('have.text', contentsArray[1]);
-                feedbackScalePage.moreInfoDescriptionText()
-                    .should('have.text', contentsArray[2]);
+                feedbackScalePage.legendTextColorBlock()
+                    .should('have.css', 'background-color', colorBlock);
+                utilities.verifyInnerText(feedbackScalePage.legendTextFeedbackButtonLabel(), `${buttonText}:`);
+                utilities.verifyInnerText(feedbackScalePage.legendTextPreviewTab(), legendText);
             });
     },
 
+    expandFeedbackScaleStyleDropdown: () => {
+        feedbackScalePage.feedbackScaleStyleDropdown()
+            .click();
+    },
+
     /**
-     * @param {number} buttonIndex index of the feedback button
-     * @description this function is used to click on a feedback button
+     * @param {("Text" | "Numbers" | "Thumbs"| "Stars / Hearts")} dropdownOption aria-label of dropdown options
+     * @description this function selects dropdown option from feedback scale style dropdown
      */
-    clickOnFeedbackButton: (buttonIndex) => {
-        feedbackScalePage.feedbackButton()
-            .eq(buttonIndex)
+    selectOptionFromFeedbackScaleStyleDropdown: (dropdownOption) => {
+        feedbackScalePage.feedbackScaleStyleDropdownListOptions(dropdownOption)
             .click();
     },
 
     /**
-     * @param {number} buttonIndex index of the feedback button
-     * @description this function verifies the selected state of a feedback button
+     * Verifies the count displayed in the options stepper input field.
+     * @param {number} value - The expected value to be displayed in the input field.
      */
-    verifyFeedbackButtonSelectedState: (buttonIndex) => {
-        feedbackScalePage.feedbackButton()
-            .eq(buttonIndex)
-            .should('have.class', 'selected-button');
+    verifyCountInOptionsStepperInputField: (value) => {
+        utilities.verifyInputFieldValue(feedbackScalePage.optionsStepperInputField(), value)
     },
 
     /**
-     * @param {number} buttonIndex index of the feedback button
-     * @description this function verifies the unselected state of a feedback button
+    * @description Decrease option input stepper count
+    * @param {number} increaseValue The value by which the option input stepper count is to be decreased
+    */
+    decreaseOptionsInputStepperCount: (increaseValue) => {
+        for (let index = 0; index < increaseValue; index++) {
+            feedbackScalePage.optionsStepperDecreaseButton()
+                .click();
+        };
+    },
+
+    /**
+     * @description Increase option input stepper count
+     * @param {number} increaseValue The value by which the option input stepper count is to be increased
      */
-    verifyFeedbackButtonUnselectedState: (buttonIndex) => {
-        feedbackScalePage.feedbackButton()
-            .eq(buttonIndex)
-            .should('not.have.class', 'selected-button');
+    increaseOptionsInputStepperCount: (increaseValue) => {
+        for (let index = 0; index < increaseValue; index++) {
+            feedbackScalePage.optionsStepperIncreaseButton()
+                .click();
+        };
     },
 
     /**
-     * @param {number} itemIndex index of the more info list of a feedback button/star
-     * @description this function verifies the highlighted state of the more info list of a feedback button/star
+     * Verifies the properties of an options accordion.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
+     * @param {Object} properties - An object containing properties for the options accordion.
+     * @param {string} properties.optionLabel - The expected label of the options accordion.
+     * @param {number} properties.Points - The expected points associated with the options accordion.
      */
-    verifyMoreInfoOptionListHighlightedState: (itemIndex) => {
-        feedbackScalePage.moreInfoOptionsList()
-            .eq(itemIndex)
-            .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`);
+    verifyOptionsAccordionProperties: (optionAccordionIndex, { optionLabel, Points }) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
+            .within(() => {
+                utilities.verifyInnerText(feedbackScalePage.optionAccordionLabel(), optionLabel);
+                utilities.verifyInnerText(feedbackScalePage.optionAccordionPointsLabel(), `Points:\n${Points}`);
+                utilities.verifyElementVisibilityState(feedbackScalePage.deleteOptionAccordionButton(), 'visible');
+            });
     },
 
     /**
-     * @param {number} itemIndex index of the more info list of a feedback button/star
-     * @description this function verifies that the more info list of a feedback button/star is not in the highlighted state
+     * Verifies the collapsed state of an options accordion.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
      */
-    verifyMoreInfoOptionListHighlightedStateNotExists: (itemIndex) => {
-        feedbackScalePage.moreInfoOptionsList()
-            .eq(itemIndex)
-            .should('not.have.css', 'border', `1px solid ${css.color.activeComponentBorder}`);
+    verifyOptionAccordionCollapsedState: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
+            .should('have.attr', 'aria-expanded', 'false');
     },
 
     /**
-     * @param {number} buttonIndex index of the feedback star button
-     * @param {string} tooltipText text that appears on tooltip of the feedback button
-     * @description this function verifies the tooltip text of a feedback star button in the preview tab
+     * Verifies the expanded state of an options accordion.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
      */
-    verifyTooltipFeedbackStarButton: (buttonIndex, tooltipText) => {
-        feedbackScalePage.feedbackStarButton()
-            .eq(buttonIndex)
-            .trigger('mouseover')
-        commonComponents.tooltipText()
-            .should('have.text', tooltipText)
-            .and('be.visible')
-            .within(() => {
-                utilities.verifyElementVisibilityState(feedbackScalePage.previewTabColorBlock(), 'notExist');
-            });
-        feedbackScalePage.feedbackStarButton()
-            .eq(buttonIndex)
-            .trigger('mouseout')
-        utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+    verifyOptionAccordionExpandedState: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
+            .should('have.attr', 'aria-expanded', 'true');
     },
 
     /**
-     * @param {number} buttonIndex index of the feedback star button
-     * @description this function is used to click on a feedback star button
+     * Verifies the placeholder of the legend text input field in an options accordion.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
      */
-    clickOnFeedbackStarButton: (buttonIndex) => {
-        feedbackScalePage.feedbackStarButton()
-            .eq(buttonIndex)
-            .click();
+    verifyLegendTextInputFieldPlaceholder: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.legendTextInputField(), optionAccordionIndex)
+            .should('have.attr', 'placeholder', 'Enter legend text');
     },
 
     /**
-     * @param {number} buttonIndex index of the feedback button
-     * @description this function verifies the selected state of a feedback star button
-     */
-    verifyFeedbackStarButtonSelectedState: (buttonIndexArray, color) => {
-        buttonIndexArray.forEach((button) => {
-            feedbackScalePage.feedbackStarButton()
-                .eq(button)
-                .find('svg')
-                .should('have.css', 'fill', color);
-        });
+     * Verifies that the placeholder of the legend text input field in an options accordion does not exist.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
+     */
+    verifyLegendTextInputFieldPlaceholderNotExists: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.legendTextInputField(), optionAccordionIndex)
+            .should('not.have.attr', 'placeholder');
     },
 
     /**
-     * @param {number} buttonIndex index of the feedback button
-     * @description this function verifies the unselected state of a feedback star button
-     */
-    verifyFeedbackStarButtonUnselectedState: (buttonIndexArray) => {
-        buttonIndexArray.forEach((button) => {
-            feedbackScalePage.feedbackStarButton()
-                .eq(button)
-                .find('svg')
-                .should('have.css', 'fill', css.color.defaultBackground);
-        });
+     * Verifies the count of options accordions.
+     * @param {number} count - The expected count of options accordions.
+     */
+    verifyOptionsAccordionCount: (count) => {
+        utilities.verifyElementCount(feedbackScalePage.optionAccordion(), count);
     },
 
     addOption: () => {
@@ -356,339 +307,530 @@ const steps = {
      * @description this function is used to delete an option accordion
      */
     deleteOptionAccordion: (optionAccordionIndex) => {
-        feedbackScalePage.deleteOptionAccordionButton()
-            .eq(optionAccordionIndex)
+        utilities.getNthElement(feedbackScalePage.deleteOptionAccordionButton(), optionAccordionIndex)
             .click();
     },
 
     /**
-     * @param {number} optionAccordionIndex index of the option accordion
-     * @description this function is used to focus in a tooltip input field of an option accordion
+     * Verifies the color of a color picker block.
+     * 
+     * @param {number} blockIndex - The index of the color picker block.
+     * @param {string} color - The expected background color of the color picker block.
+     */
+    verifyColorPickerBlockColor: (blockIndex, color) => {
+        utilities.verifyCSS(utilities.getNthElement(feedbackScalePage.colorPickerBlock(), blockIndex), {
+            'background-color': color
+        });
+    },
+
+    /**
+     * Verifies the number block, feedback button label, and legend text in the Legend Text accordion.
+     * 
+     * @param {number} buttonIndex - The index of the button in the Legend Text accordion.
+     * @param {string} legendText - The expected text of the legend text.
      */
-    focusInTooltipInputField: (optionAccordionIndex) => {
-        feedbackScalePage.optionAccordionPanel()
-            .eq(optionAccordionIndex)
+    verifyNumberBlockFeedbackButtonLabelLegendTextInLegendAccordion: (buttonIndex, legendText) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), buttonIndex)
             .within(() => {
-                feedbackScalePage.tooltipInputField()
-                    .focus();
+                utilities.verifyInnerText(feedbackScalePage.legendTextNumberBlock(), `${buttonIndex + 1}`);
+                utilities.verifyInnerText(feedbackScalePage.legendTextPreviewTab(), legendText);
             });
     },
 
     /**
-     * @param {number} optionAccordionIndex index of the option accordion
-     * @description this function is used to focus in a description input field of an option accordion
+     * Clicks on the edit color button.
+     * @param {number} buttonIndex - The index of the edit color button.
+     */
+    editColor: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.editColorButton(), buttonIndex)
+            .click();
+    },
+
+    /**
+     * Verifies the selected state color of a feedback button.
+     * @param {number} buttonIndex - The index of the feedback button.
+     * @param {string} colorBlock - The expected background color of the feedback button.
      */
-    focusInDescriptionInputField: (optionAccordionIndex) => {
-        feedbackScalePage.optionAccordionPanel()
-            .eq(optionAccordionIndex)
+    verifyFeedbackButtonSelectedStateColor: (buttonIndex, colorBlock) => {
+        utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex)
+            .should('have.css', 'background-color', colorBlock);
+    },
+
+    /**
+     * Verifies the number blocks in the Legend Text accordion.
+     * @param {number} itemIndex - The index of the item in the Legend Text accordion.
+     */
+    verifyNumberBlocksInLegendAccordion: (itemIndex) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), itemIndex)
             .within(() => {
-                feedbackScalePage.descriptionInputField()
-                    .focus();
+                utilities.verifyInnerText(feedbackScalePage.legendTextNumberBlock(), `${itemIndex + 1}`);
             });
     },
 
     /**
-     * @param {number} optionAccordionIndex index of the option accordion
-     * @description this function is used to add input to the tooltip input field of an option accordion
+     * Verifies the text label of an option in the feedback scale options accordion.
+     * @param {number} optionAccordionIndex - The index of the option accordion.
+     * @returns {void}
      */
-    addInputToTooltipInputField: (optionAccordionIndex, textContent) => {
-        feedbackScalePage.optionAccordionPanel()
-            .eq(optionAccordionIndex)
+    verifyOptionTextLabel: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordionWrapper(), optionAccordionIndex)
             .within(() => {
-                feedbackScalePage.tooltipInputField()
-                    .type(textContent);
+                utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.optionTextLabel(), 0), 'Option text');
             });
     },
 
     /**
-     * @param {number} optionAccordionIndex index of the option accordion
-     * @description this function is used to add input to the labels input field of an option accordion
+     * Verifies the text label of the legend in the feedback scale options accordion.
+     * @param {number} optionAccordionIndex - The index of the option accordion.
+     * @returns {void}
      */
-    addInputToLabelsInputField: (optionAccordionIndex, textContent) => {
-        feedbackScalePage.optionAccordionPanel()
-            .eq(optionAccordionIndex)
+    verifyLegendTextLabel: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordionWrapper(), optionAccordionIndex)
             .within(() => {
-                feedbackScalePage.labelsInputField()
-                    .type(textContent)
-                    .blur();
+                utilities.verifyInnerText(feedbackScalePage.legendTextLabel(), 'Legend text');
             });
     },
 
     /**
-     * @param {number} optionAccordionIndex index of the option accordion
-     * @description this function verifies image in tooltip input field of an option accordion
+     * Verifies the input field text value of an option in the feedback scale options accordion.
+     * @param {number} optionAccordionIndex - The index of the option accordion.
+     * @param {string} text - The expected text value of the input field.
+     * @returns {void}
      */
-    verifyImageAndAltTextInTooltipInputField: (optionAccordionIndex) => {
-        feedbackScalePage.optionAccordionPanel()
-            .eq(optionAccordionIndex)
+    verifyOptionInputFieldText: (optionAccordionIndex, text) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordionWrapper(), optionAccordionIndex)
             .within(() => {
-                feedbackScalePage.tooltipInputField()
-                    .find('img')
-                    .should('have.attr', 'src', constants.foxImageLink)
-                    .and('have.attr', 'alt', constants.foxImageAltText);
+                utilities.verifyInputFieldValue(feedbackScalePage.optionTextInputField(), text)
             });
     },
 
     /**
-     * @param {number} optionAccordionIndex index of the option accordion
-     * @description this function is used to add bold text to the description input field of an option accordion
+     * Verifies the properties of an options accordion for thumbs feedback scale style.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
+     * @param {Object} properties - An object containing properties for the options accordion.
+     * @param {string} properties.optionLabel - The expected label of the options accordion.
+     * @param {number} properties.Points - The expected points associated with the options accordion.
      */
-    addInputToDescriptionInputField: (optionAccordionIndex, textContent) => {
-        feedbackScalePage.optionAccordionPanel()
-            .eq(optionAccordionIndex)
+    verifyOptionsAccordionPropertiesForThumbsScale: (optionAccordionIndex, { optionLabel, Points }) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
             .within(() => {
-                feedbackScalePage.descriptionInputField()
-                    .type(textContent);
+                utilities.verifyInnerText(feedbackScalePage.optionAccordionLabel(), optionLabel);
+                utilities.verifyInnerText(feedbackScalePage.optionAccordionPointsLabel(), `Points:\n${Points}`);
+                utilities.verifyElementVisibilityState(feedbackScalePage.deleteOptionAccordionButton(), 'notExist');
             });
     },
 
     /**
-     * @param {number} optionAccordionIndex index of the option accordion
-     * @description this function is used to clear the tooltip input field of an option accordion
+     * Verifies the thumbs down button in the legend text accordion.
+     * @param {string} buttonText - The expected text of the thumbs down button.
+     * @returns {void}
      */
-    clearTooltipInputField: (optionAccordionIndex) => {
-        feedbackScalePage.optionAccordionPanel()
-            .eq(optionAccordionIndex)
+    verifyThumbsDownButtonInLegendAccordion: (buttonText) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), 0)
             .within(() => {
-                feedbackScalePage.tooltipInputField()
-                    .clear();
+                utilities.verifyElementVisibilityState(feedbackScalePage.thumbsDownButtonIcon(), 'visible')
+                utilities.verifyInnerText(feedbackScalePage.legendTextFeedbackButtonLabel(), buttonText);
             });
     },
 
     /**
-     * @param {number} optionAccordionIndex index of the option accordion
-     * @description this function is used to clear the description input field of an option accordion
+     * Verifies the thumbs up button in the legend text accordion.
+     * @param {string} buttonText - The expected text of the thumbs up button.
+     * @returns {void}
      */
-    clearDescriptionInputField: (optionAccordionIndex) => {
-        feedbackScalePage.optionAccordionPanel()
-            .eq(optionAccordionIndex)
+    verifyThumbsUpButtonInLegendAccordion: (buttonText) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), 1)
             .within(() => {
-                feedbackScalePage.descriptionInputField()
-                    .clear();
+                utilities.verifyElementVisibilityState(feedbackScalePage.thumbsUpButtonIcon(), 'visible')
+                utilities.verifyInnerText(feedbackScalePage.legendTextFeedbackButtonLabel(), buttonText);
             });
     },
 
     /**
-     * @param {number} optionAccordionIndex index of the option accordion
-     * @description this function is used to verify bold text in the description input field of an option accordion
+     * Verifies the legend text in the legend text accordion.
+     * @param {number} buttonIndex - The index of the legend text accordion.
+     * @param {string} legendText - The expected text of the legend text.
+     * @returns {void}
      */
-    verifyBoldTextInDescriptionInputField: (optionAccordionIndex, textContent) => {
-        feedbackScalePage.optionAccordionPanel()
-            .eq(optionAccordionIndex)
+    verifyLegendTextInLegendAccordion: (buttonIndex, legendText) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), buttonIndex)
             .within(() => {
-                feedbackScalePage.descriptionInputField()
-                    .find('strong')
-                    .should('exist')
-                    .should('have.text', textContent);
+                utilities.verifyInnerText(feedbackScalePage.legendTextPreviewTab(), legendText);
             });
     },
 
+    clickOnThumbsUpButton: () => {
+        feedbackScalePage.thumbsUpFeedbackButton()
+            .click();
+    },
+
+    verifyThumbsUpButtonSelectedState: () => {
+        feedbackScalePage.thumbsUpFeedbackButton()
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    clickOnThumbsDownButton: () => {
+        feedbackScalePage.thumbsDownFeedbackButton()
+            .click();
+    },
+
+    verifyThumbsDownButtonSelectedState: () => {
+        feedbackScalePage.thumbsDownFeedbackButton()
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
     /**
-     * @param {number} buttonIndex index of the feedback button
-     * @description this function is used to verify an image in tooltip of a feedback button
+     * Verifies the selected state color of the thumbs up button.
+     * @param {string} color - The expected color of the selected state of the thumbs up button.
+     * @returns {void}
      */
-    verifyTooltipImageFeedbackButton: (buttonIndex) => {
-        feedbackScalePage.feedbackButton()
-            .eq(buttonIndex)
-            .trigger('mouseover');
-        commonComponents.tooltipText()
-            .and('be.visible')
-            .find('img')
-            .should('have.attr', 'src', constants.foxImageLink)
-            .and('have.attr', 'alt', constants.foxImageAltText);
-        feedbackScalePage.feedbackButton()
-            .eq(buttonIndex)
-            .trigger('mouseout')
-        commonComponents.tooltipText()
-            .should('not.exist');
+    verifyThumbsUpButtonSelectedStateColor: (color) => {
+        feedbackScalePage.thumbsUpFeedbackButton().find('circle').eq(1)
+            .should('have.css', 'fill', color);
+    },
+
+    verifyStarsFeedbackScaleUIButtonSelectedState: () => {
+        feedbackScalePage.starsFeedbackScaleUIButton()
+            .should('have.attr', 'aria-pressed', 'true');
     },
 
     /**
-     * @param {number} buttonIndex index of the feedback star button
-     * @param {string} textContent is the text that appears on the tooltip
-     * @description this function is used to verify bold text on a tooltip of a feedback star button
+     * Selects a feedback scale UI button.
+     * @param {('Stars' | 'Hearts')} button - The type of feedback scale UI button to select .
+     * @throws {Error} Thrown if an invalid feedback scale style is provided.
      */
-    verifyTooltipBoldTextFeedbackStarButton: (buttonIndex, textContent) => {
-        feedbackScalePage.feedbackStarButton()
-            .eq(buttonIndex)
-            .trigger('mouseover');
-        commonComponents.tooltipText()
-            .and('be.visible')
-            .find('strong')
-            .should('exist')
-            .should('have.text', textContent);
-        feedbackScalePage.feedbackStarButton()
-            .eq(buttonIndex)
-            .trigger('mouseout')
-        commonComponents.tooltipText()
-            .should('not.exist');
+    selectFeedbackScaleUIButton: (button) => {
+        switch (button) {
+            case 'Stars':
+                feedbackScalePage.starsFeedbackScaleUIButton()
+                    .click()
+                    .should('have.attr', 'aria-pressed', 'true');
+                break;
+            case 'Hearts':
+                feedbackScalePage.heartsFeedbackScaleUIButton()
+                    .click()
+                    .should('have.attr', 'aria-pressed', 'true');
+                break;
+            default:
+                throw new Error('Invalid feedback scale style');
+        }
     },
 
     /**
-     * @param {number} itemIndex index of the more info list item
-     * @description this function is used to verify color block in more info list item for button layout
+     * Verifies the highlighted stars and un-highlighted stars in the legend text item specified by buttonIndex.
+     * @param {number} buttonIndex - The index of the legend text item in the list.
+     * @returns {void}
      */
-    verifyMoreInfoAccordionColorBlock: (itemIndex, color) => {
-        feedbackScalePage.moreInfoOptionsList()
-            .eq(itemIndex)
+    verifyHighlightedStarsInLegendTextListItem: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), buttonIndex)
             .within(() => {
-                feedbackScalePage.previewTabColorBlock()
-                    .should('have.css', 'background-color', color);
+                feedbackScalePage.legendTextStarIcon()
+                    .then(($stars) => {
+                        const totalStars = $stars.length;
+                        for (let index = 0; index < buttonIndex + 1; index++) {
+                            expect($stars.eq(index)).to.have.css('fill', 'rgb(102, 102, 102)');
+                        }
+                        for (let index = buttonIndex + 1; index < totalStars; index++) {
+                            expect($stars.eq(index)).to.have.css('fill', 'none');
+                        }
+                    });
             });
     },
 
     /**
-     * @param {number} itemIndex index of the more info list item
-     * @description this function is used to verify the number of stars in more info list item for star layout
+     * @param {number} buttonIndex index of the feedback star button
+     * @description this function is used to click on a feedback star button
      */
-    verifyMoreInfoAccordionStarIcons: (itemIndex) => {
-        feedbackScalePage.moreInfoOptionsList()
-            .eq(itemIndex)
-            .within(() => {
-                feedbackScalePage.moreInfoStarIcon()
-                    .should('have.length', itemIndex + 1);
-            });
+    clickOnFeedbackStarButton: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.feedbackStarButton(), buttonIndex)
+            .click();
     },
 
     /**
-     * @param {number} itemIndex index of the more info list item
-     * @description this function is used to verify the label, image tooltip and bold description text in more info list item
+     * Verifies the highlighted stars and un-highlighted stars in the feedback scale up to the specified buttonIndex.
+     * @param {number} buttonIndex - The index of the last highlighted star in the feedback scale.
+     * @param {string} fillColor - The expected fill color of the highlighted stars.
+     * @returns {void}
      */
-    verifyMoreInfoOptionListLabelTooltipAndDescriptionForImageTooltipAndBoldDescription: (itemIndex) => {
-        feedbackScalePage.moreInfoOptionsList()
-            .eq(itemIndex)
-            .within(() => {
-                feedbackScalePage.moreInfoFeedbackLabel()
-                    .should('have.text', 'Comfortable');
-                feedbackScalePage.moreInfoTooltipText()
-                    .find('img')
-                    .should('have.attr', 'src', constants.foxImageLink)
-                    .and('have.attr', 'alt', constants.foxImageAltText);
-                feedbackScalePage.moreInfoDescriptionText()
-                    .find('strong')
-                    .should('exist')
-                    .should('have.text', 'I\'m very comfortable with the learning target');
+    verifyHighlightedStarsInFeedbackScale: (buttonIndex, fillColor) => {
+        feedbackScalePage.feedbackStarButton()
+            .then(($stars) => {
+                const totalStars = $stars.length;
+                for (let index = 0; index <= buttonIndex; index++) {
+                    expect($stars.find('g g g').eq(index)).to.have.css('fill', fillColor);
+                }
+                for (let index = buttonIndex + 1; index < totalStars; index++) {
+                    expect($stars.find('g g g').eq(index)).to.have.css('fill', 'none');
+                }
             });
     },
 
     /**
-     * @param {number} itemIndex index of the more info list item
-     * @description this function is used to verify the label, bold tooltip text and image description in more info list item
+     * Verifies the highlighted hearts and un-highlighted hearts in the legend text item specified by buttonIndex.
+     * @param {number} buttonIndex - The index of the legend text item in the list.
+     * @returns {void}
      */
-    verifyMoreInfoOptionListLabelTooltipAndDescriptionForBoldTooltipAndImageDescription: (itemIndex) => {
-        feedbackScalePage.moreInfoOptionsList()
-            .eq(itemIndex)
+    verifyHighlightedHeartsInLegendTextListItem: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), buttonIndex)
             .within(() => {
-                feedbackScalePage.moreInfoFeedbackLabel()
-                    .should('have.text', '100%');
-                feedbackScalePage.moreInfoTooltipText()
-                    .find('strong')
-                    .should('exist')
-                    .should('have.text', 'Keep up the good work!');
-                feedbackScalePage.moreInfoDescriptionText()
-                    .find('img')
-                    .should('have.attr', 'src', constants.foxImageLink)
-                    .and('have.attr', 'alt', constants.foxImageAltText);
+                feedbackScalePage.legendTextHeartIcon()
+                    .then(($hearts) => {
+                        const totalHearts = $hearts.length;
+                        for (let index = 0; index < buttonIndex + 1; index++) {
+                            expect($hearts.find('g').eq(index)).to.have.css('fill', 'rgb(102, 102, 102)');
+                        }
+                        for (let index = buttonIndex + 1; index < totalHearts; index++) {
+                            expect($hearts.find('g').eq(index)).to.have.css('fill', 'none');
+                        }
+                    });
             });
     },
 
-    verifyDisplayAdditionalInformationCheckboxCheckedState: () => {
-        feedbackScalePage.displayAdditionalInformationCheckbox()
-            .should('be.checked');
+    /**
+     * @param {number} buttonIndex index of the feedback star button
+     * @description this function is used to click on a feedback star button
+     */
+    clickOnFeedbackHeartButton: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.feedbackHeartButton(), buttonIndex)
+            .click();
     },
 
-    verifyDisplayAdditionalInformationCheckboxUncheckedState: () => {
-        feedbackScalePage.displayAdditionalInformationCheckbox()
-            .should('not.be.checked');
+    /**
+     * Verifies the highlighted hearts and un-highlighted hearts in the feedback scale up to the specified buttonIndex.
+     * @param {number} buttonIndex - The index of the last highlighted heart in the feedback scale.
+     * @param {string} fillColor - The expected fill color of the highlighted hearts.
+     * @returns {void}
+     */
+    verifyHighlightedHeartsInFeedbackScale: (buttonIndex, fillColor) => {
+        feedbackScalePage.feedbackHeartButton()
+            .then(($hearts) => {
+                const totalHearts = $hearts.length;
+                for (let index = 0; index <= buttonIndex; index++) {
+                    expect($hearts.find('g').eq(index)).to.have.css('fill', fillColor);
+                }
+                for (let index = buttonIndex + 1; index < totalHearts; index++) {
+                    expect($hearts.find('g').eq(index)).to.have.css('fill', 'none');
+                }
+            });
     },
 
-    verifyAllowStudentsToAddCommentCheckboxCheckedState: () => {
+    checkAllowStudentsToAddCommentCheckbox: () => {
         feedbackScalePage.allowStudentsToAddCommentCheckbox()
+            .click()
             .should('be.checked');
     },
 
-    verifyAllowStudentsToAddCommentCheckboxUncheckedState: () => {
-        feedbackScalePage.allowStudentsToAddCommentCheckbox()
-            .should('not.be.checked');
+    /**
+     * Enters text into the comment input field and then blurs the field.
+     * @param {string} text - The text to be entered into the comment input field.
+     */
+    enterTextInCommentInputField: (text) => {
+        feedbackScalePage.commentInputField()
+            .type(text)
+            .blur();
+    },
+
+    /**
+     * Verifies that the comment input field contains the expected text.
+     * @param {string} text - The expected text in the comment input field.
+     */
+    verifyTextInCommentInputField: (text) => {
+        utilities.verifyInputFieldValue(feedbackScalePage.commentInputField(), text)
     },
 
-    uncheckDisplayAdditionalInformationCheckbox: () => {
-        feedbackScalePage.displayAdditionalInformationCheckbox()
+    collapseLegendAccordion: () => {
+        feedbackScalePage.legendAccordion()
             .click()
-            .should('not.be.checked');
+            .should('have.attr', 'aria-expanded', 'false');
     },
 
-    checkAllowStudentsToAddCommentCheckbox: () => {
-        feedbackScalePage.allowStudentsToAddCommentCheckbox()
+    expandLegendAccordion: () => {
+        feedbackScalePage.legendAccordion()
             .click()
-            .should('be.checked');
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    /**
+     * Enters text into the text input field of the specified option and then blurs the field.
+     * @param {number} optionIndex - The index of the option.
+     * @param {string} text - The text to be entered into the option's text input field.
+     */
+    enterTextInOptionTextInputField: (optionIndex, text) => {
+        utilities.getNthElement(feedbackScalePage.optionTextInputField(), optionIndex)
+            .type(text)
+            .blur();
     },
 
     /**
-     * @param {string} textContent text to be entered in describe your experience input field
-     * @description this function is used to add input to the describe your experience input field
+     * Verifies that the text input field of the specified option contains the expected text.
+     * @param {number} optionIndex - The index of the option.
+     * @param {string} text - The expected text in the option's text input field.
      */
-    addInputToDescribeYourExperienceInputField: (textContent) => {
-        feedbackScalePage.describeYourExperienceInputField()
-            .type(textContent, { delay: 0 })
-            .blur()
-            .focus()
-            .should('have.value', textContent)
+    verifyTextInOptionTextInputField: (optionIndex, text) => {
+        utilities.verifyInputFieldValue(utilities.getNthElement(feedbackScalePage.optionTextInputField(), optionIndex), text)
     },
 
-    hoverOnFeedBackButton: () => {
-        feedbackScalePage.feedbackButton().eq(0)
-            .trigger('mouseover')
+    /**
+     * Verifies the label of the option accordion at the specified index.
+     * @param {number} optionAccordionIndex - The index of the option accordion.
+     * @param {string} optionLabel - The expected label of the option accordion.
+     */
+    verifyOptionsAccordionLabel: (optionAccordionIndex, optionLabel) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
+            .within(() => {
+                utilities.verifyInnerText(feedbackScalePage.optionAccordionLabel(), optionLabel);
+            });
     },
 
-    hoverAwayFromFeedbackButton: () => {
-        feedbackScalePage.feedbackButton().eq(0)
-            .trigger('mouseout')
+    expandDefaultTextDropdown: () => {
+        feedbackScalePage.defaultTextDropdown()
+            .click();
     },
 
     /**
-     * @param {number} buttonIndex index of the feedback button
-     * @param {string} color to be verified present on the tooltip of a feedback button in rgb format
-     */
-    verifyColorBlockOnFeedbackButtonTooltip: (buttonIndex, color) => {
-        feedbackScalePage.feedbackButton()
-            .eq(buttonIndex)
-            .trigger('mouseover')
-        commonComponents.tooltipText()
-            .and('be.visible')
+     * Selects an option from the default text dropdown list.
+     * @param {string} dropdownOption - The option to be selected from the dropdown list.
+     * @example - selectOptionFromDefaultTextDropdown('Uncomfortable / Need some support / Comfortable');
+     */
+    selectOptionFromDefaultTextDropdown: (dropdownOption) => {
+        feedbackScalePage.defaultTextDropdownListOptions(dropdownOption)
+            .click();
+    },
+
+    /**
+     * Verifies the placeholder of the option text input field in an options accordion.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
+     */
+    verifyOptionTextInputFieldPlaceholder: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionTextInputField(), optionAccordionIndex)
+            .should('have.attr', 'placeholder', 'Enter option text');
+    },
+
+    /**
+     * Verifies that the placeholder of the option text input field in an options accordion does not exist.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
+     */
+    verifyOptionTextInputFieldPlaceholderNotExists: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionTextInputField(), optionAccordionIndex)
+            .should('not.have.attr', 'placeholder');
+    },
+
+    /**
+     * Clears the text input field of the option at the specified index.
+     * @param {number} optionIndex - The index of the option.
+     */
+    clearOptionTextInputField: (optionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionTextInputField(), optionIndex)
+            .clear()
+    },
+
+    /**
+     * Clears the text input field of the options stepper and then inputs the specified value.
+     * @param {string} value - The value to input into the options stepper input field.
+     */
+    addInputToOptionStepperInputField: (value) => {
+        feedbackScalePage.optionsStepperInputField()
+            .clear()
+            .type(value)
+            .blur();
+    },
+
+    /**
+     * Verifies the count of feedback buttons in the preview tab.
+     * @param {number} count - The expected count of feedback buttons.
+     */
+    verifyFeedbackButtonCountPreviewTab: (count) => {
+        utilities.verifyElementCount(feedbackScalePage.feedbackButton(), count);
+    },
+
+    /**
+     * Verifies the count of legend items in the preview tab.
+     * @param {number} count - The expected count of legend items
+     */
+    verifyLegendItemCountPreviewTab: (count) => {
+        utilities.verifyElementCount(feedbackScalePage.legendTextOptionsList(), count);
+    },
+
+    /**
+     * Verifies the contents of the color section list item at the specified index.
+     * @param {number} itemIndex - The index of the color section list item.
+     * @param {Object} options - The options object.
+     * @param {string} options.label - The expected label of the color section list item.
+     * @param {string} options.colorBlock - The expected color block of the color section list item.
+     */
+    verifyColorSectionListItemContents: (itemIndex, { label, colorBlock }) => {
+        utilities.getNthElement(feedbackScalePage.colorSectionListItem(), itemIndex)
             .within(() => {
-                utilities.verifyCSS(feedbackScalePage.previewTabColorBlock(), {
-                    'background-color': color
-                });
+                utilities.verifyInnerText(feedbackScalePage.colorItemLabel(), label);
+                utilities.verifyElementVisibilityState(feedbackScalePage.editColorButton(), 'visible');
             });
-        feedbackScalePage.feedbackButton()
-            .eq(buttonIndex)
-            .trigger('mouseout')
-        commonComponents.tooltipText()
-            .should('not.exist')
+        steps.verifyColorPickerBlockColor(itemIndex, colorBlock);
+    },
+
+    /**
+     * Selects a color section button.
+     * @param {('Default color scheme' | 'Custom colors')} option - The type of color scheme to select .
+     * @throws {Error} Thrown if an invalid radio button is provided.
+     */
+    selectColorSectionRadioButton: (option) => {
+        switch (option) {
+            case 'Default color scheme':
+                feedbackScalePage.defaultColorSchemeRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Custom colors':
+                feedbackScalePage.customColorsRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error('Invalid radio button');
+        }
+    },
+
+    verifyDefaultColorSchemeRadioButtonCheckedState: () => {
+        feedbackScalePage.defaultColorSchemeRadioButton()
+            .should('be.checked');
+    },
+
+    verifyCustomColorsRadioButtonCheckedState: () => {
+        feedbackScalePage.customColorsRadioButton()
+            .should('be.checked');
     },
 
     /**
-     * @param {number} itemIndex index of the more info list item
-     * @param {string} color to be verified present in more info list item in rgb format
-     * @description this function is used to verify the color of stars in more info list item for star layout
+     * Verifies the color block of the legend accordion item at the specified index.
+     * @param {number} itemIndex - The index of the legend accordion item.
+     * @param {string} colorBlock - The expected background color of the color block.
      */
-    verifyMoreInfoAccordionStarIconsColor: (itemIndex, color) => {
-        feedbackScalePage.moreInfoOptionsList()
-            .eq(itemIndex)
+    verifyColorBlockLegendAccordion: (itemIndex, colorBlock) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), itemIndex)
             .within(() => {
-                utilities.verifyCSS(feedbackScalePage.moreInfoStarIcon(), {
-                    'fill': color
-                });
+                feedbackScalePage.legendTextColorBlock()
+                    .should('have.css', 'background-color', colorBlock);
             });
-    },
+    }
 }
 
 const tests = {
     ...questionInstructionsComponent.tests,
     ...additionalSettingsPanel.tests,
     ...createQuestionBasePage.tests,
-    ...commonComponents.tests
+    ...commonComponents.tests,
+    verifyLegendAccordionDefaultState: () => {
+        it('A \'Legend\' accordion should be present and by default it should be in expanded state', () => {
+            utilities.verifyInnerText(feedbackScalePage.legendAccordion(), 'Legend');
+            feedbackScalePage.steps.verifyLegendAccordionExpandedState();
+        });
+    },
+
+    verifyLegendAccordionCollapsedAndExpandedState: () => {
+        it('The user should be able to collapse and expand the legend accordion', () => {
+            feedbackScalePage.steps.collapseLegendAccordion();
+            feedbackScalePage.steps.expandLegendAccordion();
+        })
+    }
 }
 
 export const feedbackScalePage = {