Source Code

<div class="ptr-card">
  <div class="ptr-head">
    <div class="ptr-progress"><div class="ptr-progress-bar" id="ptrProgressBar"></div></div>
    <span class="ptr-step-label" id="ptrStepLabel">Question 1 of 3</span>
  </div>

  <div class="ptr-questions" id="ptrQuestions">
    <div class="ptr-q" data-q="0">
      <h3>How many people need access?</h3>
      <div class="ptr-options">
        <button type="button" class="ptr-opt" data-q="0" data-v="solo">Just me</button>
        <button type="button" class="ptr-opt" data-q="0" data-v="small">2&ndash;9 people</button>
        <button type="button" class="ptr-opt" data-q="0" data-v="large">10+ people</button>
      </div>
    </div>
    <div class="ptr-q" data-q="1" hidden>
      <h3>Do you need SSO or audit logs?</h3>
      <div class="ptr-options">
        <button type="button" class="ptr-opt" data-q="1" data-v="yes">Yes, required</button>
        <button type="button" class="ptr-opt" data-q="1" data-v="no">No, not needed</button>
      </div>
    </div>
    <div class="ptr-q" data-q="2" hidden>
      <h3>How many projects per month?</h3>
      <div class="ptr-options">
        <button type="button" class="ptr-opt" data-q="2" data-v="low">Under 5</button>
        <button type="button" class="ptr-opt" data-q="2" data-v="mid">5&ndash;30</button>
        <button type="button" class="ptr-opt" data-q="2" data-v="high">30+</button>
      </div>
    </div>
  </div>

  <div class="ptr-result" id="ptrResult" hidden>
    <span class="ptr-result-tag">Recommended for you</span>
    <h3 id="ptrResultTier">Team</h3>
    <p id="ptrResultPrice">$79/mo</p>
    <p class="ptr-result-why" id="ptrResultWhy"></p>
    <button type="button" class="ptr-restart" id="ptrRestart">Start over</button>
  </div>
</div>

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Pricing Tier Recommender Quiz — Free 3-Question Plan Picker (HTML/CSS/JS)

Pricing Tier Recommender Quiz · Pricing · Plain HTML, CSS & JS · Live preview

TagsE-CommerceGamesLanding Page

What's included

Features

Real decision function
Ordered conditionals over real answers, not random or static.
Deterministic results
The same three answers always produce the same tier.
Explained recommendation
The why text names the specific answer that drove the pick.
One question at a time
Sequential reveal with a live progress bar and step count.
Single answers object
Every response accumulates in one object recommend() reads.
Clean restart
Resets answers and step index with no leftover state.
No fallthrough gaps
Every answer combination resolves to exactly one tier.
Framework-agnostic core
recommend() is pure and ports directly to any state model.

About this UI Snippet

Pricing Tier Recommender Quiz — Recommend a Plan From Real Answers, Not a Guess

Screenshot of the Pricing Tier Recommender Quiz snippet rendered live

A pricing page with four tiers asks visitors to self-diagnose which one fits — a task most people skip. This snippet replaces that guesswork with a three-question quiz that walks someone through team size, whether they need SSO or audit logs, and monthly project volume, then recommends one specific tier from a real decision function evaluated over their answers, not a random pick or a static default.

A pure decision function, not a lookup table

recommend(a) is a plain function that takes the collected { people, sso, projects } answers and returns a tier through ordered conditional checks: any SSO requirement or a 10+ person team forces Enterprise regardless of other answers; a 2–9 person team or 30+ projects a month lands on Team; mid-volume solo use lands on Pro; everything else falls through to Starter. Because it's a function over real input, the same three answers always produce the same tier — there's no randomness and no answer combination that falls through without a result.

One question at a time, with progress

Only one question is visible at once (.ptr-q[hidden] toggled by index), with a progress bar and a "Question X of 3" label that update as current advances. This keeps the quiz feeling short and sequential rather than presenting all three questions in a wall at once — the pattern that keeps completion rates high on real onboarding quizzes.

A reasoned result, not just a name

The result screen doesn't just name a tier — resultWhyEl states the specific reason, built inside recommend() itself, referencing whichever answer actually drove the decision ("SSO and audit logs are Enterprise-only" vs. "a 2–9 person team fits Team's shared workspace"). Explaining the *why* is what makes a recommendation feel earned rather than arbitrary, and it doubles as a preview of the tier's actual selling points.

Answers accumulate in one object

