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.

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

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 above the character, and drag the tail handle to point it at the character's mouth. These positions are saved and shown in the learner-facing dialogue view.

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 either collapsible accordion sections or a tabbed layout. 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

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
   • Tabs — sections appear as horizontal tabs; clicking a tab shows its content
3. Optionally add an Introduction paragraph above the sections
4. Edit section titles (double-click to open the rich-text title editor)
5. Click a section to expand it and add rich-text content (including images)
6. Add more sections with the + button that appears between items on hover

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

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.

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.

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.

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

Process Flow

A visual diagram showing a step-by-step process. Learners read through the flow to understand procedures, workflows, or decision trees.

Use cases:

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

Setting up a Process Flow

1. Add a Process Flow block
2. Add steps in order — each step has a title and optional description
3. Choose a layout (linear, branching)
4. Optionally add decision points with Yes/No branches

Learners view the flow as an interactive diagram they can expand and explore.

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.