Segment Output Element

Segment Output is a powerful feature in ActiveCalculator that allows you to present the results of a calculation in a more descriptive and engaging way, using either words or images. By defining segments based on the value of a formula field or any other input field, you can display a corresponding text label, description, and/or image that fits the calculated result.

In this tutorial, we'll cover:

• Adding a Text Segment Output to your calculator
• Adding an Image Segment Output to your calculator
• Using formulas in Segment Output

Text Segment Output

Let's start by looking at how to use Segment Output for text-based results.

Example Use Case: Shirt Size Calculator

Consider a shirt size calculator that recommends a size (XS, S, M, L, XL) based on the user's height and weight. You can find a template for this example here: Calculate My Size Template

To see the calculator in action, check out this preview: Shirt Size Calculator Preview

Steps to Add a Text Segment Output

1. Click on the Segment Output field in the calculator editor to add it to your calculator.
2. Click on the Segment Output element in the editor to open the right sidebar settings.

3. In the right sidebar, click on the "Question" tab to access the Segment Output Settings Options.

Segment Output Settings Options

• Title: Provide a title for the Segment Output question. You can also add variables to the title by clicking the PLUS button on the right side of the title settings.
• Hint: Add context or explain the output using this text field. When enabled, it appears as a small info icon next to the element title.
• Description: Add a description below the title. You can also include variables in the description by clicking the PLUS button on the right side of the description settings.
• Source Variable: Choose the result that will determine the segment visibility based on the segment ranges you define.

• Adding Segments: Click the "+ Add Segment" button to create a custom segment. By default, one segment is created, which you can customize or delete. There is no limit to the number of segments you can add.
  • Label: Name your segment. This is the main text that will be displayed if the assigned formula or input field value falls within the segment range.
  • Description: Write a description for the segment that will appear under the segment label.
  • Start and End: Define the start and end values for the segment range. Segments should not overlap, as it may lead to incorrect results. If a result overlaps with a previous segment, the previous segment will take priority.

• Removing Segments: To remove a segment, simply click on the "Remove segment" button

Image Segment Output

In addition to text, you can also use images in your Segment Output.

Example Use Case: Water Intake Calculator

Consider a water intake calculator that displays different images based on the calculated water intake level. You can find a preview of this calculator here: Water Intake Calculator Preview

Enabling Image Segment Output

1. In the Segment Output Settings Options, toggle on the "Use images" option.
2. Click the "+ Add Segment" button to add a custom segment.
3. The options for image segments are the same as text segments, with the addition of an image upload field for each segment.
4. The uploaded image will be displayed if the assigned formula or input field value falls within the segment range.

Customizing the Image Segment Output

Choose the appropriate "Image style" option to control how the image is scaled and positioned within the element. There are three available options:

• Default: The image retains its original size. If the element size differs, the image may overflow or have empty space around it. The image does not automatically resize or reposition within the element.

• Cover: The image is scaled to cover the entire element, which may result in cropping. You can control which part of the image remains visible when cropped by adjusting the horizontal and vertical alignment settings:

  • Horizontal Alignment:
    • Left: Keeps the left part of the image visible when cropping.
    • Center: Centers the image horizontally, cropping equally from both sides.
    • Right: Keeps the right part of the image visible when cropping.
  • Vertical Alignment:
    • Top: Keeps the top part of the image visible when cropping.
    • Center: Centers the image vertically, cropping equally from top and bottom.
    • Bottom: Keeps the bottom part of the image visible when cropping.

• Contain: The entire image fits within the element, potentially leaving empty space around it. You can align the image within this space using the alignment settings.

Using Formulas in Segment Output

You can use different formulas for each segment to determine visibility.

1. In the Segment Output Settings Options, toggle on the "Use Formula" option.

2. For each custom segment, you can now choose a different source variable instead of using a single source variable for all segments.

Note: The "Use Formula" option works with both text and image segment outputs.

Best Practices and Tips

• Choose meaningful and concise labels and descriptions for your segments to enhance clarity.
• Ensure that your segment ranges do not overlap to avoid incorrect results.
• Leverage images in your Segment Output to create a more engaging and visually appealing user experience.
• Test your Segment Output thoroughly to ensure it functions as expected across different input values.

Troubleshooting and FAQs

Q: What happens if my segment ranges overlap? A: If a result overlaps with a previous segment, the previous segment will take priority. To avoid this, ensure that your segment ranges do not overlap.

Q: Is there a limit to the number of segments I can add? A: No, there is no set limit to the number of segments you can add to your Segment Output.

Q: Can I use both text and images in the same Segment Output? A: No, you can either use text or images in a Segment Output, but not both simultaneously. You can choose between text and image output using the "Use images" toggle in the settings.