跳到主要内容

内容日历 (Content Calendar)

内容日历 (Content Calendar) 允许作者创建任意数量的卡片，每张卡片都可以包含一个 H5P 活动、标题和图片。

作者可以为每张卡片单独设置开始和结束日期，从而精确控制每个活动的访问时间。它非常灵活，既可以用作带日期的日历，也可以作为简单的子内容集合，或者是用于活动和研讨会的定时卡片发布工作流。

本教程目标​

  1. 了解内容日历的“卡片式”结构与时间控制机制
  2. 掌握配置卡片内容、封面与访问限制的流程
  3. 学会设置视觉外观与行为选项

第一次使用课灵？

请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『内容日历 (Content Calendar)』开始创作。

注册/登录

何时使用内容日历​

  1. 灵活的定时解锁：当你需要类似“圣诞日历”的解锁体验，但日期不局限于 12 月（如“暑期 7 天挑战”或“每周一课”）。
  2. 课程分发 (Drip Content)：按周或按月逐步开放课程模块，防止学生一次性学完。
  3. 活动日程：为研讨会或会议创建日程表，按时间点开放相关的资料或反馈问卷。
  4. 精美的资源集合：即使不设置日期，它也是一个美观的卡片式资源列表（类似画廊）。
前置知识

Content Calendar (内容日历) 本质上是一个用于按时间维度组织内容的容器。它的强大之处在于能够容纳几乎所有其他 H5P 内容类型。 因此，要充分利用此组件，建议您先熟悉各类基础组件（如 图像热点、交互式视频、各类测验等）的使用方法。本教程将侧重于如何配置时间规则与组织这些内容，而非讲解子组件的具体配置。

教程示例​

下面是一个内容日历示例，展示了不同类型的卡片。请注意某些卡片可能有时间限制。

示例：点击卡片查看内容（注意观察带有时间锁定的卡片）
快速复制示例
  • 点击 这里➜ 将示例复制到你的课灵工作区
  • 在打开的页面点击"复制" (注意：请确保已登录课灵账号，否则无法复制)
  • 随后在生成的副本中点击"编辑"
  • 即可查看并操作本教程所示的设置。

创建内容日历：分步指南​

步骤 1：创建新内容​

  1. 在课灵工作区点击「创建」，进入 H5P 编辑器。
  2. 在内容类型列表中选择 『内容日历 (Content Calendar)』 或搜索 "Content Calendar"。
选择内容日历内容类型
从 H5P 内容类型列表中选择『内容日历』

步骤 2：标题与标题画面​

  1. 标题 (Title)：设置内容的全局标题，如 2024暑期学习挑战。
  2. 显示标题画面 (Show Title Screen)：(可选) 勾选后，可以设置一个引导页，包含引言和媒体（图片/视频），在用户进入日历前显示，用于介绍活动背景。
设置标题与标题画面
配置全局标题及可选的引导画面

步骤 3：添加与配置卡片​

在 “卡片 (Cards)” 列表中，点击“添加内容”来创建新卡片。每张卡片包含以下设置：

  • 标签 (Label)：卡片上显示的标题（如“第 1 周：基础知识”）。
  • 图像 (Image)：卡片的封面图。
  • 摘要 (Introduction)：卡片内容的简短描述。
  • 访问限制 (Availability)：这是核心功能！
    • 开始日期 (Start Date)：内容可用的起始时间。在此之前，卡片会被锁定。
    • 结束日期 (End Date)：内容过期的结束时间。
    • 提示：如果不设置日期，卡片将始终可用。
  • 内容 (Content)：选择当用户点击卡片后要展示的 H5P 内容类型（如 交互式视频 (Interactive Video), 测验 (Question Set), 课程演示 (Course Presentation) 等）。
添加与配置卡片
添加卡片并设置关键的“访问限制”日期

步骤 4：视觉设置​

自定义日历的外观以适应你的品牌或主题：

  • 背景图像 (Background Image)：设置整个日历的背景图。
  • 卡片样式：
    • 为卡片添加内边距：增加卡片边缘的留白。
    • 卡片宽度：设置卡片的 CSS 宽度（默认为 14rem）。
    • 图像尺寸：设置封面图的宽高比（如 16:9），确保整齐划一。
    • 摘要最大行数：限制摘要显示的行数，保持布局整洁。
