How To Use Fields and Conditions in the Calculator Widget?

Widgets are powerful tools that allow you to create interactive forms and calculators. This guide will help you understand how to use fields and conditions within the widget interface to create dynamic and responsive user experiences.

Follow these steps to modify the fields:

1. Accessing Fields:
   • Navigate to the "Content" sub-tab.
   • Choose the "Fields" category.
     
     
     
     
2. Adding Fields: 

   Fields are the core components of your widget. They collect user input and come in various types such as sliders, dropdowns, and checkboxes.

   
   
   
   

   • Slider: Use sliders for numerical inputs within a specified range. They are ideal for values like age, hours of sleep, or weight.
     
     

   • Dropdown: Dropdowns are useful for categorical selections, such as choosing an activity level, stress level, or caffeine intake.
     
     

   • Checkbox: Checkboxes are perfect for binary options, like yes/no questions or true/false scenarios.
     
     

3. Configuring Fields:

   • Title and Description: Provide a clear title and a brief description to guide the user on what information is required.
     
     

   • Range and Steps (for Sliders): Set the minimum and maximum values and the step increments to ensure precise input.
     
     

   • Options (for Dropdowns): List the options that users can select from. Each option should be clearly defined.

4. Example Configuration:

   • Slider: "Hours of Sleep" with a range from 0 to 12 hours and steps of 0.1 hours.
     
     

   • Dropdown: "Stress Level" with options like Low, Moderate, and High.
     
     

   • Checkbox: "Include Caffeine Intake" to indicate whether the user has consumed caffeine.

    

Using Conditions

Conditions allow you to create dynamic forms by showing or hiding fields and calculations based on user input. This makes the widget more interactive and user-friendly.

1. Setting Conditions:

   • Show/Hide Fields: You can show or hide specific fields based on the user's previous selections. For example, you might show a field for caffeine intake only if the user indicates they drink caffeine.
     
     

   • Conditional Calculations: Conditions can also control which calculations are performed and displayed.
     
     

2. Configuring Conditions:

   • Condition Type: Choose the type of condition, such as equal-to, greater-than, or less-than.
     
     

   • Value to Compare: Specify the value that will trigger the condition. For example, a stress level of "High" might trigger additional fields.
     
     

3. Example Usage:

   • If the "Include Caffeine Intake" checkbox is checked, show a dropdown to select the level of caffeine intake.
     
     

   • If the selected stress level is "High," display additional tips on stress management.

Using Calculations

Calculations allow you to process the data collected from fields and display results. They are essential for creating dynamic and informative widgets like calculators.

1. Creating Calculations:

   • Title and Description: Give each calculation a clear title and a brief description of what it calculates.

   • Formula: Define the formula that will process the user inputs. Formulas can include basic arithmetic operations like addition, subtraction, multiplication, and division.
     
     
     
     

2. Configuring Calculations:

   • Data Source: Use the input from the fields as variables in your formula. For example, you might use the number of hours slept and stress level to calculate a sleep quality score.

   • Result Format: Specify the format of the result, such as a number, percentage, or currency.
     
     

3. Example Calculation:

   • Sleep Quality Score: A formula combining hours of sleep, stress level, physical activity, and caffeine intake to estimate a sleep quality score.

     (10 - Stress Level) + (Hours of Sleep * 1.5) + (Physical Activity / 10) - (Caffeine Intake * 1.5)

Example: Configuring a Sleep Quality Calculator

1. Adding Fields:

   • Hours of Sleep (Slider): Set the range from 0 to 12 hours with steps of 0.1.

   • Stress Level (Dropdown): Provide options for Low, Moderate, and High.

   • Physical Activity (Slider): Set the range from 0 to 120 minutes with steps of 5.

   • Caffeine Intake (Dropdown): Provide options for None, Low, Moderate, and High.
     
     

2. Setting Conditions:

   • Show the "Caffeine Intake" dropdown only if the "Include Caffeine Intake" checkbox is checked.
     
     

3. Creating Calculations:

   • Sleep Quality Score: Combine the inputs to calculate a sleep quality score using the formula provided above.

That's it! Hope we helped :)