Scoring Variables ($v)

Track and rank scores dynamically for quizzes and interactive forms.

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.

• Rank Scores: Automatically rank participants based on their scores with Score Ranking.

Learn More

For an in-depth explanation and advanced usage of quiz and scoring variables, check out the full Score Tracking sections.

---

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.

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

HTML Code Example

index.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>

Webflow Example

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.

• Ranking Array: $v._rank is a special Superform feature that sorts scoring variables by their scores from highest to lowest.

• 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 ...

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.