Variables and Expressions

variablesexpressionsconditionslogicsystem-variablesvisibility

Variables are named values that your Ripple remembers during a session. They track scores, record choices, control visibility, and drive logic. Combined with expressions and conditions, variables turn static content into dynamic, responsive experiences.

Variable Types

Boolean

True or false. Default: false.

Use for flags and toggles: $quizComplete, $soundEnabled, $hintShown.

Number

Any numeric value. Default: 0.

Use for scores, counters, and measurements: $score, $attempts, $lives, $progress.

String

Text value. Default: "" (empty).

Use for names, messages, and identifiers: $currentAnswer, $playerName, $selectedOption.

Creating Variables

  1. Open the Variables panel in the editor
  2. Click Add Variable
  3. Give it a name (letters, numbers, and underscores — e.g. score, quiz_complete)
  4. Choose a type (boolean, number, or string)
  5. Set a default value

Variable names must start with a letter or underscore and can be up to 25 characters. Names like true, false, null, and other reserved words cannot be used.

System Variables

Rippily provides 10 read-only system variables that expose runtime information. You can use them in conditions and expressions but cannot modify them.

Variable Type Description
$sys.sceneName String Name of the current scene
$sys.sceneIndex Number Current scene number (1-based)
$sys.totalScenes Number Total number of scenes in the Ripple
$sys.participantCount Number Number of participants currently in the Ripple
$sys.isHost Boolean Whether the current user is the host
$sys.userName String Current user's display name
$sys.elapsedSeconds Number Seconds since the Ripple loaded
$sys.breakoutsActive Boolean Whether breakout zones are currently active
$sys.inBreakoutZone Boolean Whether the current user is inside a breakout zone
$sys.breakoutZoneName String Name of the breakout zone the user is in (empty if not in a zone)

System variables are prefixed with sys. to distinguish them from user-defined variables.

Expressions

Expressions compare values and produce a true/false result. They're used in action conditions and element visibility rules.

Basic Syntax

$variableName operator value

Comparison Operators

Operator Meaning
== Equal to
!= Not equal to
< Less than
> Greater than
<= Less than or equal to
>= Greater than or equal to

Examples

$score > 5
$quizComplete == true
$attempts < 3
$currentAnswer == "Paris"
$sys.participantCount >= 2
$sys.isHost == true

Compound Conditions

Combine multiple conditions with && (all must be true) or || (any must be true):

$score >= 8 && $quizComplete == true
$lives == 0 || $timeUp == true

Variable-to-Variable Comparison

You can compare one variable to another by enabling "variable reference" mode:

$score >= $targetScore
$currentAnswer == $correctAnswer

Conditional Visibility

Every element supports two visibility expressions:

Show When (visibleWhen)

The element is visible only when the expression evaluates to true.

Example: $quizComplete == true — the element only appears after the quiz is finished.

Hide When (hiddenWhen)

The element is hidden when the expression evaluates to true. If both are set, Hide When takes precedence.

Example: $hintShown == true — the hint button disappears after the hint has been revealed.

Fade Transitions

You can set fade-in and fade-out durations (in milliseconds) for smooth visibility transitions. When a condition changes, the element fades in or out rather than appearing or disappearing instantly.

Common Patterns

Score-Gated Content

Show a results panel only when the participant has answered enough questions:

  • Results panel: visibleWhen: $answeredCount >= 5
  • Score display: always visible, text includes $score

Role-Based Messages

Show different content based on the user's role:

  • Host instructions: visibleWhen: $sys.isHost == true
  • Participant instructions: hiddenWhen: $sys.isHost == true

Participant Count Feedback

Show different elements based on how many people are present:

  • "Waiting for more participants": visibleWhen: $sys.participantCount < 3
  • "Ready to start": visibleWhen: $sys.participantCount >= 3

Progressive Reveal

Use a counter variable to reveal elements one at a time:

  • Element 1: visibleWhen: $step >= 1
  • Element 2: visibleWhen: $step >= 2
  • Element 3: visibleWhen: $step >= 3
  • "Next" button: increments $step by 1 on each click

Breakout Zone Awareness

Show zone-specific content:

  • Welcome message: visibleWhen: $sys.breakoutZoneName == "Team A"
  • Instructions: visibleWhen: $sys.inBreakoutZone == true

Tips

  • Default values matter: Variables reset to their defaults when the Ripple loads. Choose defaults that make sense for a first-time visitor (score starts at 0, quiz starts as incomplete).
  • System variables are read-only: You cannot set $sys.participantCount — it updates automatically. Use it in conditions but not in Set Variable actions.
  • Variables persist per session: Variables keep their values as long as the participant is in the Ripple. Refreshing the page resets everything to defaults.
  • Combine visibility and layers: Use visibleWhen for individual elements and Layer actions for groups of elements. They work together — an element must be on a visible layer AND pass its visibility condition to appear.

What's Next?