Rating FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, the question, its answer, the average before your rating and the count of people behind it. SCALE holds the points on the scale and OPEN_QUESTION names the row that's open on load. One answer is open at a time. Add multiple to the Accordion to let several stay open.

Your rating counts as one more vote: the new average is (average × count + your rating) / (count + 1), shown to one decimal, and the count goes up by one. Choosing another number replaces yours rather than adding a second vote, because every figure is computed again from the starting values. The overall figure beside the header is the same sum across all seven rows.

No. Your ratings live in the component's state, keyed by question, so a reload clears them. To store them, call your own endpoint from the rate function: it already receives the question's id and the number.

Each question is a button inside its own h3 under the section's h2. The scale is one group of five radio buttons, named with the question and its two ends, so Tab lands on it once and the arrow keys move between the numbers. A polite status line reads "Thanks, 4 of 5" when you choose one. An arrow key chooses the number it lands on. Tab moves between the questions and into the scale in each open answer; the arrow keys don't move between questions on this base.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found": search engines see all seven, and the browser's find in page opens the answer that holds a match.

Below the lg breakpoint the header and the overall figure stack above the rows, which run from rail to rail under a rule with + marks. In a row the average drops under the question, and the scale and its thanks sit one under the other. The numbers are square 40-pixel buttons and nothing scrolls sideways at 320 pixels.