# Score Setup & Calculation

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](https://deltaclan.gitbook.io/superform/essentials/form-container "mention")

**HTML Example**

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

**Webflow Example**

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2F6kBr9lcxlyU0LDiDeTZM%2FCleanShot%202024-07-19%20at%2014.23.53%402x.png?alt=media&#x26;token=bd48bafc-6fea-4516-b3ae-b91b6395f16f" alt=""><figcaption></figcaption></figure>

### **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:**

```html
<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:**

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2Fv9HRCHl9ba54BWeadWZu%2FCleanShot%202024-07-19%20at%2014.24.46%402x.png?alt=media&#x26;token=660e545a-9e1d-4bf6-b71f-370f56d9e7ca" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**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](https://deltaclan.gitbook.io/superform/essentials/variables).

{% endhint %}

### **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**

```html
<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

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2F8hqcaWnPY5Ceqbk8Fky9%2FCleanShot%202024-07-19%20at%2020.08.59%402x.png?alt=media&#x26;token=d6580824-6790-48a0-bf8a-91fd266f5b61" alt=""><figcaption></figcaption></figure>

***

## **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.

```html
<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!"

```html
<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.