h5p-patterns

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

H5P Integration Skill

H5P集成Skill

Embed and style H5P interactive content in Cloodle.

在Cloodle中嵌入并设置H5P交互式内容的样式。

Trigger

触发条件

H5P content requests
Interactive element creation
H5P embedding in Kirby or Moodle

H5P内容请求
交互式元素创建
在Kirby或Moodle中嵌入H5P

H5P in Moodle

Moodle中的H5P

H5P activities are native in Moodle 4+. Key features:

Interactive Video
Course Presentation
Question Sets
Branching Scenarios

H5P活动是Moodle 4+的原生功能。主要特性包括：

交互式视频
课程演示
试题集
分支场景

Embedding in Moodle Page

在Moodle页面中嵌入

html

<div class="cloodle-h5p-wrapper">
    <iframe src="/mod/h5pactivity/embed.php?id=123"
            class="h5p-iframe"
            allowfullscreen>
    </iframe>
</div>

html

<div class="cloodle-h5p-wrapper">
    <iframe src="/mod/h5pactivity/embed.php?id=123"
            class="h5p-iframe"
            allowfullscreen>
    </iframe>
</div>

H5P in Kirby

Kirby中的H5P

Use iframe embedding with public H5P URLs:

php

<?php snippet('h5p-embed', ['id' => $block->h5pId()]) ?>

使用iframe嵌入公开的H5P链接：

php

<?php snippet('h5p-embed', ['id' => $block->h5pId()]) ?>

Snippet Template

代码片段模板

php

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

php

<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

设置H5P样式

scss

.cloodle-h5p-wrapper {
    border-radius: $cloodle-border-radius;
    overflow: hidden;
    box-shadow: $card-box-shadow;

    iframe {
        width: 100%;
        min-height: 500px;
        border: none;
    }
}

scss

.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

类型	使用场景
交互式视频	带测验的课程讲座
课程演示	基于幻灯片的学习
试题集	评估测试
对话卡片	词汇/抽认卡
时间轴	历史内容