Rubric Matrix Awards Block for React

Edit LEVELS and CRITERIA at the top of the file. Each criterion has a name, one descriptor for every level in the order of LEVELS, and reached, the index of the level it reached (0 is the first). The grid, the ticks, the summary and the sentence in the header are all made from that data. Keep four levels, or change the column template (COLUMNS) and the meter to match.

It's counted from CRITERIA: the criteria that reached the first level, out of all of them, and a sentence naming any that stopped short and the level they reached. Change a reached value and both lines update themselves.

The cell is a list item with aria-current="true", and it also carries a hidden "Level reached." line, so it's announced however a screen reader treats aria-current. The tick itself is a drawing hidden from assistive technology, and the tint never carries meaning alone.

It's a list of criteria, each opening with its name as a heading and holding a list of four levels. The level name is hidden text on desktop (the visible column heads stand in for it, and they are hidden from assistive technology) and visible text on a phone, so every descriptor is always read with its level.

Below md the columns give way to one group for each criterion with its four levels stacked. The level reached keeps its tint, outline, tick and full descriptor; the other three show only their level name and keep the descriptor as hidden text. Nothing scrolls sideways at 320 pixels.

No. The standard, its criteria and every descriptor are made up for the example, and Rubrica is a made-up assessment tool. Use your own rubric and, if you cite a real standard, name it in text only.