闪卡组模块

用于词汇或知识点操练的翻转卡片:添加一个闪卡组,然后向其中放入闪卡子项,每张卡片都有各自的正面(问题)和背面(答案)文字,并可在任意一面添加可选图片。它是一种学习辅助工具,而不是一个问题——没有任何内容需要评分或收集。

工作原理

卡组中的每张卡片都独立翻转,使用的是与手风琴和刮刮卡模块相同的隐藏复选框加 :checked CSS 机制——没有 JavaScript,也不依赖原生的 HTML 展开元素。点击一张卡片会勾选它自己的隐藏复选框,该复选框通过一条限定作用域的 CSS 规则隐藏这张卡片的正面并显示背面。卡组中的其他每张卡片都各自连接着自己独立的复选框,因此翻转一张卡片不会影响其余卡片。

与工作室里大多数其他动态模块不同,闪卡组的邮件渲染和实时预览渲染是真正统一的,而不是分叉为两套独立的邮件/实时预览代码路径。一个基于复选框和 <label> 的 :checked 翻转效果,在真实浏览器中没有"更优"的原生替代方案可以升级——不像投票模块那样,基于链接的降级方案会被替换为一个真正的表单。因此实时预览渲染的标记与邮件完全一致。

在这条 CSS 规则不被支持的地方——Outlook,或任何不支持动态层级的客户端——正面和背面只会简单地上下堆叠静态展示,而不会翻转。每一面都用简单的"Q:"/"A:"前缀标注,因此即使完全没有交互,这种配对关系依然清晰可辨。任何内容都不会被隐藏在客户端无法执行的手势背后;降级方案会一次性显示每张卡片的完整内容,正反两面皆是如此。

闪卡组不会记录任何内容。翻转一张卡片没有投票、提交或揭晓事件,该模块也没有声明任何会把它注册进响应仪表盘、CSV 导出、点击热力图或其他任何汇总统计的能力。它是纯粹的学习内容,与普通图片或文本模块属于同一类别,只是多了互动效果。

闪卡组本身可配置的字段仅限于卡片样式——背景色、内边距、边框和圆角半径——因为与内容相关的一切都放在每张单独的卡片上。

每个闪卡子项包含:

**正面(问题)和背面(答案)**文字,各自拥有独立的颜色和字号。
正面图片和背面图片——可选,渲染在对应一面文字的上方;从你的媒体库中选取,而不是手动输入 URL。

可以在树面板中自由添加、删除或重新排序卡片,方式与管理投票选项或测验问题相同。

示例

Subject

Study these before Friday's quiz

一封语言学习通讯简报可以每周发送一组主题化的词汇卡片:正面是目标语言,背面是译文和用法说明。有关通过邮件传递学习内容的更广泛模式,参见教育。一套认证备考序列邮件可以每个主题领域用一个卡组,作为练习测验之间类似间隔重复的复习环节(可以在同一封邮件中稍后搭配一个测验模块,在操练结束后立即检验记忆效果)。一封技术产品的新用户引导邮件可以用闪卡快速讲解术语定义(正面是术语,背面是它在你产品中的含义),作为一份原本没人会打开的术语表页面的更轻量替代方案。

静态回退效果是什么样子

<div style="border:1px solid #e5e7eb;border-radius:8px;padding:14px;
            margin-bottom:8px;text-align:center">
  <div class="fc-front">
    <p style="margin:0;font-weight:600;font-size:16px;color:#111827">
      Q: What is the powerhouse of the cell?
    </p>
  </div>
  <div class="fc-back">
    <p style="margin:0;font-size:16px;color:#111827">
      A: The mitochondria
    </p>
  </div>
</div>

两面都会无条件渲染;只有动态层级的样式表(此处省略)才会一次只隐藏一面,并在点击时替换显示——没有它时,正反两面会直接堆叠显示,分别标注"Q:"/"A:"。

闪卡组模块

工作原理

示例

静态回退效果是什么样子

相关内容