A two-player hotseat tic-tac-toe that tracks turns, declares winners, and can be restarted.
Write a single-file HTML page implementing two-player hotseat tic-tac-toe. Players alternate X and O; after every move the page updates the board, tracks whose turn it is, detects three-in-a-row (including diagonals) and shows a winner announcement, and offers a restart button. No external assets.
This task ships its own contract, which replaces the global one. It is part of the prompt hash, so editing it re-runs the task rather than replaying a cached response.
EXECUTION ENVIRONMENT — your artifact runs inside a locked-down sandboxed iframe (sandbox="allow-scripts", opaque origin, NO network access). Hard requirements: - Produce ONE complete, self-contained HTML document: <!DOCTYPE html> through </html>, with the DOCTYPE as the very first node (a later DOCTYPE still triggers quirks mode). All visible content lives inside <body>. - Inline ALL CSS and JavaScript. Nothing may load from the network: no <script src>, no <link href>, no @import, no CDN (React/Tailwind/fonts/images included). If you need a library, hand-write the code instead. - Write plain browser JavaScript only. No JSX, no <script type="text/babel">, no Babel standalone, no TypeScript, no build step, no runtime compilation. - localStorage/sessionStorage/cookies may be unavailable — feature-detect or wrap in try/catch; the page must still work without them. - No alert/confirm/prompt; render all feedback into the page itself. - Wrap your top-level script body in try/catch and, on failure, write the error message into a visible <div role="alert"> inside <body>. BOARD — the page is graded by a script that clicks cells and reads the DOM, so the board must be inspectable, not just visually correct: - Render exactly nine cell elements, in row-major order, as real clickable elements (<button>, <td> or an element with role="button"). Nine cells and nothing else that looks like one — put any other controls outside the grid. - A cell's mark must be that cell's OWN text content: the single character "X" or "O", nothing else. No background images, no sprites, no SVG-only marks, no extra whitespace or labels inside the cell. - Every cell starts empty. Do not pre-fill, hint, or preview moves inside cells. - Clicking an empty cell marks it immediately and passes the turn; clicking an occupied cell does nothing. X moves first. - When a player completes a row, column or diagonal, announce it in visible page text containing the winner and the word "wins" (e.g. "X wins"). A draw must be announced too. After a result, further cell clicks are ignored until restart. - Provide a restart control outside the nine cells that clears the board back to its starting state. LAYOUT — the showcase frame is short and sometimes narrow (~1200×600 CSS px on desktop, ~380×480 on mobile): - Set html,body{margin:0;padding:0;min-height:100%;box-sizing:border-box;background:#0c0c10;color:#ececf0;font-family:ui-sans-serif,system-ui} and centre the board. - The whole board, the turn indicator, the announcement and the restart control must be visible at 380×480 without scrolling. Size the grid in relative units, not fixed pixels. - Make the first frame already look intentional — no unstyled flash, no collapsed layout while scripts boot. Every control must actually work: no placeholder text, no TODOs, no dead buttons.
Render the artifact a model actually produced for “Tic-Tac-Toe”.
Claude 4 hasn’t been run on this task yet.
Its generated artifact will appear here after the next benchmark run.
2
63.6
28.34s
$0.0001
| Model | Score | Status | Runtime | Tokens in | Tokens out | Cost |
|---|---|---|---|---|---|---|
| Gemini 3.6 Flash | 68.0 | success | 23.08s | 3.9k | 26.6k | $0.0002 |
| Nemotron Nano 12B VL | 59.2 | success | 33.59s | 3.9k | 5.4k | free |
The append-only run log behind each row: the prompt that was sent, every retry, what each iteration emitted, and how the checks scored it.
Runs elsewhere on the board that failed at least one of the same checks — same task first, then the same model on other tasks. Computed from the current board (results.json) at build time, not a live query.
Nemotron Nano 12B VL failed no-runtime-errors, ttt-grid-interacts, ttt-win-detected — also failed by:
Gemini 3.6 Flash failed ttt-win-detected — also failed by:
One person’s judgment of these artifacts — mine, written while reviewing them, and committed alongside the results. These are not reader ratings: the site is a static export and has no way to collect them.
Nemotron Nano 12B VL
iteration 2Scores a clean 100 while the page throws "board.children.forEach is not a function". It is not a scoring bug — no-runtime-errors is a 0-point advisory check by design — but a board that plays and detects a win with an uncaught TypeError behind it is not a 100 in any sense a reader means. Judgment: the artifact is broken; the number is the ceiling of what the checks can see.— curator note (negative rating by the site maintainer, not a reader poll)
Scores by interaction (cells respond to clicks with a mark), state tracking (turns alternate), and win detection (three-in-a-row announces a winner).
Side-by-side generated outputs for “Tic-Tac-Toe”. Pick two models to compare their responses.