视觉设置
自定义背景图与卡片尺寸样式

步骤 5：行为设置​

  • 显示内容状态：勾选后，会在卡片底部显示“未开始”、“进行中”或“已完成”的状态标记。
  • 启用“重试”按钮：允许用户一次性重置所有卡片中的练习进度。
行为设置
启用内容状态显示与重试按钮

步骤 6：保存与预览​

点击 『保存并关闭』。测试一下你的日历，特别是检查那些设置了“开始日期”的卡片是否正确锁定。

交互说明​

当学习者访问您创建的内容日历时，他们将获得以下交互体验：

  1. 浏览卡片视图

    • 可用状态：当前日期范围内的卡片显示为全彩（如图中的 "Some Course Presentation"），点击即可打开。
    • 锁定状态：未到开始日期的卡片显示为灰色（如图中的 "Question Set"），并明确提示可用的具体日期（如 "Available in Oct. 2025"）。这有助于学习者了解课程进度安排。

  2. 打开内容详情

    • 点击任意可用卡片后，具体内容会在当前页面以弹窗 (Overlay) 形式展开，而不会跳转到新页面。
    • 这种设计保证了学习体验的连贯性。学习者在弹窗中完成视频观看或测验后，只需点击右上角的关闭按钮 X，即可快速返回日历视图，继续探索其他卡片。

优化与无障碍访问​

为了确保所有学习者（包括使用辅助技术的用户）都能无障碍地访问您的内容，请遵循以下建议：

  1. 卡片图像的替代文本 (Alt Text)

    • 在添加卡片图像时，务必填写替代文本。如果图像仅用于装饰，可以输入简单的描述（如“背景装饰”）；如果图像传达了重要信息（如“第一周图标”），请详细描述。

  2. 清晰的卡片标签

    • 卡片的“标签 (Label)”不仅是标题，也是屏幕阅读器朗读的主要内容。请确保标签简洁明了，能准确反映卡片的主题。

  3. 键盘导航

    • 内容日历 (Content Calendar) 原生支持键盘导航。用户可以使用 Tab 键在卡片之间移动，使用 Enter 或 Space 键打开卡片。建议您在发布前亲自尝试一次纯键盘操作，确保流程顺畅。

  4. 移动端适配

    • 内容日历 (Content Calendar) 是响应式的，但在手机上显示时，卡片会重新排列为单列或双列布局。建议在移动设备上预览，确保您的标题和摘要文字不会因为过长而显得拥挤。

专家建议与最佳实践​

  1. “圣诞日历 (Advent Calendar)”的完美替代品 如果你想做倒数日历但不在 12 月，内容日历 (Content Calendar) 是最佳选择。它提供了相同的“解锁”心理机制，但时间完全由你掌控。

  2. 混合使用不同内容（支架式教学） 利用卡片可以承载不同 H5P 类型的特性，设计由浅入深的学习路径。例如：

    • 卡片 1 (周一)：课程演示 (Course Presentation)（输入：学习新知）
    • 卡片 2 (周三)：抽认卡 (Flashcards)（练习：巩固记忆）
    • 卡片 3 (周五)：单选题 (Single Choice Set) 或 测验 (Question Set)（评估：周测验）

  3. 利用“摘要”作为预告 对于锁定的卡片，用户仍然可以看到“摘要”和封面图。利用这一点写上诱人的预告文案（如“敬请期待：本周五解锁神秘大奖”），激发学习者的好奇心。

  4. 保持视觉一致性 这是让作品看起来专业的关键。 建议为所有卡片准备相同宽高比（如 16:9 或 4:3）的封面图片。如果图片尺寸参差不齐，日历的网格布局会显得杂乱无章。

  5. 关于时间设置的提示

    • 时区问题：解锁时间通常基于学习者浏览器的本地时间。这意味着如果用户跨时区旅行，解锁时间会随之变化。
    • 默认开放：如果留空“开始日期”和“结束日期”，该卡片将始终对用户可见且可用。
最后由 Sam Xu 于 更新