French Press Coffee: A Step-by-Step Interactive Procedure + Printable Job Aid

 

👋 What this is

This example shows how a familiar, physical process can be turned into a step-by-step interactive procedure using Rise’s Code Block.

Learners:

• check off required supplies,
• unlock steps in order,
• see real photos at each step,
• use a built-in timer when timing matters,
• and finish with a printable job aid they can keep.

The goal was to design something that feels useful, human, and reusable, not just a demo.

🔗 Review the example

👉 Review link:
https://360.articulate.com/review/content/d7749dd2-76ce-4bab-9f3f-f5d74f83c1d8/review

💡 What inspired this

Procedures often fail not because they’re complicated, but because learners don’t know why steps matter—or when timing is critical.

I wanted to explore how Code Block could support:

• procedural flow (unlocking steps),
• readiness checks (supplies gate),
• real-world constraints (timing),
• and post-training support (printable job aid).

French press coffee is familiar enough to feel safe, but nuanced enough to show how small decisions affect outcomes.

🧭 How it works

• Supplies checklist gates the experience (with a friendly “skip for now” option).
• Steps unlock one at a time.
• Each step includes a photo and a “why it matters” callout.
• Step 4 includes a 4-minute timer with a progress bar and gentle buzzer.
• The final screen offers:
  • Restart
  • Copy steps
  • Print a job aid

🛠 Tools used

• Articulate Rise 360 – Code Block
• HTML / CSS / JavaScript (vanilla)
• Web Audio API (for the timer sound)
• Pexels images (direct .jpeg links)

🧠 What I learned

• Small interactions compound quickly—gating, timers, and completion actions together create a “product-like” experience.
• A soft gate (with a skip option) keeps learners oriented without feeling blocked.
• Print + copy actions turn an example into something learners actually reuse.
• Code Block is especially powerful for procedures where order and timing matter.

🔁 Prompts to remix this idea

• “Turn this SOP into an interactive, step-locked procedure.”
• “Add a timer to the step where mistakes usually happen.”
• “Gate the steps behind a readiness or equipment check.”
• “End the interaction with a printable job aid.”

This pattern works well for SOPs, clinical workflows, equipment setup, safety checks, and onboarding tasks.

📎 Code (copy & reuse)

I’ve included the full Code Block in the Review link, so you can copy/paste and remix it easily.