H5P in LiaScript: Embed Interactive H5P Content in Courses

H5P is a widely used open-source framework for interactive HTML5 content: drag-and-drop exercises, video quizzes, flashcards, branching scenarios, interactive maps, and dozens more activity types. The H5P-Test repository by André Dietrich demonstrates how to embed H5P content from h5p.org (or any compatible LRS) directly inside a LiaScript course using a plain HTML <iframe>.

Quick Start

No import is required. H5P content is embedded directly with standard HTML:

<!--
author: Your Name
-->

# H5P in LiaScript

<iframe
  src="https://h5p.org/h5p/embed/6725"
  width="100%"
  height="500"
  frameborder="0"
  allowfullscreen="allowfullscreen"
></iframe>

Replace 6725 with your own H5P content ID, or use the embed URL from any H5P-compatible platform.

Finding H5P embed URLs

Any H5P activity published on h5p.org has an Embed button below it. Click it to copy the <iframe> snippet, then paste it directly into your LiaScript Markdown.

Self-hosted H5P (via Moodle, WordPress H5P plugin, or standalone h5p-standalone) generates the same kind of embed URL.

Example: Quiz and Flashcard in One Course

# Interactive Review

## Flashcard Vocabulary

Practice chemistry terms:

<iframe
  src="https://h5p.org/h5p/embed/1216"
  width="100%"
  height="400"
  frameborder="0"
  allowfullscreen="allowfullscreen"
></iframe>

---

## Multiple Choice Quiz

<iframe
  src="https://h5p.org/h5p/embed/6725"
  width="100%"
  height="480"
  frameborder="0"
  allowfullscreen="allowfullscreen"
></iframe>

---

## What is H5P?

[( )] A JavaScript chart library
[(X)] An open-source interactive HTML5 content framework
[( )] A SCORM packaging tool

Try it live — interact with a real H5P quiz and flashcard embedded directly in LiaScript:

Self-Hosted H5P

For courses that must work offline or need full control over content, H5P can be self-hosted. Point the src to your own instance:

<iframe
  src="https://yourdomain.com/wp-admin/admin-ajax.php?action=h5p_embed&id=42"
  width="100%"
  height="500"
  frameborder="0"
  allowfullscreen="allowfullscreen"
></iframe>

Or use h5p-standalone and host the H5P package directly in the LiaScript static/ folder.

Full Template Demo

Limitations

This is a proof-of-concept. Score reporting from H5P back into LiaScript is not integrated. The H5P activity runs in its own iframe context. xAPI / SCORM events from H5P do not automatically flow into LiaScript’s quiz state. For tracked assessments, consider using LiaScript’s native quiz types or the SCORM-Progress template instead.

Use Cases

Reusing existing H5P libraries — If your institution already has hundreds of H5P activities in Moodle or WordPress, embedding them in a LiaScript course avoids recreating them from scratch.

Branching scenarios — H5P’s Course Presentation and Branching Scenario types have no direct LiaScript equivalent; embedding them fills the gap.

Video quizzes — H5P’s Interactive Video allows quizzes to appear at specific timestamps; embed the interactive video directly in a LiaScript section.

Drag-and-drop and sorting — H5P has rich drag-and-drop activity types that complement LiaScript’s text-gap approach.

Technical Facts

Try It

Related Templates

• SCORM-Progress — SCORM score tracking and progress visualization in LiaScript
• DragAndDrop — native LiaScript drag-and-drop quizzes without iframe
• lia-kachel — tile-based drag-and-drop with full touch support
• custom-code-imports — load and execute external code files in LiaScript