h5p-patterns
Create interactive H5P content for Moodle and web platforms. Use when building interactive exercises, quizzes, or multimedia learning content.
When & Why to Use This Skill
This Claude skill enables the seamless creation and integration of interactive H5P content for Moodle and web-based learning platforms. It provides developers and educators with standardized patterns for building engaging educational tools, including interactive videos, branching scenarios, and stylized question sets, while offering ready-to-use code snippets for optimized embedding and responsive design.
Use Cases
- Interactive Video Lectures: Enhancing educational videos with embedded quizzes and interactions to improve student engagement and knowledge retention.
- LMS Content Embedding: Generating optimized iframe wrappers and SCSS styles to integrate H5P activities directly into Moodle courses or Kirby CMS pages.
- Automated Assessment Creation: Building diverse question sets, dialog cards, and interactive timelines for vocabulary practice and historical content visualization.
- Scenario-Based Training: Developing complex branching scenarios that allow learners to navigate decision-based paths in professional or academic training environments.
| name | h5p-patterns |
|---|---|
| description | Create interactive H5P content for Moodle and web platforms. Use when building interactive exercises, quizzes, or multimedia learning content. |
| allowed-tools | Read, Write, Grep, Glob |
H5P Integration Skill
Embed and style H5P interactive content in Cloodle.
Trigger
- H5P content requests
- Interactive element creation
- H5P embedding in Kirby or Moodle
H5P in Moodle
H5P activities are native in Moodle 4+. Key features:
- Interactive Video
- Course Presentation
- Question Sets
- Branching Scenarios
Embedding in Moodle Page
<div class="cloodle-h5p-wrapper">
<iframe src="/mod/h5pactivity/embed.php?id=123"
class="h5p-iframe"
allowfullscreen>
</iframe>
</div>
H5P in Kirby
Use iframe embedding with public H5P URLs:
<?php snippet('h5p-embed', ['id' => $block->h5pId()]) ?>
Snippet Template
<div class="uk-card uk-card-default uk-card-body cloodle-h5p">
<iframe
src="<?= $moodleUrl ?>/mod/h5pactivity/embed.php?id=<?= $id ?>"
class="uk-width-1-1"
style="border: none; min-height: 400px;">
</iframe>
</div>
Styling H5P
.cloodle-h5p-wrapper {
border-radius: $cloodle-border-radius;
overflow: hidden;
box-shadow: $card-box-shadow;
iframe {
width: 100%;
min-height: 500px;
border: none;
}
}
Content Types for Education
| Type | Use Case |
|---|---|
| Interactive Video | Lecture with quizzes |
| Course Presentation | Slide-based learning |
| Question Set | Assessment |
| Dialog Cards | Vocabulary/flashcards |
| Timeline | Historical content |