> ## Documentation Index
> Fetch the complete documentation index at: https://docs.altoura.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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 : valueIfFalse`

**Another 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 array
* `clamp(v, min, max)` — Constrain number between min and max
* `now()` — 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:

<Tip>
  Set variable values manually in the Variable Inspector preview to see how interpolation changes the text. For example:

  1. Set `userName = "Alice"`
  2. Preview the state
  3. See text like "Hello Alice, welcome!"
  4. Change `userName = "Bob"`
  5. See text update to "Hello Bob, welcome!"
</Tip>

## Best Practices

<AccordionGroup>
  <Accordion title="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.
  </Accordion>

  <Accordion title="Always initialize variables">
    Set default values so interpolated text doesn't show blanks. `userName = ""` is better than `undefined`.
  </Accordion>

  <Accordion title="Use ternary for conditional text">
    Instead of creating separate panels for different text, use `{{condition ? text1 : text2}}` to keep one panel that changes.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="Test with real data">
    Preview your training with actual variable values to make sure the interpolated text looks good and reads naturally.
  </Accordion>

  <Accordion title="Use friendly text">
    Even if `score = 92`, consider displaying "Great job!" instead of just the number. Use ternary expressions to show friendly feedback.
  </Accordion>
</AccordionGroup>

## Common Mistakes

<Warning>
  **Forgetting quotes in expressions:** If you use a string value in a ternary, add quotes: `{{actualValue == 'correct' ? 'You got it!' : 'Try again'}}`
</Warning>

<Warning>
  **Leaving uninitialized variables:** If you interpolate a variable you forgot to create, it displays as blank. Always create and initialize variables first.
</Warning>

<Warning>
  **Using interpolation in conditions:** Conditions use variables directly, not interpolation. Use `score >= 80`, not `{{score}} >= 80`.
</Warning>

## Next Steps

Learn more about:

* **[Creating Variables](/creator-studio/creator-app/variables/creating-variables)** — Set up the variables you interpolate
* **[Variable Types](/creator-studio/creator-app/variables/variable-types)** — Understand string, number, boolean, and array types
* **[Conditions](/creator-studio/creator-app/conditions)** — Use variables to control training flow (not interpolation)