Sequence

A procedure one step at a time — or a course of events on a real time axis.

Arrow keys step through it. The rail is tappable.

Steps — the whole path stays visible

Read the chart
Take the record before you take the room.
Whatever you miss here, you will ask about in front of the patient — and that costs their confidence, not your time.
Check the lines
Follow every line from the bag to the body, in that order.
Following the line the other way is how swapped infusions survive a handover.
Ask the patient
One open question before the checklist.
The answer often reorders everything you planned in the two steps above.
Sign off
Countersign only what you have seen yourself.
A signature is a statement about your own eyes, not about your colleague's.

Tap the … for the reasoning.

Reasoning printed from the start

Read the chart
Take the record before you take the room.
Whatever you miss here, you will ask about in front of the patient.
Check the lines
Follow every line from the bag to the body, in that order.
Following the line the other way is how swapped infusions survive a handover.

data-why="open" — right for a slide that will be handed out.

Time — the spacing is the message

Insertion
A first biofilm forms within hours.
Colonisation
Bacteria travel upwards. No symptoms yet — which is the problem.
Bacteriuria
Detectable in roughly one in four.
Mature biofilm
Dense enough that antibiotics barely reach through it.
Fully colonised
Removing it earlier is the only measure that still works.

Day 0 to day 3 is nothing. Day 14 to day 28 is half the axis.

One list, two uses

Give the sequence an id and point an ordering question at it:

<div class="sequence" id="handover"> … </div>

<div class="quiz" data-type="order" data-seq="#handover">
  <div class="quiz-q">Put the steps in the right order.</div>
</div>

Write the procedure once — teach it and examine it. Change a step and the question changes with it.