tudor/school_compare
1
0 Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

docs: design for similar schools nearby on the detail page

Browse Source 
A school page links outward to its places and never to another school.
This section adds that edge: three nearby schools of the same phase and a
comparable intake, each a crawlable link and each addable to the basket.

The design separates hard filters from soft preferences and never confuses
them. Selectivity, provision and opposite-sex intake are claims the section
cannot make, so they never relax, even where that means no section renders.
Gender and religious character describe closeness of fit, so they relax in
tiers — and the card states what actually survived rather than padding with
a match it did not earn.

Includes the mockup the design is drawn against, with all three tier states
live in both themes.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
TudorandClaude Opus 5 committed 2026-09-21 22:18:38 +01:00
1 parent dfce308f1f
commit 3650f7d8b7
2 files changed
+590
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/superpowers/specs/2026-09-21-similar-schools-nearby-design.md
+290
View File
@@ -0,0 +1,290 @@
# Similar Schools Nearby — Design
**Date:** 2026-09-21
**Status:** awaiting review
**Scope:** school detail pages, both phase templates
## Goal
Give a school detail page an answer to the question every reader arrives with
after the results tables: *and what else is around here?*
Today a school page links outward to its place pages through
`components/school/NearbyPlaces.tsx` and nowhere else. It never links to another
school. This section adds that edge — three nearby schools of the same phase and
a comparable intake, each a crawlable link and each addable to the comparison
basket in one click.
Mockup, with all three tier states live in both themes:
<https://claude.ai/artifact/168KdUMcfkUeGWW2FGjuec>
Source of the same page in the repo: `mockups/similar-schools-nearby.html`.
## The constraint that shapes everything
**A nearby school is not automatically a comparable school.**
The section's whole value is that a reader treats what it shows as a shortlist.
That makes every card an implicit claim that the school is a realistic
alternative, and there are three ways that claim goes wrong:
1. A **selective** school beside a non-selective one. Their intakes are
different by construction, so putting their Attainment 8 figures side by side
invites a conclusion the data cannot support.
2. A **special school, PRU or AP** beside a mainstream school. This is the same
error PR #70 fixed for the England benchmark, where Greenmead (URN 101099)
rendered "0% — 62 below England".
3. A **single-sex** school of the opposite sex. Not a weak match — not an option
at all.
So the design separates two kinds of rule, and never confuses them:
- **Hard filters** encode the claims above. They are never relaxed, at any
distance, even if that means the section does not render.
- **Soft preferences** describe how closely the intake resembles this school's.
They relax in tiers, and the card's own text always states what survived.
Everything below follows from that split.
## Selection algorithm
A backend helper, `_similar_schools_payload(urn)` in `backend/app.py`, modelled
on the existing `_places_payload(urn)` and operating on the cached
`load_latest_school_data()` frame — one row per URN, already carrying
`latitude`, `longitude`, `phase`, `gender`, `religious_denomination`,
`admissions_policy`, `school_type` and `status`.
### Hard filters
| Filter | Rule |
|---|---|
| Self | `urn` is excluded |
| Status | GIAS status must be open |
| Coordinates | both `latitude` and `longitude` present on both schools |
| Phase | same phase group via the existing `PHASE_GROUPS` map |
| Provision | special/PRU/AP match only each other |
| Selectivity | selective matches selective; non-selective matches non-selective |
| Gender | Boys never matches Girls; Mixed is compatible with both |
`PHASE_GROUPS` is reused rather than re-derived so an all-through school is
offered correctly on both the primary and secondary sides, exactly as it already
behaves in search.
The provision filter needs a backend counterpart to the frontend's
`isSpecialSchool()` in `nextjs-app/lib/utils.ts:897`, reading the same GIAS
establishment types through `backend/gias_codes.py`. The two must agree: a
school the frontend treats as special for benchmarking but the backend treats as
mainstream for matching would be dropped from its own England comparison and
then offered as a peer to a mainstream school on the next page along.
**Three cards.** The target count is 3, which is what the grid is built for; 2
is the minimum that renders at all.
### Soft preferences, relaxed in tiers
| Tier | Additionally requires | Radius |
|---|---|---|
| 1 | exact gender equality **and** same religious character | 3 miles |
| 2 | exact gender equality | 5 miles |
| 3 | nothing beyond the hard filters | 10 miles |
Candidates are taken from tier 1 first, ordered by distance; if fewer than three
have been found the next tier tops up, and so on. A school already taken cannot
be taken again by a later tier.
**Faith relaxes before gender.** A faith mismatch changes the character of a
school; a gender mismatch can mean the school is not available to the reader's
child at all. Ordering them the other way would fill the section with schools
that cannot be applied to.
### Two decisions that are easy to get wrong later
**Selected by tier, displayed by distance.** Tier decides *which* three schools
earn a slot. The rendered order is then distance ascending, because "nearby" is
the promise in the heading and a reader scanning the row reads the first card as
the closest. A tier-2 school at 0.4 miles therefore appears above a tier-1
school at 2.9 miles, and the chips explain the difference in match quality.
**Fewer than two results renders nothing.** Not an empty state, not a single
lonely card, not padding with schools that failed the hard filters. The section
is absent, the nav item is absent, and the page is unchanged from today. A page
with one weak match is better off without the section than with it.
### Distance
Straight-line, from the vectorised haversine already used for postcode search at
`backend/app.py:831`, computed over the ~27k-row frame in numpy. Reported to one
decimal place in miles, consistent with the rest of the site.
Straight-line distance is not road distance and is not measured from the
reader's home. The section says so in its disclosure rather than leaving the
reader to assume otherwise.
## API
`/api/schools/{urn}` gains a `similar_schools` array. Each row:
| Field | Notes |
|---|---|
| `urn` | for the link and the compare basket |
| `school_name` | link text |
| `distance_miles` | one decimal place |
| `school_type` | GIAS type, translated, for the card's meta line |
| `age_range` | for the meta line |
| `shared` | the chip strings the tier actually justifies — see below |
| `tier` | 1, 2 or 3 — drives the lede's wording and the chip styling |
| `metric_value` | the phase-appropriate headline figure, or null |
| `metric_key` | `rwm_expected_pct` or `attainment_8_score` — see below |
| `metric_year` | the year the figure is from |
The metric follows the template the page is rendering, not the neighbour's own
phase, so a row of cards never mixes two scales. Primary and **all-through**
pages use `rwm_expected_pct`, matching `PrimarySchoolSections`, which is the
template all-through schools render with; secondary pages use
`attainment_8_score`. Where the neighbour has no value for that key, the card
reads "Not published" rather than falling back to the other key.
`tier` is carried explicitly rather than inferred from the contents of
`shared`, because the frontend needs it for two separate decisions — whether the
lede may claim a similar intake, and whether a chip renders as a brand-tinted
fill or a muted outline — and inferring it from chip count would couple those
decisions to the copy.
Three rows of roughly 130 bytes each. It rides in the existing detail payload
rather than a new endpoint because the page already makes exactly one server
fetch for its data, and `/school/[slug]` regenerates at most weekly
(`revalidate = 604800`), so the per-request cost is paid once per school per
week.
**The key is absent, not null, on a backend that does not have this code.** The
frontend treats absent and empty identically, which is what allowed
`NearbyPlaces` to ship without a lockstep deploy of the two images.
`shared` is computed on the backend beside the tier that produced it, not
re-derived on the frontend. Deriving it twice is how a card comes to claim a
match the selection did not actually make.
## Frontend
### Components
`components/school/SimilarSchoolsSection.tsx` — a server component wrapped in
the shared `Section` shell from `sectionShared.tsx`. It renders the heading,
the lede, the `<details>` disclosure, the card grid and the footer CTA. Every
card's title is an `<a>` to the school's canonical slug URL via `schoolUrl()`.
`components/school/AddToCompareButton.tsx` — the only `'use client'` file this
adds, and the only client JavaScript in the section. It calls `addSchool` from
`ComparisonProvider` and reports the selection with a `from: 'similar_schools'`
attribution, mirroring `addSchoolFromSearch` in `HomeView.tsx:442`.
The split matters: the links — the part with SEO value and the part that must
work without JavaScript — are server-rendered into the initial HTML, and only
the basket interaction is hydrated.
### Placement and navigation
Rendered as the last section **inside** `SchoolDetailShell`, from both
`PrimarySchoolSections` and `SecondarySchoolSections`. Inside, not after, because
the sticky nav's scroll-spy locates sections with `document.getElementById` and
can only reach a section that lives in the shell.
`NearbyPlaces` stays where it is, outside the shell, immediately below. The
resulting order — this school, then similar schools, then the places containing
them — narrows before it widens, which is the order a reader leaves a page in.
`buildNavItems` and `buildSecondaryNavItems` both gain
`{ id: 'similar', label: 'Similar schools' }`, gated on the section rendering.
The id must match the `Section` id or the scroll-spy silently breaks.
### The comparison CTA
A plain `<a href="/compare?urns=…">`, built from this school's URN plus the
selected ones. `/compare` already parses `urns` from the query string
(`app/(frontend)/compare/page.tsx:55`), so this needs no new compare plumbing.
With nothing selected the CTA is disabled; the button also adds to the shared
basket so the site-wide comparison state stays consistent with what the page
shows.
## Copy, and what the section is allowed to claim
**The lede tracks the tier.** At tiers 1–2 it reads "Other primary schools near
X, with a similar intake." At tier 3 it drops "with a similar intake", because
at tier 3 that is not what was matched.
**Chips state only what is shared.** A tier-2 card carries fewer chips rather
than a chip it has not earned; a tier-3 card falls back to the plain phase name,
styled as a muted outline rather than a brand-tinted fill so the difference is
visible at a glance.
**The neighbour's metric carries no valence colour.** Green and terracotta are
reserved site-wide for comparison against the England average. Colouring a
neighbour's figure against this school's would read as ranking the neighbours
against each other, which is precisely the endorsement this section must not
make. The figure sits in neutral ink above a plain "72% at this school"
reference line, and the reader draws their own conclusion.
**A missing figure reads "Not published".** Never 0, never blank, never an
em dash. This follows the same rule the rest of the detail page uses: a school
with no published result has not scored zero.
**The disclosure states the method plainly** — same phase, nearest first,
preferring a similar intake, special schools only ever compared with special
schools, straight-line distance from the school rather than road distance or
distance from the reader's home, and that being listed here is not a
recommendation.
## Degradation
| Condition | Behaviour |
|---|---|
| `similar_schools` absent (older backend image) | no section, no nav item |
| fewer than 2 qualifying schools | no section, no nav item |
| this school has no coordinates | no section |
| the helper raises | returns `[]`; the page renders without the section |
The helper is wrapped so a failure inside it never 500s a page that is otherwise
complete — the posture `get_supplementary_data` already takes for its own
queries.
## Testing
**Backend**, in a new `backend/tests/test_similar_schools.py`, against a
synthetic frame rather than live marts:
- a selective school never returns a non-selective one, and vice versa
- a special school returns only special schools; a mainstream school returns none
- a Boys school never returns a Girls school; Mixed matches both
- closed schools and schools without coordinates are never returned
- tier relaxation fills in order, and a school taken at tier 1 is not repeated
- an all-through school is offered on both phase sides
- fewer than two qualifying schools returns `[]`
- distances match a hand-computed haversine for a known pair
**Frontend**, in `nextjs-app/__tests__`:
- the section renders nothing for absent, empty and single-row inputs
- the lede drops "with a similar intake" when any card is tier 3
- a null metric renders "Not published"
- the nav item appears only alongside the section
**E2E**, added to the existing journeys in `e2e/tests` in the same PR, per the
repository's rule on user-facing behaviour:
- the section renders on a known staging URN, with resolving links
- add-to-compare reaches `/compare` with the expected `urns`
The E2E gate runs after merge on this project, so these journeys are not
provable in the PR checks; the PR is verified on the unit tests, and the
journeys are confirmed on the post-merge staging run.
## Out of scope
- A map of the nearby schools. The section is a list; the page already has a map.
- Statistical neighbours on deprivation, size or cohort profile. If the tiers
prove too coarse, that is the trigger to move this computation into a dbt mart
— `_similar_schools_payload` is a deliberate seam for exactly that swap.
- Precomputing neighbours in `marts.*`. Rejected for now: a new mart is inert
until Airflow runs, so the feature would ship dark, and every tuning change to
the tiers would become a pipeline round-trip instead of a deploy.
- Any change to `/api/compare`, the compare page, or the comparison basket.
mockups/similar-schools-nearby.html
+300
View File
@@ -0,0 +1,300 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Similar Schools Nearby</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">
<style>
/* Tokens copied verbatim from nextjs-app/app/(frontend)/globals.css so this
mockup cannot drift from the shipped palette. Light values first, dark
under prefers-color-scheme, both overridable by the theme switch. */
:root {
color-scheme: light;
--bg-primary:#FAFAF8; --bg-secondary:#F5EFE6; --bg-card:#FFFFFF;
--text-primary:#1C2731; --text-secondary:#4A5560; --text-muted:#5F6A75;
--border:#E5E7EB; --border-strong:#D3D7DD;
--brand:#0F766E; --brand-strong:#0C5F58; --brand-bg:rgba(15,118,110,.10); --brand-on:#FFFFFF;
--action:#BE3C27; --action-strong:#A33320; --action-on:#FFFFFF;
--sand:#F5EFE6; --mustard:#F2C94C; --mustard-ink:#806200;
--font-display:Manrope,-apple-system,BlinkMacSystemFont,sans-serif;
--font-ui:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
--radius-md:8px; --radius-lg:16px;
--shadow:0 1px 2px rgba(28,39,49,.06),0 1px 3px rgba(28,39,49,.05);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--bg-primary:#111A20; --bg-secondary:#16222A; --bg-card:#18242C;
--text-primary:#E9EEF0; --text-secondary:#B4C2C7; --text-muted:#8B9AA1;
--border:#26343D; --border-strong:#35454F;
--brand:#5FC7BB; --brand-strong:#7BD6CC; --brand-bg:rgba(95,199,187,.14); --brand-on:#0A1418;
--action:#F08A72; --action-strong:#F5A492; --action-on:#241009;
--sand:#1B2730; --mustard:#F2C94C; --mustard-ink:#EFC658;
--shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.25);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg-primary:#111A20; --bg-secondary:#16222A; --bg-card:#18242C;
--text-primary:#E9EEF0; --text-secondary:#B4C2C7; --text-muted:#8B9AA1;
--border:#26343D; --border-strong:#35454F;
--brand:#5FC7BB; --brand-strong:#7BD6CC; --brand-bg:rgba(95,199,187,.14); --brand-on:#0A1418;
--action:#F08A72; --action-strong:#F5A492; --action-on:#241009;
--sand:#1B2730; --mustard:#F2C94C; --mustard-ink:#EFC658;
--shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.25);
}
* { box-sizing:border-box; }
body {
margin:0; padding:32px 16px 80px; background:var(--bg-primary);
color:var(--text-primary); font:15px/1.55 var(--font-ui);
-webkit-font-smoothing:antialiased;
}
.page { max-width:960px; margin:0 auto; }
.page > header { margin-bottom:28px; display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; justify-content:space-between; }
.page > header h1 { font:700 25px/1.25 var(--font-display); letter-spacing:-.6px; margin:0 0 6px; }
.page > header p { margin:0; color:var(--text-muted); font-size:14px; max-width:60ch; }
.theme-switch { border:1px solid var(--border-strong); background:var(--bg-card); color:var(--text-secondary); border-radius:999px; padding:8px 14px; font:500 13px var(--font-ui); cursor:pointer; min-height:40px; }
.theme-switch:hover { border-color:var(--brand); color:var(--brand); }
/* ── The page context each variant is shown inside ─────────────────── */
.variant { margin-bottom:40px; }
.variant > .context { padding:0 4px 12px; }
.variant .eyebrow { margin:0 0 4px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
.variant .context h2 { font:600 18px/1.35 var(--font-display); margin:0; color:var(--text-secondary); }
.variant .note { margin:10px 4px 0; font-size:12.5px; color:var(--text-muted); }
.variant .note b { color:var(--text-secondary); font-weight:600; }
/* ── The section itself — mirrors components/school/Section ────────── */
.card {
background:var(--bg-card); border:1px solid var(--border);
border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow);
}
.card > h2 { font:700 22px/1.25 var(--font-display); letter-spacing:-.4px; margin:0; }
.lede { margin:8px 0 0; color:var(--text-secondary); font-size:14.5px; max-width:64ch; }
details.method { margin:14px 0 22px; }
details.method summary { cursor:pointer; color:var(--brand); font-size:13.5px; font-weight:500; width:fit-content; }
details.method summary:hover { color:var(--brand-strong); }
details.method div { margin-top:10px; padding:14px 16px; background:var(--bg-secondary); border-radius:var(--radius-md); }
details.method p { margin:0 0 9px; font-size:13px; color:var(--text-secondary); max-width:70ch; }
details.method p:last-child { margin-bottom:0; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
@media (max-width:820px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .grid { grid-template-columns:1fr; } .card { padding:20px; } body { padding-left:16px; padding-right:16px; } }
.school {
position:relative; display:flex; flex-direction:column;
border:1px solid var(--border); border-radius:var(--radius-md);
padding:16px; background:var(--bg-card);
}
.school:has(.add[aria-pressed="true"]) { border-color:var(--brand); background:var(--brand-bg); }
.distance { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted); margin-bottom:10px; }
.distance svg { width:13px; height:13px; flex:none; }
.school h3 { font:600 16px/1.35 var(--font-display); margin:0 0 6px; }
/* The whole card is the link target; the button sits above it on z-index so
it stays independently clickable. Same trick the search result cards use. */
.school h3 a { color:var(--text-primary); text-decoration:none; }
.school h3 a::after { content:""; position:absolute; inset:0; border-radius:var(--radius-md); }
.school:hover { border-color:var(--border-strong); }
.school h3 a:hover { color:var(--brand); text-decoration:underline; }
.school h3 a:focus-visible { outline:none; }
.school:has(h3 a:focus-visible) { outline:2px solid var(--brand); outline-offset:2px; }
.meta { margin:0 0 12px; font-size:12.5px; color:var(--text-muted); }
.shared { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.shared span {
font-size:11.5px; line-height:1.4; padding:4px 8px; border-radius:999px;
background:var(--brand-bg); color:var(--brand); border:1px solid transparent;
}
.shared span.loose { background:transparent; color:var(--text-muted); border-color:var(--border); }
.metric { margin-top:auto; padding-top:13px; border-top:1px solid var(--border); }
.value { font:700 26px/1.1 var(--font-display); letter-spacing:-.6px; }
.value.absent { font-size:15px; font-weight:600; color:var(--text-muted); letter-spacing:0; }
.metric .label { margin:4px 0 0; font-size:12px; color:var(--text-secondary); }
.metric .ref { margin:2px 0 0; font-size:12px; color:var(--text-muted); }
.add {
position:relative; z-index:1; margin-top:14px; width:100%; min-height:40px;
font:500 13px var(--font-ui); cursor:pointer; border-radius:var(--radius-md);
border:1px solid var(--border-strong); background:var(--bg-card); color:var(--brand);
}
.add:hover { border-color:var(--brand); background:var(--brand-bg); }
.add[aria-pressed="true"] { border-color:var(--brand); background:var(--brand-bg); font-weight:600; }
.add:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.footer {
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:14px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border);
}
.footer p { margin:0; font-size:12.5px; color:var(--text-muted); }
.footer strong { display:block; font:600 14px var(--font-ui); color:var(--text-primary); }
/* Coral: the one decisive action in this section, and there is only one. */
.compare {
min-height:44px; padding:0 20px; border-radius:var(--radius-md); cursor:pointer;
font:600 14px var(--font-ui); background:var(--action); color:var(--action-on);
border:1px solid var(--action); text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.compare:hover { background:var(--action-strong); border-color:var(--action-strong); }
.compare[aria-disabled="true"] { opacity:.45; pointer-events:none; }
.compare:focus-visible { outline:2px solid var(--action); outline-offset:3px; }
.caption { margin:18px 0 0; font-size:11.5px; color:var(--text-muted); }
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
</style>
</head>
<body>
<div class="page">
<header>
<div>
<h1>Similar schools nearby</h1>
<p>A new section on the school detail page. Fictional schools and figures; shipped
colour, type and section shell taken from <code>globals.css</code>.</p>
</div>
<button class="theme-switch" type="button" id="theme">Dark theme</button>
</header>
<div id="variants"></div>
</div>
<script>
const PIN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>';
const variants = [
{
id: 'primary',
eyebrow: 'Variant 1 · Primary page, full intake match',
context: 'Meadowbrook Primary School — Ages 4–11 · Mixed · No religious character · Community school',
lede: 'Other primary schools near Meadowbrook Primary School, with a similar intake.',
metric: 'Reading, writing & maths',
caption: 'Meeting the expected standard at key stage 2, 2025.',
thisValue: '72%',
note: 'Every card qualified at <b>tier 1</b>: same phase, same gender intake, same religious character, within 3 miles. The chips state exactly what is shared.',
schools: [
{ name:'Willow Lane Primary School', distance:'0.6', meta:'Community school · Ages 4–11', shared:['Mixed','No religious character'], value:'74%' },
{ name:'Oakfield Primary School', distance:'1.1', meta:'Academy converter · Ages 3–11', shared:['Mixed','No religious character'], value:'69%' },
{ name:'Brookside Primary School', distance:'1.8', meta:'Community school · Ages 4–11', shared:['Mixed','No religious character'], value:'Not published' },
],
},
{
id: 'secondary',
eyebrow: 'Variant 2 · Secondary page, mixed tiers',
context: 'Meadowbrook High School — Ages 11–18 · Mixed · Non-selective · Academy',
lede: 'Other secondary schools near Meadowbrook High School, with a similar intake.',
metric: 'Attainment 8',
caption: 'Average GCSE attainment score across eight qualifications, 2025.',
thisValue: '51.2',
note: 'The third card only qualified once the religious-character preference was relaxed at <b>tier 2</b>. Its chip set says so by omission rather than claiming a match it does not have — and selectivity is never relaxed, so no grammar school can appear here.',
schools: [
{ name:'Rivermead High School', distance:'0.9', meta:'Academy converter · Ages 11–18', shared:['Mixed','Non-selective','No religious character'], value:'52.8' },
{ name:'Oakfield Academy', distance:'1.7', meta:'Academy sponsor led · Ages 11–16', shared:['Mixed','Non-selective','No religious character'], value:'49.6' },
{ name:'St Aidan’s Catholic High School', distance:'2.4', meta:'Voluntary aided · Ages 11–18', shared:['Mixed','Non-selective'], value:'53.4' },
],
},
{
id: 'sparse',
eyebrow: 'Variant 3 · Rural page, tier 3 fallback',
context: 'Little Ashby Church of England Primary School — Ages 4–11 · Mixed · Church of England · Voluntary controlled',
lede: 'Other primary schools near Little Ashby Church of England Primary School.',
metric: 'Reading, writing & maths',
caption: 'Meeting the expected standard at key stage 2, 2025.',
thisValue: '66%',
note: 'Nothing matched on religious character within range. At <b>tier 3</b> the lede drops the phrase “with a similar intake”, the chips fall back to the plain phase, and only two schools are offered rather than padding to three. One school fewer than this and the section would not render at all.',
schools: [
{ name:'Great Marden Primary School', distance:'4.2', meta:'Community school · Ages 4–11', shared:['Primary school'], looseFrom:0, value:'71%' },
{ name:'Ashby Vale Academy', distance:'7.8', meta:'Academy converter · Ages 4–11', shared:['Primary school'], looseFrom:0, value:'58%' },
],
},
];
const selected = Object.fromEntries(variants.map((v) => [v.id, new Set()]));
function schoolCard(v, s, i) {
const on = selected[v.id].has(i);
const chips = s.shared.map((label, n) => {
const loose = s.looseFrom !== undefined && n >= s.looseFrom;
return `<span class="${loose ? 'loose' : ''}">${label}</span>`;
}).join('');
const absent = s.value === 'Not published';
return `
<article class="school">
<p class="distance">${PIN}${s.distance} miles away</p>
<h3><a href="#">${s.name}</a></h3>
<p class="meta">${s.meta}</p>
<div class="shared">${chips}</div>
<div class="metric">
<p class="value ${absent ? 'absent' : ''}">${s.value}</p>
<p class="label">${v.metric}</p>
<p class="ref">${v.thisValue} at this school</p>
</div>
<button class="add" type="button" data-variant="${v.id}" data-index="${i}" aria-pressed="${on}">
${on ? '✓ Added to compare' : '+ Add to compare'}
<span class="sr">${s.name}</span>
</button>
</article>`;
}
function render() {
document.getElementById('variants').innerHTML = variants.map((v) => {
const count = selected[v.id].size;
return `
<section class="variant">
<div class="context">
<p class="eyebrow">${v.eyebrow}</p>
<h2>${v.context}</h2>
</div>
<div class="card">
<h2>Similar schools nearby</h2>
<p class="lede">${v.lede}</p>
<details class="method">
<summary>How these schools are chosen</summary>
<div>
<p>Schools of the same phase, nearest first, preferring those whose intake
resembles this one — gender, religious character, and whether the school
selects by ability. Special schools are only ever compared with other
special schools.</p>
<p>The chips on each card list what that school actually shares with this
one. Where nothing close enough was found nearby, the match is loosened
and the chips say less.</p>
<p>Distances are straight-line from this school, not road distance and not
from your home. Being listed here is not a recommendation, and the
results shown are context rather than a measure of fit.</p>
</div>
</details>
<div class="grid">${v.schools.map((s, i) => schoolCard(v, s, i)).join('')}</div>
<div class="footer">
<p aria-live="polite">
<strong>${count ? `${count} school${count === 1 ? '' : 's'} selected` : 'Compare side by side'}</strong>
${count ? 'This school is included automatically.' : 'Add a school to compare it with this one.'}
</p>
<a class="compare" href="#" aria-disabled="${count ? 'false' : 'true'}">
${count ? `Compare ${count + 1} schools` : 'Compare'} →
</a>
</div>
<p class="caption">${v.caption} Fictional schools and figures for this mockup.</p>
</div>
<p class="note">${v.note}</p>
</section>`;
}).join('');
}
document.getElementById('variants').addEventListener('click', (event) => {
const button = event.target.closest('.add');
if (!button) return;
const { variant, index } = button.dataset;
const set = selected[variant];
const i = Number(index);
set.has(i) ? set.delete(i) : set.add(i);
render();
document.querySelector(`.add[data-variant="${variant}"][data-index="${index}"]`).focus();
});
const themeButton = document.getElementById('theme');
themeButton.addEventListener('click', () => {
const dark = document.documentElement.dataset.theme === 'dark';
document.documentElement.dataset.theme = dark ? 'light' : 'dark';
themeButton.textContent = dark ? 'Dark theme' : 'Light theme';
});
render();
</script>
</body>
</html>