Build guide · site 355 · Wave 39, Industry Demos XXVIII

How the Vital Signs First Aid Training demo was built

A fictional registered training organisation in Belmont — first aid, CPR, childcare first aid, low-voltage rescue and mental health first aid, public sessions in a Belmont training room and on-site courses at Perth workplaces. The page has one job: a booking request with the course, the format and the participants already priced.

Concept

The audience is the office manager who needs eight staff certified before the audit, the childcare director whose team's HLTAID012 lapses in March, the electrical apprentice who needs LVR/CPR for the licence, and the parent who just wants to know what to do. Training is priced per person, so the page lets the buyer count heads and pick a format before ringing — and it makes the two commercial facts of the trade visible: on-site costs the same per person but bills eight seats, and there is no travel fee inside Perth metro. This is the wave's B2B site — light, exact, calm — and the collection's first registered-training-organisation demo.

The direction is the training room with the blinds up: clinical-white ground, navy ink, first-aid-green CTAs, AED-red linework. The signature is the Course Roster — a drawn training room seen from the back. Rows of chairs with CPR manikins on mats follow the participants stepper (drawn cap twelve; the roster tag prints the true count), a trainer kneels at the front doing compressions on a demonstration manikin, a projector screen shows the selected course's unit code in the display face, and the price sits on the sign-in sheet clipboard on the front counter. Course chips change what is on the mats and the screen; format chips swap the Belmont room (whiteboard, runway beyond the window) for a client lunchroom (noticeboard, fridge, kettle); the regional zone puts a wheatbelt horizon in the window; the weekend toggle circles SAT on the calendar; the kits toggle puts a green first-aid kit on every chair.

Palette — measured, not assumed

Every ratio below was computed by WCAG relative-luminance arithmetic from the shipped hex tokens in Pass 1 (the spec's figures were hypotheses; they landed within 0.1 of the measured values). First-aid green #1F7A4D measured 4.91:1 on the ground and 5.32:1 under white labels — clear of the 4.5 floor, so primary buttons keep the argued green and darken to the pre-minted fill #186340 (7.25:1) on hover and for selected chips; every green-coloured word uses the text-ink #155A3A (7.59:1). AED red #D6453A is 4.06:1 on the ground and is used only for lines and marks; red-coloured copy (eyebrows, notes, the badge label) uses #A32A20 (6.66:1).

Type

Techniques

• Procedural SVG room, built in JS. Two layouts (900×540 wide, 600×640 tall under 600px) share one draw routine: wall and floor gradients with perspective floor lines, ceiling light strips, a projector screen with a breathing beam, a whiteboard (DRSABCD list, calendar) or a cork noticeboard (pinned notes, calendar), a window whose view is one of three drawn scenes (runway with taxiing plane and chasing lights; an industrial estate with a road and a gum; a wheatbelt horizon with silos and sun), a fridge with a kettle steaming on top, a sign-in counter, and the front layer of demonstration manikin plus trainer.
• Seat cells. Each participant is a <g class="cell"> placed with translate() scale() — a mat, a manikin with its red compression point, and a chair seen from behind. Rows scale 0.78 → 1.0 (wide) toward the viewer; columns converge on the row centre. Childcare adds an infant manikin per row; Provide First Aid adds a bandage to every manikin and an open AED trainer beside the demo mat; LVR swaps the demo mat for a striped insulated mat and stands a rescue crook beside it; MHFA rebuilds the cells as a circle of chairs (sorted by depth) with a standing trainer.
• Compression loop. A rAF loop with dt = min(max(now − last, 0)/1000, .05) drives the trainer's upper body on a 1.7 Hz stroke (sharp down, slower release), the compression point's radius and a fading ring, the screen beam (0.6–0.85, never below the visibility floor), runway lights, the plane, and kettle steam. Room opacity is always 1 — the never-invisible floor is structural. Reduced motion renders one settled frame; the loop pauses on document.hidden.
• Marks toggle by attribute (hidden with the [hidden]{display:none!important} guard, never the IDL property) with a CSS fade on the group and the animated attributes on child elements — state and animation on separate nodes.
• The sign-in sheet is an HTML badge with a drawn clip, positioned on the counter so the price, subtitle, declaration and notes are real text (selectable, screen-readable, live region). Three width variants: wide (30% of the stage on the counter, full note templates), mid 600–1099px (right-anchored, 31%, short note forms) and mobile (150px, top-right, short forms).
• Roster tag with a pill background prints the true count, the drawn cap and the billed seats — top-left of the roster in wide (clear of the counter and badge), bottom-right in tall.
• Procedural Perth map: coastline, Swan River, the airport runways beside a Belmont star, nineteen metro suburbs, a regional WA band. No raster anywhere; the favicon is an inline SVG data-URI.
• No libraries — vanilla JS, one <style>, Google Fonts the only external request.

Signature implementation

State is one object — course, format, zone, participants, two toggles — and compute() is a pure function over it: billed seats = max(8, n) in on-site mode, else n; course line = billed × rate; +$350 when on-site regional; +$150 weekend only when on-site and the remembered toggle is on; kits = $45 × the ACTUAL count; three note flags (on-site under eight, public at eight or more, exactly twenty). render() writes the result to every surface in one pass: the display line, the badge (price, subtitle, declaration, notes with full and short forms), the ledger, the plain-text mirror list under the scene, the control states (zone fieldset hidden in public mode, weekend disabled with the on-card reason, stepper limits) and the scene (screen code, board, window view, marks, seat cells rebuilt, roster tag). Restore-vs-reset is by memory: state.zone and state.weekend are never overwritten by the format chip, so public → on-site restores both exactly. Every handler bumps a scene token before touching state; the settle timer publishes window.__firstaid.settled only for the latest token, so a rapid-fire run of clicks ends on one definite, settled state. Dual-speed redraw: 40 ms per cell (1.2 s cap) on first draw, 12 ms (480 ms cap) after.

Pricing model (pinned anchors)

Totals are integer by construction and display to the whole dollar. The estimator's cheapest outputs equal the grid floors: CPR $65, Provide First Aid $135, Childcare $150, LVR + CPR $110, MHFA $290, on-site from $520 (eight seats × CPR).

Worked examples — measured from the running page against an independent oracle

Conversion decisions

• Above the fold at 375px: name, "First aid, CPR and low-voltage rescue training across Perth — ready before it happens", Book-a-course and Call buttons, three trust chips (nationally recognised units, same-day statement, est. 2012 · RTO 00000). Measured: h1 bottom 285px, CTA bottom 355px, trust bottom 514px in a 740px viewport.
• Click-to-call in the masthead (icon-only under 430px so the wordmark never collides — measured wordmark right 266px vs call button left 318px) and a fixed Call / Book bar on mobile. No emergency-line treatment — a training provider has none; the FAQ and the drawn whiteboard carry DRSABCD instead.
• Form fields: name, phone, suburb, company (optional — half the enquiries are individuals), preferred month (this month / next / within three / planning), and a textarea pre-filled from the roster. Front-end validation with per-field messages and aria-invalid, no pattern attributes; the confirmation panel is hidden on load and on empty submit and appears only after a valid filled submit ("Thanks — we've received your request… we'd call you back the same business day").
• Signature → form handoff: "Book this roster" writes the course, format, zone, count, extras, estimated total (with the eight-seat note where it applies) and any suggestion notes into the textarea and focuses the name field.
• Reviews are the spec's three stories in demo copy (childcare centre on a Saturday, apprentices' LVR before licence day, the office that finally knows where the AED is); the trust strip is plausibly formatted and clearly fictional (ABN 00 000 000 355, RTO 00000). Real facts stay real: unit codes, the CPR-annually / first-aid-three-yearly guidance (hedged "recommended"), GST-free training (hedged "typically").

