Judges Score Table Awards Block for React

Edit JUDGES and CRITERIA at the top of the file. Each criterion has a weight in percent (they should add up to 100) and one score per judge, in the order of JUDGES. Adding a judge means adding a score to every criterion; the table gains a column and every average follows.

A row's panel average is the plain mean of its five scores. A judge's weighted average multiplies each of their scores by its criterion's weight and adds them up; the overall score is the mean of the judges' weighted averages. All of them are shown to one decimal, and none is typed in.

By outline weight, not colour: a heavy ring for the highest score in the row and a thin one for the lowest, with ", highest in this row" or ", lowest in this row" added as hidden text so a screen reader hears it too. If every judge gave the same score in a row, neither is marked. Ties are all marked.

The table is wider than the screen, so it scrolls sideways in a labelled region that takes keyboard focus, while the criteria column stays in place with a hairline beside it. Rows stay compact, and nothing else on the page scrolls sideways.

It's a real table with a caption, column heads for the judges and the panel average, and each criterion as the head of its row. A judge's column head reads "J1, Imre Valkonen". The weight and the foot row's labels are plain text, and every number sits in an element that keeps its order in a right-to-left layout.

No. The awards, Larchway, the judges and every score are made up for the example, and Norrisby is a made-up platform. Swap in your own sheet.