Interactive Blocks

Interactive blocks engage learners through exploration, conversation, and hands-on activities — going beyond passive reading or watching.

AI Dialogue

An AI-powered conversational scenario where learners interact with a character or situation in free-form dialogue.

Use cases:

• Customer service roleplay
• Negotiation practice
• Interview simulation
• Decision-making scenarios

Setting up an AI Dialogue

1. Add an AI Dialogue block to your lesson
2. Write the Setting / Scenario — describe the context, situation, and what the learner's role is
3. Add Characters — each character has a name, role description, and optional avatar image
4. Add Learning Outcomes — what the learner should demonstrate during the dialogue (add multiple outcomes as a list)
5. Set a Maximum Turns limit (3-30 exchanges) — the dialogue ends after this many back-and-forth exchanges
6. Set a Passing Threshold — the minimum score (%) required to mark the activity as complete
7. Optionally add an Initial Message to set the scene before the learner responds
8. Optionally enable Text-to-Speech to give character messages a voice — configure a voice for each character in their settings
9. Optionally enable Audio Input (Microphone) — learners can speak their responses using their microphone instead of typing

Learners type freely. The AI plays the characters and steers the conversation based on the scenario. The Assessment Agent evaluates the conversation against your Learning Outcomes and provides a score and feedback when the dialogue ends.

Tip: Be specific in the scenario description. The more context the AI has, the more realistic and useful the interaction.

Tip: Enable Audio Input (Microphone) for spoken-language practice scenarios — learners can record their response and the AI transcribes it automatically. This works well for language learning, pronunciation practice, and presentation coaching.

Character poses

AI Dialogue supports two character pose modes:

For sitting dialogues, you can regenerate individual emotions — if a particular emotion variant doesn't look right, regenerate just that one without affecting the others.

Character speech bubbles

When characters have avatar images, the editor displays draggable speech bubble placeholders and tail point handles in the scenario preview. Drag the speech bubble to position it relative to the character, and drag the tail handle to point it at the character. These positions are saved and shown in the learner-facing dialogue view.

Observer mode

