跳到主要内容

圣诞日历 (Advent Calendar)

圣诞日历 (Advent Calendar) 是一种源自圣诞倒数传统的互动内容类型。它拥有经典的 24 扇门结构，默认在每年 12 月 1 日至 24 日期间按天解锁惊喜。

除了用于节日倒数，通过开启设计模式，它也可变身为一个精美的多媒体资源面板（盲盒），用于非线性的探索式学习。学习者点击「小门」，即可查看视频、音频、图片、文本或链接。

本教程目标​

  1. 了解圣诞日历的结构与特殊的时间机制
  2. 掌握配置门封面与多媒体内容的流程
  3. 学会使用“设计模式”进行测试与非线性展示
  4. 掌握提升内容可访问性的方法

第一次使用课灵？

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

注册/登录

何时使用圣诞日历​

  1. 节日/年底倒数：最适合用于 12 月份的节日活动（如圣诞节、元旦前夕），每天发布一个任务或寄语。
  2. 每日微课 (Micro-learning)：在 12 月期间，将课程拆解为 24 个小的知识点，利用年底时间进行每日学习。
  3. 奖励与彩蛋：作为 12 月课程的 Gamification（游戏化）元素，学生完成任务后，去日历中领取当天的“奖励”。
  4. 非线性的“抽屉式”展示：如果开启设计模式（忽略日期限制），它可以作为一个包含 24 个“盲盒”的展示面板，用于存放不依赖特定时间解锁的资源。
日期限制提示

请注意： 圣诞日历 (Advent Calendar) 目前仅支持每年 12 月 1 日至 24 日的日期逻辑。 这意味着它无法用于任意月份的倒计时（如“6月高考倒数”）。如果您在非 12 月期间使用，通常需要开启“设计模式”来展示内容，但这会失去“按日解锁”的限制功能。

需要自定义日期？ 如果您需要为活动设置特定的开始和结束日期（例如特定日期的研讨会或非 12 月的倒计时），建议使用 内容日历 (Content Calendar)。该组件允许您创建任意数量的卡片，并为每张卡片单独设置访问时间，非常适合灵活的时间管理需求。

教程示例​

下面是一个精美的圣诞日历示例。点击门即可查看隐藏的内容（注意：如果在非圣诞期间查看，可能需要依赖“设计模式”或已过期的日期才能打开）。

示例：点击带有数字的门，探索每日惊喜
快速复制示例
  • 点击 这里➜ 将示例复制到你的课灵工作区
  • 在打开的页面点击"复制" (注意：请确保已登录课灵账号，否则无法复制)
  • 随后在生成的副本中点击"编辑"
  • 即可查看并操作本教程所示的设置。

创建圣诞日历：分步指南​

步骤 1：创建新内容​

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

步骤 2：标题与门图模式​

进入编辑器后，首先配置基础信息：

  • 标题 (Title): 设置内容的标题，如 Christmas Advent Calendar。
  • 门图模式 (Door Image Template): 决定门封面的显示方式。
    • 我想自行设置每个门图像: 你需要为每一扇门单独上传图片（适合每扇门都不同的设计）。
    • H5P 将根据背景图像设置门图像: （推荐） 系统会自动将一张大的背景图切割成若干小块覆盖在门上，形成拼图效果。
设置标题与门图模式
选择门图模式：单独设置或基于背景自动生成

步骤 3：配置门内容​

在左侧的 “门 (Doors)” 列表中，你可以添加和编辑每一扇门的内容。

对于每一扇门（如“1. 门”），你需要配置：

  • 门内容类型: 选择打开门后显示的内容。支持以下 5 种类型：
    • 音频 (Audio): 播放一段音乐或录音。
    • 图像 (Image): 展示一张图片。
    • 链接 (Link): 跳转到外部网页（如课程主页）。
    • 文本 (Text): 显示一段文字提示或故事。
    • 视频 (Video): 播放 YouTube 视频或上传的视频文件。
  • 门图像 (Door Image): 如果在步骤 2 中选择了“自行设置”，需在此上传该门的封面图。
