Skip to Content
📧 Join the Teacharium waitlist to get access. 
User DocumentationWidgetsNavigation Choice

Navigation Choice

Present multiple navigation options that allow learners to choose their own path through a lesson. Navigation Choice widgets are perfect for choose-your-own-adventure scenarios, dialog systems, and branching narratives.

Behavior

  • Interactive navigation – Learners click on a choice to navigate to a specific step in the lesson
  • Rich choice content – Each choice can contain text, images, icons, or other content components
  • Visual feedback – Selected choices are highlighted to show the learner’s decision
  • Flexible layout – Display choices vertically or horizontally
  • Variable tracking – Tracks the selected choice in a variable for use with other widgets
  • Disabled state – Choices without a target step are automatically disabled

Use cases

Choose Your Own Adventure

Create interactive stories where learners make decisions that affect the narrative:

Example scenario: A leadership training module where learners face a team conflict. Present three navigation choices:

  • Choice 1: “Address the conflict immediately in a team meeting” → navigates to Step 5 (immediate confrontation scenario)
  • Choice 2: “Meet with team members individually first” → navigates to Step 6 (one-on-one conversations)
  • Choice 3: “Observe the situation for a few more days” → navigates to Step 7 (wait-and-see approach)

Each path leads to different scenarios, consequences, and learning outcomes. Learners experience the results of their decision-making style.

Dialog System

Build interactive conversations where learners respond to prompts with dialog options:

Example scenario: A customer service training module simulating a challenging phone call. The customer says: “I’ve been on hold for 30 minutes and I’m extremely frustrated!”

Present three navigation choices:

  • Choice 1: “I sincerely apologize for the wait. Let me help you right away.” → navigates to Step 10 (empathetic response path)
  • Choice 2: “I understand. Can you tell me what you’re calling about?” → navigates to Step 11 (solution-focused path)
  • Choice 3: “Our wait times are longer than usual due to high call volume.” → navigates to Step 12 (defensive response path)

Each response choice leads to different customer reactions and teaching moments about communication skills.

Inputs

Navigation Choices (array)

  • List of navigation options presented to the learner
  • Each choice has:
    • Choice ID: Auto-generated unique identifier
    • Choice Content: Rich content (text, images, etc.) displayed as the choice option
    • Target Step: The step to navigate to when this choice is selected
  • Choices without a target step are shown as disabled (grayed out)
  • Default: 3 sample choices provided

Layout Direction (Vertical / Horizontal)

  • Choose how navigation choices are displayed
  • Vertical: Choices stacked on top of each other (recommended for longer text)
  • Horizontal: Choices displayed side-by-side (recommended for short options)
  • Default: Vertical

Tips for authors

  • Clear choices: Write concise, distinct options that make the decision meaningful
  • Meaningful branches: Ensure each choice leads to genuinely different experiences
  • Rejoin points: Consider whether branching paths eventually rejoin or lead to different endings
  • Combine with variables: Use the tracked “selectedChoice” variable with Logic widgets to create complex branching scenarios
  • Content in choices: Take advantage of rich content - add icons, images, or formatting to make choices visually distinctive
  • Test all paths: Preview your lesson and test each navigation path to ensure the experience flows correctly
Last updated on