Buckets:
| # Code Output Preview | |
| Source: `D:\mythos-coder-data\data\train\mythos_sft_messages_clean.jsonl` | |
| Matched examples: 721 (showing up to 30) | |
| ## Example 1 — PASS | |
| **User prompt:** Create a complete modal dialog demo (HTML/CSS/JS) for variant 3. User must get full code files. [50projects50days-complete_file_build-003] | |
| - `<!DOCTYPE html>`: True | |
| - `<style>`: False | |
| - `<script>`: True | |
| - classList.toggle open: False | |
| - external styles.css/app.js: True | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| File: index.html | |
| ```html | |
| <!DOCTYPE html><html><body><button id="openModal">Open</button><div id="modalOverlay" class="modal"><div class="modal-card"><button id="modalClose">×</button><p>Hello</p></div></div><script src="modal.js"></script></body></html> | |
| ``` | |
| File: modal.css | |
| ```css | |
| .modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); align-items:center; justify-content:center; } | |
| .modal.active { display:flex; } | |
| ``` | |
| File: modal.js | |
| ```javascript | |
| const overlay = document.getElementById('modalOverlay'); | |
| document.getElementById('openModal').onclick = () => overlay.classList.add('active'); | |
| document.getElementById('modalClose').onclick = () => overlay.classList.remove('active'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 2 — PASS | |
| **User prompt:** Create a complete modal dialog demo (HTML/CSS/JS) for variant 7. User must get full code files. [50projects50days-complete_file_build-007] | |
| - `<!DOCTYPE html>`: True | |
| - `<style>`: False | |
| - `<script>`: True | |
| - classList.toggle open: False | |
| - external styles.css/app.js: True | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| File: index.html | |
| ```html | |
| <!DOCTYPE html><html><body><button id="openModal">Open</button><div id="modalOverlay" class="modal"><div class="modal-card"><button id="modalClose">×</button><p>Hello</p></div></div><script src="modal.js"></script></body></html> | |
| ``` | |
| File: modal.css | |
| ```css | |
| .modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); align-items:center; justify-content:center; } | |
| .modal.active { display:flex; } | |
| ``` | |
| File: modal.js | |
| ```javascript | |
| const overlay = document.getElementById('modalOverlay'); | |
| document.getElementById('openModal').onclick = () => overlay.classList.add('active'); | |
| document.getElementById('modalClose').onclick = () => overlay.classList.remove('active'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 3 — PASS | |
| **User prompt:** Create a complete modal dialog demo (HTML/CSS/JS) for variant 11. User must get full code files. [50projects50days-complete_file_build-011] | |
| - `<!DOCTYPE html>`: True | |
| - `<style>`: False | |
| - `<script>`: True | |
| - classList.toggle open: False | |
| - external styles.css/app.js: True | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| File: index.html | |
| ```html | |
| <!DOCTYPE html><html><body><button id="openModal">Open</button><div id="modalOverlay" class="modal"><div class="modal-card"><button id="modalClose">×</button><p>Hello</p></div></div><script src="modal.js"></script></body></html> | |
| ``` | |
| File: modal.css | |
| ```css | |
| .modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); align-items:center; justify-content:center; } | |
| .modal.active { display:flex; } | |
| ``` | |
| File: modal.js | |
| ```javascript | |
| const overlay = document.getElementById('modalOverlay'); | |
| document.getElementById('openModal').onclick = () => overlay.classList.add('active'); | |
| document.getElementById('modalClose').onclick = () => overlay.classList.remove('active'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 4 — PASS | |
| **User prompt:** Create a complete modal dialog demo (HTML/CSS/JS) for variant 15. User must get full code files. [50projects50days-complete_file_build-015] | |
| - `<!DOCTYPE html>`: True | |
| - `<style>`: False | |
| - `<script>`: True | |
| - classList.toggle open: False | |
| - external styles.css/app.js: True | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| File: index.html | |
| ```html | |
| <!DOCTYPE html><html><body><button id="openModal">Open</button><div id="modalOverlay" class="modal"><div class="modal-card"><button id="modalClose">×</button><p>Hello</p></div></div><script src="modal.js"></script></body></html> | |
| ``` | |
| File: modal.css | |
| ```css | |
| .modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); align-items:center; justify-content:center; } | |
| .modal.active { display:flex; } | |
| ``` | |
| File: modal.js | |
| ```javascript | |
| const overlay = document.getElementById('modalOverlay'); | |
| document.getElementById('openModal').onclick = () => overlay.classList.add('active'); | |
| document.getElementById('modalClose').onclick = () => overlay.classList.remove('active'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 5 — PASS | |
| **User prompt:** Create a complete modal dialog demo (HTML/CSS/JS) for variant 19. User must get full code files. [50projects50days-complete_file_build-019] | |
| - `<!DOCTYPE html>`: True | |
| - `<style>`: False | |
| - `<script>`: True | |
| - classList.toggle open: False | |
| - external styles.css/app.js: True | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| File: index.html | |
| ```html | |
| <!DOCTYPE html><html><body><button id="openModal">Open</button><div id="modalOverlay" class="modal"><div class="modal-card"><button id="modalClose">×</button><p>Hello</p></div></div><script src="modal.js"></script></body></html> | |
| ``` | |
| File: modal.css | |
| ```css | |
| .modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); align-items:center; justify-content:center; } | |
| .modal.active { display:flex; } | |
| ``` | |
| File: modal.js | |
| ```javascript | |
| const overlay = document.getElementById('modalOverlay'); | |
| document.getElementById('openModal').onclick = () => overlay.classList.add('active'); | |
| document.getElementById('modalClose').onclick = () => overlay.classList.remove('active'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 6 — PASS | |
| **User prompt:** Create a complete modal dialog demo (HTML/CSS/JS) for variant 23. User must get full code files. [50projects50days-complete_file_build-023] | |
| - `<!DOCTYPE html>`: True | |
| - `<style>`: False | |
| - `<script>`: True | |
| - classList.toggle open: False | |
| - external styles.css/app.js: True | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| File: index.html | |
| ```html | |
| <!DOCTYPE html><html><body><button id="openModal">Open</button><div id="modalOverlay" class="modal"><div class="modal-card"><button id="modalClose">×</button><p>Hello</p></div></div><script src="modal.js"></script></body></html> | |
| ``` | |
| File: modal.css | |
| ```css | |
| .modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); align-items:center; justify-content:center; } | |
| .modal.active { display:flex; } | |
| ``` | |
| File: modal.js | |
| ```javascript | |
| const overlay = document.getElementById('modalOverlay'); | |
| document.getElementById('openModal').onclick = () => overlay.classList.add('active'); | |
| document.getElementById('modalClose').onclick = () => overlay.classList.remove('active'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 7 — PASS | |
| **User prompt:** Create a complete modal dialog demo (HTML/CSS/JS) for variant 27. User must get full code files. [50projects50days-complete_file_build-027] | |
| - `<!DOCTYPE html>`: True | |
| - `<style>`: False | |
| - `<script>`: True | |
| - classList.toggle open: False | |
| - external styles.css/app.js: True | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| File: index.html | |
| ```html | |
| <!DOCTYPE html><html><body><button id="openModal">Open</button><div id="modalOverlay" class="modal"><div class="modal-card"><button id="modalClose">×</button><p>Hello</p></div></div><script src="modal.js"></script></body></html> | |
| ``` | |
| File: modal.css | |
| ```css | |
| .modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); align-items:center; justify-content:center; } | |
| .modal.active { display:flex; } | |
| ``` | |
| File: modal.js | |
| ```javascript | |
| const overlay = document.getElementById('modalOverlay'); | |
| document.getElementById('openModal').onclick = () => overlay.classList.add('active'); | |
| document.getElementById('modalClose').onclick = () => overlay.classList.remove('active'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 8 — PASS | |
| **User prompt:** Fix mobile nav bug #31: CSS uses .nav-links.open but JS toggles .open on .hamburger. Show broken code and corrected code. [50projects50days-bug_fix-031] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: True | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| Broken (app.js): | |
| ```javascript | |
| document.querySelector('.hamburger').addEventListener('click', () => { | |
| document.querySelector('.hamburger').classList.toggle('open'); | |
| }); | |
| ``` | |
| Fixed (app.js): | |
| ```javascript | |
| const navLinks = document.querySelector('.nav-links'); | |
| document.querySelector('.hamburger').addEventListener('click', () => { | |
| navLinks.classList.toggle('open'); | |
| }); | |
| ``` | |
| CSS stays: | |
| ```css | |
| .nav-links.open { display: flex; } | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 9 — PASS | |
| **User prompt:** Fix canvas runner #34 where collision triggers before visual overlap. Provide corrected hitbox code. [50projects50days-bug_fix-034] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: False | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| Broken: | |
| ```javascript | |
| if (obs.x < player.x + 10) gameOver(); | |
| ``` | |
| Fixed: | |
| ```javascript | |
| const hit = obs.x < player.x + 18 && obs.x + obs.w > player.x && player.y + 18 > 130; | |
| if (hit) gameOver(); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 10 — PASS | |
| **User prompt:** Fix mobile nav bug #36: CSS uses .nav-links.open but JS toggles .open on .hamburger. Show broken code and corrected code. [50projects50days-bug_fix-036] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: True | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| Broken (app.js): | |
| ```javascript | |
| document.querySelector('.hamburger').addEventListener('click', () => { | |
| document.querySelector('.hamburger').classList.toggle('open'); | |
| }); | |
| ``` | |
| Fixed (app.js): | |
| ```javascript | |
| const navLinks = document.querySelector('.nav-links'); | |
| document.querySelector('.hamburger').addEventListener('click', () => { | |
| navLinks.classList.toggle('open'); | |
| }); | |
| ``` | |
| CSS stays: | |
| ```css | |
| .nav-links.open { display: flex; } | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 11 — PASS | |
| **User prompt:** Fix canvas runner #39 where collision triggers before visual overlap. Provide corrected hitbox code. [50projects50days-bug_fix-039] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: False | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| Broken: | |
| ```javascript | |
| if (obs.x < player.x + 10) gameOver(); | |
| ``` | |
| Fixed: | |
| ```javascript | |
| const hit = obs.x < player.x + 18 && obs.x + obs.w > player.x && player.y + 18 > 130; | |
| if (hit) gameOver(); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 12 — PASS | |
| **User prompt:** Fix mobile nav bug #41: CSS uses .nav-links.open but JS toggles .open on .hamburger. Show broken code and corrected code. [50projects50days-bug_fix-041] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: True | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| Broken (app.js): | |
| ```javascript | |
| document.querySelector('.hamburger').addEventListener('click', () => { | |
| document.querySelector('.hamburger').classList.toggle('open'); | |
| }); | |
| ``` | |
| Fixed (app.js): | |
| ```javascript | |
| const navLinks = document.querySelector('.nav-links'); | |
| document.querySelector('.hamburger').addEventListener('click', () => { | |
| navLinks.classList.toggle('open'); | |
| }); | |
| ``` | |
| CSS stays: | |
| ```css | |
| .nav-links.open { display: flex; } | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 13 — PASS | |
| **User prompt:** Fix canvas runner #44 where collision triggers before visual overlap. Provide corrected hitbox code. [50projects50days-bug_fix-044] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: False | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| Broken: | |
| ```javascript | |
| if (obs.x < player.x + 10) gameOver(); | |
| ``` | |
| Fixed: | |
| ```javascript | |
| const hit = obs.x < player.x + 18 && obs.x + obs.w > player.x && player.y + 18 > 130; | |
| if (hit) gameOver(); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 14 — PASS | |
| **User prompt:** Fix mobile nav bug #46: CSS uses .nav-links.open but JS toggles .open on .hamburger. Show broken code and corrected code. [50projects50days-bug_fix-046] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: True | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| Broken (app.js): | |
| ```javascript | |
| document.querySelector('.hamburger').addEventListener('click', () => { | |
| document.querySelector('.hamburger').classList.toggle('open'); | |
| }); | |
| ``` | |
| Fixed (app.js): | |
| ```javascript | |
| const navLinks = document.querySelector('.nav-links'); | |
| document.querySelector('.hamburger').addEventListener('click', () => { | |
| navLinks.classList.toggle('open'); | |
| }); | |
| ``` | |
| CSS stays: | |
| ```css | |
| .nav-links.open { display: flex; } | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 15 — PASS | |
| **User prompt:** Fix canvas runner #49 where collision triggers before visual overlap. Provide corrected hitbox code. [50projects50days-bug_fix-049] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: False | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| Broken: | |
| ```javascript | |
| if (obs.x < player.x + 10) gameOver(); | |
| ``` | |
| Fixed: | |
| ```javascript | |
| const hit = obs.x < player.x + 18 && obs.x + obs.w > player.x && player.y + 18 > 130; | |
| if (hit) gameOver(); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 16 — PASS | |
| **User prompt:** Write a browser test script (Playwright-style steps as JS comments + DOM checks) for 50projects50days mobile nav variant 66. Include executable check code. [50projects50days-browser_verification-066] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: False | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| ```javascript | |
| // Run in devtools at 375px width | |
| const btn = document.querySelector('.hamburger'); | |
| const nav = document.querySelector('.nav-links'); | |
| console.assert(!nav.classList.contains('open'), 'nav starts closed'); | |
| btn.click(); | |
| console.assert(nav.classList.contains('open'), 'nav opens after click'); | |
| btn.click(); | |
| console.assert(!nav.classList.contains('open'), 'nav closes on second click'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 17 — PASS | |
| **User prompt:** Write a browser test script (Playwright-style steps as JS comments + DOM checks) for 50projects50days mobile nav variant 67. Include executable check code. [50projects50days-browser_verification-067] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: False | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| ```javascript | |
| // Run in devtools at 375px width | |
| const btn = document.querySelector('.hamburger'); | |
| const nav = document.querySelector('.nav-links'); | |
| console.assert(!nav.classList.contains('open'), 'nav starts closed'); | |
| btn.click(); | |
| console.assert(nav.classList.contains('open'), 'nav opens after click'); | |
| btn.click(); | |
| console.assert(!nav.classList.contains('open'), 'nav closes on second click'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 18 — PASS | |
| **User prompt:** Write a browser test script (Playwright-style steps as JS comments + DOM checks) for 50projects50days mobile nav variant 68. Include executable check code. [50projects50days-browser_verification-068] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: False | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| ```javascript | |
| // Run in devtools at 375px width | |
| const btn = document.querySelector('.hamburger'); | |
| const nav = document.querySelector('.nav-links'); | |
| console.assert(!nav.classList.contains('open'), 'nav starts closed'); | |
| btn.click(); | |
| console.assert(nav.classList.contains('open'), 'nav opens after click'); | |
| btn.click(); | |
| console.assert(!nav.classList.contains('open'), 'nav closes on second click'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 19 — PASS | |
| **User prompt:** Write a browser test script (Playwright-style steps as JS comments + DOM checks) for 50projects50days mobile nav variant 69. Include executable check code. [50projects50days-browser_verification-069] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: False | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| ```javascript | |
| // Run in devtools at 375px width | |
| const btn = document.querySelector('.hamburger'); | |
| const nav = document.querySelector('.nav-links'); | |
| console.assert(!nav.classList.contains('open'), 'nav starts closed'); | |
| btn.click(); | |
| console.assert(nav.classList.contains('open'), 'nav opens after click'); | |
| btn.click(); | |
| console.assert(!nav.classList.contains('open'), 'nav closes on second click'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 20 — PASS | |
| **User prompt:** Write a browser test script (Playwright-style steps as JS comments + DOM checks) for 50projects50days mobile nav variant 70. Include executable check code. [50projects50days-browser_verification-070] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: False | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| ```javascript | |
| // Run in devtools at 375px width | |
| const btn = document.querySelector('.hamburger'); | |
| const nav = document.querySelector('.nav-links'); | |
| console.assert(!nav.classList.contains('open'), 'nav starts closed'); | |
| btn.click(); | |
| console.assert(nav.classList.contains('open'), 'nav opens after click'); | |
| btn.click(); | |
| console.assert(!nav.classList.contains('open'), 'nav closes on second click'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 21 — PASS | |
| **User prompt:** Write a browser test script (Playwright-style steps as JS comments + DOM checks) for 50projects50days mobile nav variant 71. Include executable check code. [50projects50days-browser_verification-071] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: False | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| ```javascript | |
| // Run in devtools at 375px width | |
| const btn = document.querySelector('.hamburger'); | |
| const nav = document.querySelector('.nav-links'); | |
| console.assert(!nav.classList.contains('open'), 'nav starts closed'); | |
| btn.click(); | |
| console.assert(nav.classList.contains('open'), 'nav opens after click'); | |
| btn.click(); | |
| console.assert(!nav.classList.contains('open'), 'nav closes on second click'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 22 — PASS | |
| **User prompt:** Write a browser test script (Playwright-style steps as JS comments + DOM checks) for 50projects50days mobile nav variant 72. Include executable check code. [50projects50days-browser_verification-072] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: False | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| ```javascript | |
| // Run in devtools at 375px width | |
| const btn = document.querySelector('.hamburger'); | |
| const nav = document.querySelector('.nav-links'); | |
| console.assert(!nav.classList.contains('open'), 'nav starts closed'); | |
| btn.click(); | |
| console.assert(nav.classList.contains('open'), 'nav opens after click'); | |
| btn.click(); | |
| console.assert(!nav.classList.contains('open'), 'nav closes on second click'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 23 — PASS | |
| **User prompt:** Write a browser test script (Playwright-style steps as JS comments + DOM checks) for 50projects50days mobile nav variant 73. Include executable check code. [50projects50days-browser_verification-073] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: False | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| ```javascript | |
| // Run in devtools at 375px width | |
| const btn = document.querySelector('.hamburger'); | |
| const nav = document.querySelector('.nav-links'); | |
| console.assert(!nav.classList.contains('open'), 'nav starts closed'); | |
| btn.click(); | |
| console.assert(nav.classList.contains('open'), 'nav opens after click'); | |
| btn.click(); | |
| console.assert(!nav.classList.contains('open'), 'nav closes on second click'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 24 — PASS | |
| **User prompt:** Write a browser test script (Playwright-style steps as JS comments + DOM checks) for 50projects50days mobile nav variant 74. Include executable check code. [50projects50days-browser_verification-074] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: False | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| ```javascript | |
| // Run in devtools at 375px width | |
| const btn = document.querySelector('.hamburger'); | |
| const nav = document.querySelector('.nav-links'); | |
| console.assert(!nav.classList.contains('open'), 'nav starts closed'); | |
| btn.click(); | |
| console.assert(nav.classList.contains('open'), 'nav opens after click'); | |
| btn.click(); | |
| console.assert(!nav.classList.contains('open'), 'nav closes on second click'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 25 — PASS | |
| **User prompt:** Write a browser test script (Playwright-style steps as JS comments + DOM checks) for 50projects50days mobile nav variant 75. Include executable check code. [50projects50days-browser_verification-075] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: False | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| ```javascript | |
| // Run in devtools at 375px width | |
| const btn = document.querySelector('.hamburger'); | |
| const nav = document.querySelector('.nav-links'); | |
| console.assert(!nav.classList.contains('open'), 'nav starts closed'); | |
| btn.click(); | |
| console.assert(nav.classList.contains('open'), 'nav opens after click'); | |
| btn.click(); | |
| console.assert(!nav.classList.contains('open'), 'nav closes on second click'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 26 — PASS | |
| **User prompt:** Fix selector mismatch #76: CSS expects .nav-links.open but JS toggles .open on .hamburger. Show exact JS change with code. [50projects50days-selector_precision-076] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: True | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| Wrong target: | |
| ```javascript | |
| document.querySelector('.hamburger').classList.toggle('open'); | |
| ``` | |
| Correct target: | |
| ```javascript | |
| document.querySelector('.nav-links').classList.toggle('open'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 27 — PASS | |
| **User prompt:** Fix selector mismatch #77: Modal CSS uses #modalOverlay.active but JS toggles .active on #openModal button. Show exact JS change with code. [50projects50days-selector_precision-077] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: True | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| Wrong target: | |
| ```javascript | |
| document.querySelector('#openModal').classList.toggle('open'); | |
| ``` | |
| Correct target: | |
| ```javascript | |
| document.querySelector('#modalOverlay').classList.toggle('open'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 28 — PASS | |
| **User prompt:** Fix selector mismatch #78: Form error styling expects .field-wrapper.invalid but JS adds .invalid to label. Show exact JS change with code. [50projects50days-selector_precision-078] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: True | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| Wrong target: | |
| ```javascript | |
| document.querySelector('label').classList.toggle('open'); | |
| ``` | |
| Correct target: | |
| ```javascript | |
| document.querySelector('.field-wrapper').classList.toggle('open'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 29 — PASS | |
| **User prompt:** Fix selector mismatch #79: Accordion panel visibility uses .accordion-panel.open on panel, not .accordion-header. Show exact JS change with code. [50projects50days-selector_precision-079] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: True | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| Wrong target: | |
| ```javascript | |
| document.querySelector('.accordion-header').classList.toggle('open'); | |
| ``` | |
| Correct target: | |
| ```javascript | |
| document.querySelector('.accordion-panel').classList.toggle('open'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Example 30 — PASS | |
| **User prompt:** Fix selector mismatch #80: Tab content uses .tab-panel.active on panel container, not on .tab-button. Show exact JS change with code. [50projects50days-selector_precision-080] | |
| - `<!DOCTYPE html>`: False | |
| - `<style>`: False | |
| - `<script>`: False | |
| - classList.toggle open: True | |
| - external styles.css/app.js: False | |
| - fails: none | |
| **Assistant (first 1600 chars):** | |
| ``` | |
| Here is the complete code: | |
| Wrong target: | |
| ```javascript | |
| document.querySelector('.tab-button').classList.toggle('open'); | |
| ``` | |
| Correct target: | |
| ```javascript | |
| document.querySelector('.tab-panel').classList.toggle('open'); | |
| ``` | |
| Verification: | |
| - The assistant response includes actual code when code is requested | |
| - The code targets the correct selector, file, function, or state variable | |
| - The response does not only give a plan | |
| - The verification checks the exact behavior changed | |
| ``` | |
| ## Summary | |
| - Previewed: 30 | |
| - Pass: 30 | |
| - Fail: 0 |
Xet Storage Details
- Size:
- 33 kB
- Xet hash:
- bc0b42e67be1570647eb3c03ba351e068bdd302e2d54dd5754fd67b989eecdc1
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.