Build a single self contained HTML page: a product recommendation quiz that behaves like a real decision engine. No frameworks, no build step, no external requests, no analytics, no fonts loaded from a CDN. All CSS and JavaScript inline. It must work offline when saved to disk. THE CATALOGUE The four package catalogue below is a worked example for a fictional web design studio. Build the page with it as it stands. Do not stop and ask me for a catalogue first. When I give you a real catalogue, replace the example packages, prices, boundaries and capabilities with the real data I supply, keeping the same structure. Never invent a price, a boundary, a supported capability or an exclusion that I have not given you. If a fact about a real package is missing, leave it out and tell me it is missing rather than filling the gap. EXAMPLE CATALOGUE 1. Launch, from GBP 795, typical build 1 to 2 weeks. Boundary: up to 5 pages. Supports: up to 5 pages, contact and enquiry forms. Does not support: appointment booking, checkout, member accounts, file portal, custom integration, standard CRM or email integration. 2. Growth, from GBP 1,495, typical build 3 to 4 weeks. Boundary: up to 20 pages. Supports: up to 20 pages, appointment booking, standard CRM or email integration. Does not support: checkout, member accounts, file portal, custom integration. 3. Commerce, from GBP 2,750, typical build 4 to 6 weeks. Boundary: up to 100 products. Supports: catalogue up to 100 products, checkout and payments, standard CRM or email integration. Does not support: appointment booking, member accounts, file portal, custom integration. 4. Custom, from GBP 4,500, typical build 6 weeks or more. Boundary: no page or product ceiling. Supports: everything above plus complex workflows, member accounts, private file portal, custom API integration. THE SEVEN QUESTIONS Ask one question per screen, with a visible position indicator reading "n of 7". Q1. What is the main job of the website? Single choice. - Look credible and explain what we do - Generate more enquiries - Let people book or request appointments - Sell products online - Run a portal, account area or custom workflow Q2 branches on Q1. If the answer to Q1 is "Sell products online", ask: How large is the product catalogue? Single choice. - Up to 20 products - 21 to 100 products - More than 100 products Otherwise ask: How much content does the site need? Single choice. - 1 to 5 pages - 6 to 20 pages - 21 to 40 pages - More than 40 pages If the visitor goes back and changes Q1 across that branch, DISCARD the stored Q2 answer and ask Q2 again in its new form. Never carry an answer from one branch into the other. Q3. Which capabilities are genuinely required? Multiple selection. Helper text: "Choose only what the site cannot launch without. Anything here can rule a package out." - Appointment booking - Online payments or checkout - Standard CRM or email integration - Customer or member accounts - Custom API or business system integration - Private file upload or client portal - None of these Selecting "None of these" clears the other selections, and selecting any other option clears "None of these". Selecting nothing is not a valid answer; "None of these" is the way to say no. Q4. How much help will you need with the content? Single choice. - It is mostly ready - Help structuring and sharpening it - I need substantial writing and content help Q5. What happens after launch? Single choice. - Mostly leave it alone - Make occasional changes - Run campaigns, tests or regular improvements Q6. How fixed is the launch date? Single choice. Helper text: "A hard date is treated as a constraint, not a preference." - Flexible, six weeks or more is fine - Around three to six weeks - Under three weeks is essential Q7. What budget range are you trying to stay within? Single choice. Helper text: "Treated as a ceiling against the illustrative starting price of each package." - Under GBP 1,000 - GBP 1,000 to GBP 2,000 - GBP 2,000 to GBP 4,000 - GBP 4,000 or more, or flexible MATCHING LOGIC, IN THIS ORDER Step 1, eliminate. Apply every hard rule that the answers switch on. A package that fails any rule is ruled out and takes no further part. Record the specific reason for each elimination. Hard rules from Q1: - Book or request appointments: only Growth or Custom. - Sell products online: only Commerce or Custom. - Portal, account area or custom workflow: only Custom. Hard rules from Q2: - Up to 20 products, or 21 to 100 products: only Commerce or Custom. - More than 100 products: only Custom. - 1 to 5 pages: no elimination on scale by itself. - 6 to 20 pages: only Growth or Custom. Launch is bounded at up to 5 pages and cannot carry the scale, and Commerce is a product catalogue package rather than a content site. - 21 to 40 pages, or more than 40 pages: only Custom. Hard rules from Q3, one per selected capability: - Appointment booking: only Growth or Custom. - Online payments or checkout: only Commerce or Custom. - Standard CRM or email integration: only Growth, Commerce or Custom. - Customer or member accounts: only Custom. - Custom API or business system integration: only Custom. - Private file upload or client portal: only Custom. Hard rule from Q6: - Under three weeks is essential: only Launch. Hard rule from Q7, applied as a ceiling against the starting price: - Under GBP 1,000: only packages starting at or below 1,000. - GBP 1,000 to GBP 2,000: only packages starting at or below 2,000. - GBP 2,000 to GBP 4,000: only packages starting at or below 4,000. - GBP 4,000 or more, or flexible: no ceiling. Step 2, score fit. Score ONLY the packages that survived step 1. Add these points. Q1: - Look credible: Launch +3, Growth +2 - Generate more enquiries: Growth +5, Launch +1, Custom +1 - Book or request appointments: Growth +5, Custom +2 - Sell products online: Commerce +5, Custom +2 - Portal or custom workflow: Custom +5 Q2: - 1 to 5 pages: Launch +2, Growth +1 - 6 to 20 pages: Growth +3, Custom +1 - 21 to 40 pages: Custom +4 - More than 40 pages: Custom +4 - Up to 20 products: Commerce +3, Custom +1 - 21 to 100 products: Commerce +4, Custom +2 - More than 100 products: Custom +4 Q3, per selected capability: - Appointment booking: Growth +2, Custom +1 - Online payments or checkout: Commerce +2, Custom +1 - Standard CRM or email integration: Growth +2, Commerce +2, Custom +1 - Customer or member accounts: Custom +2 - Custom API or business system integration: Custom +2 - Private file upload or client portal: Custom +2 - None of these: no points Q4: - Mostly ready: Launch +1 - Help structuring: Growth +2, Commerce +1 - Substantial writing help: Growth +2, Commerce +1, Custom +2 Q5: - Mostly leave it alone: Launch +2 - Occasional changes: Growth +2, Commerce +1 - Campaigns, tests or regular improvements: Growth +3, Commerce +2, Custom +2 Q6: - Flexible: no points - Three to six weeks: Growth +2, Commerce +2 - Under three weeks: Launch +3 Q7: no points at all. Budget is a ceiling only. Never let budget add attraction to a package. Step 3, pick. The highest scoring surviving package wins. On a tie, the lower complexity and lower starting price package wins, walking Launch, Growth, Commerce, Custom in that order, and record that the result was decided by the tie break rather than by points. Step 4, no match. If step 1 removes every package, recommend nothing. Show the requirements that are in conflict, and list what would have to change for something to become possible, naming the specific answers involved. Never fall back to the most expensive package. Never fall back to the cheapest package. Never recommend a package that was eliminated. Keep the conflict explanation short and deterministic. Work out the smallest set of active rules that still cannot be satisfied together, by dropping rules one at a time in evaluation order and only dropping a rule when the remaining set is still unsatisfiable. State that minimal conflict as one sentence, then list every active requirement with the packages it needs as a second sentence. Do not print one sentence for every pair of conflicting rules; that produces several near duplicate statements saying the same thing. WHAT THE FIT SCORES ARE Fit points are internal explanation and debug data for this matching model only. They are not a probability, a confidence level, a match percentage or a quality rating, and they must never be presented as one. If you show them at all, show them inside the comparison view, labelled as this page's matching points on the published fit rules. THE STRUCTURED DECISION RECORD Whether or not anything is submitted, build the result as a structured object in memory and make it available to the page. It carries: matching_rules_version, a string version of the rules the result was produced under; completed_on, an ISO 8601 timestamp of when the quiz was completed; the answers to all seven questions; the winner id or no_match; the eligibility state, elimination reasons and fit score for every package; and the explanation strings the visitor saw. A stored recommendation without matching_rules_version and completed_on cannot be interpreted later, because you cannot tell which rules produced it. THE RESULT SCREEN Show the recommendation immediately and in full. Do not gate it behind an email address, a sign up, a timer or a scroll. Show: - The winning package name, its starting price and its typical build time, labelled as illustrative rather than as a quote. - Why we chose it: specific reasons drawn from the answers, not generic copy. - Why we did not choose the others: one line per other package, naming the requirement that eliminated it or the margin it lost by. - Because you said: the answers the recommendation was built from. - A "Compare all packages" control that reveals every package with its price, timeline, what it supports, what it excludes and its state as Recommended, Eligible or Ruled out, with eliminated packages still visible and still explained. - A "Change my answers" control that returns to a review of all answers, each individually editable, and recalculates on change. - A "Start again" control that clears everything. RESULT FIRST, IDENTITY NEVER The result is shown before any identity or contact step, always, with no exception. Do not ask for a name, an email address, a company or a phone number at any point before the recommendation is on screen. The default build collects nothing at all and keeps every answer local to the browser tab. If I ask for lead capture, add it as an optional step AFTER the recommendation, labelled "Send me this recommendation" or "Request a quote". It must not be required to see the result, it must be skippable, and skipping it must leave the whole result visible and usable. Describe it as sending the visitor a copy of a result they can already see. If the visitor uses it, include the structured decision record and a requested_next_action field recording which action they chose. ACCESSIBILITY - Group each question's options in a fieldset with the question as the legend. - Use real radio inputs for single choice and real checkbox inputs for multiple selection, keyboard operable and reachable by tab, visually restyled rather than replaced by div click handlers. - Visible focus styles on every interactive element. - Every interactive target, including every answer card and every button, is at least 44 pixels high and comfortably wide enough to hit on a phone. - Use exactly one small dedicated aria-live="polite" region, and use it only to announce the question position, for example "Question 3 of 7". Do not put aria-live on the results area, the whole page, the comparison view or any large container. A live region wrapped around results makes a screen reader re-read everything on every change. - The Continue control is disabled until the current question is answered, and the disabled state is conveyed by the disabled attribute and not only by colour. - Never use colour alone to carry the Recommended, Eligible or Ruled out state; include the text label. - Respect prefers-reduced-motion: reduce. When it is set, no transitions, no animations and no transforms run anywhere on the page. QUALITY BAR - The page must look like a premium interactive experience a studio could sell, not a default form. Confident typography, generous spacing, a clear visual identity, a considered result screen. - Fully responsive with zero horizontal document overflow at 390 pixels wide, which is the width to test explicitly. It should also hold together at 320 pixels. Any wide table or comparison grid scrolls inside its own container rather than widening the document. - No em dashes anywhere in the copy. - No invented statistics, no testimonials, no customer logos, no review scores, no urgency countdowns, no fake scarcity. If I have not given you the fact, do not put it on the page. - Do not send anything anywhere. State on the result screen that answers stayed in the browser. TEST BEFORE YOU HAND IT BACK Run every case below and tell me the outcome of each. Do not stop early and do not skip a case because it looks similar to another one. A. Credibility, 1 to 5 pages, none of these, content ready, leave it alone, flexible, under GBP 1,000. Expect Launch. B. Enquiries, 6 to 20 pages, appointment booking, help structuring, campaigns and tests, three to six weeks, GBP 1,000 to GBP 2,000. Expect Growth. C. Sell products online, up to 20 products, payments, content ready, occasional changes, three to six weeks, GBP 2,000 to GBP 4,000. Expect Commerce. D. Portal or custom workflow, 6 to 20 pages, member accounts and custom integration, substantial writing help, campaigns and tests, flexible, GBP 4,000 or more. Expect Custom. E. Sell products online, up to 20 products, payments, content ready, occasional changes, flexible, under GBP 1,000. Expect no match. The checkout requirement needs Commerce or Custom and the budget ceiling leaves only Launch. Expect one concise conflict statement, not several near duplicates. F. Sell products online, up to 20 products, payments, content ready, occasional changes, under three weeks, GBP 4,000 or more. Expect no match. Money is not the blocker, the hard three week date is. Expect one concise conflict statement. G. Credibility, 1 to 5 pages, member accounts, content ready, leave it alone, flexible, GBP 4,000 or more. Expect Custom. On raw fit points Launch would score higher, and it must stay eliminated because a required capability removed it before scoring. H. Credibility, 1 to 5 pages, none of these, help structuring, leave it alone, three to six weeks, GBP 1,000 to GBP 2,000. Expect Launch, decided by the tie break rather than by points, and the result must say so. I. Branch reset, a state transition rather than a scoring case. Answer Q1 as selling products online, answer Q2 as more than 100 products, then go back and change Q1 to generating enquiries. Expect the catalogue answer to be discarded and Q2 to be asked again in its page count form. J. Package boundary beats soft fit. Credibility, 6 to 20 pages, none of these, content ready, leave it alone, flexible, GBP 4,000 or more. Expect Growth. Every soft signal points at Launch, and Launch must be ruled out because it is bounded at up to 5 pages. Package boundaries outrank soft fit. Also confirm: the result is reachable with no email address entered anywhere, the page has zero horizontal document overflow at 390 pixels wide, and setting prefers-reduced-motion to reduce stops every transition and animation.
Produces: A single self contained HTML page with the full recommendation engine, seven questions, hard eligibility rules, fit scoring, explained results, a no match outcome and a comparison view.