wiz-rating-scale

The wiz-rating-scale component is a custom Vue component that represents a rating scale layout. It displays two rows of options (1–5 and 6–10) with associated images and links. Each clickable image corresponds to a rated scale point, allowing users to navigate to specific links. This component is styled for responsiveness and includes text annotations ("Unlikely" and "Likely") to indicate the scale extremes

The component provides the following:

1. Rating options:
   • The component shows a row of 10 scale points (images), split into two rows of 5 points each (1–5 and 6–10). Users can click on the scale points, which are rendered as wiz-image components with links to the specified URLs.
2. Images for each point:
   • Each scale point uses a custom image which defaults to a predefined image unless overridden from a provided images object.
3. Scalability and customization:
   • The component allows customization of labels for the scale extremes ("Unlikely" and "Likely").
   • Users can also provide custom links and images for each scale point.
4. Responsiveness:
   • The layout adjusts to smaller screens by stacking scale points vertically for better readability and usability.

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

Markup:

<wiz-rating-scale link01="https://www.viseven.com/"
                  link02="https://www.viseven.com/"
                  link03="https://www.viseven.com/"
                  link04="https://www.viseven.com/"
                  link05="https://www.viseven.com/"
                  link06="https://www.viseven.com/"
                  link07="https://www.viseven.com/"
                  link08="https://www.viseven.com/"
                  link09="https://www.viseven.com/"
                  link10="https://www.viseven.com/"
                  :unlikely="$t('unlikelyText')"
                  :likely="$t('likelyText')"
                  :images=.ratingScaleImages"></wiz-rating-scale>

Localization:

    <i18n>
        {
            "en": {
                "unlikelyText": "My awesome text",
                "likelyText": "My awesome text"
            }
        }
    </i18n>

Properties

The wiz-rating-scale component features the following properties:

The following properties are available:

Property	Type	Default value	Description
image	object	(an empty object)	An object tat maps keys ("link01", "link02", etc.) to custom image URLs. If a custom image is not provided, the component defaults to predefines images ("recommended01", "recommended02", etc.)
unlikely, likely	string	Unlikely, Likely	The labels displayed underneath the rows of scale points (1–5 and 6–10, accordingly). Typically represents the extremes of the rating scale.
link01 – link10	string	https://viseven.com	The URLs users will be navigated to when clicking on 1 to 10 scale points.