itemengine-cypress-automation 1.0.167-repoUpdate10April-1465c8c.0 → 1.0.169-uploadResponseMigration-83ab996.0

package/cypress/pages/feedbackScalePage.js

@@ -1,80 +1,56 @@
-import { additionalSettingsPanel, commonComponents, createQuestionBasePage, questionInstructionsComponent, autoScoredScoringPreviewTab } from "./components"
+import constants from "../fixtures/constants";
+import { additionalSettingsPanel, ckEditorToolbar, colorPopupComponent, commonComponents, createQuestionBasePage, questionInstructionsComponent } from "./components"
+import { dialogBoxBase } from "./dialogBoxBase";
 import utilities from "../support/helpers/utilities";
+import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
 const css = Cypress.env('css');
 
 const selectors = {
     ...questionInstructionsComponent,
     ...commonComponents,
+    ...ckEditorToolbar,
     ...additionalSettingsPanel,
-    specifyFeedbackScaleOptionsLabel: () => cy.get('[class*="FeedbackScalestyles__SpecifyFeedbackLabel"]'),
-    feedbackScaleStyleDropdownLabel: () => cy.get('#feedback-scale-style-dropdown-label'),
-    feedbackScaleStyleDropdown: () => cy.get('#feedback-scale-style-select'),
-    feedbackScaleStyleDropdownListOptions: (ariaLabel = null) => {
+    ...dialogBoxBase,
+    ...createQuestionBasePage,
+    feedbackLayoutStyleLabel: () => cy.get('#feedback-layout-style-dropdown-label'),
+    feedbackLayoutStyleDropdown: () => cy.get('#feedback-layout-style-select'),
+    feedbackLayoutStyleDropdownOptions: (ariaLabel = null) => {
         if (ariaLabel) {
-            return cy.get(`[aria-labelledby*="feedback-scale-style-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
+            return cy.get(`[aria-labelledby*="feedback-layout-style-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
         } else {
-            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"]')
+            return cy.get('[aria-labelledby*="feedback-layout-style-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"]'),
-    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"]'),
+    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"]'),
     addOptionButton: () => cy.get('.feedback-scale-add-option button'),
-    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'),
+    optionAccordionPanel: () => cy.get('.feedback-scale-panel'),
+    //Preview tab
     feedbackButton: () => cy.get('.feedback-scale-label-btn'),
-    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"]'),
+    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'),
     feedbackStarButton: () => cy.get('.feedback-scale-label-star-btn'),
-    feedbackHeartButton: () => cy.get('.feedback-scale-label-star-btn'),
-    editColorButton: () => cy.get('.icon-pencil'),
+    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'),
     allowStudentsToAddCommentCheckbox: () => cy.get('[data-ngie-testid="allow-students-to-add-comment-checkbox"] input'),
-    commentLabel: () => cy.get('.describe-your-experience .inline-text-property-label'),
-    commentInputField: () => cy.get('input[aria-label="Comment"]'),
+    describeYourExperienceLabel: () => cy.get('.describe-your-experience .inline-text-property-label'),
+    describeYourExperienceInputField: () => cy.get('.describe-your-experience input')
 }
 
 const steps = {
@@ -82,42 +58,72 @@ const steps = {
     ...questionInstructionsComponent.steps,
     ...commonComponents.steps,
     ...additionalSettingsPanel.steps,
-    ...questionInstructionsComponent.steps,
-    ...autoScoredScoringPreviewTab.steps,
+    ...ckEditorToolbar.steps,
+    ...additionalSettingsPanel.steps,
+    ...dialogBoxBase.steps,
+    clickOnFeedbackStyleLayoutDropdown: () => {
+        feedbackScalePage.feedbackLayoutStyleDropdown()
+            .click();
+    },
+
     /**
-     * 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.
+     * @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
      */
-    addLegendText: (optionIndex, text) => {
-        utilities.getNthElement(feedbackScalePage.legendTextInputField(), optionIndex)
-            .type(text)
-            .blur();
+    selectFeedbackStyleLayoutDropdown: (dropdownOptionName) => {
+        feedbackScalePage.feedbackLayoutStyleDropdownOptions(dropdownOptionName)
+            .click();
     },
 
-    clearLegendTextInputField: (optionIndex) => {
-        utilities.getNthElement(feedbackScalePage.legendTextInputField(), optionIndex)
-            .clear();
+    /**
+     * @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);
+        });
     },
 
     /**
-     * @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
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function verifies if an option accordion is in expanded state
      */
-    verifyFeedbackButtonInPreviewTab: (buttonIndex, buttonText) => {
-        utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex), buttonText);
-        utilities.verifyElementVisibilityState(utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex), 'visible');
+    verifyOptionAccordionInExpandedState: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordion()
+            .eq(optionAccordionIndex)
+            .should('have.attr', 'aria-expanded', 'true');
     },
 
     /**
-     * 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.
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function verifies if an option accordion is in collapsed state
      */
-    verifyFeedbackButtonColorBlockPreviewTab: (buttonIndex, colorBlock) => {
-        utilities.getNthElement(feedbackScalePage.feedbackButtonColorBlock(), buttonIndex)
-            .should('have.css', 'background-color', colorBlock);
+    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');
+            });
     },
 
     /**
@@ -125,176 +131,219 @@ const steps = {
      * @description this function expands an option accordion
      */
     expandOptionAccordion: (optionAccordionIndex) => {
-        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
+        feedbackScalePage.optionAccordion()
+            .eq(optionAccordionIndex)
             .click()
             .should('have.attr', 'aria-expanded', 'true');
     },
 
-    verifyLegendAccordionExpandedState: () => {
-        feedbackScalePage.legendAccordion()
-            .should('have.attr', 'aria-expanded', 'true');
-    },
-
-    verifyLegendAccordionCollapsedState: () => {
-        feedbackScalePage.legendAccordion()
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function collapses an option accordion
+     */
+    collapseOptionAccordion: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordion()
+            .eq(optionAccordionIndex)
+            .click()
             .should('have.attr', 'aria-expanded', 'false');
     },
 
     /**
-     * @param {number} buttonIndex index of the feedback button
-     * @description this function is used to click on a feedback button
+     * @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.'})
      */
-    clickOnFeedbackButton: (buttonIndex) => {
-        utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex)
-            .click();
+    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']);
+            });
     },
 
     /**
      * @param {number} buttonIndex index of the feedback button
-     * @description this function verifies the selected state of a 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
      */
-    verifyFeedbackButtonSelectedState: (buttonIndex) => {
-        utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex)
-            .should('have.class', 'selected-button');
+    verifyFeedbackButtonInPreviewTab: (buttonIndex, buttonText) => {
+        feedbackScalePage.feedbackButton()
+            .eq(buttonIndex)
+            .should('have.text', buttonText)
+            .and('be.visible');
     },
 
     /**
      * @param {number} buttonIndex index of the feedback button
-     * @description this function verifies the unselected state of a feedback button
-     */
-    verifyFeedbackButtonUnselectedState: (buttonIndex) => {
-        utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex)
-            .should('not.have.class', 'selected-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')
     },
 