编辑门内容
为每一扇门选择内容类型（如视频）并配置素材

步骤 4：视觉设置​

在 “视觉设置” 选项卡中，美化你的日历外观：

  • 日历背景图像 (Calendar Background Image): 上传一张高分辨率的节日或主题图片作为整体背景。
  • 隐藏元素: 根据设计需求，勾选 隐藏门边框、隐藏门编号、隐藏门把手 或 隐藏门框，让画面更整洁。
  • 下雪效果 (Snow Effect): 强烈推荐。勾选后，画面会有飘雪动画，瞬间提升节日氛围（注：在 IE11 中不生效）。
视觉设置
配置背景图、下雪效果及隐藏不必要的 UI 元素

步骤 5：音频设置​

  • 背景音乐 (Background Music): 上传一首循环播放的背景音乐（如 Jingle Bells）。
  • 自动播放背景音乐: 勾选后，进入日历时自动尝试播放音乐（注：部分浏览器可能会拦截自动播放）。
音频设置
添加背景音乐以烘托氛围

步骤 6：行为设置​

在 “行为设置” 中，定义日历的布局和逻辑：

  • 门放置模式 (Door Layout Mode): 建议选择 固定 (Fixed)，这样可以确保所有门排列整齐（如 6x4 布局），避免在不同屏幕上布局错乱。
  • 随机顺序 (Random Order): 勾选后，门的数字顺序会被打乱，增加寻找的乐趣。
  • 设计模式 (Design Mode): 测试必备！
    • 勾选此项后，所有门都可以打开，无视日期限制。
    • 重要提示：在正式发布给学生之前，请取消勾选此项，否则学生可以一次性看完所有内容。
行为设置
设置布局比例与设计模式（用于测试）

步骤 7：保存与预览​

点击 『保存并关闭』。如果勾选了“设计模式”，你可以点击任意门来测试内容是否正常显示。

交互说明​

  1. 点击解锁：用户点击带有数字的“门”，门会打开并展示内容。
  2. 日期限制：在非设计模式下，用户只能打开当前日期及之前的门。点击未来的门会提示“请耐心等待”。
  3. 媒体播放：视频和音频内容会在弹窗中直接播放。

优化与可访问性​

  • Alt 文本：务必为背景图和门图像填写替代文本，帮助视障用户理解画面内容。
  • 颜色对比度：如果你使用了自定义背景，确保生成的门编号颜色与背景有足够的对比度。
  • 避免拥挤：在手机上预览日历，确保 6x4 等布局在小屏幕上不会过于拥挤，且点击区域足够大。

专家建议与最佳实践​

  1. 尊重日期限制，或使用替代方案 请记住 Advent Calendar 严格遵循 12 月 1 日 - 24 日 的逻辑。

    • 如果是 12 月活动：完美适配。
    • 如果是其他月份的倒计时（如考前冲刺）：请改用 Content Calendar。
    • 如果只是想做盲盒展示：开启 设计模式 (Design Mode)，忽略日期限制。

  2. 混合媒体类型 不要 24 天全是文本。穿插使用视频（教学）、图片（海报/思维导图）、链接（跳转到 Quiz 或作业）和音频（寄语），保持新鲜感。

  3. 善用“链接”类型串联其他 H5P Advent Calendar 本身的交互比较简单。如果你想让学生在第 5 天做一个测试，可以在第 5 天的门里放置一个 链接 (Link)，指向一个 H5P Question Set 或 Interactive Book 的地址。

  4. 利用“设计模式”进行演示 如果你是教师，在课堂上演示这个日历时，可以临时开启“设计模式”，这样你就不受日期限制，可以展示任何一天的内容给学生看。

最后由 Sam Xu 于 更新