✨ Clonables
Social
Resources
Superform Home

Score Ranking

Ranking for dynamic scores.

Learn how to use the ranking feature in Superform to dynamically sort and display scores. This is particularly useful for quizzes and competitive scenarios.

How Ranking Works

Superform includes a ranking feature accessed via $v._rank. This array sorts scoring variables in descending order based on their scores.

Syntax

$v._rank[number]

Explanation

  • $v._rank[0]: Retrieves the highest-scoring variable.

  • $v._rank[1]: Retrieves the second highest-scoring variable, and so on.

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>
        <button sf-goto="next">Next</button>
        <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>
    <div sf-step="step2">
        <p>Final Winner: <span sf-react="text($v._rank[0])"></span></p>
    </div>
</form>

Webflow Example:

→ See the example live here.

Pro Tips

  • Dynamic Updates: Use $v._rank to dynamically display top scorers.

  • User Engagement: Enhance user engagement by showing rankings in real-time.

Ranking Behind The Scenes

The $v._rank is a JavaScript array that automatically ranks scoring variables based on their values in descending order.

  • Internal Array: $v._rank is managed internally by Superform. You don't set or modify this array directly; it is automatically updated based on the scoring variables defined in your form.

  • Real-Time Updates: The array is updated in real-time, reflecting the latest scores as users interact with the form.

How Arrays Work in JavaScript

An array is a data structure that holds multiple values in a single variable. Arrays in JavaScript are zero-indexed, meaning the first element is accessed at index 0, the second element at index 1, and so on.

Example of Array Operations:

// Define an array
let scores = [85, 92, 75, 98, 88];

// Sort the array in descending order
scores.sort((a, b) => b - a); // [98, 92, 88, 85, 75] 

// The .sort() function sorts the array just like $v._rank in Superform
// It updates in real-time to reflect the latest scores

// Access the highest score
console.log(scores[0]); // 98  --> This is equivalent to $v._rank[0] in Superform

// Access the second highest score
console.log(scores[1]); // 92  --> This is equivalent to $v._rank[1] in Superform

In Superform, the $v._rank array operates similarly. It sorts the scoring variables so that the highest score is at index 0, the second highest at index 1, and so on. This allows for easy and efficient access to the top scores without additional calculations.

Efficiency

Using array indexing ([0], [1], etc.) is a straightforward and efficient method to reference specific rankings. It allows quick retrieval of ranking positions without additional calculations or sorting mechanisms.

Summary

By understanding the underlying array mechanics, you can leverage Superform's ranking feature to create interactive and engaging forms with dynamic score tracking and ranking capabilities. This approach is intuitive and easy to grasp, even for those with minimal JavaScript knowledge.

Useful Links

Last updated