-    /**
-     * 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));
+    verifyMoreInfoAccordionInCollapsedState: () => {
+        feedbackScalePage.moreInfoButton()
+            .should('have.attr', 'aria-expanded', 'false');
     },
 
-    /**
-     * 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.
-     */
-    verifyColorBlockFeedbackButtonLabelLegendTextInLegendAccordion: (itemIndex, { colorBlock, buttonText, legendText }) => {
-        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), itemIndex)
-            .within(() => {
-                feedbackScalePage.legendTextColorBlock()
-                    .should('have.css', 'background-color', colorBlock);
-                utilities.verifyInnerText(feedbackScalePage.legendTextFeedbackButtonLabel(), `${buttonText}:`);
-                utilities.verifyInnerText(feedbackScalePage.legendTextPreviewTab(), legendText);
-            });
+    verifyMoreInfoAccordionInExpandedState: () => {
+        feedbackScalePage.moreInfoButton()
+            .should('have.attr', 'aria-expanded', 'true');
     },
 
-    expandFeedbackScaleStyleDropdown: () => {
-        feedbackScalePage.feedbackScaleStyleDropdown()
-            .click();
+    expandMoreInfoAccordion: () => {
+        feedbackScalePage.moreInfoButton()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
     },
 
     /**
-     * @param {("Text" | "Numbers" | "Thumbs"| "Stars / Hearts")} dropdownOption aria-label of dropdown options
-     * @description this function selects dropdown option from feedback scale style dropdown
+     * @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
      */
-    selectOptionFromFeedbackScaleStyleDropdown: (dropdownOption) => {
-        feedbackScalePage.feedbackScaleStyleDropdownListOptions(dropdownOption)
-            .click();
+    verifyMoreInfoAccordionOptionsListLabelTooltipAndDescription: (itemIndex, contentsArray) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
+            .within(() => {
+                feedbackScalePage.moreInfoFeedbackLabel()
+                    .should('have.text', contentsArray[0]);
+                feedbackScalePage.moreInfoTooltipText()
+                    .should('have.text', contentsArray[1]);
+                feedbackScalePage.moreInfoDescriptionText()
+                    .should('have.text', contentsArray[2]);
+            });
     },
 
     /**
-     * Verifies the count displayed in the options stepper input field.
-     * @param {number} value - The expected value to be displayed in the input field.
+     * @param {number} buttonIndex index of the feedback button
+     * @description this function is used to click on a feedback button
      */
-    verifyCountInOptionsStepperInputField: (value) => {
-        utilities.verifyInputFieldValue(feedbackScalePage.optionsStepperInputField(), value)
+    clickOnFeedbackButton: (buttonIndex) => {
+        feedbackScalePage.feedbackButton()
+            .eq(buttonIndex)
+            .click();
     },
 
     /**
-    * @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();
-        };
+     * @param {number} buttonIndex index of the feedback button
+     * @description this function verifies the selected state of a feedback button
+     */
+    verifyFeedbackButtonSelectedState: (buttonIndex) => {
+        feedbackScalePage.feedbackButton()
+            .eq(buttonIndex)
+            .should('have.class', 'selected-button');
     },
 
     /**
-     * @description Increase option input stepper count
-     * @param {number} increaseValue The value by which the option input stepper count is to be increased
+     * @param {number} buttonIndex index of the feedback button
+     * @description this function verifies the unselected state of a feedback button
      */
-    increaseOptionsInputStepperCount: (increaseValue) => {
-        for (let index = 0; index < increaseValue; index++) {
-            feedbackScalePage.optionsStepperIncreaseButton()
-                .click();
-        };
+    verifyFeedbackButtonUnselectedState: (buttonIndex) => {
+        feedbackScalePage.feedbackButton()
+            .eq(buttonIndex)
+            .should('not.have.class', 'selected-button');
     },
 
     /**
-     * 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.
+     * @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
      */
-    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');
-            });
+    verifyMoreInfoOptionListHighlightedState: (itemIndex) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
+            .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`);
     },
 
     /**
-     * Verifies the collapsed state of an options accordion.
-     * @param {number} optionAccordionIndex - The index of the options accordion.
+     * @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
      */
-    verifyOptionAccordionCollapsedState: (optionAccordionIndex) => {
-        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
-            .should('have.attr', 'aria-expanded', 'false');
+    verifyMoreInfoOptionListHighlightedStateNotExists: (itemIndex) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
+            .should('not.have.css', 'border', `1px solid ${css.color.activeComponentBorder}`);
     },
 
     /**
-     * Verifies the expanded state of an options accordion.
-     * @param {number} optionAccordionIndex - The index of the options accordion.
+     * @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
      */
-    verifyOptionAccordionExpandedState: (optionAccordionIndex) => {
-        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
-            .should('have.attr', 'aria-expanded', 'true');
+    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');
     },
 
     /**
-     * Verifies the placeholder of the legend text input field in an options accordion.
-     * @param {number} optionAccordionIndex - The index of the options accordion.
+     * @param {number} buttonIndex index of the feedback star button
+     * @description this function is used to click on a feedback star button
      */
-    verifyLegendTextInputFieldPlaceholder: (optionAccordionIndex) => {
-        utilities.getNthElement(feedbackScalePage.legendTextInputField(), optionAccordionIndex)
-            .should('have.attr', 'placeholder', 'Enter legend text');
+    clickOnFeedbackStarButton: (buttonIndex) => {
+        feedbackScalePage.feedbackStarButton()
+            .eq(buttonIndex)
+            .click();
     },
 
     /**
-     * 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 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 the count of options accordions.
-     * @param {number} count - The expected count of options accordions.
-     */
-    verifyOptionsAccordionCount: (count) => {
-        utilities.verifyElementCount(feedbackScalePage.optionAccordion(), count);
+     * @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);
+        });
     },
 
     addOption: () => {
@@ -307,530 +356,339 @@ const steps = {
      * @description this function is used to delete an option accordion
      */
     deleteOptionAccordion: (optionAccordionIndex) => {
-        utilities.getNthElement(feedbackScalePage.deleteOptionAccordionButton(), optionAccordionIndex)
+        feedbackScalePage.deleteOptionAccordionButton()
+            .eq(optionAccordionIndex)
             .click();
     },
 
     /**
-     * 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.
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function is used to focus in a tooltip input field of an option accordion
      */
-    verifyNumberBlockFeedbackButtonLabelLegendTextInLegendAccordion: (buttonIndex, legendText) => {
-        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), buttonIndex)
+    focusInTooltipInputField: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
             .within(() => {
-                utilities.verifyInnerText(feedbackScalePage.legendTextNumberBlock(), `${buttonIndex + 1}`);
-                utilities.verifyInnerText(feedbackScalePage.legendTextPreviewTab(), legendText);
+                feedbackScalePage.tooltipInputField()
+                    .focus();
             });
     },
 
     /**
-     * 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.
-     */
-    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.
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function is used to focus in a description input field of an option accordion
      */
-    verifyNumberBlocksInLegendAccordion: (itemIndex) => {
-        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), itemIndex)
+    focusInDescriptionInputField: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
             .within(() => {
-                utilities.verifyInnerText(feedbackScalePage.legendTextNumberBlock(), `${itemIndex + 1}`);
+                feedbackScalePage.descriptionInputField()
+                    .focus();
             });
     },
 
     /**
-     * Verifies the text label of an option in the feedback scale options accordion.
-     * @param {number} optionAccordionIndex - The index of the option accordion.
-     * @returns {void}
+     * @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
      */
-    verifyOptionTextLabel: (optionAccordionIndex) => {
-        utilities.getNthElement(feedbackScalePage.optionAccordionWrapper(), optionAccordionIndex)
+    addInputToTooltipInputField: (optionAccordionIndex, textContent) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
             .within(() => {
-                utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.optionTextLabel(), 0), 'Option text');
+                feedbackScalePage.tooltipInputField()
+                    .type(textContent);
             });
     },
 
     /**
-     * Verifies the text label of the legend in the feedback scale options accordion.
-     * @param {number} optionAccordionIndex - The index of the option accordion.
-     * @returns {void}
+     * @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
      */
-    verifyLegendTextLabel: (optionAccordionIndex) => {
-        utilities.getNthElement(feedbackScalePage.optionAccordionWrapper(), optionAccordionIndex)
+    addInputToLabelsInputField: (optionAccordionIndex, textContent) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
             .within(() => {
-                utilities.verifyInnerText(feedbackScalePage.legendTextLabel(), 'Legend text');
+                feedbackScalePage.labelsInputField()
+                    .type(textContent)
+                    .blur();
             });
     },
 
     /**
-     * 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}
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function verifies image in tooltip input field of an option accordion
      */
-    verifyOptionInputFieldText: (optionAccordionIndex, text) => {
-        utilities.getNthElement(feedbackScalePage.optionAccordionWrapper(), optionAccordionIndex)
+    verifyImageAndAltTextInTooltipInputField: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
             .within(() => {
-                utilities.verifyInputFieldValue(feedbackScalePage.optionTextInputField(), text)
+                feedbackScalePage.tooltipInputField()
+                    .find('img')
+                    .should('have.attr', 'src', constants.foxImageLink)
+                    .and('have.attr', 'alt', constants.foxImageAltText);
             });
     },
 
     /**
-     * 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.
+     * @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
      */
-    verifyOptionsAccordionPropertiesForThumbsScale: (optionAccordionIndex, { optionLabel, Points }) => {
-        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
+    addInputToDescriptionInputField: (optionAccordionIndex, textContent) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
             .within(() => {
-                utilities.verifyInnerText(feedbackScalePage.optionAccordionLabel(), optionLabel);
-                utilities.verifyInnerText(feedbackScalePage.optionAccordionPointsLabel(), `Points:\n${Points}`);
-                utilities.verifyElementVisibilityState(feedbackScalePage.deleteOptionAccordionButton(), 'notExist');
+                feedbackScalePage.descriptionInputField()
+                    .type(textContent);
             });
     },
 
     /**
-     * Verifies the thumbs down button in the legend text accordion.
-     * @param {string} buttonText - The expected text of the thumbs down button.
-     * @returns {void}
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function is used to clear the tooltip input field of an option accordion
      */
-    verifyThumbsDownButtonInLegendAccordion: (buttonText) => {
-        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), 0)
+    clearTooltipInputField: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
             .within(() => {
-                utilities.verifyElementVisibilityState(feedbackScalePage.thumbsDownButtonIcon(), 'visible')
-                utilities.verifyInnerText(feedbackScalePage.legendTextFeedbackButtonLabel(), buttonText);
+                feedbackScalePage.tooltipInputField()
+                    .clear();
             });
     },
 
     /**
-     * Verifies the thumbs up button in the legend text accordion.
-     * @param {string} buttonText - The expected text of the thumbs up button.
-     * @returns {void}
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function is used to clear the description input field of an option accordion
      */
-    verifyThumbsUpButtonInLegendAccordion: (buttonText) => {
-        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), 1)
+    clearDescriptionInputField: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
             .within(() => {
-                utilities.verifyElementVisibilityState(feedbackScalePage.thumbsUpButtonIcon(), 'visible')
-                utilities.verifyInnerText(feedbackScalePage.legendTextFeedbackButtonLabel(), buttonText);
+                feedbackScalePage.descriptionInputField()
+                    .clear();
             });
     },
 
     /**
-     * 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}
+     * @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
      */
-    verifyLegendTextInLegendAccordion: (buttonIndex, legendText) => {
-        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), buttonIndex)
+    verifyBoldTextInDescriptionInputField: (optionAccordionIndex, textContent) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
             .within(() => {
-                utilities.verifyInnerText(feedbackScalePage.legendTextPreviewTab(), legendText);
+                feedbackScalePage.descriptionInputField()
+                    .find('strong')
+                    .should('exist')
+                    .should('have.text', textContent);
             });
     },
 
-    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');
-    },
-
     /**
-     * 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}
+     * @param {number} buttonIndex index of the feedback button
+     * @description this function is used to verify an image in tooltip of a feedback button
      */
-    verifyThumbsUpButtonSelectedStateColor: (color) => {
-        feedbackScalePage.thumbsUpFeedbackButton().find('circle').eq(1)
-            .should('have.css', 'fill', color);
-    },
-
-    verifyStarsFeedbackScaleUIButtonSelectedState: () => {
-        feedbackScalePage.starsFeedbackScaleUIButton()
-            .should('have.attr', 'aria-pressed', 'true');
+    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');
     },
 
     /**
-     * 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.
+     * @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
      */
-    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');
-        }
+    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');
     },
 
     /**
-     * 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}
+     * @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
      */
-    verifyHighlightedStarsInLegendTextListItem: (buttonIndex) => {
-        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), buttonIndex)
+    verifyMoreInfoAccordionColorBlock: (itemIndex, color) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
             .within(() => {
-                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');
-                        }
-                    });
+                feedbackScalePage.previewTabColorBlock()
+                    .should('have.css', 'background-color', color);
             });
     },
 
     /**
-     * @param {number} buttonIndex index of the feedback star button
-     * @description this function is used to click on a feedback star button
+     * @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
      */
-    clickOnFeedbackStarButton: (buttonIndex) => {
-        utilities.getNthElement(feedbackScalePage.feedbackStarButton(), buttonIndex)
-            .click();
+    verifyMoreInfoAccordionStarIcons: (itemIndex) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
+            .within(() => {
+                feedbackScalePage.moreInfoStarIcon()
+                    .should('have.length', itemIndex + 1);
+            });
     },
 
     /**
-     * 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}
+     * @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
      */
-    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');
-                }
+    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');
             });
     },
 
     /**
-     * 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}
+     * @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
      */
-    verifyHighlightedHeartsInLegendTextListItem: (buttonIndex) => {
-        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), buttonIndex)
+    verifyMoreInfoOptionListLabelTooltipAndDescriptionForBoldTooltipAndImageDescription: (itemIndex) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
             .within(() => {
-                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');
-                        }
-                    });
+                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);
             });
     },
 
-    /**
-     * @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();
+    verifyDisplayAdditionalInformationCheckboxCheckedState: () => {
+        feedbackScalePage.displayAdditionalInformationCheckbox()
+            .should('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');
-                }
-            });
+    verifyDisplayAdditionalInformationCheckboxUncheckedState: () => {
+        feedbackScalePage.displayAdditionalInformationCheckbox()
+            .should('not.be.checked');
     },
 
-    checkAllowStudentsToAddCommentCheckbox: () => {
+    verifyAllowStudentsToAddCommentCheckboxCheckedState: () => {
         feedbackScalePage.allowStudentsToAddCommentCheckbox()
-            .click()
             .should('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)
+    verifyAllowStudentsToAddCommentCheckboxUncheckedState: () => {
+        feedbackScalePage.allowStudentsToAddCommentCheckbox()
+            .should('not.be.checked');
     },
 
-    collapseLegendAccordion: () => {
-        feedbackScalePage.legendAccordion()
+    uncheckDisplayAdditionalInformationCheckbox: () => {
+        feedbackScalePage.displayAdditionalInformationCheckbox()
             .click()
-            .should('have.attr', 'aria-expanded', 'false');
+            .should('not.be.checked');
     },
 
-    expandLegendAccordion: () => {
-        feedbackScalePage.legendAccordion()
+    checkAllowStudentsToAddCommentCheckbox: () => {
+        feedbackScalePage.allowStudentsToAddCommentCheckbox()
             .click()
-            .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();
-    },
-
-    /**
-     * 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.
-     */
-    verifyTextInOptionTextInputField: (optionIndex, text) => {
-        utilities.verifyInputFieldValue(utilities.getNthElement(feedbackScalePage.optionTextInputField(), optionIndex), text)
-    },
-
-    /**
-     * 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);
-            });
-    },
-
-    expandDefaultTextDropdown: () => {
-        feedbackScalePage.defaultTextDropdown()
-            .click();
-    },
-
-    /**
-     * 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()
+            .should('be.checked');
     },
 
     /**
-     * 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.
+     * @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
      */
-    addInputToOptionStepperInputField: (value) => {
-        feedbackScalePage.optionsStepperInputField()
-            .clear()
-            .type(value)
-            .blur();
+    addInputToDescribeYourExperienceInputField: (textContent) => {
+        feedbackScalePage.describeYourExperienceInputField()
+            .type(textContent, { delay: 0 })
+            .blur()
+            .focus()
+            .should('have.value', textContent)
     },
 
-    /**
-     * 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);
+    hoverOnFeedBackButton: () => {
+        feedbackScalePage.feedbackButton().eq(0)
+            .trigger('mouseover')
     },
 
-    /**
-     * 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);
+    hoverAwayFromFeedbackButton: () => {
+        feedbackScalePage.feedbackButton().eq(0)
+            .trigger('mouseout')
     },
 
     /**
-     * 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)
+     * @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')
             .within(() => {
-                utilities.verifyInnerText(feedbackScalePage.colorItemLabel(), label);
-                utilities.verifyElementVisibilityState(feedbackScalePage.editColorButton(), 'visible');
+                utilities.verifyCSS(feedbackScalePage.previewTabColorBlock(), {
+                    'background-color': color
+                });
             });
-        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');
+        feedbackScalePage.feedbackButton()
+            .eq(buttonIndex)
+            .trigger('mouseout')
+        commonComponents.tooltipText()
+            .should('not.exist')
     },
 
     /**
-     * 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.
+     * @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
      */
-    verifyColorBlockLegendAccordion: (itemIndex, colorBlock) => {
-        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), itemIndex)
+    verifyMoreInfoAccordionStarIconsColor: (itemIndex, color) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
             .within(() => {
-                feedbackScalePage.legendTextColorBlock()
-                    .should('have.css', 'background-color', colorBlock);
+                utilities.verifyCSS(feedbackScalePage.moreInfoStarIcon(), {
+                    'fill': color
+                });
             });
-    }
+    },
 }
 
 const tests = {
     ...questionInstructionsComponent.tests,
     ...additionalSettingsPanel.tests,
     ...createQuestionBasePage.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();
-        })
-    }
+    ...commonComponents.tests
 }
 
 export const feedbackScalePage = {