Skip to content

Build a step-by-step interactive explainer web app that teaches a beginner how to choose an LED's series resistor

Exact prompt

# Build a step-by-step explainer web app: choosing a series resistor for an LED Make a small interactive web app that teaches a beginner one hardware topic, one step at a time: how to pick the series resistor for an LED. `spec.json` gives the page title, the steps (each with a title and a fact sentence), and the standard resistor series to use (`series_base`, one decade of values, repeated across `decades`). Look, layout and wording beyond the spec are up to you; **looks are not scored**. The page is scored in a headless browser (800x600 window, network blocked) by objective checks only. Write one file, `out/explainer.html`, that works opened straight from disk. ## Steps - Show one step at a time. On load, step 1 is shown. Put the current step's title in `#step-title`, its text in `#step-body` and a counter in `#step-count`. - Buttons `#prev` and `#next` move one step back or forward. - Every step title must appear in `#step-title` in the order given in spec.json, and `#step-count` reads "Step <i> of <N>". - `#prev` is disabled (the `disabled` property) on step 1 and `#next` is disabled on the last step; neither moves past the ends. - `#step-body` for each step contains that step's fact sentence from spec.json exactly as written (extra text around it is fine). ## Calculator Inputs `#in-supply` (supply volts), `#in-vf` (LED forward volts), `#in-ma` (LED current in mA) and `#in-count` (LEDs in series, a whole number); outputs `#out-ohms`, `#out-standard`, `#out-mw` and `#out-error`. The calculator is visible on every step and recalculates on each `input` or `change` event (a `#calc` button is optional; it is clicked too if present). - For supply V, forward voltage F, current I mA and count n: R = (V - n x F) / (I / 1000). `#out-ohms` shows R rounded half-up to a whole ohm. - `#out-standard` shows the smallest standard series value that is at or above the exact R, never a smaller one. - `#out-mw` shows the resistor's power, (V - n x F) x I, in mW rounded half-up to a whole number. - Show numbers as plain digits (for example `1200`, not `1.2k`); a unit after the number is fine. - If any input is missing or not positive, or V is not greater than n x F, `#out-error` shows a non-empty message and `#out-ohms`, `#out-standard` and `#out-mw` are empty. Otherwise `#out-error` is empty. ## Checks (partial credit = share passed) 1. `self_contained`: `out/explainer.html` exists, is at most 150,000 bytes, references no http(s) or protocol-relative URL, and requests nothing from the network when opened. 2. `required_elements`: every element id named above is present, and the `<title>` contains spec.json's `title`. 3. `steps_in_order`: Every step title must appear in `#step-title` in the order given in spec.json, and `#step-count` reads "Step <i> of <N>". 4. `navigation_limits`: `#prev` is disabled (the `disabled` property) on step 1 and `#next` is disabled on the last step; neither moves past the ends. 5. `step_facts`: `#step-body` for each step contains that step's fact sentence from spec.json exactly as written (extra text around it is fine). 6. `calculator_values`: on hidden test inputs, `#out-ohms`, `#out-standard` and `#out-mw` all match the rules above. 7. `invalid_input`: If any input is missing or not positive, or V is not greater than n x F, `#out-error` shows a non-empty message and `#out-ohms`, `#out-standard` and `#out-mw` are empty. No build step and no other files are scored. ## How this run works - Work on your own: nobody will answer questions in this task, and writing to `ask/` counts against the run. - Write only under `out/`. Create `out/` if it is missing. Inputs are synthetic; don't fetch anything from the network. - Scoring is partial credit: each listed check is pass/fail, and the score is the share passed. Numbers are compared to within 0.005 unless the task says otherwise.

Build a one-file web app that walks a beginner through choosing an LED's series resistor, one step at a time, with a live calculator. A headless browser clicks through the steps and feeds hidden inputs to the calculator, checking step order, the button limits at both ends, the given facts, the calculated values (including rounding up to a standard resistor value) and the error state. Looks are not scored. Original benchmark task written for usecaserank.com (not based on a specific public post). Headless, offline run on a reproducible fixture. Each run's notes say how its cost was measured (estimates are marked).

Success criteria: self_contained required_elements steps_in_order navigation_limits step_facts calculator_values invalid_input

Best model for this task so far: Claude Haiku 5.5 (effort default (no --effort flag) · thinking on) (success, $0.01, 1m).

Run this on another model

All runs (3)

100% pass rate across 3 eligible runs: 3 pass, 0 partial, 0 fail. Partial and failed runs are listed below with everything else.ⓘ

Runs for this use case
ModelCostTimeStep-insⓘAutonomyOutcomeTrustⓘDateCompare
AClaude Opus 5.5default · thinking on$0.2039s0Fully autonomouspassTrust 80%2026-10-22
AClaude Haiku 5.5default · thinking on$0.011m0Fully autonomouspassTrust 80%2026-10-22
AClaude Sonnet 5.5default · thinking on$0.0618s0Fully autonomouspassTrust 80%2026-10-22

Embed this result

A live badge for this use case. It links back here and updates as new runs are published.

UseCaseRank badge for Build a step-by-step interactive explainer web app that teaches a beginner how to choose an LED's series resistor

Get new runs and ranking changes weekly

Which models got better or cheaper on real tasks like this one.