フラッシュカードデッキブロック
語彙や知識のドリル学習向けの、めくって表示するカードです: フラッシュカードデッキを追加し、その中にフラッシュカードの子要素を配置します。それぞれに表面(問題)と裏面(答え)のテキストがあり、どちらの面にも任意で画像を追加できます。これは学習用の補助ツールであり、質問ではありません — 採点したり収集したりするものは何もありません。
仕組み
デッキ内の各カードは、アコーディオンやスクラッチブロックが使っているのと同じ、隠しチェックボックスと:checkedのCSSの仕組みを使って、それぞれ独立してめくれます — JavaScriptは使わず、ネイティブのHTML disclosure要素にも依存しません。カードをタップするとそのカード自身の隠しチェックボックスがチェックされ、スコープ化されたCSSルールによってそのカードの表面が隠れて裏面が表示されます。デッキ内の他のすべてのカードはそれぞれ独自のチェックボックスに接続されているため、1枚をめくっても他のカードには影響しません。
スタジオの他のキネティックブロックの多くとは異なり、フラッシュカードデッキのメールとライブビューのレンダリングは、別々のメール/ライブビュー用のコードパスに分岐するのではなく、実質的に統一されています。:checkedのチェックボックスとラベルによるめくり動作には、実際のブラウザでアップグレードできるような「より良い」ネイティブの代替手段がありません — 投票のリンクベースのフォールバックが本物のフォームに置き換わるのとは違います。そのため、ライブビューはメールと全く同じマークアップをレンダリングします。
そのCSSルールが尊重されない環境 — Outlookや、キネティックティアに対応していないその他のクライアント — では、表面と裏面はめくれる代わりに単純に静的に重ねて表示されます。それぞれにプレーンな「Q:」/「A:」の接頭辞が付くため、インタラクションが一切なくても組み合わせはそのまま読み取れます。クライアントが実行できないジェスチャーの裏に何かが隠されることは一切なく、フォールバックはすべてのカードの表面と裏面の内容全体を一度に表示します。
フラッシュカードデッキは何も記録しません。カードをめくることに投票、送信、表示のイベントは存在せず、このブロックは回答ダッシュボード、CSVエクスポート、クリックヒートマップ、その他いかなる集計にも登録されるような機能を宣言していません。これは純粋な学習コンテンツであり、プレーンな画像やテキストブロックと同じカテゴリーで、インタラクティブという点だけが異なります。
フラッシュカードデッキ自体で設定できるフィールドはカードのスタイルに限られます — 背景色、パディング、ボーダー、ボーダーの角丸です。コンテンツに関わるものはすべて個々のカードに存在するためです。
各フラッシュカードの子要素には以下があります:
- **表面(問題)と裏面(答え)**のテキスト。それぞれ独自の色とフォントサイズを持ちます。
- 表面の画像と裏面の画像 — 任意で、対応する面のテキストの上にレンダリングされます。URLとして入力するのではなく、メディアライブラリから選択します。
投票の選択肢やクイズの質問を管理するのと同じ方法で、ツリー内でカードを自由に追加・削除・並べ替えできます。
例
Subject
Study these before Friday's quiz
言語学習ニュースレターは、テーマ別の語彙カードのセットを毎週送ることができます: 表面に対象言語、裏面に訳語と使い方のメモを載せます。メールで学習コンテンツを届ける、より広いパターンについては教育を参照してください。資格対策の連続配信では、演習クイズの間に間隔反復学習風の復習として、トピックごとに1デッキを使うことができます(同じ送信内の後半にクイズブロックを組み合わせて、ドリル直後に定着度を確認します)。技術製品のオンボーディングメールでは、フラッシュカードを用語のクイックリファレンスとして使えます(表面: 用語、裏面: その製品における意味)— 誰も開かないような用語集ページよりも軽い代替手段です。
静的フォールバックの見え方
<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:」でラベル付けされます。