Variable Interpolation Variable interpolation is a way to embed variable values directly into text strings. Instead of showing fixed text, you can make text dynamic by inserting variable values.The syntax is simple: wrap the variable name in double curly braces: {{variableName}}
Basic Syntax "Hello {{userName}}, you scored {{score}} points."
When this text is displayed:
{{userName}} is replaced with the value of the userName variable{{score}} is replaced with the value of the score variable
Example:
If userName = "John" and score = 95
The text becomes: "Hello John, you scored 95 points."
Common Uses Interpolation works in any text field in the Creator App. Here are the most common uses:
Show Text Action Variable: userName = "Sarah" Variable: completionTime = 120 Action: Show Text Text: "Great job, {{userName}}! You completed the training in {{completionTime}} seconds." Displays: "Great job, Sarah! You completed the training in 120 seconds."
Panel Titles and Descriptions Variable: questionNumber = 3 Variable: totalQuestions = 10 Panel Title: "Question {{questionNumber}} of {{totalQuestions}}" Panel Body: "You have {{attemptsRemaining}} attempts remaining. Choose wisely." Displays: Title: "Question 3 of 10" Body: "You have 2 attempts remaining. Choose wisely."
Feedback Messages Variable: score = 87 Variable: passingScore = 70 Text: "{{score}} out of {{passingScore}} is {{score >= passingScore ? 'Passing' : 'Failing'}}." Displays: "87 out of 70 is Passing."
All Variable Types Interpolation works with all variable types:
String Variables Variable: selectedAnswer = "Option A" Text: "You selected: {{selectedAnswer}}" Displays: "You selected: Option A"
Number Variables Variable: score = 92 Variable: attempts = 3 Text: "Score: {{score}}, Attempts: {{attempts}}" Displays: "Score: 92, Attempts: 3"
Boolean Variables Variable: isComplete = true Text: "Complete: {{isComplete}}" Displays: "Complete: true"
Note: Booleans display as “true” or “false”. For user-friendly text, use a ternary expression (see below).
Array Variables Variable: completedSteps = ["Read Instructions", "Identify Valve", "Turn Valve"] Text: "You've completed {{len(completedSteps)}} steps." Displays: "You've completed 3 steps."
Arrays don’t interpolate directly (you can’t display the whole list). Use functions like len() to work with them.
Advanced: Using Expressions in Interpolation In addition to simple variable names, you can use expressions inside {{ }}. This includes:
Ternary Expressions (If-Then-Else) Variable: score = 85 Variable: passingScore = 80 Text: "You {{score >= passingScore ? 'passed' : 'failed'}} the quiz!" Displays: "You passed the quiz!"
Formula: condition ? valueIfTrue : valueIfFalseAnother example: Variable: attempts = 2 Text: "{{attempts == 1 ? 'This is your first attempt.' : 'You have attempted ' + attempts + ' times.'}}" // If attempts = 2, displays: "You have attempted 2 times."
Arithmetic Variable: score = 92 Variable: maxScore = 100 Text: "You scored {{(score / maxScore) * 100}} percent." Displays: "You scored 92 percent."
Function Calls Variable: completedSteps = ["step1", "step2", "step3"] Text: "Completed {{len(completedSteps)}} of 5 steps." Displays: "Completed 3 of 5 steps."
Available functions:
len(value) — Length of string or arrayclamp(v, min, max) — Constrain number between min and maxnow() — Current timestamp (milliseconds)In(stateId) — True when the given state is currently active
String Concatenation Variable: firstName = "John" Variable: lastName = "Smith" Text: "Welcome {{firstName + ' ' + lastName}}" Displays: "Welcome John Smith"
Undefined Variables: Default Behavior What happens if you try to interpolate a variable that doesn’t exist or is uninitialized?
Variable: userName = undefined (or doesn't exist) Text: "Hello {{userName}}, welcome!" Displays: "Hello , welcome!"
The variable is replaced with an empty string . The text still displays, but with nothing in place of the variable.
To avoid this:
Always initialize variables with a default value
Use a ternary expression to provide fallback text:
Text: "Hello {{userName === "" ? "Guest" : userName}}, welcome!" // If userName is empty, displays: "Hello Guest, welcome!"
Real-World Examples Quiz Feedback Variable: score = 87 Variable: maxScore = 100 Variable: userName = "Sarah" Variable: feedbackLevel = score >= 80 ? "great" : "okay" Text: "{{userName}}, you did {{feedbackLevel}}! You scored {{score}} out of {{maxScore}} ({{(score / maxScore) * 100}} percent)." Displays: "Sarah, you did great! You scored 87 out of 100 (87 percent)."
Personalized Status Message Variable: currentStep = 3 Variable: totalSteps = 5 Variable: userName = "John" Text: "{{userName}}, you're on step {{currentStep}} of {{totalSteps}}. {{totalSteps - currentStep}} steps remain." Displays: "John, you're on step 3 of 5. 2 steps remain."
Time-Based Messaging Variable: elapsedSeconds = 125 Text: "You've spent {{elapsedSeconds >= 60 ? 'over a minute' : 'under a minute'}}." Displays: "You've spent over a minute."
Conditional Content Variable: passScore = 80 Variable: actualScore = 92 Variable: feedbackURL = actualScore >= passScore ? "https://advanced.example.com" : "https://basic.example.com" Text: "Click here for {{actualScore >= passScore ? 'advanced' : 'basic'}} content: {{feedbackURL}}" Displays: "Click here for advanced content: https://advanced.example.com"
Where Interpolation Works Interpolation is available in:
Location Example Show Text action text "You scored {{score}}."Show Panel title and body "Question {{currentQuestion}} of {{total}}"Narrative or audio cue text "Hello {{userName}}"Any text field in the Creator App Anywhere you see a text input, you can interpolate
Where it doesn’t work:
Variable names and values (you can’t use interpolation in the Variable Inspector itself)
Condition expressions (use variables directly, not interpolated)
Testing Interpolation When you preview your training:
Set variable values manually in the Variable Inspector preview to see how interpolation changes the text. For example:
Set userName = "Alice"
Preview the state
See text like “Hello Alice, welcome!”
Change userName = "Bob"
See text update to “Hello Bob, welcome!”
Best Practices
Keep interpolation readable
Avoid overly complex expressions in {{ }}. If it’s hard to read, it’s hard to maintain. Consider breaking complex logic into separate variables.
Always initialize variables
Set default values so interpolated text doesn’t show blanks. userName = "" is better than undefined.
Use ternary for conditional text
Instead of creating separate panels for different text, use {{condition ? text1 : text2}} to keep one panel that changes.
Be consistent with variable names
If you use userName in some places and learnerName elsewhere, you’ll confuse yourself. Pick a naming convention and stick with it.
Preview your training with actual variable values to make sure the interpolated text looks good and reads naturally.
Even if score = 92, consider displaying “Great job!” instead of just the number. Use ternary expressions to show friendly feedback.
Common Mistakes Forgetting quotes in expressions: If you use a string value in a ternary, add quotes: {{actualValue == 'correct' ? 'You got it!' : 'Try again'}}
Leaving uninitialized variables: If you interpolate a variable you forgot to create, it displays as blank. Always create and initialize variables first.
Using interpolation in conditions: Conditions use variables directly, not interpolation. Use score >= 80, not {{score}} >= 80.
Next Steps Learn more about:
