Media Blocks

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

Text

Rich text editor for written content. Supports:

• Headings, paragraphs, bullet and numbered lists
• Bold, italic, underline formatting
• Inline images and links
• Code blocks
• Tables

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

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.

Video

Embed or upload video content.

Sources:

• YouTube — paste the video URL
• Vimeo — paste the video URL
• Upload — upload an MP4 or other video file directly

Subtitles and captions

Uploaded 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.