vanilla Qwen3-8B
CODE /40
FUNCTIONALITY /60

  
+ DFlash draft

    
CODE /40

    
FUNCTIONALITY /60

    



; the unterminated script block is never executed, so both canvases render blank (0 painted pixels, screenshot vanilla_od20_0_initial.png) (-18)", "e": ""}, {"c": "Latent contrast bug in dead code: canvas filled #333 then axis labels drawn fillStyle '#000' (black on dark gray) (-2)", "e": ""}]}, "dflash": {"file": "dflash_od20.html", "total": 37, "code": 37, "func": 0, "feedback": "Both canvas charts actually render (line 5804 painted px, bars 27000 painted px), zero console errors, self-contained. But the brief explicitly demands interactive charts and the page has literally zero event listeners: no tooltips, no click response. Static image of a dashboard.", "deds": [{"c": "line chart hover tooltip (brief, x2)", "e": "mouse sweep over #lineChart (9 points): no tooltip element exists in DOM, no popup/highlight; script contains 0 addEventListener calls"}, {"c": "bar chart hover tooltip (brief, x2)", "e": "mouse sweep over #barChart: no tooltip or any change; 0 listeners in source"}, {"c": "chart click interaction", "e": "clicked center of both canvases: bodyChanged=false, nothing happens"}, {"c": "Stray markdown fence '```' after  renders as visible text bottom-left (screenshot dflash_od20_0_initial.png) (-3)", "e": ""}]}}, "od28": {"brief": "Interactive charts showcasing trading trends and accident statistics in New York.", "vanilla": {"file": "vanilla_od28.html", "total": 5, "code": 5, "func": 0, "feedback": "Generation was cut off inside the  tag. The browser renders a blank page; there is nothing to interact with and no code to evaluate beyond the truncation itself.", "deds": [{"c": "entire page", "e": "file is 79 bytes ending mid-tag ('<title>Trading Trends & Accident Statistics</'); bodyTextLen=0, no chart containers, no SVG/canvas in DOM, page renders completely blank"}, {"c": "Severely truncated file (79 bytes, 4 lines, ends mid-<title> tag): no body, no charts, no script ever emitted (-35)", "e": ""}]}, "dflash": {"file": "dflash_od28.html", "total": 17, "code": 17, "func": 0, "feedback": "The model's reasoning stream was saved as the deliverable: title, two empty chart boxes, then ~10k chars of visible self-talk including a half-written D3 attempt that throws ReferenceError on load (D3 would have violated the no-external-assets rule anyway). No chart renders, no tooltip exists.", "deds": [{"c": "trading chart hover tooltip (brief, x2)", "e": "#trading-chart contains one empty <svg> (appended before the crash); hover at center: #tooltip stays display:none, empty text"}, {"c": "accident chart hover tooltip (brief, x2)", "e": "#accident-chart has 0 children (script aborted before createBarChart); hover: tooltip stays display:none"}, {"c": "chart click interaction", "e": "clicked both containers: bodyChanged=false"}, {"c": "Model chain-of-thought leaked into the artifact: ~9.9k chars of reasoning prose ('Then, in the CSS...', 'But how to create the SVG elements...') rendered as visible page text after </html> (screenshot dflash_od28_0_initial.png) (-10)", "e": ""}, {"c": "Leaked prose includes a live <script> that calls d3.scaleLinear with no D3 imported: pageerror 'ReferenceError: d3 is not defined', aborting chart creation after one empty <svg> (-6)", "e": ""}, {"c": "Skeleton stubs left as dead code: <style>/* CSS here */</style> and <script>// JavaScript here</script> (-3)", "e": ""}, {"c": "File truncated mid-word at end ('title' cut off) (-4)", "e": ""}]}}, "od340": {"brief": "Photo card interface, hover triggers a gentle 3D flip effect.", "vanilla": {"file": "vanilla_od340.html", "total": 27, "code": 27, "func": 0, "feedback": "External placeholder images that fail to load even online, a stray code fence rendered on the page, and a structurally broken flip: the back face is never pre-rotated, so hovering makes the card disappear entirely. Only the transform changes; the effect itself is wrong.", "deds": [{"c": "card hover 3D flip (brief, x2)", "e": "page.hover('.card') does change computed transform (none -> matrix3d(-1,0,0,0,0,1,0,0,0,0,-1,0,0,0,0,1)), but neither .face is pre-rotated rotateY(180deg), so after the 180deg flip both faces are backface-hidden and the card vanishes completely (screenshot vanilla_hover.png: empty page). Wrong feedback: flip reveals a blank card, not a back face. Also the back .face is stacked on top initially, so the card shows the 'Back' broken-image alt text instead of the front photo."}, {"c": "External asset violation: two <img src=\"https://via.placeholder.com/300x200\"> (offline-hostile external URLs) (-8, incl. host being dead)", "e": ""}, {"c": "via.placeholder.com fails even with network: console error 'Failed to load resource: net::ERR_CONNECTION_CLOSED', requestfailed ERR_CONNECTION_CLOSED, img naturalWidth=0 -> no photo ever renders (-2)", "e": ""}, {"c": "Stray markdown fence '```' after </html> renders as visible text on the page (-3)", "e": ""}, {"c": "Structural CSS bug: back face missing transform: rotateY(180deg) (primary penalty taken in functionality)", "e": ""}]}, "dflash": {"file": "dflash_od340.html", "total": 87, "code": 27, "func": 60, "feedback": "Correct, gentle 180deg flip: hover changes computed transform through mid-transition matrix to full rotateY(180deg), front photo swaps to a properly pre-rotated back photo, unhover restores. No console errors. Docked for external picsum URLs, a rendered stray fence, and flat (perspective-less) rotation.", "deds": [{"c": "External asset violation: background images url('https://picsum.photos/300/200') and url('https://picsum.photos/301/201') (-8)", "e": ""}, {"c": "Stray markdown fence '```' after </html> renders as visible text on the page (-3)", "e": ""}, {"c": "perspective: 1000px is set on the rotating .card itself (not a wrapper) and overflow:hidden negates transform-style: preserve-3d, so the flip renders flat with no 3D depth (-2)", "e": ""}]}}, "od341": {"brief": "Newsletter registration pop-up, soothing hues, smartphone optimized.", "vanilla": {"file": "vanilla_od341.html", "total": 85, "code": 37, "func": 48, "feedback": "Clean single-file page, zero console errors, soothing teal palette, mobile viewport + media query. Popup shows on load, close button works, invalid email blocked. Submit dismisses the popup but shows no confirmation message, costing half the double-weighted subscribe flow. Decorative pseudo-element circle looks like a close button but is inert.", "deds": [{"c": "newsletter subscribe flow \u2014 confirmation step (partial)", "e": "Typed test@example.com, clicked Subscribe: popup hides (class 'show' removed, computed visibility hidden), but no confirmation message anywhere \u2014 body.innerText is empty after submit. Brief explicitly requires confirmation; only partial credit."}, {"c": ".modal-content::before renders a circle at top-right styled/hovered like a close button but has no click handler \u2014 misleading non-functional affordance; the real .close-btn div has no CSS at all and renders as unstyled inline text (-3)", "e": ""}]}, "dflash": {"file": "dflash_od341.html", "total": 76, "code": 40, "func": 36, "feedback": "Well-formed single-file page, no console errors, no external assets, calm blue palette, responsive. Popup renders on load and close button works (display:none). But the subscribe button is functionally dead for valid emails \u2014 onsubmit returns false with no confirmation or state change \u2014 failing the brief's double-weighted core flow.", "deds": [{"c": "newsletter subscribe flow (brief, x2)", "e": "Typed test@example.com, clicked Subscribe: form onsubmit is just 'return false' \u2014 popup stays fully visible (display flex, opacity 1), DOM and text unchanged, no confirmation, no dismissal. Zero feedback for valid submission."}]}}};
const chips = document.getElementById('chips');
Object.keys(DATA).forEach((t, i) => {
  const b = document.createElement('button');
  b.className = 'chip'; b.textContent = t; b.onclick = () => show(t);
  chips.appendChild(b);
});
function show(t) {
  const d = DATA[t];
  [...chips.children].forEach(c => c.classList.toggle('on', c.textContent === t));
  document.getElementById('brief').textContent = '“' + d.brief + '”';
  [d.vanilla, d.dflash].forEach((a, i) => {
    document.getElementById('f'+i).src = 'explore/' + a.file;
    document.getElementById('s'+i).textContent = 'total ' + a.total + ' / 100';
    document.getElementById('c'+i).textContent = a.code;
    document.getElementById('u'+i).textContent = a.func;
    document.getElementById('cb'+i).style.width = (a.code/40*100) + '%';
    document.getElementById('ub'+i).style.width = (a.func/60*100) + '%';
    document.getElementById('d'+i).textContent = a.feedback;
    const ul = document.getElementById('l'+i); ul.innerHTML = '';
    (a.deds || []).forEach(x => {
      const li = document.createElement('li'); li.textContent = x.c; if (x.e) li.title = x.e;
      ul.appendChild(li);
    });
    const pre = document.getElementById('p'+i), fr = document.getElementById('f'+i);
    pre.style.display = 'none'; pre.textContent = ''; fr.style.display = 'block';
    document.getElementById('t'+i).textContent = 'Code';
  });
  document.getElementById('w0').style.display = d.vanilla.total > d.dflash.total ? '' : 'none';
  document.getElementById('w1').style.display = d.dflash.total > d.vanilla.total ? '' : 'none';
}
async function tgl(i) {
  const pre = document.getElementById('p'+i), fr = document.getElementById('f'+i),
        bt = document.getElementById('t'+i);
  const showCode = pre.style.display === 'none';
  if (showCode && !pre.textContent) pre.textContent = await (await fetch(fr.src)).text();
  fr.style.display = showCode ? 'none' : 'block';
  pre.style.display = showCode ? 'block' : 'none';
  bt.textContent = showCode ? 'Render' : 'Code';
}
show('od673');
</script>
</body></html>