Banja Lab / Benchmarks / Test
WEB-0003Websites · medium
Pricing page with a working billing toggle and FAQ accordion
The same task, run on 28 models. Compare the outputs side by side, or open any one in a popup to inspect it.
Top result: claude-opus-4-8 (low reasoning) at 100.0% composite. Lowest: claude-sonnet-4-6 at 0.0%. 28 models compared on this task.
How it ran
- Each model was given the brief below in a fresh, isolated session with no access to our tools, and returned a single self-contained index.html (inline CSS and JS, no external requests, no build step).
- The rendered output was scored 1 to 5 on brief fidelity, visual design, craft, and impact by a four-family vision panel - Anthropic (Claude Opus 4.8), OpenAI (GPT-5.5), Google (Gemini 3.1 Pro), and xAI (Grok 4.3) - using one identical prompt so the scores compare. The published judge score is leave-one-family-out: a model is never scored by a judge of its own family, so same-family self-preference is removed.
The brief
Build a single self-contained page as one HTML file (`index.html`) that renders with no build step and no network calls (inline all CSS and JS, no external fonts or scripts). The page combines two interactive parts: - a pricing section with three tiers and a monthly/annual billing toggle implemented as an accessible switch (role="switch" with aria state, id="billing"); clicking the toggle must change every displayed price between its monthly and annual value, and - a FAQ section (id="faq") of at least three question/answer items where each answer is collapsed by default; clicking a question must reveal (make visible) its own answer, and clicking it again may collapse it. The first answer must have id="a1". Use plain, readable, accessible markup.