AI Dialogue supports an Observer mode where the learner watches a conversation unfold between AI-played characters, rather than participating themselves. This is useful for demonstrating how a scenario should (or shouldn't) play out.

When Observer mode is enabled, two additional settings appear:

• First Speaker — choose which character starts the conversation, or leave it on Auto to let the AI decide
• Opening Statement — optionally write the very first line of dialogue; leave empty to let the AI generate it

Linked dialogues

Dialogues can be linked to create multi-part conversation sequences. Set a linkedDialogueBlockId to chain one dialogue into the next — when the learner finishes the first dialogue, the linked dialogue continues the scenario with the same context.

Guest mode

Courses with guest mode enabled allow anonymous users to interact with AI Dialogue blocks without logging in. AI credits for guest dialogue sessions are deducted from the course owner's account.

Assessment

The AI evaluates conversations against your Learning Outcomes. Feedback is shown to the learner after the dialogue ends. Scores are recorded in the learner dashboard.

Accordion / Tabs

A structured content block that presents information in one of three layouts: collapsible accordion sections, classic tabs, or full-height image strips. Use it to organise longer or multi-topic content without overwhelming learners with a wall of text.

Use cases:

• Step-by-step reference material with expandable detail
• Content with distinct subtopics that learners switch between
• FAQs or glossaries
• A row of visually-rich sections that open like pills, magazine-style

Setting up an Accordion / Tabs block

1. Add an Accordion / Tabs block to your lesson
2. Choose a display mode:
   • Accordion — sections stack vertically and expand/collapse on click. The selected section's background image or colour fills the entire card (header and body) and the expansion animates smoothly to its natural height.
   • Tabs — classic horizontal tab row above a content panel. When a tab has a background image or colour set, it carries through to the panel below so the active tab visually fuses with its content.
   • Strips — tall pills laid out in a row. Inactive pills display the section title rotated vertically; clicking a pill expands it to fill the remaining width and renders its content directly on top of the background. Good for visually-rich navigation between sections.
3. Optionally add an Introduction paragraph above the sections
4. Double-click a section's title to edit it in a rich-text modal
5. Click a section to expand it and edit the body content (rich text, including images)
6. Add more sections with the + button between items
7. Open the inspector to set a per-section background image (upload, library, stock, or AI) or background colour, plus a corner-radius setting (Strips mode)

Tip: Use Tabs for short, parallel sections (e.g. "Before / During / After"), Accordion for longer reference content where learners want to jump to a specific topic, and Strips when each section deserves its own image.

Hotspot Image

A clickable image where learners tap or click on defined areas to reveal information. You can also add overlay elements — shapes, text boxes, and images — on top of the base image to annotate or decorate it.

Use cases:

• Labeling anatomy or mechanical diagrams
• Exploring maps or floor plans
• Product feature identification

Setting up a Hotspot Image

1. Add a Hotspot Image block
2. Upload or select an image
3. Optionally add an Alt text description for the base image (improves screen reader accessibility)
4. Click Add Hotspot and drag the hotspot to the correct position on the image
5. For each hotspot, enter:
   • Label — shown when the learner clicks
   • Description — detailed content revealed on click
6. Repeat for all hotspots

Learners can explore hotspots in any order. You can optionally require all hotspots to be opened before the block is marked complete.

Overlay elements

In addition to hotspots, you can place static overlay elements on the image:

• Shape & Text — a rectangle or other shape with optional text, background color, and border
• Image — an image placed at any position on the canvas

Overlays are decorative or annotative — they appear on top of the base image but do not trigger click reveal behavior like hotspots do. Use them to add labels, callout boxes, arrows (as shapes), or supplementary images to your diagram.

To add an overlay:

1. Click the Add Overlay button (or the dropdown arrow next to it)
2. Choose Shape & Text or Image
3. Drag to position and resize on the canvas
4. Double-click to edit the text or replace the image

Drag & Drop

Learners drag items to match or sort them. Similar to the Matching and Sorting quiz question types but presented as a standalone activity block.

Modes:

• Match — drag items from a source list to correct targets
• Sort — place items in the correct sequence

Setting up Drag & Drop

1. Add a Drag & Drop block
2. Select Match or Sort mode
3. Add your items and define correct placements or order
4. Set whether partial credit is allowed

Interactive Slides

A full-featured slide authoring tool with a visual canvas editor, rich element library, and a trigger-action interaction system. Think of it as a presentation builder crossed with an interaction designer — you place elements on slides, then wire up behaviors so learners can click, drag, type, and explore.

This is not a simple click-through slideshow. It's closer to what tools like Articulate Storyline or Adobe Captivate offer, but built into LearnBuilder with AI assistance.

AI Generation wizard

The fastest way to create an interactive slideshow is with the Generate with AI button. This opens a wizard modal where you describe the simulation you want, and the AI builds the entire thing.

1. Click Generate with AI on an Interactive Slides block
2. Describe the simulation — for example, "A phishing email checker where the learner reviews emails and identifies which ones are phishing attempts"
3. Optionally click Help Me Plan — the AI asks clarifying questions to refine the scope, target audience, and interaction style before generating
4. Confirm and generate

The AI creates the full slideshow: slides, elements, triggers, actions, and scoring. You can then edit any part of it in the canvas editor.

Scoring system

Interactive Slides have a built-in scoring system for graded activities:

• score — a variable that tracks the learner's current score
• maxScore — the maximum possible score
• passingScore — the minimum score required to pass

When you use AI generation, scoring is configured automatically — correct actions increment the score, and a results slide shows the outcome. You can adjust scoring in the Settings tab of the slideshow editor.

The canvas editor

Each slide is a visual canvas where you place and arrange elements freely. Elements are positioned by dragging and can be resized, rotated, layered, locked, and styled.

Multi-select and batch editing

Select multiple elements at once (Shift+click or drag-select) to edit them as a group. The Properties panel shows a "N selected" header chip with a quick type breakdown (e.g. "3 selected — 2 text + 1 shape") so you can tell at a glance which sections are about to appear.

What batches across the whole selection:

• Universal properties — X / Y position, width, height, and rotation always batch, no matter what mix of element types you have selected. Great for aligning or resizing a group consistently.
• Type-specific properties when every selected element shares the same type — the matching section appears (Text, Shape, etc.) and edits apply to all of them. Text fills (colour, font size, weight, style, alignment) and shape fills/strokes/text styles batch fully today.

What stays single-element:

• Element name and rich-text content are not batched — collapsing N distinct labels or paragraphs to the same string is almost never what you want, so those fields hide in multi-select.
• Some type-specific panels (image, video, audio, button, icon, lottie, svg, text-input, textarea, checkbox, timer, slider, variable, scroll-container) currently show in multi-select but edit only the first selected element. Universal fields still batch even on those.

The selection-bounding outline and resize handles render at a constant visual size regardless of the canvas zoom level — they stay readable whether you're zoomed in for pixel-level tweaks or out to see the whole stage.

Element types

Element rotation

Any element on the canvas can be rotated freely:

• Drag the rotation handle that appears above a selected element
• Or enter an exact angle in degrees in the element's properties panel

Rotation is useful for angled labels, decorative shapes, and creating dynamic layouts.

Element tags

Elements can be assigned tags — custom labels that let you target multiple elements at once in trigger actions. For example, tag several answer buttons as "option" and then use a single action to show/hide all of them together.

To tag an element, select it and add one or more tags in the Properties panel. In trigger actions, choose Tag as the target type instead of a specific element, then select your tag.

Triggers and actions

This is the interaction engine. Every element can have interactions — rules that say "when this happens, do that."

Triggers (what the learner does):

Actions (what happens in response):

Each trigger can fire multiple actions, so a single button click can navigate to a slide, show a hidden element, start a timer, and increment a score variable all at once. Actions run in order top to bottom; drag the grip handle on an action card to reorder them within the Edit Interaction modal.

The target of an element-based action (Show/Hide/Toggle, Enable/Disable) is picked from a single dropdown that lists both individual elements (with a type icon) and tags — choose a tag to affect every element carrying it at once.

Conditions

Triggers and actions can both be gated by conditions — so an interaction only fires (or a specific action only runs) when the slide's state matches. Two scopes:

• Interaction-level condition — "Run only when…" at the top of the Edit Interaction modal. Gates the whole interaction; if false, none of its actions run.
• Per-action condition — same toggle inside each action's settings. Gates just that one action; other actions in the list still run.

Both compose: the interaction-level condition runs first, then each action checks its own condition.

Each condition row has three sources:

1. Variable — read a variable element's current value. Standard operators (Equals, Greater than, Contains, Is empty…) depending on the variable's type.
2. Element — read a runtime state field of a regular element on the slide. The "Condition" picker shows presets curated to the element type:
   • Checkbox — Is checked / Is unchecked
   • Text input / Textarea — Is empty / Is not empty / Equals… / Doesn't equal… / Contains… / Doesn't contain… / Length equals… / Length greater than… / Length less than…
   • Slider — Equals… / Greater than… / Less than… / At least… / At most…
   • Button — Is enabled / Is disabled / Is visible / Is hidden
   • Drag item — Reached zone / Is visible / Is hidden
   • Drop zone — Is filled correctly / Is empty / Is visible / Is hidden
   • Timer — Has finished / value comparisons in seconds / Is visible / Is hidden
   • Video / Audio / Lottie — Played to end / Is visible / Is hidden
   • Everything else (image, shape, icon, svg, plain text, scroll container) — Is visible / Is hidden
   
   "Was clicked" is intentionally not in the preset list — if you want something to react to a click, use the Click trigger on that element instead. That's the same outcome with cleaner authoring.
3. JS — a custom JavaScript expression for cases the presets don't cover (mixed AND/OR logic, cross-element references, computed checks). Return a boolean. Available helpers:
   • ctx.value(id) — the element's current value (string / number / boolean / list)
   • ctx.visible(id) — true when the element is currently rendered
   • ctx.enabled(id) — true when the element isn't disabled
   • ctx.completed(id) — true after a quiz / drop-zone / etc. marks it done
   • ctx.clicked(id) — true once the learner has clicked the element
   
   Important: these helpers take the stable element ID, not the author-set name. The JS row shows an Available elements reference list below the textarea — click an entry to copy its ctx.value('id') snippet to the clipboard. Replace value with visible, completed, etc. as needed.
   Example: ctx.value('input_2_id') === 'yes' && ctx.visible('hint_id').
   Errors in the expression are caught and treated as false — a malformed expression silently fails the condition rather than crashing the player.

When a row has multiple conditions, the ALL / ANY toggle at the top of the list controls whether they're combined with AND or OR. For more complex nested logic (e.g. (A AND B) OR C), use a single JS row.

Variable interpolation in text

Any text-bearing element (text, button label, shape) can reference variable values using {{varName}} placeholders. Both the editor canvas (using each variable's defaultValue) and the player (using live values) resolve them in real time.

Plain reference:

Score: {{score}}/10
You picked: {{selectedItem}}

Expressions — anything inside {{…}} is evaluated as JavaScript with all variables in scope, so you can compute on the fly:

{{score >= 7 ? '✓ Passed' : '✕ Try again'}}
{{selectedItems.join(', ')}}
{{Math.round(progress * 100)}}%

References resolve by the variable's name, not its element id, so authors don't need to track UUIDs. Failed expressions leave the literal {{…}} visible so a typo is obvious.

Sharing variables across blocks

By default a variable lives inside its own slideshow. Two toggles on a variable element let a value travel further:

• Export — makes the variable's value available to other blocks in the course (keyed by the variable's name).
• Import from another block — turns the variable into a read-only mirror of an exported variable elsewhere in the course. The local default value is used as a fallback until the source block has been visited.

Exported values are also usable as {{variableName}} placeholders in text and content blocks elsewhere in the lesson — so a learner's answer or score from one slideshow can be echoed back in plain text further down the page. Cross-block sharing is scoped to a single enrollment.

Style presets

Save the look of an element — fill, stroke, radius, padding, font, etc. — as a named style preset, then apply it to other elements of the same type. Presets are account-wide, so a preset created in one course is available in every course in the account. Use the Save / Apply Style menu at the top of the element inspector.

Copy and paste elements

Select one or more elements and use Ctrl/Cmd+C then Ctrl/Cmd+V (or Ctrl/Cmd+D to duplicate in place). Multi-element copy preserves the relative layout of the whole group.

Element animations

Elements can have animations applied — looping visual effects that play independently of trigger interactions. Select an element, open the Animations tab, and add one or more animations.

Each animation has a speed setting: Slow, Normal, or Fast. Animations can be enabled or disabled individually.

Slide settings

Building an interactive slideshow

1. Add an Interactive Slides block
2. Add slides using the slide panel at the bottom
3. Place elements on each slide — drag to position, resize handles to scale
4. Style elements using the properties panel (colors, fonts, borders, effects)
5. Select an element, open the Interactions tab, and add triggers with actions
6. Use Variables to track scores, choices, or state across slides
7. Preview the slideshow to test interactions

Background images

Each slide can have a background image — upload, pick from the media library, use a stock photo, or generate one with AI. You can also crop the background image directly in the editor. Use the Remove Background button to strip the background from any uploaded image using AI.

Element effects

Elements support visual effects like opacity, blur, brightness, contrast, and saturation. Combined with show/hide actions, this enables sophisticated reveal animations and transitions.

Lottie animations

The Lottie Animation element plays vector animations exported in the .lottie or .json format (from tools like LottieFiles or Adobe After Effects with Bodymovin).

Adding a Lottie animation:

1. Add a Lottie Animation element to the slide
2. In the properties panel, upload a .lottie or .json file, or paste a URL
3. Configure playback options:
   • Autoplay — start playing when the slide loads
   • Loop — repeat continuously
   • Speed — playback speed multiplier
   • Direction — forward or reverse
   • Bounce mode — ping-pong between forward and reverse
   • Segments — restrict playback to a specific frame range
4. Optionally set a background color

Lottie elements can be controlled via interactions: use the Animation Complete trigger to fire actions when an animation finishes, and use Play / Pause / Stop / Toggle Lottie actions to control specific animations from buttons or other triggers. When adding a Lottie action, select the target Lottie element from the dropdown.

Tip: Lottie animations respect the user's system preference for reduced motion (WCAG 2.3.3). When reduced motion is preferred, animations show their first frame without playing.

Accessibility checker

The lesson editor includes a built-in accessibility checker to help you identify and fix common issues before publishing.

To run a check:

1. Open the lesson editor
2. Click the ... (three-dot) menu in the editor toolbar
3. Select Check Accessibility — the label shows the number of issues found (e.g., Check Accessibility (3))
4. A panel expands listing all issues by severity:
   • Error — likely to prevent some learners from accessing content (e.g., missing video captions)
   • Warning — best practice violations that should be addressed
   • Info — suggestions for improvement
5. Click any issue to scroll the editor to the affected block
6. Each issue includes the relevant WCAG rule reference

Common checks include:

• Missing captions/subtitles on video blocks
• Missing alt text on images
• Hover-only interactions that are inaccessible to keyboard and touch users
• Hotspot image blocks without a background image alt text
• Images inside text blocks without alt text
• Low-contrast hints
• Keyboard accessibility warnings for Hotspot and Drag & Drop blocks

Example use cases

• Software simulation: Screenshot backgrounds with clickable hotspot buttons that reveal tooltips or navigate to the next step
• Branching scenario: Button choices on each slide that navigate to different outcome slides
• Timed quiz: Timer element + text inputs + check answer action, with a "time's up" slide triggered on timer complete
• Interactive diagram: Shape and text elements that show/hide on click to progressively reveal a process
• Drag-and-drop labeling: Drag items onto drop zones placed on an image background, with correct/incorrect feedback
• Scored activity: Variable elements tracking a score, incremented on correct answers, displayed on a results slide
• Phishing simulation: Scroll Container with an email inbox, where the learner clicks emails and identifies threats

Process Flow

A free-form node and connector canvas for diagrams — workflows, decision trees, org charts, mind maps, or any "boxes and arrows" visual. You place shapes and draw connections between them; the shapes are purely visual primitives, so the meaning of the diagram comes from how you arrange and label them rather than from fixed step types.

Use cases:

• Onboarding workflows
• Compliance procedures
• Decision-making frameworks
• Technical processes

Setting up a Process Flow

1. Add a Process Flow block
2. From the toolbar, add nodes — Rectangle, Rounded, Circle, Diamond, Icon, or Image
3. Hover a node to reveal connection handles on its four sides; drag from one handle to another to draw a connector between two nodes
4. Double-click a node or connector to open its editor
5. Choose a canvas background pattern — Dots, Lines, or Plain

Editing nodes and connectors

Double-clicking a node opens a modal with all its settings:

• Label and label position (inside / above / below)
• Description — shown as a tooltip on hover
• Shape, width, height, and stroke width
• Fill, stroke, and text colours, plus font size
• For icon nodes — an icon picker; for image nodes — Upload / Media Library / Stock / AI image sources

Connectors can be given a label (e.g. "Yes" / "No"), a line style (smooth elbow, bezier curve, or straight), a colour, and an animated flow effect.

Working on the canvas

• Drag a node to reposition it; arrow keys nudge a selected node; selection handles resize it
• Select multiple nodes with shift-click or a box selection
• Copy / paste / duplicate with Ctrl/Cmd+C, V, D — edges between copied nodes are copied too
• New nodes drop into the centre of the visible area, so they're never placed off-screen

Learners see the finished diagram as a pan- and zoom-able canvas; node descriptions appear as tooltips on hover.

Feedback

A survey-style block for collecting learner reactions, satisfaction scores, and qualitative input. Unlike the Quiz block (which is graded), the Feedback block is ungraded — it is for gathering input, not assessing knowledge.

Use cases:

• Course satisfaction surveys
• Post-lesson reflection questions
• NPS-style ratings
• Open-ended feedback on topics

Setting up a Feedback block

1. Add a Feedback block to your lesson
2. Optionally write an Introduction above the questions
3. Click Add Question and choose a question type
4. Configure each question
5. Set display mode and AI feedback preferences

Question types

Display and feedback settings

Each question can have its own feedback type:

• None — no feedback shown after the learner responds
• Text feedback — a fixed message shown after the response
• AI feedback — the AI generates personalized feedback based on the learner's response

Tip: Use AI feedback on Free Text questions to give learners meaningful, individualized reactions to their open-ended responses.

Learner experience

Learners fill in the form inline within the lesson. Responses are recorded and visible in the learner analytics dashboard.

Live Session

A block for scheduling and managing instructor-led training sessions — virtual, in-person, or hybrid. Learners register for the session from within the course, and instructors mark attendance afterward. The block is automatically marked complete for learners who attended.

Use cases:

• Virtual classroom sessions (Zoom, Teams, Google Meet, etc.)
• In-person workshops or seminars
• Hybrid training with both on-site and remote participants
• Guest speaker sessions embedded in a self-paced course

Setting up a Live Session

1. Add a Live Session block to your lesson
2. Go to the Settings tab and fill in:
   • Session Title — displayed on the block
   • Date & Time — when the session takes place
   • Duration — estimated length in minutes
   • Timezone — defaults to your browser timezone
   • Call link — the meeting URL (Zoom, Teams, etc.) shown to learners shortly before the session
   • Location for hybrid sessions — physical location for in-person attendees (optional)
   • Max Capacity — maximum number of registrations; set to 0 for unlimited
   • Enable waitlist — if capacity is reached, further registrants join a waitlist
   • Description / Agenda — rich text agenda shown on the block
   • Session Notes / Materials — notes, pre-reading links, or materials for learners
3. Go to the Instructors tab and add one or more instructors (name and optional email)
4. Save the lesson

Learner experience

Learners see the session details — date, time, duration, instructor(s), location — inline within the lesson. They can:

• Register — click Register for Session to confirm their place
• Join — the meeting link appears 15 minutes before the session starts
• Cancel — cancel their registration before the session
• Waitlist — if the session is full, learners join the waitlist and are promoted automatically when a spot opens

After the session, a learner's attendance status (Attended / Absent) is shown on the block.

Managing registrations and attendance

Registrations are managed from the Registrations tab inside the lesson editor (save the lesson first to see this tab):

1. Click Refresh to see the current registration list
2. For each registered learner, click Attended or Absent to record their attendance
3. Click Mark All Attended to mark all registered learners as attended at once

Marking a learner as Attended automatically completes the block for them in the course progress tracker.

Tip: The meeting link is hidden from learners until 15 minutes before the session — this prevents early joiners from entering an unmanned meeting room.