Local SEO we'd implement for the real business

The live page carries only WebPage + BreadcrumbList JSON-LD naming it a demonstration — fictional business data in a real search index would be dishonest markup. For the real Vital Signs we would ship an EducationalOrganization entity (an RTO is an educational organisation; schema.org has no LocalBusiness training-centre subtype, so the organisation type carries the NAP, hours and reviews) plus Course items for each unit as a second block:

{
  "@context": "https://schema.org",
  "@type": "EducationalOrganization",
  "@id": "https://vitalsignsfirstaid.example/#rto",
  "name": "Vital Signs First Aid Training",
  "image": "https://vitalsignsfirstaid.example/training-room.jpg",
  "url": "https://vitalsignsfirstaid.example/",
  "telephone": "+61 8 9000 0355",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Belmont",
    "addressRegion": "WA",
    "postalCode": "6104",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.955, "longitude": 115.925 },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"], "opens": "08:00", "closes": "17:00" }
  ],
  "areaServed": ["Perth","Belmont","Cannington","Welshpool","Midland","Joondalup","Fremantle","Rockingham"],
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "212" },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "P. — childcare director, Cannington" },
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "Fourteen educators, one Saturday, our own kindy room — every certificate in my inbox by Monday."
    }
  ]
}

{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "Provide First Aid (HLTAID011)",
  "description": "One-day nationally recognised first aid course with online pre-work.",
  "provider": { "@id": "https://vitalsignsfirstaid.example/#rto" },
  "hasCourseInstance": {
    "@type": "CourseInstance",
    "courseMode": "Blended",
    "location": { "@type": "Place", "name": "Belmont training room" }
  },
  "offers": { "@type": "Offer", "price": "135", "priceCurrency": "AUD" }
}

Alongside the markup: a Google Business Profile with the same NAP and hours, per-course landing sections with the unit codes in the headings (buyers search the code), a reviews feed synced from Google, and location copy that names the metro suburbs the on-site work actually goes to.

What would change for the real client

• Student management: the booking form would enrol straight into aXcelerate or VETtrak — course, session, participants and the on-site job — with USI collection and AVETMISS reporting handled there, and the statement of attainment issued from the same record the day of the course.
• Calendar and payment: public sessions from the SMS's published calendar via a booking widget with card payment or invoice-on-booking for employers; on-site quotes issued and accepted online.
• Accounts: Xero for invoicing, with the SMS's enrolments and the on-site jobs posted through; GST-free training coded correctly.
• Reminders: certificate-expiry reminders (CPR at 12 months, first aid at 36) sent from the SMS — the "refresher reminders" line on the page becomes a real product.
• Content: their photography (the room, the manikins, the trainers), their real Google reviews feed, their real ABN, RTO number, address and phone, and their own price list — the anchors here are a WA-plausible placeholder.

Iteration log

Vital Signs First Aid Training is a fictional business — a first aid training industry demonstration designed & built by Sapience Analytics, part of the Generative Assets collection. Back to the site · Index.