課題ブロック

期限付きの宿題やコース課題です: タイトル、説明、任意の配点、任意の数のリソースリンク、そして提出用のコントロールを備えます。単なるお知らせではなく、メールを実際の課題そのものにするための、スタジオのブロックです。

仕組み

期限は、カウントダウンブロック自身が使っているのと同じサーバー側レンダリングのアニメーションGIF技術を使って、送信されたメール内でライブでカウントを続けるカウントダウン画像としてレンダリングされます。このエンドポイントは実際に共有されており、課題ブロックが独自の画像エンコーダーを動かしているわけではありません。その横には、プレーンな「あとXd Yh Zm」または「期限切れ」のテキスト行が並びます。この組み合わせが重要なのは、それによって、そのクライアントが画像をレンダリングするかどうかにかかわらず、期限が正確に保たれるからです。テキスト行は受信者自身の開封時点でサーバー側で計算されるため、画像を一切表示しないクライアントでも正しく表示され、GIFは表示できるクライアントに対してカウントを続けます。

提出には提出方法フィールドで選ぶ3つの形があります:

• 完了としてマーク — 固定値のアクションであるため、投票の選択肢や評価のチップと同じリンク先行の扱いになります: インタラクションエンドポイントにPOSTする本物のメール内<form>(キネティックティア)と、ホスティングされた確認ページ(/v/[token]/act)へのプレーンなフォールバックリンクの両方が、同じ「完了としてマーク」のコントロールを包みます。送信される値が変化しないため、以下の2つのモードとは異なり、リンクのみのティア2の経路がここではそのまま機能します。
• 短文回答 / リンク回答 — これらは単純なGETリンクでは事前に埋め込めない自由記述の値を扱うため、クイズブロックのフォーム全体のフォールバックと同様に、ティア2の経路はホスティングされたライブビュー自体へのリンクとなり、そこで本物の<input>(それぞれtype="text"またはtype="url"、適切なプレースホルダー付き)が回答を収集してPOSTします。キネティックフォームをレンダリングできないクライアントでは、これら2つのモードにメール内での入力手段はなく、代わりにライブビューが開きます。

どのモードが設定されていても、提出は通常のインタラクションイベントとして記録され、投票の投票と同じ方法で受信者ごとに重複排除されます — 受信者自身のリンクへの再クリックは、2回目の提出にはならず、何も起こりません。提出が届いた時点でブロックの期限が過ぎていても、それでも記録され、下流では遅延としてフラグが付くだけです(下の成績表の集計を参照)。課題ブロックが遅延した提出の記録そのものを妨げることはなく、フラグを付けるだけです。

それ以外のすべての場所(Outlook、またはキネティックティアに対応しておらずカウントダウン画像を意味のある形でレンダリングできないクライアント)では、フォールバックは単純に静的な期限のテキスト行とリソースリンクの一覧です。どちらもティアにかかわらず常にレンダリングされ、該当する提出用コントロール(チップまたはライブビューへのリンク)と併せて表示されます。

設定可能なフィールド:

• タイトルと説明、およびそれぞれの色とフォントサイズ。
• 期限 — 日付/時刻です。カウントダウン画像と「あとX…」/「期限切れ」のテキストは、これが設定されている場合にのみレンダリングされます。
• 配点 — 0は未採点を意味します(商品ブロックの在庫フィールドが使う「0 = 未設定」と同じ規則です)。0以外の値を設定すると、タイトルの横に「(N点)」が追加されます。
• リソースリンク — 任意の数のラベル/URLの組で、説明の下にプレーンなリンクの一覧としてレンダリングされます。
• 提出方法 — 完了としてマーク/短文回答/リンク回答、上記のとおりです。
• 背景色、パディング、ボーダー、ボーダーの角丸、そして提出用コントロールの共有ボタン色の上書き。

例

オンラインコースの毎週の宿題リマインダーには完了としてマークが自然に合います — コースワークとリマインダーをメールで運用する、より広いパターンについては教育を参照してください。記述式の課題(「第3章を2文で要約してください」)には短文回答を使うと、別の提出用ポータルを用意する必要なく、その回答自体が成績表に届きます。プロジェクト形式の課題(「共有ドキュメントのリンクを提出してください」)にはリンク回答を使い、リソースリンクに評価基準や参考資料を指定します。期限は実際の締め切りに設定しておくと、締め切りが近づくにつれてカウントダウンが生徒に本物の緊張感を与えます。

静的フォールバックの見え方

<div style="margin:12px 0;background-color:transparent">
  <p style="margin:0 0 4px;font-weight:700;font-size:18px;color:#111827">
    Chapter 3 reading response (10 pts)
  </p>
  <p style="margin:0 0 6px;font-size:13px;font-weight:600;color:#111827">
    Due in 2d 4h 30m
  </p>
  <img src="https://mailinapp.com/api/countdown?t=1737936000000&c=111827&s=..."
       width="220" height="40" alt="Due in 2d 4h 30m"
       style="display:block;max-width:100%;height:auto;margin-bottom:8px" />
  <div style="text-align:center;margin-top:8px">
    <a href="https://mailinapp.com/v/eyJhbGci..."
       style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
              color:#ffffff;border-radius:6px;text-decoration:none;
              font-size:14px;font-weight:600">
      Submit answer
    </a>
  </div>
</div>

これは短文回答モードのフォールバックを示しています: 回答をプレーンなリンクに事前入力できないため、フォールバックは/actの確認ページではなく、ホスティングされたライブビューへのリンクになります。

関連ページ

• ブロックリファレンス概要
• 宿題と成績表
• カウントダウンブロック
• インタラクションと分析