Quantity Counter Buttons

Business Background

The Buttons option is available for the Quantity Counter element. You can configure the counters as buttons and/or icons.

You can add a Trash button with on-click actions.

How to Video

• Coming soon!

How to Guide

1. Click the + icon to open the list of elements.
2. Select the Survey option from the list.
3. Drag-and-drop the Quantity Counter element to the canvas.
4. Click the Quantity Counter settings Gear icon. The Quantity Counter setting screen opens.
5. Select the Interactivity option from the list.
6. Click the Gear icon next to the Button option. The Counter Button screen opens.

7. Configure the following:
   • Decrement and Increment
   • Trash

Decrement and Increment

1. Add text to the Decrement and Increment options if needed.
   • Text: this is the text that will be shown on the counter.
   • Aria Label: this is the label that is used by assistive technologies to describe the element.
     • Aria (Accessible Rich Internet Applications) is a set of attributes that can be added to HTML elements to provide additional information to assistive technologies, such as screen readers. This helps make web content more usable and understandable for users with various disabilities.

2. If necessary, change the default icons for Decrement and Increment by an icon clicking the Select from Library button. The Select icon screen opens.
   • The Use Icon option is enabled by default.
   • Use the toggle switch to disable the option.

3. Configure any icons for the Decrement and Increment.
4. Click the Apply button.

5. If required, use the toggle switch to disable the icons so that only the button text appears. You must configure button text when the icons are diabled.

The following are examples:

Trash

1. Click the Trash option.
2. Use the toggle switch to enable the Trash Button.
3. Click the Configure button to configure the On Click action. The On Trash button click screen opens.

4. Use the + icon next to Start. The Add Node screen opens.

5. Add text to the Trash button if needed.
   • Text: this is the text that will be shown on the counter.
   • Aria Label: this is the label that is used by assistive technologies to describe the element.

6. Use the Use Icon toggle switch to use an icon.
7. Click the Select from Library button.

8. Configure any icons for the Trash button.
9. Click the Apply button.

10. Use the toggle switch to enable the icon’s absolute position. The Offset field opens.
11. Type a value in the offset field.
    • “Offset” refers to the positioning of the icon relative to the quantity counter element.
    • You can use positive or negative numbers.
12. Use the drop-down list to select the position of the icon. The options are as follows:
    • Left
    • Right
13. Click the Apply button.

11. Save and preview the project.