Progress bar with an exact fill width and track tokens
One task across 30 published runs. Inspect the scores and outputs together, with each run's execution method shown.
- Task
- PIXEL-0006
- Domain
- UI components
- Difficulty
- hard
Leading published run: claude-opus-4-8 (low reasoning) at 100.0% composite. Lowest: claude-haiku-4-5 at 0.0%. 30 published runs shown on this task.
How this task was evaluated
Results are ordered by this task's published score. API runs use one prompt and one completion; agent runs use a coding harness with tools and iteration. Inspect the execution method when comparing results.
Objective scores use the benchmark's execution checks. Judge scores use a vision panel's fixed rubric; the published score leaves out a model's own family. Missing values are labelled rather than treated as zero.
Read the brief
Build a single self-contained HTML file (`index.html`) that renders a determinate progress bar at 65 percent, with no build step and no network calls (inline all CSS, no external fonts or scripts). The grader measures the rendered geometry, so the fill must be exactly the right width, not roughly two-thirds. Track `<div id="track">`: - width 400px, height 12px, background #e2e8f0, border-radius 6px. Fill `<div id="fill">` inside the track: - width exactly 260px (65 percent of 400px), height 12px, background #6d28d9. Caption `<p id="caption">`: - font-size 13px, colour #475569, text "65% complete". The 260px fill, the 12px track height, and the 13px caption are the contract.
