Score Setup & Calculation

Initializing and displaying scores.

Learn how to initialize and display scoring variables in your forms. Scoring variables allow you to track and show scores (or any numeric values) dynamically based on user interactions.

Setup

Attribute: sf-score

Value: Comma-separated variable names (e.g., "ross, monica")

Where: Form Container

HTML Example

<form sf="friendsForm" sf-score="ross,monica">
    <!-- Steps and content go here -->
</form>

Webflow Example

Displaying Scores

To display the scores, use the sf-react attribute with the text() function to bind the score values to elements in your form.

HTML Example:

<form sf="friendsForm" sf-score="ross,monica">
    <div sf-step="step1">
        <!-- Displaying Scores -->
        <p>Scores:</p>
        <p>Ross: <span sf-react="text($v.ross)">Zero</span>Points</p>
        <p>Monica: <span sf-react="text($v.monica)">Zero</span>Points</p>
        <button sf-goto="next">See Winner</button>
    </div>
</form>

Webflow Example:

Understanding $v

The $v variable in Superform refers to the scoring variables initialized in your form. It allows you to access and manipulate the scores dynamically. You can use $v in various contexts to create interactive and responsive form elements.

Reference:

• $v.ross - Accesses the score variable "ross".

• $v.monica - Accesses the score variable "monica".

For more details on $v and other form variables, refer to the Superform Variables Documentation.

Score Calculation Methods

Implementing Dynamic Scoring

Understand how to calculate scores using different methods available in Superform. Customize scoring logic to suit various form requirements.

Attribute: sf-score-calc

Where: Input elements (radio buttons, checkboxes)

Calculation Methods

• add(condition, variable, value): Adds value to variable if condition is true.

• minus(condition, variable, value): Subtracts value from variable if condition is true.

• multiply(condition, variable, value): Multiplies variable by value if condition is true.

• divide(condition, variable, value): Divides variable by value if condition is true.

HTML Example

<form sf="friendsForm" sf-score="ross,monica">
    <div sf-step="step1">
        <p>Who would win in a fight?</p>
        <input type="radio" name="fightWinner" value="ross" sf-score-calc="add(checked, ross, 1)"> Ross<br>
        <input type="radio" name="fightWinner" value="monica" sf-score-calc="add(checked, monica, 1)"> Monica<br>
        <!-- Displaying Scores -->
        <p>Scores:</p>
        <p>Ross: <span sf-react="text($v.ross)">Zero</span>Points</p>
        <p>Monica: <span sf-react="text($v.monica)">Zero</span>Points</p>
        <button sf-goto="next">See Winner</button>
    </div>
</form>

Webflow Example

---

Using Score Variables Beyond Text

Scoring variables can also be used in various elements and contexts beyond simple text display. Here are some imaginary examples:

• Enabling/Disabling Class:

If Ross's score is lower than Monica's activate an is-disabled class for the bonus button.

<button sf-react="class($v.ross <= $v.monica, is-disabled)">Unlock Bonus for Ross</button>

• Showing/ Hiding Elements:

If Ross's score is more than 5, show a text with "Special reward unlocked for Ross!"

<div sf-react="visibility($v.ross > 5)">
    Special reward unlocked for Ross!
</div>

Pro Tips

• Initialization: Ensure scoring variables are correctly set in the sf-score attribute.

• Dynamic Display: Use sf-react to dynamically update and display scores based on user interactions.

• Versatility: Utilize scoring variables to influence various form elements, enhancing interactivity and user engagement.