feat(compare): parent-first compare screen — sections, England anchors, report cards, mobile-first #35
@@ -0,0 +1,287 @@
|
||||
# Compare Screen Frontend Rebuild Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Rebuild `/compare` in the Next.js app to match the approved mockups — parent-first sections (At a glance / Ofsted / Academics / Getting a place / Who goes there / Explore trends), England-average anchoring with provenance-correct labels, mobile-first measure-first layout — consuming the enriched `/api/compare` payload from PR #34, with e2e journeys updated in the same PR (they are the promotion gate).
|
||||
|
||||
**Architecture:** `ComparisonView` becomes an assembly of section components fed by one enriched fetch. All comprehension rules from the two expert reviews live in a pure, jest-tested module (`lib/compareLogic.ts`) — components stay presentational. The mockups are committed at `docs/superpowers/specs/mockups/compare-desktop.html` and `compare-mobile.html`: **all user-facing copy (labels, tooltips, chips, footnote wording) is taken verbatim from them** — they carry two rounds of education-expert review; do not paraphrase.
|
||||
|
||||
**Tech Stack:** Next.js (app router, SSR page + client view), CSS modules, Chart.js (existing `ComparisonChart`), Jest (`npm test` in `nextjs-app/`), Playwright e2e (`e2e/`).
|
||||
|
||||
## Global Constraints
|
||||
|
||||
- **Never push to `main`.** Branch: `feat/compare-frontend-rebuild`.
|
||||
- **Copy is expert-reviewed:** take it verbatim from the committed mockups. Binding rules (spec §8): Ofsted scale labels come from the API's `report_card[..].label` (never hardcode area labels beyond the mockups'); official DfE numbers say "England average", computed ones say "state-school average (computed from our dataset)"; the 2021/22 chart gap note says "DfE didn't publish school-level figures for 2021/22"; never derive an overall grade from report-card areas; safeguarding never counts as a graded area; "Latest Ofsted inspection", "EHC plans", "at or above capacity", "Over 1 in 4", "first choice (officially 'first preference')".
|
||||
- **Mobile-first:** the measure-first stacked layout (mobile mockup) is the base CSS; the desktop label-column grid is the `min-width` enhancement.
|
||||
- **URL contract unchanged:** `?urns=` (and `metric=` now scoped to Explore trends) keep working; share flow, `useComparison` basket, phase tabs, and `compare_viewed`/`compare_metric_changed` analytics events are preserved.
|
||||
- **Do not run a local server** (CLAUDE.md); verification = jest + `tsc` + the e2e suite against staging after merge. e2e must pass on **staging data** — remember staging has partial history: assert against the *latest* year, never oldest.
|
||||
- Existing `/api/compare` consumers elsewhere in the app (SchoolDetail links, toasts) must not break — the response is additive, and this PR only rewrites the compare page's own components.
|
||||
- **Post-v1 (do not build):** IDACI, attendance section, gender-split/absence tier-2 measures, finance (spec §4).
|
||||
|
||||
---
|
||||
|
||||
### Task 0: Branch + design sources
|
||||
|
||||
- [ ] `git checkout main && git pull && git checkout -b feat/compare-frontend-rebuild`
|
||||
- [ ] The mockups and this plan are already in the working tree (`docs/superpowers/specs/mockups/compare-{desktop,mobile}.html`) — commit them: `docs: compare mockups as frontend design source + rebuild plan`
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Types for the enriched payload
|
||||
|
||||
**Files:**
|
||||
- Modify: `nextjs-app/lib/types.ts` (extend `SchoolResult`, `ComparisonData`, `ComparisonResponse` — located around lines 293-314)
|
||||
|
||||
**Interfaces (produced for every later task):**
|
||||
|
||||
```ts
|
||||
export interface ReportCardEntry { code: number; label: string; }
|
||||
|
||||
export interface OfstedBlock {
|
||||
framework: string | null;
|
||||
inspection_date: string | null;
|
||||
inspection_type: string | null;
|
||||
overall_effectiveness: number | null;
|
||||
grade_source: 'graded' | 'ungraded_carried_forward' | null;
|
||||
quality_of_education: number | null;
|
||||
behaviour_attitudes: number | null;
|
||||
personal_development: number | null;
|
||||
leadership_management: number | null;
|
||||
early_years_provision: number | null;
|
||||
sixth_form_provision: number | null;
|
||||
rc_safeguarding_met: boolean | null;
|
||||
report_card: Record<string, ReportCardEntry>;
|
||||
ofsted_page_url: string;
|
||||
report_url: string | null;
|
||||
}
|
||||
|
||||
export interface CensusBlock {
|
||||
year: number | null; total_pupils: number | null;
|
||||
female_pupils: number | null; male_pupils: number | null;
|
||||
fsm_pct: number | null; eal_pct: number | null;
|
||||
}
|
||||
|
||||
export interface AdmissionsRow {
|
||||
year: number; school_phase: string | null;
|
||||
places_offered: number | null; total_applications: number | null;
|
||||
first_preference_applications: number | null; first_preference_offers: number | null;
|
||||
first_preference_offer_pct: number | null; oversubscription_ratio: number | null;
|
||||
oversubscribed: boolean | null;
|
||||
total_offers: number | null; second_preference_offers: number | null;
|
||||
third_preference_offers: number | null;
|
||||
cross_la_applications: number | null; cross_la_offers: number | null;
|
||||
}
|
||||
|
||||
export interface DeprivationBlock {
|
||||
lsoa_code: string | null; idaci_score: number | null; idaci_decile: number | null;
|
||||
}
|
||||
|
||||
export interface BenchmarkBlock {
|
||||
eal_pct: number | null; sen_support_pct: number | null;
|
||||
disadvantaged_pct: number | null; median_pupils: number | null;
|
||||
disadvantaged_rwm_expected_pct?: number | null;
|
||||
}
|
||||
|
||||
export interface Benchmarks {
|
||||
source: string; year: number;
|
||||
primary: BenchmarkBlock; secondary: BenchmarkBlock;
|
||||
}
|
||||
|
||||
export interface NationalAverages {
|
||||
year: number;
|
||||
primary: Record<string, number>;
|
||||
secondary: Record<string, number>;
|
||||
by_year: Array<{ year: number; primary: Record<string, number>; secondary: Record<string, number> }>;
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 1:** Add the interfaces above; extend `ComparisonData` with optional `ofsted?: OfstedBlock | null; census?: CensusBlock | null; admissions?: AdmissionsRow | null; admissions_history?: AdmissionsRow[]; deprivation?: DeprivationBlock | null;` and `ComparisonResponse` with `national_averages?: NationalAverages; benchmarks?: Benchmarks;` (optional so the UI degrades on an old backend). Extend `SchoolResult` with the ten new yearly columns (`reading_progress_lower_ci` … `maths_progress_upper_ci`, `writing_working_towards_pct`, `progress_8_banding: string | null`, `attainment_8_disadvantage_gap`, `progress_8_disadvantage_gap`).
|
||||
- [ ] **Step 2:** `cd nextjs-app && npx tsc --noEmit` → clean. Commit: `feat(compare): types for enriched comparison payload`
|
||||
|
||||
---
|
||||
|
||||
### Task 2: `lib/compareLogic.ts` — the comprehension rules, jest-tested
|
||||
|
||||
**Files:**
|
||||
- Create: `nextjs-app/lib/compareLogic.ts`
|
||||
- Test: `nextjs-app/__tests__/lib/compareLogic.test.ts`
|
||||
|
||||
**Interfaces (produced):**
|
||||
|
||||
```ts
|
||||
export type Verdict = 'above' | 'close' | 'below';
|
||||
export function verdict(value: number, anchor: number, tolerance?: number): Verdict; // default tolerance 2pp
|
||||
|
||||
// Report-card summary per spec §4.2: count graded areas per label (best
|
||||
// first), NAME any 'Needs attention'/'Urgent improvement' area, safeguarding
|
||||
// separate, "No areas need attention" reassurance when applicable.
|
||||
export interface ReportCardSummary {
|
||||
counts: Array<{ label: string; count: number }>; // best grade first
|
||||
problems: Array<{ areaLabel: string; label: string }>; // named, never counted-away
|
||||
safeguarding: 'met' | 'not_met' | null;
|
||||
allClear: boolean;
|
||||
}
|
||||
export function summariseReportCard(ofsted: OfstedBlock): ReportCardSummary;
|
||||
|
||||
// One display model for all three inspection regimes.
|
||||
export type OfstedDisplay =
|
||||
| { kind: 'none' }
|
||||
| { kind: 'graded'; grade: number; gradeLabel: string; carriedForward: false }
|
||||
| { kind: 'carried_forward'; grade: number; gradeLabel: string; carriedForward: true }
|
||||
| { kind: 'report_card'; summary: ReportCardSummary };
|
||||
export function ofstedDisplay(ofsted: OfstedBlock | null | undefined): OfstedDisplay;
|
||||
export const OFSTED_LEGACY_GRADES: Record<number, string>; // 1 Outstanding, 2 Good, 3 Requires improvement, 4 Inadequate
|
||||
|
||||
// Human-readable area label from an rc_ key: 'rc_attendance_behaviour' →
|
||||
// 'Attendance & behaviour' (mapping table copied from the mockups' area rows).
|
||||
export function rcAreaLabel(key: string): string;
|
||||
|
||||
// Admissions, one consistent chip metric (first-preference success).
|
||||
export interface AdmissionsSummary {
|
||||
firstPrefPct: number | null;
|
||||
chip: { tone: 'good' | 'warn' | 'neutral'; text: string } | null; // "97% of first choices offered" / "Over 1 in 4 first choices missed out" wording per mockups
|
||||
interest: string | null; // "Named on 457 forms · 180 places"
|
||||
}
|
||||
export function summariseAdmissions(a: AdmissionsRow | null | undefined): AdmissionsSummary;
|
||||
|
||||
// CI-based progress band for historical years (null when no CI published).
|
||||
export function progressBand(score: number | null, lower: number | null, upper: number | null):
|
||||
'above' | 'average' | 'below' | null; // CI entirely >0 → above; entirely <0 → below; straddles → average
|
||||
|
||||
// Dot-strip geometry (used by the DotStrip component; pure for testing).
|
||||
export interface StripPoint { pos: number; labelAbove: boolean; value: number; schoolIndex: number; }
|
||||
export function stripPositions(values: Array<number | null>, min: number, max: number): StripPoint[];
|
||||
// pos = (v-min)/(max-min)*100 clamped 0..100; labels within 4% of range of a
|
||||
// lower neighbour flip above (the mockups' collision nudge).
|
||||
```
|
||||
|
||||
- [ ] **Step 1: Failing tests** covering, at minimum:
|
||||
- `summariseReportCard`: 4 Strong + 2 Expected + 1 Needs-attention + safeguarding met → counts `[Strong standard×4, Expected standard×2]`, `problems=[{areaLabel:'Attendance & behaviour', label:'Needs attention'}]`, `allClear=false`; safeguarding NEVER in counts; all-Expected+met → `allClear=true`; labels come from the input's `.label` (assert the function never invents "Attention needed").
|
||||
- `ofstedDisplay`: report_card present → `kind:'report_card'` even if a legacy grade also exists; `grade_source:'ungraded_carried_forward'` → `carriedForward:true`; null → `'none'`.
|
||||
- `summariseAdmissions`: 73% → warn chip text `Over 1 in 4 first choices missed out`; 97% → good chip `97% of first choices offered`; 100% → `All first choices offered`; interest string `Named on 342 forms · 120 places`; nulls → null chip.
|
||||
- `progressBand`: (1.2, 0.4, 2.0)→above; (-1.2, -2.0, -0.4)→below; (0.3, -0.5, 1.1)→average; missing CI → null.
|
||||
- `stripPositions`: 100–120 domain maps 106→30; values 91 and 92 on 0–100 → second label flips above; nulls skipped.
|
||||
- `verdict`: 87 vs 62 → above; 61 vs 62 → close (within 2pp); 40 vs 62 → below.
|
||||
- [ ] **Step 2:** `cd nextjs-app && npm test -- compareLogic` → FAIL. **Step 3:** implement. **Step 4:** pass + `tsc` clean. **Step 5:** Commit: `feat(compare): comprehension logic (report cards, admissions, verdicts, strips)`
|
||||
|
||||
---
|
||||
|
||||
### Task 3: `DotStrip` component
|
||||
|
||||
**Files:**
|
||||
- Create: `nextjs-app/components/DotStrip.tsx`, `nextjs-app/components/DotStrip.module.css`
|
||||
|
||||
**Interfaces:**
|
||||
|
||||
```ts
|
||||
export interface DotStripProps {
|
||||
label: string;
|
||||
values: Array<number | null>; // one per school, school order = chart colour order
|
||||
anchor?: { value: number; label: string } | null; // e.g. {62, "England 62%"} — omit when benchmark absent
|
||||
min?: number; max?: number; // default 0..100
|
||||
unit?: string; // default '%'
|
||||
tip?: string; // title tooltip on the label
|
||||
note?: string; // e.g. "(teacher-assessed)" suffix handled by caller in label
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] Render per the mockups' `.strip-row` anatomy: label row, 4px track, England tick + tick label, 16px dots coloured by `CHART_COLORS[index]` with white ring, value labels below (flipped above on collision via `stripPositions`). `role="img"` + `aria-label` enumerating anchor and each school's value (copy the aria pattern from the mockups). CSS module mirrors the mockup styles using the app's CSS variables (`--border-light`, `--text-muted`, etc.).
|
||||
- [ ] Jest: render with `@testing-library/react` (already configured — see `__tests__/components/SecondarySchoolRow.test.tsx` for the harness pattern): asserts aria-label content, tick present when anchor given, absent otherwise.
|
||||
- [ ] Commit: `feat(compare): DotStrip with England-average anchor`
|
||||
|
||||
---
|
||||
|
||||
### Task 4: Section components — At a glance, Ofsted, Getting a place, Who goes there
|
||||
|
||||
**Files:**
|
||||
- Create: `nextjs-app/components/compare/CompareAtAGlance.tsx` (+ `.module.css`)
|
||||
- Create: `nextjs-app/components/compare/CompareOfsted.tsx`
|
||||
- Create: `nextjs-app/components/compare/CompareAdmissions.tsx`
|
||||
- Create: `nextjs-app/components/compare/CompareCommunity.tsx`
|
||||
- Create: `nextjs-app/components/compare/compareSections.module.css` (shared measure-first grid)
|
||||
- Test: `nextjs-app/__tests__/components/CompareOfsted.test.tsx`
|
||||
|
||||
**Shared layout contract (all four):** props `{ schools: School[]; data: Record<string, ComparisonData>; benchmarks?: Benchmarks; nationalAverages?: NationalAverages }`. Base CSS is the mobile mockup's measure-first stack (`.measure` card → `.srow` per school with colour dot + short name + value + chip + note); at `min-width: 761px` it becomes the desktop mockup's grid (200px row-label column + one column per school). Section headers use the existing `.section-title` idiom; every section carries its mockup "how" line verbatim.
|
||||
|
||||
**Content per section = the mockups, row for row.** Structure/tone rules already encoded in Task 2's helpers:
|
||||
- *At a glance*: Latest Ofsted inspection row (badge via `ofstedDisplay`; report-card case renders `ReportCardSummary` chips — counts best-first + named problem chips + safeguarding line); expected-standard row (big % + `verdict` chip vs `national_averages.primary.rwm_expected_pct`, small "England average N%"); Getting a place row (chip from `summariseAdmissions`, note = `interest`); Size row (pupils + "at or above capacity"/"N% full" from census/capacity, vs `benchmarks.*.median_pupils` for "larger/smaller than average" phrasing).
|
||||
- *Ofsted*: the section's `how` paragraph (regime explanation + non-comparability + "Expected standard" disambiguation) verbatim from the desktop mockup; Result row; Inspected row (date + "4+ years ago" chip when >4y, computed from `inspection_date`); Judgement detail row — **one chip-list grammar for both regimes** (legacy subgrades via `OFSTED_LEGACY_GRADES`; report card via `report_card` labels; "We don't hold area-by-area detail for this inspection" when neither); Ofsted page row linking `ofsted_page_url` ("<Name>'s Ofsted page →").
|
||||
- *Getting a place*: `how` paragraph (first preference/equal preference/offer-day caveats) verbatim; Interest row; first-choice success row with mini bar; "What this means" row (distance note: "check the school's admission criteria (for most non-faith primaries, distance decides)" only when oversubscribed).
|
||||
- *Who goes there*: pupils-on-roll (census + capacity), girls/boys, FSM (chip vs `benchmarks` with "state-school average" wording), EAL, SEN (tooltip incl. "EHC plans" + specialist-provision note), faith, ages · nursery, run by (trust name or "<LA> council").
|
||||
|
||||
- [ ] **Step 1:** Failing jest test for `CompareOfsted` (the riskiest): given one graded school, one carried-forward, one report-card school → asserts the three Result cells ("Outstanding" badge; badge + carried-forward marker; "Report card" + no invented overall grade), the chip-list judgement rows, and the comparability note appearing only for the mixed case.
|
||||
- [ ] **Step 2-4:** Implement all four sections; test passes; `tsc` clean; `npm test` full suite green.
|
||||
- [ ] **Step 5:** Commit: `feat(compare): at-a-glance, Ofsted, admissions and community sections`
|
||||
|
||||
---
|
||||
|
||||
### Task 5: `CompareAcademics` — strips + More measures
|
||||
|
||||
**Files:**
|
||||
- Create: `nextjs-app/components/compare/CompareAcademics.tsx`
|
||||
- Test: extend `nextjs-app/__tests__/lib/compareLogic.test.ts` with the metric-extraction helper below
|
||||
|
||||
**Interfaces:**
|
||||
- Add to `compareLogic.ts`: `latestValues(data, urns, metricKey) => Array<number|null>` (latest non-null yearly value per school) — tested.
|
||||
|
||||
- [ ] Tier 1 strips (always visible), each a `DotStrip` with the England anchor from `national_averages.primary`: RWM expected, Reading, Writing, Maths, "Working at a higher standard than expected" (tooltip: composition sentence from the mockups). Section `how` line: "tests and teacher assessments … writing is assessed by teachers, not tested" verbatim.
|
||||
- [ ] Tier 2 `<details>` "More measures — grammar, punctuation & spelling, science, average scaled scores": GPS + Science (teacher-assessed, tooltip verbatim) with anchors from `national_averages` **when present, no tick + honest note when null**; scaled scores (reading/maths/GPS) on `min=100 max=120` with the mockups' window caption.
|
||||
- [ ] Equity row: disadvantaged pupils' RWM per school + chip vs `benchmarks.primary.disadvantaged_rwm_expected_pct` with the "state-school average" wording and small-cohort tooltip verbatim.
|
||||
- [ ] Secondary phase variant (when active phase is secondary): tier-1 rows are Attainment 8 (anchor `national_averages.secondary.attainment_8_score`), Progress 8 banding (chip showing `progress_8_banding` verbatim — DfE's own label), grade 5+ English & maths %; tier-2: EBacc entry/APS. Measure-first rows (no strips needed for banding).
|
||||
- [ ] `npm test` + `tsc`; commit: `feat(compare): academics strips with England anchors and More measures`
|
||||
|
||||
---
|
||||
|
||||
### Task 6: Trends explorer — England line, gap-honest axis, series bug
|
||||
|
||||
**Files:**
|
||||
- Modify: `nextjs-app/components/ComparisonChart.tsx`
|
||||
- Create: `nextjs-app/components/compare/TrendsExplorer.tsx`
|
||||
- Test: `nextjs-app/__tests__/components/ComparisonChart.test.tsx`
|
||||
|
||||
- [ ] **Step 1 (bug first): root-cause the missing third series** seen on production (3 schools in table, 2 lines on chart). Write a failing jest test: 3 schools whose `yearly_data` year values are floats (`202425.0`) vs the labels array — the suspect is the year-matching in `ComparisonChart.tsx:69` (`years.map(...)` built from school 1 only + strict equality against other schools' years). Fix so every school's series renders and years are the union of all schools' years, sorted.
|
||||
- [ ] **Step 2:** Add optional `nationalByYear?: Record<number, number|null>` prop → dashed grey "England average" dataset (colour `--text-muted`, `borderDash:[5,4]`, no fill, `spanGaps:false`).
|
||||
- [ ] **Step 3:** Gap honesty: x-axis category labels include 2019/20 and 2020/21 as empty slots (band label "tests cancelled 2019/20–2020/21" via a Chart.js annotation-free approach: two category ticks with all-null data and a subtitle note under the chart, copy verbatim: the chart footnote "DfE didn't publish school-level figures for 2021/22" appears when the metric is a KS2 measure and 2021/22 school values are null while the England value exists). `spanGaps:false` on school datasets so dataset gaps break lines.
|
||||
- [ ] **Step 4:** `TrendsExplorer` wraps the grouped metric picker (existing optgroup structure and `metrics` from `/api/metrics`, existing analytics event) + the chart + the existing year-by-year table, inside a collapsed-by-default `<details>` ("Explore trends"). Progress metrics annotate cells with `progressBand` chips for years where CIs exist.
|
||||
- [ ] Tests pass; commit: `feat(compare): trends explorer with England line; fix missing series`
|
||||
|
||||
---
|
||||
|
||||
### Task 7: Assemble the new `ComparisonView`
|
||||
|
||||
**Files:**
|
||||
- Rewrite: `nextjs-app/components/ComparisonView.tsx` (+ its `.module.css`)
|
||||
- Modify: `nextjs-app/app/compare/page.tsx` metadata description (mention Ofsted/admissions, not just KS2)
|
||||
|
||||
- [ ] Preserve intact: `useComparison` basket seeding/URL sync (lines 76-122 of the current file), share handler, phase tabs + auto-detection, `compare_viewed` analytics, empty states, `SchoolSearchModal`, max-4-visible column scroll. Replace the metric-picker/chart/table body with the section stack: sticky school chip bar (mockup `.school-bar`) → `CompareAtAGlance` → `CompareOfsted` → `CompareAcademics` → `CompareAdmissions` → `CompareCommunity` → `TrendsExplorer`. The page-level `metric` URL param now initialises `TrendsExplorer`'s picker only.
|
||||
- [ ] Top-of-page subtitle + sources footnote verbatim from the mockups (minus the "Mockup" banner), including the suppression rule sentence and provenance sentence.
|
||||
- [ ] `npm test` full suite + `tsc` clean. Commit: `feat(compare): parent-first compare screen assembly`
|
||||
|
||||
---
|
||||
|
||||
### Task 8: e2e journeys (the promotion gate)
|
||||
|
||||
**Files:**
|
||||
- Modify: `e2e/tests/journeys.spec.ts` (the two compare tests, lines ~141-215; extend, don't delete coverage)
|
||||
|
||||
- [ ] Update 'comparing two schools shows both side by side': after loading `/compare?urns=…` assert the new section headings (`At a glance`, `Ofsted inspection`, `How children do academically`, `Getting a place`, `Who goes there`, `Explore trends`), both school names in the sticky bar, at least one England-average tick label (`text=/England \d+%/`), and one provenance string `state-school average` somewhere (benchmarks row). Data-invariant style — no exact numbers (staging data shifts; use latest-year values only).
|
||||
- [ ] Update the mobile test: 390px viewport, assert measure-first stacking (a `.measure`-card contains all selected school names within one card) and that the trends chart container scrolls (`overflow-x`).
|
||||
- [ ] Add a report-card presence-agnostic assertion: the Ofsted section renders either a grade badge or "Report card" without an overall grade — i.e. never both an overall-grade badge AND report-card chips for the same school.
|
||||
- [ ] Run against staging from the host if reachable (`cd e2e && BASE_URL=https://stx.schoolcompare.co.uk npx playwright test -g "compar"`) — staging still runs the OLD UI until this PR merges, so expect failures locally; the authoritative run is the Stage pipeline post-merge. Still commit only after jest+tsc are green.
|
||||
- [ ] Commit: `test(e2e): compare journeys for the parent-first redesign`
|
||||
|
||||
---
|
||||
|
||||
### Task 9: PR + post-merge verification
|
||||
|
||||
- [ ] Full gates: `cd nextjs-app && npm test && npx tsc --noEmit`.
|
||||
- [ ] Push; open PR via Gitea API (credential-helper basic auth). PR body: before/after summary, link to mockups + spec §4/§8, the copy-verbatim rule, the fixed third-series bug, deploy note (needs PR #34's API on the same environment — merge order: #34 first), and that the e2e suite is the staging gate.
|
||||
- [ ] Post-merge: watch the Stage pipeline — its e2e run against staging is the real verification. Then the human tests staging and promotes (two-stage model). Update memory: compare redesign shipped to staging.
|
||||
|
||||
---
|
||||
|
||||
## Out of scope
|
||||
|
||||
- IDACI / attendance / gender-absence / finance (post-v1, spec §4).
|
||||
- Backend changes of any kind (PR #34 must merge first).
|
||||
- Chart palette overhaul beyond the England-line addition (`CHART_COLORS` swap to the validated trio is a candidate follow-up, flagged not included — it affects every chart in the app).
|
||||
@@ -0,0 +1,642 @@
|
||||
<title>Compare screen — proposed redesign</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #faf7f2;
|
||||
--bg-2: #f3ede4;
|
||||
--card: #ffffff;
|
||||
--ink: #1a1612;
|
||||
--ink-2: #5c564d;
|
||||
--ink-3: #6d685f;
|
||||
--border: #e5dfd5;
|
||||
--accent: #b04a2e;
|
||||
--accent-bg: rgba(224, 114, 86, 0.12);
|
||||
/* Validated series palette (passes lightness / chroma / CVD / contrast) */
|
||||
--s1: #e07256; --s1-text: #b04a2e;
|
||||
--s2: #00949b; --s2-text: #006a70;
|
||||
--s3: #8664c9; --s3-text: #6a4bab;
|
||||
--eng: #6d685f;
|
||||
--good-bg: #e3efe6; --good-text: #1a6b34;
|
||||
--warn-bg: #f6ecd4; --warn-text: #7a5d00;
|
||||
--bad-bg: #f7e3de; --bad-text: #a03a20;
|
||||
--neutral-bg: #efeae1; --neutral-text: #5c564d;
|
||||
--shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
|
||||
--display: 'Playfair Display', Georgia, 'Times New Roman', serif;
|
||||
--body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #16130f; --bg-2: #201c16; --card: #241f19;
|
||||
--ink: #f2ede4; --ink-2: #bdb5a8; --ink-3: #9a927f;
|
||||
--border: #3a342b; --accent: #f08b6e; --accent-bg: rgba(224,114,86,0.16);
|
||||
--s1: #f08b6e; --s1-text: #f4a58e;
|
||||
--s2: #2fb8ae; --s2-text: #5fd0c8;
|
||||
--s3: #a98fe0; --s3-text: #c0abec;
|
||||
--eng: #9a927f;
|
||||
--good-bg: #1e3325; --good-text: #7fd39a;
|
||||
--warn-bg: #38301a; --warn-text: #e4c268;
|
||||
--bad-bg: #3d221b; --bad-text: #f0977f;
|
||||
--neutral-bg: #2b2620; --neutral-text: #bdb5a8;
|
||||
--shadow: 0 2px 8px rgba(0,0,0,0.35);
|
||||
}
|
||||
}
|
||||
:root[data-theme="dark"] {
|
||||
--bg: #16130f; --bg-2: #201c16; --card: #241f19;
|
||||
--ink: #f2ede4; --ink-2: #bdb5a8; --ink-3: #9a927f;
|
||||
--border: #3a342b; --accent: #f08b6e; --accent-bg: rgba(224,114,86,0.16);
|
||||
--s1: #f08b6e; --s1-text: #f4a58e;
|
||||
--s2: #2fb8ae; --s2-text: #5fd0c8;
|
||||
--s3: #a98fe0; --s3-text: #c0abec;
|
||||
--eng: #9a927f;
|
||||
--good-bg: #1e3325; --good-text: #7fd39a;
|
||||
--warn-bg: #38301a; --warn-text: #e4c268;
|
||||
--bad-bg: #3d221b; --bad-text: #f0977f;
|
||||
--neutral-bg: #2b2620; --neutral-text: #bdb5a8;
|
||||
--shadow: 0 2px 8px rgba(0,0,0,0.35);
|
||||
}
|
||||
:root[data-theme="light"] {
|
||||
--bg: #faf7f2; --bg-2: #f3ede4; --card: #ffffff;
|
||||
--ink: #1a1612; --ink-2: #5c564d; --ink-3: #6d685f;
|
||||
--border: #e5dfd5; --accent: #b04a2e; --accent-bg: rgba(224,114,86,0.12);
|
||||
--s1: #e07256; --s1-text: #b04a2e;
|
||||
--s2: #00949b; --s2-text: #006a70;
|
||||
--s3: #8664c9; --s3-text: #6a4bab;
|
||||
--eng: #6d685f;
|
||||
--good-bg: #e3efe6; --good-text: #1a6b34;
|
||||
--warn-bg: #f6ecd4; --warn-text: #7a5d00;
|
||||
--bad-bg: #f7e3de; --bad-text: #a03a20;
|
||||
--neutral-bg: #efeae1; --neutral-text: #5c564d;
|
||||
--shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
|
||||
}
|
||||
|
||||
body { background: var(--bg); color: var(--ink); font-family: var(--body); line-height: 1.5; }
|
||||
.wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 5rem; }
|
||||
|
||||
.mock-note {
|
||||
background: var(--accent-bg); border: 1px solid var(--border); border-radius: 8px;
|
||||
padding: 0.6rem 1rem; font-size: 0.85rem; color: var(--ink-2); margin-bottom: 2rem;
|
||||
}
|
||||
.mock-note strong { color: var(--accent); }
|
||||
|
||||
h1 { font-family: var(--display); font-size: 2.4rem; font-weight: 700; margin: 0 0 0.25rem; text-wrap: balance; }
|
||||
.sub { color: var(--ink-2); margin: 0 0 2rem; max-width: 60ch; }
|
||||
|
||||
h2.section-title {
|
||||
font-family: var(--display); font-size: 1.45rem; font-weight: 700;
|
||||
margin: 0; padding-left: 0.75rem; border-left: 3px solid var(--accent);
|
||||
}
|
||||
.how { font-size: 0.85rem; color: var(--ink-3); margin: 0.35rem 0 0 0.95rem; max-width: 70ch; }
|
||||
section.block { margin-top: 3rem; }
|
||||
|
||||
/* ---- Sticky school header ---- */
|
||||
.school-bar {
|
||||
position: sticky; top: 0; z-index: 10;
|
||||
background: var(--bg); padding: 0.75rem 0; border-bottom: 1px solid var(--border);
|
||||
display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 0.75rem; align-items: stretch;
|
||||
}
|
||||
.school-chip {
|
||||
background: var(--card); border: 1px solid var(--border); border-radius: 8px;
|
||||
box-shadow: var(--shadow); padding: 0.55rem 0.75rem; display: flex; gap: 0.55rem; align-items: center;
|
||||
border-top: 3px solid var(--chip);
|
||||
}
|
||||
.school-chip .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--chip); flex: none; }
|
||||
.school-chip .nm { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
|
||||
.school-chip .la { font-size: 0.78rem; color: var(--ink-3); }
|
||||
.school-chip .x {
|
||||
margin-left: auto; border: none; background: var(--bg-2); color: var(--ink-3);
|
||||
border-radius: 50%; width: 22px; height: 22px; cursor: pointer; flex: none; font-size: 0.9rem;
|
||||
}
|
||||
.add-school {
|
||||
border: 1.5px dashed var(--border); border-radius: 8px; background: none;
|
||||
color: var(--accent); font-weight: 600; padding: 0 1rem; cursor: pointer; font-family: inherit; font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* ---- Comparison grid rows ---- */
|
||||
.grid { display: grid; grid-template-columns: 200px repeat(3, 1fr); gap: 0 0.75rem; margin-top: 1.25rem; }
|
||||
.grid .rowlabel {
|
||||
font-size: 0.85rem; font-weight: 600; color: var(--ink-2); padding: 0.85rem 0.5rem 0.85rem 0;
|
||||
border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.35rem;
|
||||
}
|
||||
.grid .cell { padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
|
||||
.grid .cell .big { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
|
||||
.grid .cell .small { display: block; font-size: 0.8rem; color: var(--ink-3); margin-top: 0.1rem; }
|
||||
|
||||
.help {
|
||||
display: inline-flex; width: 15px; height: 15px; border-radius: 50%;
|
||||
border: 1px solid var(--ink-3); color: var(--ink-3); font-size: 0.65rem;
|
||||
align-items: center; justify-content: center; cursor: help; flex: none;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-block; font-size: 0.75rem; font-weight: 600; border-radius: 999px;
|
||||
padding: 0.15rem 0.6rem; white-space: nowrap;
|
||||
}
|
||||
.chip.good { background: var(--good-bg); color: var(--good-text); }
|
||||
.chip.warn { background: var(--warn-bg); color: var(--warn-text); }
|
||||
.chip.bad { background: var(--bad-bg); color: var(--bad-text); }
|
||||
.chip.neutral { background: var(--neutral-bg); color: var(--neutral-text); }
|
||||
|
||||
.ofsted-badge {
|
||||
display: inline-block; font-weight: 700; border-radius: 6px; padding: 0.25rem 0.7rem; font-size: 0.9rem;
|
||||
}
|
||||
/* New-framework report card */
|
||||
.rc-list { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.2rem; }
|
||||
.rc-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
|
||||
.rc-row .a { color: var(--ink-2); }
|
||||
.illus {
|
||||
display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
|
||||
color: var(--accent); border: 1px dashed var(--accent); border-radius: 4px; padding: 0.05rem 0.4rem;
|
||||
}
|
||||
.ofsted-1 { background: var(--good-bg); color: var(--good-text); }
|
||||
.ofsted-2 { background: #e7f0e3; color: #3c6b2f; }
|
||||
:root[data-theme="dark"] .ofsted-2 { background:#25321f; color:#a5cf94; }
|
||||
@media (prefers-color-scheme: dark) { .ofsted-2 { background:#25321f; color:#a5cf94; } }
|
||||
|
||||
/* ---- Dot strips (signature element) ---- */
|
||||
.strip-row { margin: 1.1rem 0 1.6rem; }
|
||||
.strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
|
||||
.strip-head .t { font-weight: 600; font-size: 0.95rem; }
|
||||
.strip-head .eng-note { font-size: 0.8rem; color: var(--ink-3); }
|
||||
.strip { position: relative; height: 34px; margin-top: 0.45rem; }
|
||||
.strip .track { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 2px; background: var(--bg-2); }
|
||||
.strip .eng-tick { position: absolute; top: 4px; width: 2px; height: 26px; background: var(--eng); }
|
||||
.strip .eng-lbl { position: absolute; top: -14px; transform: translateX(-50%); font-size: 0.7rem; color: var(--ink-3); white-space: nowrap; }
|
||||
.strip .pt {
|
||||
position: absolute; top: 9px; width: 16px; height: 16px; border-radius: 50%;
|
||||
transform: translateX(-50%); border: 2px solid var(--card); box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
|
||||
}
|
||||
.strip .pt-lbl { position: absolute; top: 27px; transform: translateX(-50%); font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
|
||||
|
||||
details.more-measures { margin-top: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
|
||||
details.more-measures summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; color: var(--accent); }
|
||||
.strip-note { font-size: 0.78rem; color: var(--ink-3); margin: 0.5rem 0 0; }
|
||||
.metric-picker { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
|
||||
.metric-picker label { font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
|
||||
.metric-picker select {
|
||||
font-family: inherit; font-size: 0.9rem; padding: 0.4rem 0.6rem; border-radius: 8px;
|
||||
border: 1px solid var(--border); background: var(--card); color: var(--ink); max-width: 100%;
|
||||
}
|
||||
.picker-note { font-size: 0.78rem; color: var(--ink-3); }
|
||||
.legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--ink-2); margin: 0.75rem 0 0; }
|
||||
.legend .li { display: inline-flex; align-items: center; gap: 0.4rem; }
|
||||
.legend .sw { width: 10px; height: 10px; border-radius: 50%; }
|
||||
.legend .engsw { width: 2px; height: 12px; background: var(--eng); }
|
||||
|
||||
.card {
|
||||
background: var(--card); border: 1px solid var(--border); border-radius: 16px;
|
||||
box-shadow: var(--shadow); padding: 1.25rem 1.5rem; margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* ---- Sparklines & chart ---- */
|
||||
.spark { display: block; }
|
||||
.chart-wrap { overflow-x: auto; }
|
||||
.covid { fill: var(--bg-2); }
|
||||
.covid-lbl { font-size: 0.7rem; fill: var(--ink-3); }
|
||||
|
||||
.barmini { height: 8px; border-radius: 4px; background: var(--bg-2); overflow: hidden; margin-top: 0.3rem; max-width: 140px; }
|
||||
.barmini > i { display: block; height: 100%; border-radius: 4px; }
|
||||
|
||||
details.explore { margin-top: 1rem; }
|
||||
details.explore summary {
|
||||
cursor: pointer; font-weight: 600; color: var(--accent);
|
||||
padding: 0.85rem 1.1rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px;
|
||||
}
|
||||
details.explore[open] summary { border-radius: 8px 8px 0 0; }
|
||||
details.explore .inner { border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; background: var(--card); padding: 1.25rem 1.5rem; }
|
||||
|
||||
.footnote { font-size: 0.78rem; color: var(--ink-3); margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1rem; max-width: 75ch; }
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.school-bar { grid-template-columns: 1fr; }
|
||||
.grid { grid-template-columns: 1fr; }
|
||||
.grid .rowlabel { border-bottom: none; padding-bottom: 0.15rem; background: var(--bg-2); border-radius: 6px; padding: 0.4rem 0.6rem; margin-top: 0.8rem; }
|
||||
.grid .cell { border-bottom: none; padding: 0.4rem 0.6rem; }
|
||||
.grid .cell::before { content: attr(data-school); display: block; font-size: 0.72rem; font-weight: 600; color: var(--sc, var(--ink-3)); }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="wrap">
|
||||
<p class="mock-note"><strong>Mockup — proposed redesign of /compare.</strong> All figures are live production data for three real schools (2024/25 results, 2026/27 admissions round). England averages for test results are official DfE figures; other benchmarks are state-school averages computed from our dataset.</p>
|
||||
|
||||
<h1>Compare schools</h1>
|
||||
<p class="sub">Three schools side by side — inspection results, academics, admissions and community, each anchored against the England average so you can tell at a glance what's typical and what stands out.</p>
|
||||
|
||||
<div class="school-bar" aria-label="Schools in this comparison">
|
||||
<div class="school-chip" style="--chip: var(--s1)">
|
||||
<span class="dot"></span>
|
||||
<span><span class="nm">Barclay Primary School</span><br><span class="la">Waltham Forest · Academy</span></span>
|
||||
<button class="x" aria-label="Remove Barclay Primary School">×</button>
|
||||
</div>
|
||||
<div class="school-chip" style="--chip: var(--s2)">
|
||||
<span class="dot"></span>
|
||||
<span><span class="nm">Elmhurst Primary School</span><br><span class="la">Newham · Academy</span></span>
|
||||
<button class="x" aria-label="Remove Elmhurst Primary School">×</button>
|
||||
</div>
|
||||
<div class="school-chip" style="--chip: var(--s3)">
|
||||
<span class="dot"></span>
|
||||
<span><span class="nm">Plumcroft Primary School</span><br><span class="la">Greenwich · Community school</span></span>
|
||||
<button class="x" aria-label="Remove Plumcroft Primary School">×</button>
|
||||
</div>
|
||||
<button class="add-school">+ Add school</button>
|
||||
</div>
|
||||
|
||||
<!-- ============ AT A GLANCE ============ -->
|
||||
<section class="block" style="margin-top:2rem">
|
||||
<h2 class="section-title">At a glance</h2>
|
||||
<p class="how">The short version — each row below is explained in its own section further down.</p>
|
||||
<div class="grid">
|
||||
<div class="rowlabel">Latest Ofsted inspection</div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="ofsted-badge ofsted-1">Outstanding</span><span class="small">Inspected Oct 2021</span></div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="ofsted-badge ofsted-1">Outstanding</span><span class="small">Inspected Oct 2021</span></div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">
|
||||
<strong style="font-size:0.9rem">Report card</strong> <span class="illus">illustrative</span>
|
||||
<div style="display:flex;gap:0.3rem;flex-wrap:wrap;margin-top:0.3rem">
|
||||
<span class="chip good">4 areas Strong standard</span>
|
||||
<span class="chip neutral">2 areas Expected standard</span>
|
||||
<span class="chip warn">Attendance & behaviour: Attention needed</span>
|
||||
</div>
|
||||
<span class="small">Safeguarding met · Nov 2025</span>
|
||||
</div>
|
||||
|
||||
<div class="rowlabel">Children reaching the expected standard <span class="help" title="% of Year 6 pupils reaching the expected standard in reading, writing and maths (2024/25). England average: 62%.">?</span></div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="big" style="color:var(--s1-text)">87%</span> <span class="chip good">Above England average</span><span class="small">England average 62%</span></div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="big" style="color:var(--s2-text)">92%</span> <span class="chip good">Above England average</span><span class="small">England average 62%</span></div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><span class="big" style="color:var(--s3-text)">79%</span> <span class="chip good">Above England average</span><span class="small">England average 62%</span></div>
|
||||
|
||||
<div class="rowlabel">Getting a place</div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="chip good">97% of first choices offered</span><span class="small">Named on 457 forms · 180 places</span></div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="chip warn">73% of first choices offered</span><span class="small">Named on 342 forms · 120 places</span></div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><span class="chip good">All first choices offered</span><span class="small">Named on 185 forms · 80 places</span></div>
|
||||
|
||||
<div class="rowlabel">Size</div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">1,273 pupils<span class="small">Much larger than average</span></div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">980 pupils<span class="small">Much larger than average</span></div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">1,056 pupils<span class="small">Much larger than average</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ OFSTED ============ -->
|
||||
<section class="block">
|
||||
<h2 class="section-title">Ofsted inspection</h2>
|
||||
<p class="how">Ofsted is the schools inspectorate. It stopped giving a single overall grade in <strong>September 2024</strong>; inspections between then and November 2025 kept the area-by-area judgements without an overall grade, and from <strong>November 2025</strong> new inspections produce a <strong>report card</strong> rating each area of school life on a five-point scale (Exceptional · Strong standard · Expected standard · Attention needed · Urgent improvement). A report card and an older overall grade aren't directly comparable — Plumcroft's report card below is an <em>illustrative example</em> of the new format, as no school in our dataset has one yet. (Ofsted's "Expected standard" rating is unrelated to the KS2 "expected standard" test measure further down this page.)</p>
|
||||
<div class="grid">
|
||||
<div class="rowlabel">Result</div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="ofsted-badge ofsted-1">Outstanding</span><span class="small">Overall grade (older-style inspection)</span></div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="ofsted-badge ofsted-1">Outstanding</span><span class="small">Overall grade (older-style inspection)</span></div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><strong>Report card</strong> <span class="illus">illustrative</span><span class="small">New-style inspection — no overall grade is given</span></div>
|
||||
|
||||
<div class="rowlabel">Inspected</div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">7 Oct 2021 <span class="chip neutral">4+ years ago</span></div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">6 Oct 2021 <span class="chip neutral">4+ years ago</span></div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">14 Nov 2025</div>
|
||||
|
||||
<div class="rowlabel">Judgement detail <span class="help" title="Older-style inspections: one rating per judgement area, where published. New-style inspections: the full report card, one rating per area of school life.">?</span></div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="small">We don't hold area-by-area detail for this inspection — see Barclay's Ofsted page for the full report.</span></div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">
|
||||
<div class="rc-list">
|
||||
<div class="rc-row"><span class="a">Quality of education</span><span class="chip good">Outstanding</span></div>
|
||||
<div class="rc-row"><span class="a">Behaviour & attitudes</span><span class="chip good">Outstanding</span></div>
|
||||
<div class="rc-row"><span class="a">Personal development</span><span class="chip good">Outstanding</span></div>
|
||||
<div class="rc-row"><span class="a">Leadership & management</span><span class="chip good">Outstanding</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">
|
||||
<div class="rc-list">
|
||||
<div class="rc-row"><span class="a">Achievement</span><span class="chip good">Strong standard</span></div>
|
||||
<div class="rc-row"><span class="a">Curriculum & teaching</span><span class="chip good">Strong standard</span></div>
|
||||
<div class="rc-row"><span class="a">Attendance & behaviour</span><span class="chip warn">Attention needed</span></div>
|
||||
<div class="rc-row"><span class="a">Personal development</span><span class="chip good">Strong standard</span></div>
|
||||
<div class="rc-row"><span class="a">Inclusion</span><span class="chip neutral">Expected standard</span></div>
|
||||
<div class="rc-row"><span class="a">Leadership & governance</span><span class="chip good">Strong standard</span></div>
|
||||
<div class="rc-row"><span class="a">Early years</span><span class="chip neutral">Expected standard</span></div>
|
||||
<div class="rc-row"><span class="a">Safeguarding</span><span class="chip good">Met</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rowlabel">Ofsted page <span class="help" title="Links to the school's page on ofsted.gov.uk, where all its inspection reports are listed.">?</span></div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><a href="https://reports.ofsted.gov.uk/provider/21/138690" style="color:var(--accent)">Barclay's Ofsted page →</a></div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><a href="https://reports.ofsted.gov.uk/provider/21/145362" style="color:var(--accent)">Elmhurst's Ofsted page →</a></div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><a href="https://reports.ofsted.gov.uk/provider/21/100140" style="color:var(--accent)">Plumcroft's Ofsted page →</a></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ ACADEMICS ============ -->
|
||||
<section class="block">
|
||||
<h2 class="section-title">How children do academically</h2>
|
||||
<p class="how">Results from national tests and teacher assessments at the end of Year 6 (2024/25) — writing is assessed by teachers, not tested. Each line runs from 0–100%; the grey tick marks the England average, so dots to its right are above average.</p>
|
||||
<div class="card">
|
||||
<div id="strips"></div>
|
||||
<details class="more-measures">
|
||||
<summary>More measures — grammar, punctuation & spelling, science, average scaled scores</summary>
|
||||
<div id="strips-more"></div>
|
||||
<p class="strip-note">The strips show the 100–120 window of the full 80–120 scaled-score range; 100 is the expected standard, and the strip widens if a school averages below it. England ticks for grammar, punctuation & spelling and science aren't in our dataset yet, and the scaled-score England ticks are indicative — official DfE figures for all of these will be loaded before launch.</p>
|
||||
</details>
|
||||
<div class="legend" id="strip-legend"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="rowlabel">Trend, 2015/16 to 2024/25 <span class="help" title="% reaching the expected standard in reading, writing and maths each year. Tests were cancelled in 2019/20 and 2020/21 (COVID); 2021/22 school figures aren't in our dataset yet — the line breaks over those years.">?</span></div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><svg class="spark" data-series="52,76,65,87,87,75,87" data-color="s1" width="150" height="40" role="img" aria-label="Barclay trend: variable, most recently 87%"></svg><span class="small">Variable, recently 87%</span></div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><svg class="spark" data-series="80,81,86,88,88,88,92" data-color="s2" width="150" height="40" role="img" aria-label="Elmhurst trend: 80% rising to 92%"></svg><span class="small">Consistently high</span></div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><svg class="spark" data-series="58,64,57,69,62,72,79" data-color="s3" width="150" height="40" role="img" aria-label="Plumcroft trend: 58% rising to 79%"></svg><span class="small">Improving since 2022/23</span></div>
|
||||
|
||||
<div class="rowlabel">Children from lower-income families <span class="help" title="% of disadvantaged pupils (eligible for free school meals in the last 6 years, or looked after by the local authority) reaching the expected standard. State-school average: 46% (computed from our dataset). Based on smaller pupil groups, so a single pupil can move a school's figure noticeably.">?</span></div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="big" style="font-size:1.1rem">86%</span> <span class="chip good">Well above the 46% state-school average</span></div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="big" style="font-size:1.1rem">93%</span> <span class="chip good">Well above the 46% state-school average</span></div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><span class="big" style="font-size:1.1rem">72%</span> <span class="chip good">Above the 46% state-school average</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ ADMISSIONS ============ -->
|
||||
<section class="block">
|
||||
<h2 class="section-title">Getting a place</h2>
|
||||
<p class="how">From the most recent admissions round (September 2026 entry). "First choice" means families who ranked the school top of their application form — officially a "first preference". Schools never see your ranking: places are decided only by the school's admission criteria, so listing a school lower down never hurts your chances. These are National Offer Day offers — waiting lists and appeals can change the final intake.</p>
|
||||
<div class="grid">
|
||||
<div class="rowlabel">Interest in the school <span class="help" title="How many application forms named the school at any preference rank — not the number of families competing head-to-head for a place.">?</span></div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">Named on <span class="big" style="font-size:1.1rem">457</span> forms · <strong>180</strong> places</div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">Named on <span class="big" style="font-size:1.1rem">342</span> forms · <strong>120</strong> places</div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">Named on <span class="big" style="font-size:1.1rem">185</span> forms · <strong>80</strong> places</div>
|
||||
|
||||
<div class="rowlabel">First-choice families offered a place</div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><strong>97%</strong><span class="barmini"><i style="width:97%;background:var(--s1)"></i></span></div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><strong>73%</strong> <span class="chip warn">Over 1 in 4 first choices missed out</span><span class="barmini"><i style="width:73%;background:var(--s2)"></i></span></div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><strong>100%</strong><span class="barmini"><i style="width:100%;background:var(--s3)"></i></span></div>
|
||||
|
||||
<div class="rowlabel">What this means</div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="small">Nearly every family who put Barclay first got a place.</span></div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="small">More first-choice applications than places — check the school's admission criteria (for most non-faith primaries, distance decides).</span></div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><span class="small">Every family who put Plumcroft first got a place.</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ COMMUNITY ============ -->
|
||||
<section class="block">
|
||||
<h2 class="section-title">Who goes there</h2>
|
||||
<p class="how">The school's community, from the latest school census (2025/26). England averages are shown for context — there's no "right" number here.</p>
|
||||
<div class="grid">
|
||||
<div class="rowlabel">Pupils on roll</div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">1,273 <span class="small">1,260 places — at or above capacity</span></div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">980 <span class="small">of 996 places (98% full)</span></div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">1,056 <span class="small">1,050 places — at or above capacity</span></div>
|
||||
|
||||
<div class="rowlabel">Girls / boys</div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">51% / 49%</div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">48% / 52%</div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">51% / 49%</div>
|
||||
|
||||
<div class="rowlabel">Free school meals <span class="help" title="% of pupils eligible for free school meals — a common measure of how many pupils come from lower-income families. State-school average: 25% (computed from our dataset).">?</span></div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">26% <span class="chip neutral">About the state-school average</span></div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">25% <span class="chip neutral">About the state-school average</span></div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">30% <span class="chip neutral">A little above average</span></div>
|
||||
|
||||
<div class="rowlabel">English as an additional language <span class="help" title="% of pupils whose first language is known or believed to be other than English. State-school average: 22% (computed from our dataset).">?</span></div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">62%</div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">84%</div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">20%</div>
|
||||
|
||||
<div class="rowlabel">Extra learning support (SEN) <span class="help" title="% of pupils receiving SEN support (not including EHC plans). State-school average: 14% (computed from our dataset). A high figure can mean the school hosts specialist provision — often a strength, not a warning sign.">?</span></div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">6%</div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">8%</div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">28% <span class="chip neutral">Well above average</span></div>
|
||||
|
||||
<div class="rowlabel">Faith character</div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">None</div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">None</div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">None</div>
|
||||
|
||||
<div class="rowlabel">Ages · nursery</div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">3–11 · has a nursery</div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">3–11 · has a nursery</div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">3–11 · has a nursery</div>
|
||||
|
||||
<div class="rowlabel">Run by</div>
|
||||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">Lion Academy Trust</div>
|
||||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">New Vision Trust</div>
|
||||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">Greenwich council</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ EXPLORE TRENDS ============ -->
|
||||
<section class="block">
|
||||
<h2 class="section-title">Explore trends</h2>
|
||||
<p class="how">The full year-by-year explorer — every measure from the current compare page lives on here, grouped, each with its England-average line. Three measures are wired up in this mockup; the rest are shown to convey the catalogue.</p>
|
||||
<details class="explore" open>
|
||||
<summary>Year-by-year trends, 2015/16 to 2024/25</summary>
|
||||
<div class="inner chart-wrap">
|
||||
<div class="metric-picker">
|
||||
<label for="metric-select">Measure:</label>
|
||||
<select id="metric-select">
|
||||
<optgroup label="Expected standard">
|
||||
<option value="rwm" selected>Reading, writing & maths (combined)</option>
|
||||
<option value="reading">Reading</option>
|
||||
<option value="maths">Maths</option>
|
||||
<option disabled>Writing (teacher assessment)</option>
|
||||
<option disabled>Grammar, punctuation & spelling</option>
|
||||
<option disabled>Science</option>
|
||||
</optgroup>
|
||||
<optgroup label="Higher standard">
|
||||
<option disabled>Reading, writing & maths (combined)</option>
|
||||
<option disabled>Reading · Maths · GPS</option>
|
||||
<option disabled>Writing — greater depth (teacher assessment)</option>
|
||||
</optgroup>
|
||||
<optgroup label="Average scaled scores">
|
||||
<option disabled>Reading · Maths · GPS</option>
|
||||
</optgroup>
|
||||
<optgroup label="Equity">
|
||||
<option disabled>Disadvantaged pupils — expected standard</option>
|
||||
</optgroup>
|
||||
<optgroup label="School context">
|
||||
<option disabled>Free school meals % · EAL % · SEN support %</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<span class="picker-note">School lines break where a year isn't in our dataset.</span>
|
||||
</div>
|
||||
<svg id="trendchart" width="880" height="300" role="img" aria-label="Line chart: selected measure by year for three schools and England average"></svg>
|
||||
<div class="legend" id="trend-legend"></div>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<p class="footnote">
|
||||
Sources: DfE Compare School Performance (KS2 results), Ofsted inspection outcomes, DfE school admissions data, school census — all from datasets SchoolCompare already collects. England averages for test results are the official DfE national figures; benchmarks for free school meals, language, SEN, school size and disadvantaged pupils' results are computed across all state schools in our dataset. Following DfE practice, figures based on 5 or fewer pupils are suppressed and shown as "no data". This is a static mockup: tooltips and "Add school" are illustrative, and Plumcroft's Ofsted report card is a made-up example of the November 2025 format (its real latest inspection is Good, June 2023) — no school in our dataset has a report card yet.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const css = (v) => getComputedStyle(document.documentElement).getPropertyValue(v).trim();
|
||||
|
||||
const schools = [
|
||||
{ name: 'Barclay', color: () => css('--s1'), text: () => css('--s1-text') },
|
||||
{ name: 'Elmhurst', color: () => css('--s2'), text: () => css('--s2-text') },
|
||||
{ name: 'Plumcroft', color: () => css('--s3'), text: () => css('--s3-text') },
|
||||
];
|
||||
|
||||
/* ---- Dot strips ---- */
|
||||
const strips = [
|
||||
{ label: 'Reading, writing & maths — expected standard', eng: 62, vals: [87, 92, 79] },
|
||||
{ label: 'Reading', eng: 75, vals: [91, 92, 87] },
|
||||
{ label: 'Writing', eng: 72, vals: [94, 92, 83] },
|
||||
{ label: 'Maths', eng: 74, vals: [91, 95, 84] },
|
||||
{ label: 'Working at a higher standard than expected', eng: 8, vals: [22, 27, 12], tip: 'A high score in the reading and maths tests plus \u201cgreater depth\u201d in teacher-assessed writing.' },
|
||||
];
|
||||
|
||||
// Generalised strip renderer: any domain (percentages or scaled scores),
|
||||
// England tick optional (omitted when the benchmark isn't in our dataset).
|
||||
function renderStrips(list, el, firstNote) {
|
||||
list.forEach((s, si) => {
|
||||
const min = s.min ?? 0, max = s.max ?? 100, unit = s.unit ?? '%';
|
||||
const pos = v => (v - min) / (max - min) * 100;
|
||||
const row = document.createElement('div');
|
||||
row.className = 'strip-row';
|
||||
let pts = '';
|
||||
const sorted = s.vals.map((v, i) => ({ v, i })).sort((a, b) => a.v - b.v);
|
||||
let lastBelow = -Infinity;
|
||||
const nudge = (max - min) * 0.04;
|
||||
sorted.forEach(({ v, i }) => {
|
||||
const above = (v - lastBelow) < nudge;
|
||||
if (!above) lastBelow = v;
|
||||
pts += `<span class="pt" style="left:${pos(v)}%;background:${schools[i].color()}" title="${schools[i].name}: ${v}${unit}"></span>`
|
||||
+ `<span class="pt-lbl" style="left:${pos(v)}%;color:${schools[i].text()};${above ? 'top:-6px' : ''}">${v}</span>`;
|
||||
});
|
||||
const eng = s.eng != null
|
||||
? `<span class="eng-tick" style="left:${pos(s.eng)}%"></span><span class="eng-lbl" style="left:${pos(s.eng)}%">England ${s.eng}${unit}</span>`
|
||||
: '';
|
||||
row.innerHTML = `
|
||||
<div class="strip-head"><span class="t"${s.tip ? ` title="${s.tip}"` : ''}>${s.label}</span>
|
||||
${si === 0 && firstNote ? `<span class="eng-note">${firstNote}</span>` : ''}</div>
|
||||
<div class="strip" role="img" aria-label="${s.label}: ${s.eng != null ? 'England average ' + s.eng + unit + ', ' : ''}${s.vals.map((v, i) => schools[i].name + ' ' + v + unit).join(', ')}">
|
||||
<div class="track"></div>
|
||||
${eng}
|
||||
${pts}
|
||||
</div>`;
|
||||
el.appendChild(row);
|
||||
});
|
||||
}
|
||||
renderStrips(strips, document.getElementById('strips'), '│ grey tick = England average');
|
||||
renderStrips([
|
||||
{ label: 'Grammar, punctuation & spelling — expected standard', eng: null, vals: [86, 94, 82] },
|
||||
{ label: 'Science — expected standard (teacher-assessed)', eng: null, vals: [95, 91, 83], tip: 'Teacher-assessed, like writing — there has been no KS2 science test since 2009, so comparisons are indicative.' },
|
||||
{ label: 'Average scaled score — reading', eng: 106, vals: [107, 110, 109], min: 100, max: 120, unit: '' },
|
||||
{ label: 'Average scaled score — maths', eng: 105, vals: [108, 113, 108], min: 100, max: 120, unit: '' },
|
||||
{ label: 'Average scaled score — grammar, punctuation & spelling', eng: 105, vals: [107, 114, 109], min: 100, max: 120, unit: '' },
|
||||
], document.getElementById('strips-more'), null);
|
||||
document.getElementById('strip-legend').innerHTML =
|
||||
schools.map(s => `<span class="li"><span class="sw" style="background:${s.color()}"></span>${s.name}</span>`).join('')
|
||||
+ '<span class="li"><span class="engsw"></span>England average</span>';
|
||||
|
||||
/* ---- Sparklines (x honours real time: values are 15/16–18/19 then 22/23–24/25) ---- */
|
||||
document.querySelectorAll('svg.spark').forEach(svg => {
|
||||
const vals = svg.dataset.series.split(',').map(Number);
|
||||
const color = css('--' + svg.dataset.color);
|
||||
const w = +svg.getAttribute('width'), h = +svg.getAttribute('height');
|
||||
const min = 40, max = 100;
|
||||
const sslots = [0,1,2,3,7,8,9];
|
||||
const x = i => 4 + sslots[i] * (w - 8) / 9;
|
||||
const y = v => h - 6 - (v - min) * (h - 12) / (max - min);
|
||||
const seg = idx => idx.map((i, k) => (k ? 'L' : 'M') + x(i).toFixed(1) + ' ' + y(vals[i]).toFixed(1)).join(' ');
|
||||
svg.innerHTML = `<path d="${seg([0,1,2,3])}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round"/>`
|
||||
+ `<path d="${seg([4,5,6])}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round"/>`
|
||||
+ `<circle cx="${x(6)}" cy="${y(vals[6])}" r="3.5" fill="${color}"/>`;
|
||||
});
|
||||
|
||||
/* ---- Trend chart (metric-driven) ----
|
||||
Tests were cancelled 2019/20-2020/21; lines always break across that band.
|
||||
Nulls elsewhere are dataset gaps (no school-level 2021/22 rows; no
|
||||
subject-level 2022/23 rows) and break the lines honestly. England figures
|
||||
are official DfE (fact_ks2_national_averages); 2015/16 not loaded yet. */
|
||||
const years = ['2015/16','2016/17','2017/18','2018/19','2021/22','2022/23','2023/24','2024/25'];
|
||||
const METRICS = {
|
||||
rwm: {
|
||||
label: 'Reading, writing & maths - expected standard',
|
||||
school: { Barclay: [52,76,65,87,null,87,75,87], Elmhurst: [80,81,86,88,null,88,88,92], Plumcroft: [58,64,57,69,null,62,72,79] },
|
||||
england: [null,61.1,64.3,64.9,58.7,59.5,60.6,62.1],
|
||||
},
|
||||
reading: {
|
||||
label: 'Reading - expected standard',
|
||||
school: { Barclay: [57,84,76,87,null,null,79,91], Elmhurst: [88,91,92,91,null,null,92,92], Plumcroft: [59,68,72,79,null,null,82,87] },
|
||||
england: [null,71.6,75.3,73.2,74.6,72.8,74.4,75.0],
|
||||
},
|
||||
maths: {
|
||||
label: 'Maths - expected standard',
|
||||
school: { Barclay: [81,82,74,90,null,null,88,91], Elmhurst: [96,89,97,97,null,null,96,95], Plumcroft: [80,80,69,90,null,null,84,84] },
|
||||
england: [null,74.8,75.5,78.7,71.5,73.0,73.2,74.0],
|
||||
},
|
||||
};
|
||||
const schoolColor = { Barclay: () => css('--s1'), Elmhurst: () => css('--s2'), Plumcroft: () => css('--s3') };
|
||||
|
||||
const svg = document.getElementById('trendchart');
|
||||
const W = 880, H = 300, L = 44, R = 48, T = 18, B = 40;
|
||||
// x positions honour real time: 2019/20 and 2020/21 (cancelled tests) sit between slots 3 and 6
|
||||
const slots = [0,1,2,3,6,7,8,9]; const maxSlot = 9;
|
||||
const X = i => L + slots[i] * (W - L - R) / maxSlot;
|
||||
const Y = v => T + (100 - v) * (H - T - B) / 60; // domain 40..100
|
||||
|
||||
// Contiguous non-null runs, additionally split across the covid band (between indices 3 and 4)
|
||||
function runs(vals) {
|
||||
const out = []; let cur = [];
|
||||
vals.forEach((v, i) => {
|
||||
if (v == null) { if (cur.length) out.push(cur); cur = []; return; }
|
||||
if (i === 4 && cur.length && cur[cur.length - 1] === 3) { out.push(cur); cur = []; }
|
||||
cur.push(i);
|
||||
});
|
||||
if (cur.length) out.push(cur);
|
||||
return out;
|
||||
}
|
||||
|
||||
function renderChart(key) {
|
||||
const m = METRICS[key];
|
||||
const ink3 = css('--ink-3'), border = css('--border');
|
||||
let g = '';
|
||||
const bx1 = X(3) + 14, bx2 = X(4) - 14;
|
||||
g += `<rect class="covid" x="${bx1}" y="${T}" width="${bx2 - bx1}" height="${H - T - B}" rx="4"/>`;
|
||||
g += `<text class="covid-lbl" x="${(bx1 + bx2) / 2}" y="${T + 16}" text-anchor="middle">tests cancelled</text>`;
|
||||
g += `<text class="covid-lbl" x="${(bx1 + bx2) / 2}" y="${T + 30}" text-anchor="middle">2019/20-2020/21</text>`;
|
||||
for (let v = 40; v <= 100; v += 20) {
|
||||
g += `<line x1="${L}" y1="${Y(v)}" x2="${W - R}" y2="${Y(v)}" stroke="${border}" stroke-width="1"/>`;
|
||||
g += `<text x="${L - 8}" y="${Y(v) + 4}" text-anchor="end" font-size="11" fill="${ink3}">${v}%</text>`;
|
||||
}
|
||||
years.forEach((yr, i) => {
|
||||
g += `<text x="${X(i)}" y="${H - B + 20}" text-anchor="middle" font-size="11" fill="${ink3}">${yr}</text>`;
|
||||
});
|
||||
const path = (vals, idx) => idx.map((i, k) => (k ? 'L' : 'M') + X(i) + ' ' + Y(vals[i])).join(' ');
|
||||
runs(m.england).forEach(idx => {
|
||||
if (idx.length > 1) g += `<path d="${path(m.england, idx)}" fill="none" stroke="${ink3}" stroke-width="1.5" stroke-dasharray="5 4"/>`;
|
||||
else g += `<circle cx="${X(idx[0])}" cy="${Y(m.england[idx[0]])}" r="2.5" fill="${ink3}"><title>England ${years[idx[0]]}: ${Math.round(m.england[idx[0]])}%</title></circle>`;
|
||||
});
|
||||
Object.entries(m.school).forEach(([name, vals]) => {
|
||||
const color = schoolColor[name]();
|
||||
runs(vals).forEach(idx => {
|
||||
if (idx.length > 1) g += `<path d="${path(vals, idx)}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round"/>`;
|
||||
});
|
||||
vals.forEach((v, i) => {
|
||||
if (v == null) return;
|
||||
g += `<circle cx="${X(i)}" cy="${Y(v)}" r="3.5" fill="${color}" stroke="${css('--card')}" stroke-width="1.5"><title>${name} ${years[i]}: ${v}%</title></circle>`;
|
||||
});
|
||||
});
|
||||
// End labels, pushed apart when schools finish close together
|
||||
const ends = Object.entries(m.school)
|
||||
.map(([name, vals]) => ({ v: vals[vals.length - 1], i: vals.length - 1 }))
|
||||
.filter(e => e.v != null)
|
||||
.sort((a, b) => a.v - b.v);
|
||||
let prevY = Infinity;
|
||||
ends.forEach(e => {
|
||||
let y = Y(e.v) + 4;
|
||||
if (prevY - y < 13) y = prevY - 13;
|
||||
prevY = y;
|
||||
g += `<text x="${X(e.i) + 8}" y="${y}" font-size="11" font-weight="600" fill="${ink3}">${e.v}%</text>`;
|
||||
});
|
||||
svg.innerHTML = g;
|
||||
svg.setAttribute('aria-label', `Line chart: ${m.label} by year for three schools and England average`);
|
||||
document.getElementById('trend-legend').innerHTML =
|
||||
Object.keys(m.school).map(name => `<span class="li"><span class="sw" style="background:${schoolColor[name]()}"></span>${name}</span>`).join('')
|
||||
+ `<span class="li"><span class="sw" style="background:none;border-top:2px dashed ${ink3};border-radius:0;height:0"></span>England average</span>`;
|
||||
}
|
||||
renderChart('rwm');
|
||||
document.getElementById('metric-select').addEventListener('change', e => renderChart(e.target.value));
|
||||
|
||||
// Re-render on theme change so series colors pick up dark-mode tokens
|
||||
const rerender = () => location.reload();
|
||||
new MutationObserver(muts => { if (muts.some(m => m.attributeName === 'data-theme')) rerender(); })
|
||||
.observe(document.documentElement, { attributes: true });
|
||||
})();
|
||||
</script>
|
||||
@@ -0,0 +1,437 @@
|
||||
<title>Compare screen — mobile mockup</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #faf7f2; --bg-2: #f3ede4; --card: #ffffff;
|
||||
--ink: #1a1612; --ink-2: #5c564d; --ink-3: #6d685f;
|
||||
--border: #e5dfd5; --accent: #b04a2e; --accent-bg: rgba(224,114,86,0.12);
|
||||
--s1: #e07256; --s1-text: #b04a2e;
|
||||
--s2: #00949b; --s2-text: #006a70;
|
||||
--s3: #8664c9; --s3-text: #6a4bab;
|
||||
--eng: #6d685f;
|
||||
--good-bg: #e3efe6; --good-text: #1a6b34;
|
||||
--warn-bg: #f6ecd4; --warn-text: #7a5d00;
|
||||
--neutral-bg: #efeae1; --neutral-text: #5c564d;
|
||||
--shadow: 0 2px 8px rgba(26,22,18,0.06);
|
||||
--display: 'Playfair Display', Georgia, 'Times New Roman', serif;
|
||||
--body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #16130f; --bg-2: #201c16; --card: #241f19;
|
||||
--ink: #f2ede4; --ink-2: #bdb5a8; --ink-3: #9a927f;
|
||||
--border: #3a342b; --accent: #f08b6e; --accent-bg: rgba(224,114,86,0.16);
|
||||
--s1: #f08b6e; --s1-text: #f4a58e;
|
||||
--s2: #2fb8ae; --s2-text: #5fd0c8;
|
||||
--s3: #a98fe0; --s3-text: #c0abec;
|
||||
--eng: #9a927f;
|
||||
--good-bg: #1e3325; --good-text: #7fd39a;
|
||||
--warn-bg: #38301a; --warn-text: #e4c268;
|
||||
--neutral-bg: #2b2620; --neutral-text: #bdb5a8;
|
||||
--shadow: 0 2px 8px rgba(0,0,0,0.35);
|
||||
}
|
||||
}
|
||||
:root[data-theme="dark"] {
|
||||
--bg: #16130f; --bg-2: #201c16; --card: #241f19;
|
||||
--ink: #f2ede4; --ink-2: #bdb5a8; --ink-3: #9a927f;
|
||||
--border: #3a342b; --accent: #f08b6e; --accent-bg: rgba(224,114,86,0.16);
|
||||
--s1: #f08b6e; --s1-text: #f4a58e;
|
||||
--s2: #2fb8ae; --s2-text: #5fd0c8;
|
||||
--s3: #a98fe0; --s3-text: #c0abec;
|
||||
--eng: #9a927f;
|
||||
--good-bg: #1e3325; --good-text: #7fd39a;
|
||||
--warn-bg: #38301a; --warn-text: #e4c268;
|
||||
--neutral-bg: #2b2620; --neutral-text: #bdb5a8;
|
||||
--shadow: 0 2px 8px rgba(0,0,0,0.35);
|
||||
}
|
||||
:root[data-theme="light"] {
|
||||
--bg: #faf7f2; --bg-2: #f3ede4; --card: #ffffff;
|
||||
--ink: #1a1612; --ink-2: #5c564d; --ink-3: #6d685f;
|
||||
--border: #e5dfd5; --accent: #b04a2e; --accent-bg: rgba(224,114,86,0.12);
|
||||
--s1: #e07256; --s1-text: #b04a2e;
|
||||
--s2: #00949b; --s2-text: #006a70;
|
||||
--s3: #8664c9; --s3-text: #6a4bab;
|
||||
--eng: #6d685f;
|
||||
--good-bg: #e3efe6; --good-text: #1a6b34;
|
||||
--warn-bg: #f6ecd4; --warn-text: #7a5d00;
|
||||
--neutral-bg: #efeae1; --neutral-text: #5c564d;
|
||||
--shadow: 0 2px 8px rgba(26,22,18,0.06);
|
||||
}
|
||||
|
||||
body { background: var(--bg-2); color: var(--ink); font-family: var(--body); line-height: 1.45; }
|
||||
|
||||
/* Phone canvas: true mobile width, framed on larger screens */
|
||||
.phone { max-width: 400px; margin: 0 auto; background: var(--bg); min-height: 100vh; }
|
||||
@media (min-width: 480px) {
|
||||
.phone { margin: 1.5rem auto; border: 1px solid var(--border); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
|
||||
}
|
||||
.inner { padding: 1rem 0.9rem 3rem; }
|
||||
|
||||
.mock-note {
|
||||
background: var(--accent-bg); border: 1px solid var(--border); border-radius: 8px;
|
||||
padding: 0.5rem 0.75rem; font-size: 0.78rem; color: var(--ink-2); margin-bottom: 1rem;
|
||||
}
|
||||
.mock-note strong { color: var(--accent); }
|
||||
|
||||
h1 { font-family: var(--display); font-size: 1.7rem; font-weight: 700; margin: 0 0 0.2rem; }
|
||||
.sub { color: var(--ink-2); margin: 0 0 1rem; font-size: 0.88rem; }
|
||||
|
||||
/* Sticky school chip bar — horizontal scroll */
|
||||
.chipbar {
|
||||
position: sticky; top: 0; z-index: 10; background: var(--bg);
|
||||
display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.6rem 0.9rem;
|
||||
border-bottom: 1px solid var(--border); margin: 0 -0.9rem 1rem; -webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.chipbar::-webkit-scrollbar { display: none; }
|
||||
.schip {
|
||||
flex: none; display: inline-flex; align-items: center; gap: 0.4rem;
|
||||
background: var(--card); border: 1px solid var(--border); border-radius: 999px;
|
||||
padding: 0.35rem 0.7rem; font-size: 0.8rem; font-weight: 600; white-space: nowrap;
|
||||
}
|
||||
.schip .dot { width: 9px; height: 9px; border-radius: 50%; }
|
||||
.schip .x { border: none; background: var(--bg-2); color: var(--ink-3); border-radius: 50%; width: 17px; height: 17px; font-size: 0.7rem; line-height: 1; }
|
||||
.schip.add { color: var(--accent); border-style: dashed; }
|
||||
|
||||
h2.section-title {
|
||||
font-family: var(--display); font-size: 1.2rem; font-weight: 700;
|
||||
margin: 1.6rem 0 0; padding-left: 0.6rem; border-left: 3px solid var(--accent);
|
||||
}
|
||||
.how { font-size: 0.78rem; color: var(--ink-3); margin: 0.3rem 0 0.75rem 0.8rem; }
|
||||
|
||||
/* Measure-first block: one measure, all schools under it */
|
||||
.measure { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem 0.85rem; margin-bottom: 0.6rem; box-shadow: var(--shadow); }
|
||||
.measure .mt { font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 0.35rem; }
|
||||
.measure .mh { font-size: 0.75rem; color: var(--ink-3); margin-top: 0.05rem; }
|
||||
.srow { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0; border-top: 1px solid var(--border); margin-top: 0.45rem; flex-wrap: wrap; }
|
||||
.srow:first-of-type { border-top: none; }
|
||||
.srow .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
|
||||
.srow .sn { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); width: 4.6rem; flex: none; }
|
||||
.srow .val { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
|
||||
.srow .note { font-size: 0.74rem; color: var(--ink-3); flex-basis: 100%; padding-left: 1.1rem; margin-top: -0.15rem; }
|
||||
|
||||
.chip { display: inline-block; font-size: 0.68rem; font-weight: 600; border-radius: 999px; padding: 0.12rem 0.5rem; white-space: nowrap; }
|
||||
.chip.good { background: var(--good-bg); color: var(--good-text); }
|
||||
.chip.warn { background: var(--warn-bg); color: var(--warn-text); }
|
||||
.chip.neutral { background: var(--neutral-bg); color: var(--neutral-text); }
|
||||
.ofsted-badge { display: inline-block; font-weight: 700; border-radius: 6px; padding: 0.14rem 0.5rem; font-size: 0.78rem; }
|
||||
.ofsted-1 { background: var(--good-bg); color: var(--good-text); }
|
||||
.illus { display: inline-block; font-size: 0.62rem; font-weight: 600; color: var(--accent); border: 1px dashed var(--accent); border-radius: 4px; padding: 0 0.3rem; }
|
||||
.help { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--ink-3); color: var(--ink-3); font-size: 0.6rem; align-items: center; justify-content: center; flex: none; }
|
||||
|
||||
/* Dot strips */
|
||||
.strip-row { margin: 0.9rem 0 1.3rem; }
|
||||
.strip-row .t { font-weight: 600; font-size: 0.82rem; }
|
||||
.strip { position: relative; height: 32px; margin-top: 0.4rem; }
|
||||
.strip .track { position: absolute; left: 0; right: 0; top: 14px; height: 4px; border-radius: 2px; background: var(--bg-2); }
|
||||
.strip .eng-tick { position: absolute; top: 4px; width: 2px; height: 24px; background: var(--eng); }
|
||||
.strip .eng-lbl { position: absolute; top: -12px; transform: translateX(-50%); font-size: 0.62rem; color: var(--ink-3); white-space: nowrap; }
|
||||
.strip .pt { position: absolute; top: 9px; width: 14px; height: 14px; border-radius: 50%; transform: translateX(-50%); border: 2px solid var(--card); box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
|
||||
.strip .pt-lbl { position: absolute; top: 25px; transform: translateX(-50%); font-size: 0.64rem; font-weight: 600; }
|
||||
.legend { display: flex; gap: 0.8rem; flex-wrap: wrap; font-size: 0.72rem; color: var(--ink-2); margin-top: 0.4rem; }
|
||||
.legend .li { display: inline-flex; align-items: center; gap: 0.3rem; }
|
||||
.legend .sw { width: 9px; height: 9px; border-radius: 50%; }
|
||||
.legend .engsw { width: 2px; height: 11px; background: var(--eng); }
|
||||
|
||||
.rc-list { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; padding-left: 1.1rem; }
|
||||
.rc-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.74rem; }
|
||||
.rc-row .a { color: var(--ink-2); }
|
||||
|
||||
details.more-measures { margin-bottom: 0.6rem; }
|
||||
details.more-measures summary { cursor: pointer; font-weight: 600; font-size: 0.82rem; color: var(--accent); padding: 0.2rem 0.2rem 0.5rem; }
|
||||
.strip-note { font-size: 0.72rem; color: var(--ink-3); margin: 0.4rem 0.2rem 0; }
|
||||
.metric-picker { margin-bottom: 0.6rem; }
|
||||
.metric-picker select { width: 100%; font-family: inherit; font-size: 0.85rem; padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--ink); }
|
||||
.chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem; }
|
||||
.swipe-hint { font-size: 0.7rem; color: var(--ink-3); text-align: center; margin-top: 0.3rem; }
|
||||
.covid { fill: var(--bg-2); }
|
||||
.covid-lbl { font-size: 0.6rem; fill: var(--ink-3); }
|
||||
|
||||
.footnote { font-size: 0.7rem; color: var(--ink-3); margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
|
||||
</style>
|
||||
|
||||
<div class="phone"><div class="inner">
|
||||
<p class="mock-note"><strong>Mobile mockup — proposed /compare.</strong> Mobile-first layout: measures stack vertically with all schools under each, so nothing needs horizontal swiping. Same live data as the desktop mockup.</p>
|
||||
|
||||
<h1>Compare schools</h1>
|
||||
<p class="sub">Anchored against the England average — the grey tick — so you can tell what's typical at a glance.</p>
|
||||
|
||||
<div class="chipbar" aria-label="Schools in this comparison">
|
||||
<span class="schip"><span class="dot" style="background:var(--s1)"></span>Barclay <button class="x" aria-label="Remove Barclay">×</button></span>
|
||||
<span class="schip"><span class="dot" style="background:var(--s2)"></span>Elmhurst <button class="x" aria-label="Remove Elmhurst">×</button></span>
|
||||
<span class="schip"><span class="dot" style="background:var(--s3)"></span>Plumcroft <button class="x" aria-label="Remove Plumcroft">×</button></span>
|
||||
<span class="schip add">+ Add</span>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">At a glance</h2>
|
||||
<p class="how">The short version — each measure is explained in its own section below.</p>
|
||||
|
||||
<div class="measure">
|
||||
<div class="mt">Latest Ofsted inspection</div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="ofsted-badge ofsted-1">Outstanding</span><span class="note">Older-style inspection, Oct 2021</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span class="ofsted-badge ofsted-1">Outstanding</span><span class="note">Older-style inspection, Oct 2021</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span><span class="chip good">4 areas Strong standard</span> <span class="chip neutral">2 areas Expected</span> <span class="chip warn">Attendance & behaviour: Attention needed</span> <span class="illus">illustrative</span></span><span class="note">New-style report card, Nov 2025 · safeguarding met · full detail in the Ofsted section below</span></div>
|
||||
</div>
|
||||
|
||||
<div class="measure">
|
||||
<div class="mt">Children reaching the expected standard <span class="help" title="% of Year 6 pupils reaching the expected standard in reading, writing and maths (2024/25).">?</span></div>
|
||||
<div class="mh">England average: 62%</div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="val" style="color:var(--s1-text)">87%</span> <span class="chip good">Above average</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span class="val" style="color:var(--s2-text)">92%</span> <span class="chip good">Above average</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span class="val" style="color:var(--s3-text)">79%</span> <span class="chip good">Above average</span></div>
|
||||
</div>
|
||||
|
||||
<div class="measure">
|
||||
<div class="mt">Getting a place</div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="chip good">97% of first choices offered</span><span class="note">Named on 457 forms · 180 places</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span class="chip warn">73% of first choices offered</span><span class="note">Named on 342 forms · 120 places</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span class="chip good">All first choices offered</span><span class="note">Named on 185 forms · 80 places</span></div>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">Ofsted inspection</h2>
|
||||
<p class="how">Ofsted stopped giving a single overall grade in September 2024 (inspections until November 2025 kept the area-by-area judgements); from November 2025 new inspections produce a report card rating each area of school life (Exceptional · Strong standard · Expected standard · Attention needed · Urgent improvement). A report card and an older grade aren't directly comparable. Ofsted's "Expected standard" rating is unrelated to the KS2 test measure below.</p>
|
||||
|
||||
<div class="measure">
|
||||
<div class="mt">Latest inspection</div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="ofsted-badge ofsted-1">Outstanding</span><span class="chip neutral">4+ years ago</span><span class="note">7 Oct 2021 · we don't hold area-by-area detail for this inspection · <a href="https://reports.ofsted.gov.uk/provider/21/138690" style="color:var(--accent)">Ofsted page →</a></span></div>
|
||||
<div class="srow" style="align-items:flex-start"><span class="dot" style="background:var(--s2);margin-top:4px"></span><span class="sn">Elmhurst</span><span><span class="ofsted-badge ofsted-1">Outstanding</span> <span class="chip neutral">4+ years ago</span> <span style="font-size:0.72rem;color:var(--ink-3)">6 Oct 2021</span></span>
|
||||
<div class="rc-list">
|
||||
<div class="rc-row"><span class="a">Quality of education</span><span class="chip good">Outstanding</span></div>
|
||||
<div class="rc-row"><span class="a">Behaviour & attitudes</span><span class="chip good">Outstanding</span></div>
|
||||
<div class="rc-row"><span class="a">Personal development</span><span class="chip good">Outstanding</span></div>
|
||||
<div class="rc-row"><span class="a">Leadership & management</span><span class="chip good">Outstanding</span></div>
|
||||
</div>
|
||||
<span class="note"><a href="https://reports.ofsted.gov.uk/provider/21/145362" style="color:var(--accent)">Ofsted page →</a></span>
|
||||
</div>
|
||||
<div class="srow" style="align-items:flex-start"><span class="dot" style="background:var(--s3);margin-top:4px"></span><span class="sn">Plumcroft</span><span><strong style="font-size:0.85rem">Report card</strong> <span class="illus">illustrative</span> <span style="font-size:0.72rem;color:var(--ink-3)">14 Nov 2025</span></span>
|
||||
<div class="rc-list">
|
||||
<div class="rc-row"><span class="a">Achievement</span><span class="chip good">Strong standard</span></div>
|
||||
<div class="rc-row"><span class="a">Curriculum & teaching</span><span class="chip good">Strong standard</span></div>
|
||||
<div class="rc-row"><span class="a">Attendance & behaviour</span><span class="chip warn">Attention needed</span></div>
|
||||
<div class="rc-row"><span class="a">Personal development</span><span class="chip good">Strong standard</span></div>
|
||||
<div class="rc-row"><span class="a">Inclusion</span><span class="chip neutral">Expected standard</span></div>
|
||||
<div class="rc-row"><span class="a">Leadership & governance</span><span class="chip good">Strong standard</span></div>
|
||||
<div class="rc-row"><span class="a">Early years</span><span class="chip neutral">Expected standard</span></div>
|
||||
<div class="rc-row"><span class="a">Safeguarding</span><span class="chip good">Met</span></div>
|
||||
</div>
|
||||
<span class="note"><a href="https://reports.ofsted.gov.uk/provider/21/100140" style="color:var(--accent)">Ofsted page →</a></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">How children do academically</h2>
|
||||
<p class="how">End of Year 6 national tests and teacher assessments (2024/25) — writing is teacher-assessed. Each line runs 0–100%; the grey tick is the England average.</p>
|
||||
<div class="measure" id="strips"></div>
|
||||
<details class="more-measures">
|
||||
<summary>More measures — grammar, punctuation & spelling, science, scaled scores</summary>
|
||||
<div class="measure" id="strips-more" style="margin-top:0.5rem"></div>
|
||||
<p class="strip-note">Strips show the 100–120 window of the full 80–120 scaled-score range; 100 is the expected standard (the strip widens if a school averages below it). England ticks for GPS and science aren't in our dataset yet, and the scaled-score ticks are indicative — official DfE figures will be loaded before launch.</p>
|
||||
</details>
|
||||
<div class="legend" id="strip-legend" style="padding:0 0.2rem 0"></div>
|
||||
|
||||
<div class="measure" style="margin-top:0.9rem">
|
||||
<div class="mt">Children from lower-income families <span class="help" title="% of disadvantaged pupils (free school meals in the last 6 years, or looked after by the local authority) reaching the expected standard. State-school average: 46% (computed from our dataset). Small pupil groups — single pupils can move a school's figure noticeably.">?</span></div>
|
||||
<div class="mh">State-school average: 46%</div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="val">86%</span> <span class="chip good">Well above average</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span class="val">93%</span> <span class="chip good">Well above average</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span class="val">72%</span> <span class="chip good">Above average</span></div>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">Getting a place</h2>
|
||||
<p class="how">September 2026 entry. "First choice" = families who ranked the school top of their form (officially a "first preference"). Schools never see your ranking — places go by the admission criteria alone. Figures are National Offer Day offers; waiting lists and appeals can change the final intake.</p>
|
||||
<div class="measure">
|
||||
<div class="mt">First-choice families offered a place</div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="val">97%</span><span class="note">Named on 457 forms · 180 places</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span class="val">73%</span> <span class="chip warn">Over 1 in 4 missed out</span><span class="note">Named on 342 forms · 120 places — check the school's admission criteria (for most non-faith primaries, distance decides)</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span class="val">100%</span><span class="note">Named on 185 forms · 80 places · every first choice offered</span></div>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">Who goes there</h2>
|
||||
<p class="how">From the latest school census (2025/26). No "right" numbers here — just context.</p>
|
||||
<div class="measure">
|
||||
<div class="mt">Pupils on roll</div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="val">1,273</span><span class="note">At or above capacity · much larger than average · girls 51% / boys 49%</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span class="val">980</span><span class="note">98% full · much larger than average · girls 48% / boys 52%</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span class="val">1,056</span><span class="note">At or above capacity · much larger than average · girls 51% / boys 49%</span></div>
|
||||
</div>
|
||||
<div class="measure">
|
||||
<div class="mt">Free school meals <span class="help" title="% eligible for free school meals. State-school average: 25% (computed from our dataset).">?</span></div>
|
||||
<div class="mh">State-school average: 25% (our dataset)</div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="val">26%</span> <span class="chip neutral">About average</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span class="val">25%</span> <span class="chip neutral">About average</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span class="val">30%</span> <span class="chip neutral">A little above</span></div>
|
||||
</div>
|
||||
<div class="measure">
|
||||
<div class="mt">English as an additional language · extra learning support (SEN) <span class="help" title="SEN = pupils receiving SEN support, not including EHC plans. State-school average: ≈14% (computed from our dataset). A high figure can mean the school hosts specialist provision — often a strength, not a warning sign.">?</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span style="font-size:0.85rem">EAL 62% · SEN 6%</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span style="font-size:0.85rem">EAL 84% · SEN 8%</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span style="font-size:0.85rem">EAL 20% · SEN 28% <span class="chip neutral">SEN well above avg</span></span></div>
|
||||
</div>
|
||||
<div class="measure">
|
||||
<div class="mt">Basics</div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span style="font-size:0.85rem">Ages 3–11 · nursery · no faith · Lion Academy Trust</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span style="font-size:0.85rem">Ages 3–11 · nursery · no faith · New Vision Trust</span></div>
|
||||
<div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span style="font-size:0.85rem">Ages 3–11 · nursery · no faith · Greenwich council</span></div>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">Explore trends</h2>
|
||||
<p class="how">Every measure from the current compare page lives on here, grouped. Three are wired up in this mockup. School lines break where a year isn't in our dataset.</p>
|
||||
<div class="metric-picker">
|
||||
<select id="metric-select" aria-label="Measure">
|
||||
<optgroup label="Expected standard">
|
||||
<option value="rwm" selected>Reading, writing & maths (combined)</option>
|
||||
<option value="reading">Reading</option>
|
||||
<option value="maths">Maths</option>
|
||||
<option disabled>Writing (TA) · GPS · Science (TA)</option>
|
||||
</optgroup>
|
||||
<optgroup label="Higher standard"><option disabled>RWM · Reading · Maths · GPS</option><option disabled>Writing — greater depth (TA)</option></optgroup>
|
||||
<optgroup label="Average scaled scores"><option disabled>Reading · Maths · GPS</option></optgroup>
|
||||
<optgroup label="Equity"><option disabled>Disadvantaged pupils — expected standard</option></optgroup>
|
||||
<optgroup label="School context"><option disabled>FSM % · EAL % · SEN support %</option></optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div class="chart-wrap">
|
||||
<svg id="trendchart" width="620" height="240" role="img" aria-label="Line chart: selected measure by year for three schools and England average"></svg>
|
||||
<div class="legend" id="trend-legend"></div>
|
||||
</div>
|
||||
<p class="swipe-hint">← swipe the chart →</p>
|
||||
|
||||
<p class="footnote">
|
||||
Sources: DfE Compare School Performance, Ofsted inspection outcomes, DfE admissions data, school census — all from datasets SchoolCompare already collects. England averages for test results are official DfE figures; FSM, language, SEN, size and disadvantaged-pupil benchmarks are computed across state schools in our dataset. Plumcroft's Ofsted report card is a made-up example of the November 2025 format (its real latest inspection is Good, June 2023). Following DfE practice, figures based on 5 or fewer pupils are suppressed and shown as "no data". Static mockup — tooltips and "+ Add" are illustrative.
|
||||
</p>
|
||||
</div></div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const css = (v) => getComputedStyle(document.documentElement).getPropertyValue(v).trim();
|
||||
const schools = [
|
||||
{ name: 'Barclay', color: () => css('--s1'), text: () => css('--s1-text') },
|
||||
{ name: 'Elmhurst', color: () => css('--s2'), text: () => css('--s2-text') },
|
||||
{ name: 'Plumcroft', color: () => css('--s3'), text: () => css('--s3-text') },
|
||||
];
|
||||
|
||||
const strips = [
|
||||
{ label: 'Reading, writing & maths', eng: 62, vals: [87, 92, 79] },
|
||||
{ label: 'Reading', eng: 75, vals: [91, 92, 87] },
|
||||
{ label: 'Writing', eng: 72, vals: [94, 92, 83] },
|
||||
{ label: 'Maths', eng: 74, vals: [91, 95, 84] },
|
||||
{ label: 'Higher standard', eng: 8, vals: [22, 27, 12], tip: 'A high score in the reading and maths tests plus \u201cgreater depth\u201d in teacher-assessed writing.' },
|
||||
];
|
||||
function renderStrips(list, el) {
|
||||
list.forEach((s) => {
|
||||
const min = s.min ?? 0, max = s.max ?? 100, unit = s.unit ?? '%';
|
||||
const pos = v => (v - min) / (max - min) * 100;
|
||||
const row = document.createElement('div');
|
||||
row.className = 'strip-row';
|
||||
let pts = '';
|
||||
const sorted = s.vals.map((v, i) => ({ v, i })).sort((a, b) => a.v - b.v);
|
||||
let lastBelow = -Infinity;
|
||||
const nudge = (max - min) * 0.08;
|
||||
sorted.forEach(({ v, i }) => {
|
||||
const above = (v - lastBelow) < nudge;
|
||||
if (!above) lastBelow = v;
|
||||
pts += `<span class="pt" style="left:${pos(v)}%;background:${schools[i].color()}" title="${schools[i].name}: ${v}${unit}"></span>`
|
||||
+ `<span class="pt-lbl" style="left:${pos(v)}%;color:${schools[i].text()};${above ? 'top:-6px' : ''}">${v}</span>`;
|
||||
});
|
||||
const eng = s.eng != null
|
||||
? `<span class="eng-tick" style="left:${pos(s.eng)}%"></span><span class="eng-lbl" style="left:${pos(s.eng)}%">Eng ${s.eng}${unit}</span>`
|
||||
: '';
|
||||
row.innerHTML = `
|
||||
<div class="t"${s.tip ? ` title="${s.tip}"` : ''}>${s.label}</div>
|
||||
<div class="strip" role="img" aria-label="${s.label}: ${s.eng != null ? 'England average ' + s.eng + unit + ', ' : ''}${s.vals.map((v, i) => schools[i].name + ' ' + v + unit).join(', ')}">
|
||||
<div class="track"></div>
|
||||
${eng}
|
||||
${pts}
|
||||
</div>`;
|
||||
el.appendChild(row);
|
||||
});
|
||||
}
|
||||
renderStrips(strips, document.getElementById('strips'));
|
||||
renderStrips([
|
||||
{ label: 'Grammar, punctuation & spelling', eng: null, vals: [86, 94, 82] },
|
||||
{ label: 'Science (teacher-assessed)', eng: null, vals: [95, 91, 83], tip: 'Teacher-assessed, like writing — no KS2 science test since 2009; comparisons are indicative.' },
|
||||
{ label: 'Avg scaled score — reading', eng: 106, vals: [107, 110, 109], min: 100, max: 120, unit: '' },
|
||||
{ label: 'Avg scaled score — maths', eng: 105, vals: [108, 113, 108], min: 100, max: 120, unit: '' },
|
||||
{ label: 'Avg scaled score — GPS', eng: 105, vals: [107, 114, 109], min: 100, max: 120, unit: '' },
|
||||
], document.getElementById('strips-more'));
|
||||
document.getElementById('strip-legend').innerHTML =
|
||||
schools.map(s => `<span class="li"><span class="sw" style="background:${s.color()}"></span>${s.name}</span>`).join('')
|
||||
+ '<span class="li"><span class="engsw"></span>England average</span>';
|
||||
|
||||
/* Metric-driven trend chart. Lines always break across the covid band
|
||||
(2019/20-2020/21, cancelled tests); other nulls are dataset gaps. */
|
||||
const years = ['2015/16','2016/17','2017/18','2018/19','2021/22','2022/23','2023/24','2024/25'];
|
||||
const METRICS = {
|
||||
rwm: { school: { Barclay: [52,76,65,87,null,87,75,87], Elmhurst: [80,81,86,88,null,88,88,92], Plumcroft: [58,64,57,69,null,62,72,79] },
|
||||
england: [null,61.1,64.3,64.9,58.7,59.5,60.6,62.1] },
|
||||
reading: { school: { Barclay: [57,84,76,87,null,null,79,91], Elmhurst: [88,91,92,91,null,null,92,92], Plumcroft: [59,68,72,79,null,null,82,87] },
|
||||
england: [null,71.6,75.3,73.2,74.6,72.8,74.4,75.0] },
|
||||
maths: { school: { Barclay: [81,82,74,90,null,null,88,91], Elmhurst: [96,89,97,97,null,null,96,95], Plumcroft: [80,80,69,90,null,null,84,84] },
|
||||
england: [null,74.8,75.5,78.7,71.5,73.0,73.2,74.0] },
|
||||
};
|
||||
const schoolColor = { Barclay: () => css('--s1'), Elmhurst: () => css('--s2'), Plumcroft: () => css('--s3') };
|
||||
const svg = document.getElementById('trendchart');
|
||||
const W = 620, H = 240, L = 38, R = 44, T = 14, B = 34;
|
||||
const slots = [0,1,2,3,6,7,8,9]; const maxSlot = 9;
|
||||
const X = i => L + slots[i] * (W - L - R) / maxSlot;
|
||||
const Y = v => T + (100 - v) * (H - T - B) / 60;
|
||||
function runs(vals) {
|
||||
const out = []; let cur = [];
|
||||
vals.forEach((v, i) => {
|
||||
if (v == null) { if (cur.length) out.push(cur); cur = []; return; }
|
||||
if (i === 4 && cur.length && cur[cur.length - 1] === 3) { out.push(cur); cur = []; }
|
||||
cur.push(i);
|
||||
});
|
||||
if (cur.length) out.push(cur);
|
||||
return out;
|
||||
}
|
||||
function renderChart(key) {
|
||||
const m = METRICS[key];
|
||||
const ink3 = css('--ink-3'), border = css('--border');
|
||||
let g = '';
|
||||
const bx1 = X(3) + 12, bx2 = X(4) - 12;
|
||||
g += `<rect class="covid" x="${bx1}" y="${T}" width="${bx2 - bx1}" height="${H - T - B}" rx="4"/>`;
|
||||
g += `<text class="covid-lbl" x="${(bx1 + bx2) / 2}" y="${T + 14}" text-anchor="middle">tests cancelled</text>`;
|
||||
g += `<text class="covid-lbl" x="${(bx1 + bx2) / 2}" y="${T + 26}" text-anchor="middle">'19/20-'20/21</text>`;
|
||||
for (let v = 40; v <= 100; v += 20) {
|
||||
g += `<line x1="${L}" y1="${Y(v)}" x2="${W - R}" y2="${Y(v)}" stroke="${border}" stroke-width="1"/>`;
|
||||
g += `<text x="${L - 6}" y="${Y(v) + 4}" text-anchor="end" font-size="10" fill="${ink3}">${v}%</text>`;
|
||||
}
|
||||
years.forEach((yr, i) => {
|
||||
g += `<text x="${X(i)}" y="${H - B + 18}" text-anchor="middle" font-size="9.5" fill="${ink3}">${yr}</text>`;
|
||||
});
|
||||
const path = (vals, idx) => idx.map((i, k) => (k ? 'L' : 'M') + X(i) + ' ' + Y(vals[i])).join(' ');
|
||||
runs(m.england).forEach(idx => {
|
||||
if (idx.length > 1) g += `<path d="${path(m.england, idx)}" fill="none" stroke="${ink3}" stroke-width="1.5" stroke-dasharray="5 4"/>`;
|
||||
else g += `<circle cx="${X(idx[0])}" cy="${Y(m.england[idx[0]])}" r="2" fill="${ink3}"><title>England ${years[idx[0]]}: ${Math.round(m.england[idx[0]])}%</title></circle>`;
|
||||
});
|
||||
Object.entries(m.school).forEach(([name, vals]) => {
|
||||
const color = schoolColor[name]();
|
||||
runs(vals).forEach(idx => {
|
||||
if (idx.length > 1) g += `<path d="${path(vals, idx)}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round"/>`;
|
||||
});
|
||||
vals.forEach((v, i) => {
|
||||
if (v == null) return;
|
||||
g += `<circle cx="${X(i)}" cy="${Y(v)}" r="3" fill="${color}" stroke="${css('--card')}" stroke-width="1.5"><title>${name} ${years[i]}: ${v}%</title></circle>`;
|
||||
});
|
||||
});
|
||||
const ends = Object.entries(m.school)
|
||||
.map(([name, vals]) => ({ v: vals[vals.length - 1], i: vals.length - 1 }))
|
||||
.filter(e => e.v != null)
|
||||
.sort((a, b) => a.v - b.v);
|
||||
let prevY = Infinity;
|
||||
ends.forEach(e => {
|
||||
let y = Y(e.v) + 3.5;
|
||||
if (prevY - y < 12) y = prevY - 12;
|
||||
prevY = y;
|
||||
g += `<text x="${X(e.i) + 7}" y="${y}" font-size="10" font-weight="600" fill="${ink3}">${e.v}%</text>`;
|
||||
});
|
||||
svg.innerHTML = g;
|
||||
document.getElementById('trend-legend').innerHTML =
|
||||
Object.keys(m.school).map(name => `<span class="li"><span class="sw" style="background:${schoolColor[name]()}"></span>${name}</span>`).join('')
|
||||
+ `<span class="li"><span class="sw" style="background:none;border-top:2px dashed ${ink3};border-radius:0;height:0"></span>England avg</span>`;
|
||||
}
|
||||
renderChart('rwm');
|
||||
document.getElementById('metric-select').addEventListener('change', e => renderChart(e.target.value));
|
||||
|
||||
new MutationObserver(muts => { if (muts.some(m => m.attributeName === 'data-theme')) location.reload(); })
|
||||
.observe(document.documentElement, { attributes: true });
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user