Media Blocks

Media blocks deliver content to learners — text, video, presentations, documents, charts, and externally-hosted material.

Text

Rich text editor for written content with a flexible grid layout system.

Grid layout

Text blocks use a row and cell layout. Each row contains one or more cells, and each cell holds either text or an image. This lets you create side-by-side layouts — for example, a paragraph next to an illustration, or two columns of text.

AI-generated illustrative images

When generating content with AI, the Creator Agent can insert illustrative images into content cells. These are marked with IMAGE_PROMPT in the cell data and are generated automatically during the content pipeline. The images match your course's image style settings.

Content density

The content density setting controls how much text the AI generates per block:

Content density is configured in course settings and applies to all AI-generated text blocks.

Font family

The text editor includes a font family picker with a curated selection of Google Fonts grouped by style:

Font family is applied inline to selected text — you can mix fonts within a single text block. The chosen fonts render consistently in the editor, learner view, and HTML exports.

Font size

In addition to heading levels, you can set a precise font size using the size picker in the toolbar. Sizes range from small (XS) through to extra-large (4XL), giving you fine control over text hierarchy within a block.

Adding images to text

Within the text editor, click the Insert Image button to upload or select from the media library. You can also generate an image with AI directly from the editor.

Best for: Explanations, instructions, reference material, summaries.

Video

Embed, upload, or generate video content.

Sources

• YouTube — paste the video URL
• Vimeo — paste the video URL
• Upload — upload an MP4 or other video file directly
• AI Generate — generate a short video clip using AI
• Talking Video — generate a talking-head video from a character portrait and text script

Talking Video

Talking Video creates a lip-synced video of a character speaking a script you provide. It combines ElevenLabs text-to-speech for the audio with Freepik lip sync for the video animation.

To create a Talking Video:

1. Open a video block and click Talking Video
2. Choose a portrait image — upload a photo, pick from stock images, select from the media library, generate one with AI, or use a course character
3. Write the script — the text the character will speak
4. Select a voice — browse available voices and use the preview button to hear each one before choosing
5. Optionally add a scene variation prompt — describe changes to the background, clothing, or setting to create visual variety across videos
6. Click generate

The system automatically creates VTT subtitles from the script, so the video is accessible out of the box.

Tip: Talking Videos work well for instructor-style presentations, character introductions, and scenario setups. Use scene variation prompts to avoid visual repetition across multiple videos in a course.

Subtitles and captions

Uploaded and generated video blocks support subtitle tracks in VTT or SRT format.

To add subtitles:

1. Open the video block editor
2. Go to the Subtitles panel
3. Click Add Subtitle Track and upload a .vtt or .srt file
   • SRT files are automatically converted to VTT on upload
   • Language is auto-detected from the filename (e.g., subtitles.en.vtt -> English)
4. Optionally edit the Label and Language for each track
5. Toggle Default on the track you want selected by default for learners

Subtitles render using the browser's native caption system and are available to learners in the video player. The first track uploaded is set as default automatically.

Tip: Adding captions is a key accessibility requirement (WCAG 1.2.2). The built-in accessibility checker will flag video blocks that have no subtitle tracks.

Cuepoints

Video blocks support cuepoints — moments in the video where additional content appears:

• Text cuepoint — overlay text or a callout at a specific timestamp
• Quiz cuepoint — pause the video and present a question; the video resumes after the learner answers

To add a cuepoint:

1. Play or scrub to the desired timestamp
2. Click Add Cuepoint
3. Choose Text or Quiz
4. Enter the content

Slideshow

A standard click-through slide presentation.

• Add slides with text, images, and media
• Learners advance manually through slides
• Supports speaker notes (not shown to learners)

For interactive slides with embedded questions, use the Interactive Slides block instead.

Document

Embed a document for learners to view inline.

Supported formats: PDF, Word (.docx), PowerPoint (.pptx), Excel (.xlsx)

Upload the document or select it from the media library. Learners can scroll through it within the lesson without downloading.

Note: Documents are rendered read-only in the learner view.

Custom Embed

Build fully custom interactive content using HTML, CSS, and JavaScript — either by writing code yourself or by using AI to generate it from a description.

This is one of LearnBuilder's most powerful blocks. It lets you create anything that can run in a browser: custom simulations, calculators, data visualizations, mini-games, branded interactive infographics, or any learning activity that doesn't fit a standard block type.

How it works

Each custom embed block has three code tabs:

The code runs in a sandboxed iframe, so it's isolated from the rest of the page. Learners interact with it inline within the lesson.

AI-assisted code generation

You don't need to be a developer. The AI can generate the entire embed for you:

1. Add a Custom Embed block
2. Click the AI Generate button
3. Describe what you want in plain language — for example:
   • "A drag-and-drop timeline where learners place historical events in order"
   • "An interactive budget calculator with sliders and a pie chart"
   • "A clickable world map that highlights countries when selected"
4. AI generates the HTML, CSS, and JavaScript
5. Preview the result and refine with follow-up prompts

Tip: You can iterate — describe a modification and the AI will update the existing code rather than starting over. For example: "Make the buttons larger and add a score counter."

Uploading files

Custom embeds support file attachments (images, data files, etc.) that your code can reference:

• Upload files in the embed editor
• Access them in JavaScript with EmbedFiles.get('filename')
• Or in HTML with <img src="" data-embed-file="filename"> — files are auto-populated on load

Adding an introduction

Each custom embed can include an introduction text above the interactive area. Use this to explain what the activity is, give instructions, or set context.

Use cases

• Custom simulations — model real-world scenarios with interactive controls
• Calculators and tools — ROI calculators, unit converters, scoring rubrics
• Data visualizations — interactive charts beyond what the Graph block offers
• Mini-games — simple games for gamified learning (matching, memory, trivia)
• Branded content — pixel-perfect interactive assets matching your organization's design
• Prototypes — mock interfaces for software training

Graph

Display data as a chart or visualization.

Chart types available:

• Bar chart
• Line chart
• Pie / donut chart
• Other standard chart types

Enter your data in the table editor and choose a chart type. The graph renders live as you enter values.

SCORM / xAPI

Import a SCORM 1.2, SCORM 2004, or xAPI package created in a third-party authoring tool (Articulate Storyline, Rise, iSpring, etc.).

Importing a SCORM/xAPI package

1. Add a SCORM / xAPI block
2. Click Upload Package and select your .zip file
3. LearnBuilder extracts and hosts the package
4. Learners launch it inline within the lesson

Completion status and scores reported by the package are recorded in the learner dashboard.

Note: SCORM/xAPI packages must be valid — exported directly from an authoring tool with the correct manifest file. Re-zipping a folder won't work.