# Scoring Variables ($v)

The special `$v` variable represents scoring variables in Superform, allowing you to track and calculate scores for quizzes and other interactive elements. 

* **Track Scores**: Use `$v` to keep track of scores for different items or participants.
* **Calculate Scores**: Update scores dynamically based on user actions.
* **Display Scores**: Easily show current scores in real-time with [Reactivity](https://deltaclan.gitbook.io/superform/reactivity).
* **Rank Scores**: Automatically rank participants based on their scores with [score-ranking](https://deltaclan.gitbook.io/superform/score-tracking/score-ranking "mention").

{% hint style="warning" %}
**Learn More**

For an in-depth explanation and advanced usage of quiz and scoring variables, check out the full [score-tracking](https://deltaclan.gitbook.io/superform/score-tracking "mention") sections.

{% endhint %}

***

## Example

Since Superform is built in vanilla JavaScript, you will see both HTML and Webflow examples, it's practically the same — works with Webflow's Custom Element and elements inside Code Embed.

### Friends Quiz

Let's build a Ross vs Monica simple quiz. Who would win in a fight?

**1.** **Initialize Scoring Variables:** Declare the scoring variables within your form container to track points for `ross` and `monica`.\
\
`sf-score="ross, monica"`

\
**2.** **Score Your Answers:** Use radio buttons (or *`any`* input element) to allow selection between Monica and Ross, incrementing the score based on user choice.\
\
`sf-score-calc="method(expression, variable, value)"` \
(available methods: `add`, `minus`, `multiply`, `divide`)\
\
`sf-score-calc=add(checked, ross, 1)`\
`sf-score-calc=add(checked, monica, 1)`\
\
Here we are adding each method to the respective radio button to assign points to each answer.<br>

**3. Displaying Results:** Show any variable's points and which is the top choice with `$v.variableName`, `$v_rank[0]`  and Reactivity.

<details>

<summary>HTML Code Example</summary>

{% code title="index.html" %}

```html
<!-- Form Container -->
<div sf="friendsForm" sf-score="ross,monica">
   <form>
  <!-- First Step: User Choices -->
      <div sf-step="choice">
      <p>Who would win in a fight?</p>
      <label>
        <input type="radio" name="fight" value="ross" sf-score-calc="add(checked, ross, 1)"> Ross
      </label>
      <label>
        <input type="radio" name="fight" value="monica" sf-score-calc="add(checked, monica, 1)"> Monica
      </label>
   </div>
    
    <!-- Display Scores -->
    <div>
      <p>Scores:</p>
      <p>Ross: <span sf-react="text($v.ross)"></span> Points</p>
      <p>Monica: <span sf-react="text($v.monica)"></span> Points</p>
      <button sf-goto="next">Next</button>
    </div>
  </div>

  <!-- Second Step: Display Winner -->
  <div sf-step="result">
    <p>Final Winner: <span sf-react="text($v._rank[0])"></span></p>
  </div>

  </form>
</div>

```

{% endcode %}

</details>

**Webflow Example**

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2F6Uqsu4ynMJ7gppqAzoGN%2F%24v_Final_Simple_Friends.mp4?alt=media&token=fead83d2-3a9a-4293-867a-cb535ddf1e5a>" %}

{% hint style="info" %}
**Understanding $v.\_rank variable**

The `$v._rank` array variable is a powerful feature of Superform that automatically ranks scoring variables based on their values in descending order.&#x20;

* **Ranking Array**: $v.\_rank is a special Superform feature that sorts scoring variables by their scores from highest to lowest.&#x20;
* **Access Rankings**: Use indexing like $v.\_rank\[0] for the top scorer, $v.\_rank\[1] for second place, and so on, to easily access and display ranking positions.
* \[0] = ross

  \[1] = monica\
  ...

![](https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FkX6CfE0oFehBI0o2XMAI%2FCleanShot%202024-06-17%20at%2013.54.27%402x.png?alt=media\&token=31325ac7-9aec-4cd8-aafd-8550bc7db871)<br>

*This mechanism is particularly useful in quizzes and polls where you need to declare a winner or preferred option based on scoring, as it simplifies accessing the top result without the need for additional sorting or comparison logic.*

→ Explore $v.\_rank feature [here](https://deltaclan.gitbook.io/superform/score-tracking/score-ranking).&#x20;

{% endhint %}