Superform by Delta Clan
✨ ClonablesSocialResourcesSuperform Home
v2
v2
  • 🏁Getting Started
    • Introduction
    • Quick Start
  • 🫀Essentials
    • Form Container
    • Step Container
    • Navigation - Overview
      • Direct
      • Logic / Conditional
      • Hook
    • Variables
      • Form Data ($f)
      • Step Index ($s)
      • Progress Percentage ($p)
      • Scoring Variables ($v)
    • Progress Bar
    • Reset
    • Radio Groups
    • Checkbox Groups
    • Cheatsheet
  • ⚙️Global Options
    • Step Delay Controls
    • Animations
      • Step Animation
      • Step Animation Duration
      • Step Animation Ease
    • Save Data & Progress
    • Pre-fill Form
    • Prevent Content Flash
    • Debug
    • Third-party Integrations
    • Cheatsheet
  • 🎛️Input Validation & Errors
    • Validation
      • length()
      • words()
      • minmax()
      • checkbox()
      • must()
      • hook()
    • Error Management
      • Automatic Error Setup
      • Manual Error Setup
  • ⚡Reactivity
    • Update Text
    • Visibility
    • Class Toggle
    • Value
    • Set Attribute
  • 🔢Score Tracking
    • Score Setup & Calculation
    • Score Ranking
  • ⌨️Accessibility
    • Enter & Backspace Bindings (↩, ⌫)
    • Checkbox & Radio Bindings
  • 🛠️Javascript SDK
    • Intro to Superform API
    • Superform Instance
    • Cheatsheet
  • 📖Additional Resources
    • WTF is an expression ? 🆕
    • Integrations
    • Tutorials
    • Changelog
    • FAQ 🚧
    • Join Discord
Powered by GitBook
On this page
  • Example
  • Friends Quiz

Was this helpful?

  1. Essentials
  2. Variables

Scoring Variables ($v)

Track and rank scores dynamically for quizzes and interactive forms.

Last updated 9 months ago

Was this helpful?

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 .

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

🫀
Reactivity
here