mailinapp
Documentation menu

Assignment block

Homework or coursework with a due date: a title, instructions, an optional point value, any number of resource links, and a submission control. It's the studio's block for turning an email into an actual assignment rather than just an announcement of one.

How it works

The due date renders as a live-ticking countdown image in the mailed email, using the same server-rendered animated-GIF technique the countdown block itself uses. That endpoint is genuinely shared; the assignment block doesn't run its own image encoder. Alongside it sits a plain "Due in Xd Yh Zm" or "Past due" text line. That pairing matters because it's what keeps the deadline accurate whether or not a given client renders the image at all. The text line is computed at send time from the recipient's own open, so it reads correctly even in a client that shows no image, while the GIF keeps ticking for clients that do.

Submission has three shapes, chosen by the Submission field:

  • Mark as done — a fixed-value action, so it gets the same link-first treatment a poll option or rating chip does: a real in-email <form> posting to the interactions endpoint (kinetic tier) alongside a plain fallback link into the hosted confirm page (/v/[token]/act), both wrapped around the same "Mark as done" control. Because the submitted value never varies, the link-only tier-2 path works fine here, unlike the two modes below.
  • Short text answer / Link answer — these carry a free-form value no plain GET link can pre-fill, so — like the quiz block's whole-form fallback — the tier-2 path is a link into the hosted live view itself, where a real <input> (type text or type url respectively, with an appropriate placeholder) collects the answer and posts it. There's no in-email typing for these two modes in clients that can't render the kinetic form; they open the live view instead.

Whichever mode is configured, a submission lands as a normal interaction event and is deduplicated per recipient the same way a poll vote is — a repeat click on the recipient's own link is a no-op, not a second submission. If the block's due date has passed by the time a submission arrives, it's still recorded, just flagged as late downstream (see the Gradebook rollup below). The assignment block never blocks a late submission from being recorded; it only marks it.

Everywhere else (Outlook, or any client honoring neither the kinetic tier nor able to render the countdown image meaningfully), the fallback is simply the static due-date text line plus the resource links list. Both are always rendered regardless of tier, alongside whichever submission control (chip or live-view link) applies.

Configurable fields:

  • Title and Instructions, plus their own colors and font sizes.
  • Due at — a date/time; the countdown image and "Due in…"/"Past due" text are only rendered at all when this is set.
  • Points — 0 means ungraded (the same "0 = unset" convention the product block's inventory field uses); a nonzero value appends "(N pts)" next to the title.
  • Resource links — any number of label/URL pairs, rendered as a plain list of links below the instructions.
  • Submission — Mark as done / Short text answer / Link answer, as above.
  • Background color, padding, border, border radius, and a shared button color override for the submission control.

Examples

Subject

New assignment: Chapter 4 reading response

A weekly homework reminder for an online course pairs naturally with Mark as done — see Education for the broader pattern of running coursework and reminders through email. A written-response assignment ("summarize chapter 3 in two sentences") uses Short text answer so the reply itself lands in the Gradebook rather than requiring a separate submission portal. A project-based assignment ("submit your shared doc link") uses Link answer, with Resource links pointing at the rubric and any reference material. Set a due date to the actual deadline so the countdown gives students a real sense of urgency as it approaches.

What the static fallback looks like

<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>

This shows the Short text answer mode's fallback: since the answer can't be pre-filled into a plain link, the fallback is a link to the hosted live view rather than an /act confirm page.

Related