Affinity Quiz Pricing Block for React

Edit the two arrays at the top of the file. Each entry in QUESTIONS has an id, the prompt, a helper line, a short topic (read out on its step dot) and its answers, each with its letter, its label and the plan it gives a point to; give every plan an answer in every question. PLANS holds each plan's id, name, persona (the type the result is headed with), signature, monthly price (0 shows "Free"), the billing line under it, bullets, and its call to action's cta and href. The plan with the most points wins, a tie goes to the plan listed first, and the match percentage is the share of answers that pointed to it; to weigh answers differently, give each one points per plan and add them up in tallyOf.

The result's call to action is a link to the matched plan's href. Point each plan's href at your checkout or sign-up route with the plan in it (/checkout?plan=family), and add the answers to the address if you want them on the customer's record, so your sales team sees why the plan was suggested. It's a ShineButton with render set to an a element and nativeButton={false}.

Yes. Each question is an h3, and its answers are a radio group named by the question and described by its helper line: Tab reaches the group and the arrow keys choose an answer. Back and Next move between questions, and the new question's heading takes focus, so reading starts where the content changed; a polite live region also says "Question 2 of 4", and then the match. The step dots are named after their question ("Question 1, Your habit"), and the ones past the first unanswered question are disabled. The result is named by its match line and the plan's name, the price reads "per month", and the breakdown is a list of plans and percentages, with its bars hidden from screen readers.

The arrow keys choose an answer in a radio group, so jumping ahead on every choice would skip questions for keyboard users and move screen reader users without warning. Choosing only selects: Next is enabled once the question is answered, and the last one says "See my match". Visitors can go back with Back or a step dot and change an answer, which keeps the rest; "Retake quiz" clears every answer and starts again from the first question.

The headline stacks above the quiz on a phone and sits beside it from the lg breakpoint. The answers are one column of cards that grow with their text, so long answers wrap rather than overflow, and the quiz card starts at the top of its column on desktop so the first question is on screen without scrolling. The footer keeps the step dots and the answer count on one line and moves Back and Next under them when the screen is narrow. On the result, the highlights stack, then form two columns from sm, and the plan names in the breakdown shorten with an ellipsis before the bars do.

Use an affinity quiz when the difference between plans is about how people live with the product (alone or with family, a line a day or a ritual) rather than a list of specs: a few questions about habits lead to a plan that feels chosen for the visitor. Use a comparison table or plan cards when buyers already know what they need and want to check limits and features side by side.