Variables and Interactive Controls
Use variables to connect components and create lessons that respond to learner input.
A variable is a named value that persists across a lesson. Components can write to variables (a slider sets a value, a learner types their name) and other components can read from them (a text block displays the value, a visibility condition checks it).
Creating a variable
Open the Variables tab in the lesson sidebar. Click Add Variable and give it a name. Variable names should be lowercase with no spaces — score, userName, selectedPath are all valid names.
You can set a default value if the variable should start with something specific.
Binding controls to variables
Input components — like text inputs, number inputs, and sliders — have an Output Variable setting. Set it to a variable name, and whenever the learner changes the input, the variable updates automatically.
For example:
- A Slider with an output variable of
ratingupdatesratingas the learner drags - A Text Input with an output variable of
userNamecaptures whatever the learner types
Some question components also track answers in variables. A Multiple Choice question can store the selected choice ID in a variable for use later in the lesson.
Conditional visibility
Every component has a Visibility Condition setting. You can write a condition using variable values, and the component only appears when the condition is true.
Common patterns:
- Show a “Correct!” message only when
score >= 8 - Show a hint block only after the learner has made an attempt:
attempts > 0 - Show different feedback based on which path the learner chose:
selectedPath == "B"
Conditions update in real time as variables change. If a learner earns enough points mid-step, the congratulations message appears immediately.
Linking components together
Variables are how components communicate. A few examples:
Fraction bar + slider — A slider sets a numerator variable. A custom fraction bar widget reads numerator and updates its display in real time. The learner drags the slider and watches the visual respond.
Score tracker — Multiple choice questions add to a score variable. A results screen displays Your score: {{score}} and conditionally shows different feedback based on the score range.
Personalized intro — A text input on the first step captures the learner’s name into userName. Every subsequent step can address them by name.
Common patterns
Show feedback after an attempt — Add a question and a feedback text block. Set the feedback block’s visibility condition to attempted == true. The block appears only after the learner submits.
Display results based on score — Create multiple result blocks, each with a different visibility condition (score < 5, score >= 5 && score < 8, score >= 8). Only the appropriate block appears on the results step.