Every click writes into a single answers object keyed by question (people, sso, projects), so recommend() always evaluates the full, current answer set — restarting via the button simply resets that object and the step index, with no leftover state from a previous run.

Where it fits

Place it above a pricing card grid so the recommended tier can be highlighted, follow it with a plan selector to confirm the choice, or route an Enterprise result straight to an enterprise pricing contact flow.

Customizing it

Add more questions, change the tier thresholds, or have recommend() return a confidence score alongside the tier so borderline cases can show a runner-up option too.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to design the decision logic from scratch. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how recommend() uses ordered conditional checks over the collected answers object to guarantee every possible combination of answers resolves to exactly one tier, with no gaps and no randomness — and why checking SSO need before team size (rather than after) changes which tier a small team that needs SSO ends up in. The same assistant can help you extend it: ask how to add a fourth question and update the decision function's branches to account for it, how to return a confidence score or runner-up tier for borderline answer combinations, or how to persist the answers in the URL so a shared link can pre-fill the quiz. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a "pricing tier recommender" quiz in plain HTML, CSS, and JavaScript with no framework or library.

Requirements:
- Present exactly three multiple-choice questions one at a time (only the current question visible, others hidden), each with 2-3 button options, plus a progress bar and a "Question X of N" label that both update as the user advances.
- Collect each answer into a single shared state object keyed by question topic (e.g. team size, a required-feature yes/no, and a usage-volume question) as the user clicks through.
- After the last question, call a pure decision function that takes the full answers object and returns a specific recommended tier name, its price, and a short explanation of why — using real ordered conditional logic over the actual answer values (not Math.random, not always defaulting to the same tier, and not leaving any answer combination unhandled).
- Make sure the decision function is exhaustive: write out by hand (in a comment or by testing) every realistic combination of answers and confirm each one resolves to exactly one of your tiers, with a final unconditional fallback case as a safety net.
- Make the "why" explanation reference the specific answer that actually drove the recommendation (e.g. name the feature requirement or the team size that triggered that tier), not a generic message that's the same regardless of which path was taken.
- Add a restart control that clears the answers object and returns to the first question with no leftover state from the previous run.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSQuestion 1 of 3 renders with a progress bar at 0%.
  2. 2
    Answer each questionThe progress bar and step label advance after each click.
  3. 3
    See the recommendationrecommend() evaluates all three answers into one specific tier.
  4. 4
    Read the reasoningThe result explains which answer drove the recommendation.
  5. 5
    Try different pathsRestart and answer differently — the tier changes accordingly.
  6. 6
    Wire up real tiersEdit recommend() with your own thresholds and plan names.

Real-world uses

Common Use Cases

Pricing page onboarding
Guide a confused visitor to the right pricing card before they bounce.
Sales-assisted deals
Route Enterprise answers straight to enterprise pricing contact.
Signup flows
Pre-select a plan in a plan selector based on the quiz result.
Feature discovery
Surface which tier unlocks SSO before someone hits the limit.
In-app upgrade prompts
Recommend an upgrade tier based on real usage answers.
Marketing landing pages
Replace a static comparison table with an interactive picker.
Related: Lifetime Deal Pricing Card
See the Lifetime Deal Pricing Card for a related pricing pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

It's a pure function, recommend(a), that evaluates the three collected answers through ordered conditional checks — no randomness anywhere. Any SSO requirement or a 10+ person team always forces Enterprise; a 2\u20139 person team or 30+ monthly projects always lands on Team; mid-volume solo use always lands on Pro; everything else falls through to Starter. The same answers always produce the same result.

SSO is checked with priority — a.sso === 'yes' recommends Enterprise regardless of team size, because SSO and audit logs are gated to that tier in this quiz's logic. The why text explicitly states that reason rather than the team-size reason, so the explanation always matches the answer that actually mattered.

Yes. The conditional chain in recommend() is exhaustive: Enterprise catches large teams or SSO need, Team catches small teams or high project volume, Pro catches mid volume, and the final return is an unconditional Starter fallback. There's no answer combination that falls through without producing a tier.

A bare tier name feels arbitrary; stating the specific reason (built inside recommend() itself, referencing whichever answer triggered that branch) makes the recommendation feel earned and gives a preview of that tier's actual value, which is more persuasive than a plan name alone.

Move answers and current into component state, and call the same pure recommend(answers) function once the last question is answered — it needs no DOM access and returns a plain {tier, price, why} object you render directly. The step-progression and restart logic map to standard state updates.