Radar Scorecard Awards Block for React

Edit CRITERIA at the top of the file: each criterion has an id, a name and a score out of 10, in halves or any decimals. The radar, the bars, the list and the total are all drawn from that array, so nothing else needs changing. Change SCALE to score out of a different number.

The corners are placed by one helper, xyAt, from the number of criteria, so a sixth criterion turns the pentagon into a hexagon with the rings, axes, dots and numbered chips following it. Anything from three to eight criteria reads well. The chart is an inline SVG in the foreground tone with the numbered chips laid over it as plain elements, so there is no chart library and no text inside the drawing.

The radar is hidden from assistive technology and its caption names it. The same facts are in a numbered list named "Scores by criterion": each item reads the criterion and "9.5 out of 10", and the total sits under the list. The bars are hidden too, since the number says the same. Scores and the total are written inside bdi elements so they keep their order in a right-to-left layout, and the radar itself is never mirrored.

Made up, like the rest: Marit Oyelaran, with her comment in COMMENT and her name and initials in JUDGE. The comment is a real quotation element with the judge in its footer. Swap in the words of the person who led your own panel.

No. The prize, the jury and Lorimer are made up for the example. Replace them with an award your product has won, and use a real programme's name in text only, never its seal.

Below lg the split stacks with the radar first, drawn smaller, and the list and comment under it, each part opened by a rule with + marks. The score text and bars wrap inside the list and nothing scrolls sideways at 320 pixels. The header and the two halves fade up once on load; with reduced motion they simply appear.