Superform by Delta Clan
✨ ClonablesSocialResourcesSuperform Home
v0
v0
  • 🌠Introduction (BETA)
  • 👁️Getting Started
    • Script Installation
      • Cloneable #1
  • 🎼Navigation Attributes
    • Form
    • Step
    • Next Button
    • Back Button
    • Submit Button
    • Radio Button Navigation
    • Step Teleport
    • Point Scoring
    • Dynamic Endings
  • 🔢Progress Attributes
    • Progress Bar
    • Progress Steps
    • Total Steps Label
    • Current Step Label
  • ✅Validation Attributes
    • Validate & Error (must read)
    • Email Validation
    • Characters Count (Min/Max)
    • Words (Min/Max)
    • Checkboxes (Min/Max)
    • Include Characters
  • 🔢MISC. ATTRIBUTES
    • Step Transition Duration
    • Enable Enter/Cmd Enter Navigation
    • Value Recall
Powered by GitBook
On this page

Was this helpful?

  1. Navigation Attributes

Dynamic Endings

Last updated 2 years ago

Was this helpful?

Information

Attribute: superform-ending = [minimun points, maximum points] eg. superform-points=[0,3]

Apply to: elements with superform-element="step" attribute (Superform Steps).

Description: Create different endings based on the user's answers or progress, like this example: .

Point scoring completion is a powerful feature that allows you to create dynamic endings for your forms. With this feature, you can mark a step with an ending attribute (superform-ending) that defines a range of minimum and maximum points required to reach that particular ending.

As the user progresses through the form, they can score points by completing certain actions or answering certain questions (radio buttons or checkboxes). The total number of points scored is calculated dynamically. When the user reaches the final step of the form, the step with the ending attribute that matches their point score will be displayed.

Multiple steps can be marked as superform-ending, and all of them will be counted as ending steps. However, only one ending step will be displayed based on the user's points. This ending step is always counted as the final step, and the other steps are counted normally. For example, if you have 10 total steps and 3 ending steps, Superform will consider 11 steps in total. The ending step will be dynamically replaced based on the user's point-scoring, so even if you teleport to the ending step from an early step in the form, the specific scenario will be shown based on the points collected.

This feature can be used in a variety of ways to create engaging and interactive forms. For example, you can use it to create quizzes, assessments, or surveys that provide personalized feedback based on the user's performance.

In the following example, the user selected an option (radio button) which scores 5 points with superform-points=5 attribute, then he is immediately teleported to a step is marked as Ending with superform-ending=[5,8].

It is recommended that all Dynamic Endings are placed in the end to avoid mental fatigue, since only 1 ending is always counted as a step.

If you don't need minimum & maximum, but a strict number, then you use superform-ending[number, number]. Example: strictly 5 points -> superform-ending=[5,5]

🎼
https://superform-v1.webflow.io/
User selects a radio button with superform-points=5 (5 points)
User is teleported to an Ending Scenario that has superform-ending=[5,8]