Alexander Whitestone
0150eee0cf
Some checks failed
Architecture Lint / Linter Tests (pull_request) Successful in 23s
PR Checklist / pr-checklist (pull_request) Failing after 3m46s
Smoke Test / smoke (pull_request) Failing after 22s
Validate Config / YAML Lint (pull_request) Failing after 12s
Validate Config / JSON Validate (pull_request) Successful in 11s
Validate Config / Python Syntax & Import Check (pull_request) Failing after 1m4s
Validate Config / Shell Script Lint (pull_request) Failing after 48s
Validate Config / Cron Syntax Check (pull_request) Successful in 9s
Validate Config / Deploy Script Dry Run (pull_request) Successful in 10s
Validate Config / Playbook Schema Validation (pull_request) Successful in 22s
Architecture Lint / Lint Repository (pull_request) Has been cancelled
Validate Config / Python Test Suite (pull_request) Has been cancelled
1001 lines
391 KiB
JSON
1001 lines
391 KiB
JSON
{"domain": "three.js", "problem": "Create a basic Three.js scene with camera, renderer, and lighting", "solution": "import * as THREE from 'three';\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\nconst renderer = new THREE.WebGLRenderer();\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\nconst light = new THREE.DirectionalLight(0xffffff, 1);\nlight.position.set(5, 5, 5);\nscene.add(light);\nscene.add(new THREE.AmbientLight(0x404040));\ncamera.position.z = 5;\nfunction animate() {\n requestAnimationFrame(animate);\n renderer.render(scene, camera);\n}\nanimate();", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add orbit controls to a Three.js scene for camera interaction", "solution": "import { OrbitControls } from 'three/addons/controls/OrbitControls.js';\nconst controls = new OrbitControls(camera, renderer.domElement);\ncontrols.enableDamping = true;\ncontrols.dampingFactor = 0.05;\ncontrols.minDistance = 2;\ncontrols.maxDistance = 50;\ncontrols.update();\nfunction animate() {\n requestAnimationFrame(animate);\n controls.update();\n renderer.render(scene, camera);\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a textured sphere in Three.js", "solution": "const geometry = new THREE.SphereGeometry(1, 32, 32);\nconst texture = new THREE.TextureLoader().load('texture.jpg');\nconst material = new THREE.MeshStandardMaterial({ map: texture });\nconst sphere = new THREE.Mesh(geometry, material);\nscene.add(sphere);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add fog to a Three.js scene for depth effect", "solution": "scene.fog = new THREE.FogExp2(0x000000, 0.05); // exponential fog\n// or linear:\nscene.fog = new THREE.Fog(0x000000, 1, 100); // near, far", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a skybox in Three.js using a cubemap", "solution": "const loader = new THREE.CubeTextureLoader();\nconst texture = loader.load([\n 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'\n]);\nscene.background = texture;", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Implement raycasting for mouse picking in Three.js", "solution": "const raycaster = new THREE.Raycaster();\nconst mouse = new THREE.Vector2();\nwindow.addEventListener('click', (event) => {\n mouse.x = (event.clientX / window.innerWidth) * 2 - 1;\n mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children);\n if (intersects.length > 0) {\n intersects[0].object.material.color.set(0xff0000);\n }\n});", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create animated particles in Three.js using Points", "solution": "const particleCount = 1000;\nconst geometry = new THREE.BufferGeometry();\nconst positions = new Float32Array(particleCount * 3);\nfor (let i = 0; i < particleCount * 3; i++) {\n positions[i] = (Math.random() - 0.5) * 20;\n}\ngeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));\nconst material = new THREE.PointsMaterial({ size: 0.05, color: 0xffffff });\nconst particles = new THREE.Points(geometry, material);\nscene.add(particles);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Load a GLTF model in Three.js", "solution": "import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';\nconst loader = new GLTFLoader();\nloader.load('model.glb', (gltf) => {\n scene.add(gltf.scene);\n}, undefined, (error) => {\n console.error('Model load failed:', error);\n});", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Implement shadow mapping in Three.js", "solution": "renderer.shadowMap.enabled = true;\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap;\nlight.castShadow = true;\nlight.shadow.mapSize.width = 2048;\nlight.shadow.mapSize.height = 2048;\nmesh.castShadow = true;\nground.receiveShadow = true;", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a post-processing bloom effect in Three.js", "solution": "import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';\nimport { RenderPass } from 'three/addons/postprocessing/RenderPass.js';\nimport { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';\nconst composer = new EffectComposer(renderer);\ncomposer.addPass(new RenderPass(scene, camera));\nconst bloom = new UnrealBloomPass(new THREE.Vector2(w, h), 1.5, 0.4, 0.85);\ncomposer.addPass(bloom);\nfunction animate() { composer.render(); }", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a procedurally generated terrain in Three.js", "solution": "const geometry = new THREE.PlaneGeometry(100, 100, 256, 256);\nconst positions = geometry.attributes.position;\nfor (let i = 0; i < positions.count; i++) {\n const x = positions.getX(i);\n const z = positions.getZ(i);\n positions.setZ(i, Math.sin(x * 0.1) * Math.cos(z * 0.1) * 5);\n}\ngeometry.computeVertexNormals();\nconst terrain = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({ color: 0x4a7c59, flatShading: true }));\nterrain.rotation.x = -Math.PI / 2;\nscene.add(terrain);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Animate camera movement along a path in Three.js", "solution": "const curve = new THREE.CatmullRomCurve3([\n new THREE.Vector3(0, 0, 10),\n new THREE.Vector3(5, 2, 5),\n new THREE.Vector3(0, 4, 0),\n new THREE.Vector3(-5, 2, 5),\n]);\nlet t = 0;\nfunction animate() {\n t += 0.001;\n if (t > 1) t = 0;\n const point = curve.getPoint(t);\n camera.position.copy(point);\n camera.lookAt(0, 0, 0);\n renderer.render(scene, camera);\n}", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a responsive grid layout with CSS Grid", "solution": ".grid-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 16px;\n padding: 16px;\n}\n.grid-item {\n background: var(--panel);\n border-radius: 8px;\n padding: 16px;\n}", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement dark mode toggle with CSS variables", "solution": ":root { --bg: #ffffff; --text: #000000; }\n[data-theme='dark'] { --bg: #1a1a2e; --text: #c0c0d0; }\nbody { background: var(--bg); color: var(--text); transition: all 0.3s; }\nfunction toggleTheme() {\n const isDark = document.documentElement.dataset.theme === 'dark';\n document.documentElement.dataset.theme = isDark ? 'light' : 'dark';\n localStorage.setItem('theme', isDark ? 'light' : 'dark');\n}", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a toast notification system in vanilla JS", "solution": "function showToast(message, type = 'info', duration = 3000) {\n const toast = document.createElement('div');\n toast.className = `toast toast-${type}`;\n toast.textContent = message;\n document.getElementById('toast-container').appendChild(toast);\n requestAnimationFrame(() => toast.classList.add('visible'));\n setTimeout(() => {\n toast.classList.remove('visible');\n setTimeout(() => toast.remove(), 300);\n }, duration);\n}", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a debounced search input", "solution": "function debounce(fn, delay = 300) {\n let timer;\n return (...args) => {\n clearTimeout(timer);\n timer = setTimeout(() => fn(...args), delay);\n };\n}\nconst searchInput = document.getElementById('search');\nconst handleSearch = debounce((e) => {\n fetch(`/api/search?q=${encodeURIComponent(e.target.value)}`)\n .then(r => r.json())\n .then(renderResults);\n}, 300);\nsearchInput.addEventListener('input', handleSearch);", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a smooth scroll-to-section navigation", "solution": "document.querySelectorAll('a[href^=\"#\"]').forEach(link => {\n link.addEventListener('click', (e) => {\n e.preventDefault();\n const target = document.querySelector(link.getAttribute('href'));\n if (target) {\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n });\n});", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement intersection observer for lazy loading images", "solution": "const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target;\n img.src = img.dataset.src;\n img.classList.add('loaded');\n observer.unobserve(img);\n }\n });\n}, { rootMargin: '100px' });\ndocument.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS-only accordion", "solution": ".accordion-item { border-bottom: 1px solid #ddd; }\n.accordion-header {\n cursor: pointer;\n padding: 12px;\n display: flex;\n justify-content: space-between;\n}\n.accordion-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n}\n.accordion-item.open .accordion-content { max-height: 500px; }\n.accordion-item.open .arrow { transform: rotate(180deg); }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement drag and drop reordering of list items", "solution": "let dragItem = null;\nlist.addEventListener('dragstart', (e) => {\n dragItem = e.target.closest('li');\n dragItem.classList.add('dragging');\n});\nlist.addEventListener('dragover', (e) => {\n e.preventDefault();\n const afterElement = getDragAfterElement(list, e.clientY);\n if (afterElement) list.insertBefore(dragItem, afterElement);\n else list.appendChild(dragItem);\n});\nlist.addEventListener('dragend', () => {\n dragItem.classList.remove('dragging');\n dragItem = null;\n});", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a modal dialog with backdrop", "solution": "function openModal(content) {\n const overlay = document.createElement('div');\n overlay.className = 'modal-overlay';\n overlay.innerHTML = `<div class=\"modal\">${content}<button class=\"close-btn\">×</button></div>`;\n document.body.appendChild(overlay);\n overlay.querySelector('.close-btn').onclick = () => overlay.remove();\n overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };\n}\n.modal-overlay {\n position: fixed; inset: 0; background: rgba(0,0,0,0.5);\n display: flex; align-items: center; justify-content: center; z-index: 100;\n}", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a character counter for textareas", "solution": "const textarea = document.getElementById('input');\nconst counter = document.getElementById('counter');\nconst maxLen = 280;\ntextarea.addEventListener('input', () => {\n const remaining = maxLen - textarea.value.length;\n counter.textContent = `${remaining} characters remaining`;\n counter.classList.toggle('warning', remaining < 20);\n counter.classList.toggle('error', remaining < 0);\n});", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS loading spinner", "solution": "@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n.spinner {\n width: 40px; height: 40px;\n border: 4px solid #f3f3f3;\n border-top: 4px solid #3498db;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement local storage with expiry", "solution": "const storage = {\n set(key, value, ttlMinutes = 60) {\n const item = { value, expires: Date.now() + ttlMinutes * 60000 };\n localStorage.setItem(key, JSON.stringify(item));\n },\n get(key) {\n const item = JSON.parse(localStorage.getItem(key) || 'null');\n if (!item) return null;\n if (Date.now() > item.expires) { localStorage.removeItem(key); return null; }\n return item.value;\n }\n};", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a responsive navbar with hamburger menu", "solution": "<nav class=\"navbar\">\n <div class=\"logo\">Brand</div>\n <button class=\"hamburger\" aria-label=\"Menu\" onclick=\"this.classList.toggle('active')\">☰</button>\n <ul class=\"nav-links\">\n <li><a href=\"#\">Home</a></li>\n <li><a href=\"#\">About</a></li>\n </ul>\n</nav>\n@media (max-width: 768px) {\n .nav-links { display: none; flex-direction: column; }\n .hamburger.active + .nav-links { display: flex; }\n}", "language": "javascript"}
|
||
{"domain": "playground-ui", "problem": "Create a code editor with syntax highlighting using contenteditable", "solution": "const editor = document.getElementById('editor');\neditor.setAttribute('contenteditable', 'true');\neditor.setAttribute('spellcheck', 'false');\neditor.addEventListener('input', () => {\n const code = editor.textContent;\n editor.innerHTML = highlight(code);\n placeCaretAtEnd(editor);\n});\nfunction highlight(code) {\n return code.replace(/\\b(function|const|let|var|return)\\b/g, '<span class=\"kw\">$1</span>')\n .replace(/(['\"])(.*?)\\1/g, '<span class=\"str\">$1$2$1</span>');\n}", "language": "javascript"}
|
||
{"domain": "playground-ui", "problem": "Implement a split-pane resizable layout", "solution": "const container = document.querySelector('.split-container');\nconst divider = document.querySelector('.divider');\nlet isResizing = false;\ndivider.addEventListener('mousedown', () => isResizing = true);\ndocument.addEventListener('mousemove', (e) => {\n if (!isResizing) return;\n const pct = (e.clientX / container.offsetWidth) * 100;\n container.style.gridTemplateColumns = `${pct}% 4px ${100 - pct}%`;\n});\ndocument.addEventListener('mouseup', () => isResizing = false);", "language": "javascript"}
|
||
{"domain": "playground-ui", "problem": "Create a terminal-style output panel", "solution": "const terminal = document.getElementById('terminal');\nfunction log(msg, type = 'info') {\n const line = document.createElement('div');\n line.className = `term-line term-${type}`;\n line.textContent = `> ${msg}`;\n terminal.appendChild(line);\n terminal.scrollTop = terminal.scrollHeight;\n}\nfunction clear() { terminal.innerHTML = ''; }", "language": "javascript"}
|
||
{"domain": "playground-ui", "problem": "Implement auto-complete dropdown for input field", "solution": "const input = document.getElementById('search');\nconst dropdown = document.getElementById('suggestions');\nconst items = ['apple', 'application', 'apply', 'banana', 'band'];\ninput.addEventListener('input', () => {\n const query = input.value.toLowerCase();\n const matches = items.filter(i => i.startsWith(query)).slice(0, 5);\n dropdown.innerHTML = matches.map(m => `<div class=\"suggestion\">${m}</div>`).join('');\n dropdown.style.display = matches.length ? 'block' : 'none';\n});\ndropdown.addEventListener('click', (e) => {\n if (e.target.classList.contains('suggestion')) {\n input.value = e.target.textContent;\n dropdown.style.display = 'none';\n }\n});", "language": "javascript"}
|
||
{"domain": "playground-ui", "problem": "Create a tab panel system", "solution": "function initTabs(container) {\n const tabs = container.querySelectorAll('.tab');\n const panels = container.querySelectorAll('.panel');\n tabs.forEach(tab => {\n tab.addEventListener('click', () => {\n tabs.forEach(t => t.classList.remove('active'));\n panels.forEach(p => p.classList.remove('active'));\n tab.classList.add('active');\n container.querySelector(`#${tab.dataset.panel}`).classList.add('active');\n });\n });\n}", "language": "javascript"}
|
||
{"domain": "playground-ui", "problem": "Implement a progress bar with percentage", "solution": "function updateProgress(percent) {\n const bar = document.getElementById('progress-bar');\n const label = document.getElementById('progress-label');\n bar.style.width = `${Math.min(100, Math.max(0, percent))}%`;\n label.textContent = `${Math.round(percent)}%`;\n bar.classList.toggle('complete', percent >= 100);\n}", "language": "javascript"}
|
||
{"domain": "playground-ui", "problem": "Create a floating action button with menu", "solution": "<div class=\"fab-container\">\n <button class=\"fab\" onclick=\"this.parentElement.classList.toggle('open')\">+</button>\n <div class=\"fab-menu\">\n <button class=\"fab-item\" data-action=\"save\">💾</button>\n <button class=\"fab-item\" data-action=\"share\">📤</button>\n <button class=\"fab-item\" data-action=\"delete\">🗑</button>\n </div>\n</div>\n.fab-container.open .fab-menu { opacity: 1; transform: translateY(0); }\n.fab-menu { opacity: 0; transform: translateY(10px); transition: all 0.2s; }", "language": "javascript"}
|
||
{"domain": "playground-ui", "problem": "Implement keyboard shortcut handler", "solution": "const shortcuts = {};\nfunction registerShortcut(key, modifier, fn) {\n shortcuts[`${modifier || ''}-${key}`.toLowerCase()] = fn;\n}\ndocument.addEventListener('keydown', (e) => {\n const mod = [e.ctrlKey && 'ctrl', e.shiftKey && 'shift', e.altKey && 'alt'].filter(Boolean).join('+');\n const key = `${mod}-${e.key}`.toLowerCase();\n if (shortcuts[key]) { e.preventDefault(); shortcuts[key](); }\n});\nregisterShortcut('s', 'ctrl', saveDocument);", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a masonry image grid layout", "solution": ".masonry {\n column-count: 3;\n column-gap: 16px;\n}\n.masonry-item {\n break-inside: avoid;\n margin-bottom: 16px;\n}\n.masonry-item img {\n width: 100%;\n border-radius: 8px;\n display: block;\n}\n@media (max-width: 768px) { .masonry { column-count: 2; } }\n@media (max-width: 480px) { .masonry { column-count: 1; } }", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Implement a lightbox gallery with keyboard navigation", "solution": "function openLightbox(images, startIndex = 0) {\n let current = startIndex;\n const overlay = document.createElement('div');\n overlay.className = 'lightbox';\n function show(i) {\n current = ((i % images.length) + images.length) % images.length;\n overlay.innerHTML = `<img src=\"${images[current]}\" alt=\"Image ${current + 1}\">\n <button class=\"prev\">‹</button><button class=\"next\">›</button><button class=\"close\">×</button>`;\n overlay.querySelector('.prev').onclick = () => show(current - 1);\n overlay.querySelector('.next').onclick = () => show(current + 1);\n overlay.querySelector('.close').onclick = () => overlay.remove();\n }\n show(startIndex);\n document.body.appendChild(overlay);\n document.addEventListener('keydown', function handler(e) {\n if (e.key === 'ArrowLeft') show(current - 1);\n else if (e.key === 'ArrowRight') show(current + 1);\n else if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', handler); }\n });\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create an image carousel with auto-play", "solution": "class Carousel {\n constructor(container, interval = 3000) {\n this.slides = container.querySelectorAll('.slide');\n this.current = 0;\n this.interval = interval;\n this.timer = null;\n this.dots = container.querySelector('.dots');\n this.createDots();\n this.start();\n }\n show(i) {\n this.slides.forEach((s, idx) => s.classList.toggle('active', idx === i));\n this.dots.querySelectorAll('span').forEach((d, idx) => d.classList.toggle('active', idx === i));\n this.current = i;\n }\n next() { this.show((this.current + 1) % this.slides.length); }\n start() { this.timer = setInterval(() => this.next(), this.interval); }\n stop() { clearInterval(this.timer); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Implement lazy loading with blur-up placeholder", "solution": "<img src=\"placeholder-blur.jpg\" data-src=\"full-image.jpg\" class=\"lazy\" loading=\"lazy\">\n.lazy {\n filter: blur(10px);\n transition: filter 0.5s;\n}\n.lazy.loaded { filter: blur(0); }\nconst observer = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n e.target.src = e.target.dataset.src;\n e.target.onload = () => e.target.classList.add('loaded');\n observer.unobserve(e.target);\n }\n });\n});", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a filterable gallery with category buttons", "solution": "function initGallery(items) {\n const grid = document.getElementById('gallery');\n const filters = document.querySelectorAll('.filter-btn');\n function render(category = 'all') {\n grid.innerHTML = items\n .filter(i => category === 'all' || i.category === category)\n .map(i => `<div class=\"item\" data-category=\"${i.category}\"><img src=\"${i.src}\"></div>`)\n .join('');\n }\n filters.forEach(btn => {\n btn.addEventListener('click', () => {\n filters.forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n render(btn.dataset.filter);\n });\n });\n render();\n}", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a game loop with fixed timestep", "solution": "const TICK_RATE = 10; // 10 ticks per second\nconst TICK_MS = 1000 / TICK_RATE;\nlet lastTick = 0;\nfunction gameLoop(timestamp) {\n if (timestamp - lastTick >= TICK_MS) {\n lastTick = timestamp;\n update(); // game logic\n }\n render(); // always render for smooth visuals\n requestAnimationFrame(gameLoop);\n}\nrequestAnimationFrame(gameLoop);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Implement a particle system for visual effects", "solution": "class Particle {\n constructor(x, y, color) {\n this.x = x; this.y = y;\n this.vx = (Math.random() - 0.5) * 4;\n this.vy = (Math.random() - 0.5) * 4;\n this.life = 1.0;\n this.color = color;\n }\n update(dt) {\n this.x += this.vx; this.y += this.vy;\n this.life -= dt * 0.5;\n }\n draw(ctx) {\n ctx.globalAlpha = this.life;\n ctx.fillStyle = this.color;\n ctx.fillRect(this.x, this.y, 3, 3);\n ctx.globalAlpha = 1;\n }\n}", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a collision detection system for rectangles", "solution": "function rectCollision(a, b) {\n return a.x < b.x + b.width &&\n a.x + a.width > b.x &&\n a.y < b.y + b.height &&\n a.y + a.height > b.y;\n}\nfunction circleCollision(a, b) {\n const dx = a.x - b.x;\n const dy = a.y - b.y;\n return Math.sqrt(dx * dx + dy * dy) < a.radius + b.radius;\n}", "language": "javascript"}
|
||
{"domain": "games", "problem": "Implement a simple input handler for games", "solution": "const keys = {};\ndocument.addEventListener('keydown', (e) => { keys[e.code] = true; });\ndocument.addEventListener('keyup', (e) => { keys[e.code] = false; });\nfunction getInput() {\n return {\n up: keys['ArrowUp'] || keys['KeyW'],\n down: keys['ArrowDown'] || keys['KeyS'],\n left: keys['ArrowLeft'] || keys['KeyA'],\n right: keys['ArrowRight'] || keys['KeyD'],\n action: keys['Space'] || keys['Enter'],\n };\n}", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a sprite animation system", "solution": "class Sprite {\n constructor(image, frameWidth, frameHeight) {\n this.image = image;\n this.frameWidth = frameWidth;\n this.frameHeight = frameHeight;\n this.currentFrame = 0;\n this.frameTimer = 0;\n this.frameDuration = 100; // ms per frame\n }\n update(dt) {\n this.frameTimer += dt;\n if (this.frameTimer >= this.frameDuration) {\n this.currentFrame = (this.currentFrame + 1) % this.totalFrames;\n this.frameTimer = 0;\n }\n }\n draw(ctx, x, y) {\n const sx = this.currentFrame * this.frameWidth;\n ctx.drawImage(this.image, sx, 0, this.frameWidth, this.frameHeight, x, y, this.frameWidth, this.frameHeight);\n }\n}", "language": "javascript"}
|
||
{"domain": "games", "problem": "Implement a camera that follows a player", "solution": "class Camera {\n constructor(viewportWidth, viewportHeight) {\n this.x = 0; this.y = 0;\n this.vw = viewportWidth; this.vh = viewportHeight;\n this.smoothing = 0.1;\n }\n follow(target) {\n const targetX = target.x - this.vw / 2;\n const targetY = target.y - this.vh / 2;\n this.x += (targetX - this.x) * this.smoothing;\n this.y += (targetY - this.y) * this.smoothing;\n }\n apply(ctx) { ctx.translate(-this.x, -this.y); }\n}", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a simple AI pathfinding with A*", "solution": "function astar(grid, start, end) {\n const open = [{ ...start, g: 0, h: heuristic(start, end), parent: null }];\n const closed = new Set();\n while (open.length) {\n open.sort((a, b) => (a.g + a.h) - (b.g + b.h));\n const current = open.shift();\n if (current.x === end.x && current.y === end.y) return reconstructPath(current);\n closed.add(`${current.x},${current.y}`);\n for (const neighbor of getNeighbors(grid, current)) {\n if (closed.has(`${neighbor.x},${neighbor.y}`)) continue;\n const g = current.g + 1;\n open.push({ ...neighbor, g, h: heuristic(neighbor, end), parent: current });\n }\n }\n return null;\n}", "language": "javascript"}
|
||
{"domain": "games", "problem": "Implement a save/load system for game state", "solution": "const GameState = {\n save(key, data) {\n localStorage.setItem(key, JSON.stringify({\n version: 1,\n timestamp: Date.now(),\n data\n }));\n },\n load(key) {\n const raw = localStorage.getItem(key);\n if (!raw) return null;\n const { version, data } = JSON.parse(raw);\n if (version !== 1) { console.warn('Save version mismatch'); return null; }\n return data;\n },\n delete(key) { localStorage.removeItem(key); }\n};", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 0)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 1)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 2)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 3)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 4)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 5)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 6)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 7)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 8)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 9)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 10)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 11)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 12)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 13)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 14)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 15)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 16)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 17)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 18)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 19)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 20)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 21)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 22)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 23)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 24)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 25)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 26)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 27)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 28)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 29)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 30)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 31)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 32)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 33)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 34)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 35)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 36)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 37)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 38)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 39)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 40)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 41)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 42)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 43)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 44)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 45)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 46)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 47)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 48)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 49)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 50)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 51)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 52)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 53)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 54)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 55)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 56)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 57)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 58)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 59)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 60)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 61)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 62)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 63)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 64)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 65)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 66)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 67)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 68)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 69)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 70)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 71)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 72)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 73)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 74)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 75)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 76)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 77)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 78)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 79)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 80)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 81)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 82)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 83)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 84)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 85)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 86)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 87)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 88)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 89)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 90)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 91)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 92)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 93)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 94)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 95)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 96)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 97)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 98)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 99)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 100)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 101)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 102)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 103)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 104)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 105)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 106)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 107)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 108)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 109)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 110)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 111)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 112)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 113)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 114)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 115)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 116)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 117)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 118)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 119)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 120)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 121)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 122)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 123)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 124)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 125)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 126)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 127)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 128)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 129)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 130)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 131)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 132)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 133)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 134)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 135)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 136)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 137)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 138)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 139)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 140)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 141)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 142)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 143)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 144)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 145)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 146)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 147)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 148)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 149)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 150)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 151)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 152)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 153)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 154)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 155)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 156)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 157)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 158)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 159)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 160)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 161)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 162)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 163)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 164)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 165)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 166)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 167)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 168)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 169)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 170)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 171)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 172)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 173)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 174)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 175)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 176)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 177)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 178)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 179)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 180)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 181)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 182)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 183)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 184)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 185)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 186)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 187)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 188)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 189)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 190)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 191)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 192)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 193)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 194)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 195)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 196)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 197)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 198)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 199)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 200)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 201)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 202)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 203)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 204)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 205)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 206)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 207)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 208)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 209)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 210)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 211)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 212)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 213)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 214)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 215)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 216)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 217)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 218)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 219)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 220)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 221)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 222)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 223)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 224)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 225)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 226)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 227)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 228)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 229)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 230)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 231)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 232)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 233)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 234)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 235)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 236)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 237)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 238)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 239)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 240)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 241)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 242)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 243)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 244)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 245)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 246)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 247)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 248)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 249)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 250)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 251)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 252)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 253)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 254)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 255)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 256)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 257)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 258)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 259)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 260)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 261)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 262)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 263)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 264)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 265)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 266)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 267)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 268)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 269)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 270)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 271)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 272)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 273)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 274)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 275)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 276)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 277)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 278)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 279)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 280)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 281)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 282)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 283)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 284)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 285)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 286)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 287)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 288)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 289)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 290)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 291)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 292)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 293)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 294)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 295)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 296)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 297)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 298)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 299)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 300)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 301)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 302)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 303)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 304)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 305)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 306)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 307)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 308)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 309)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 310)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 311)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 312)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 313)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 314)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 315)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 316)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 317)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 318)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 319)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 320)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 321)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 322)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 323)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 324)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 325)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 326)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 327)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 328)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 329)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 330)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 331)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 332)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 333)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 334)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 335)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 336)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 337)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 338)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 339)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 340)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 341)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 342)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 343)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 344)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 345)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 346)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 347)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 348)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 349)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 350)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 351)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 352)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 353)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 354)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 355)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 356)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 357)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 358)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 359)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 360)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 361)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 362)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 363)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 364)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 365)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 366)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 367)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 368)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 369)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 370)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 371)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 372)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 373)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 374)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 375)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 376)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 377)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 378)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 379)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 380)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 381)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 382)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 383)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 384)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 385)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 386)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 387)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 388)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 389)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 390)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 391)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 392)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 393)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 394)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 395)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 396)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 397)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 398)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 399)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 400)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 401)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 402)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 403)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 404)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 405)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 406)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 407)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 408)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 409)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 410)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 411)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 412)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 413)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 414)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 415)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 416)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 417)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 418)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 419)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 420)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 421)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 422)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 423)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 424)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 425)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 426)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 427)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 428)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 429)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 430)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 431)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 432)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 433)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 434)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 435)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 436)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 437)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 438)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 439)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 440)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 441)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 442)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 443)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 444)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 445)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 446)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 447)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 448)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 449)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 450)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 451)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 452)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 453)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 454)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 455)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 456)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 457)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 458)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 459)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 460)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 461)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 462)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 463)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 464)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 465)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 466)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 467)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 468)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 469)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 470)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 471)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 472)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 473)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 474)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 475)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 476)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 477)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 478)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 479)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 480)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 481)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 482)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 483)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 484)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 485)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 486)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 487)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 488)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 489)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 490)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 491)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 492)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 493)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 494)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 495)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 496)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 497)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 498)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 499)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 500)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 501)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 502)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 503)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 504)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 505)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 506)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 507)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 508)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 509)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 510)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 511)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 512)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 513)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 514)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 515)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 516)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 517)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 518)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 519)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 520)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 521)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 522)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 523)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 524)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 525)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 526)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 527)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 528)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 529)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 530)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 531)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 532)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 533)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 534)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 535)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 536)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 537)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 538)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 539)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 540)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 541)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 542)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 543)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 544)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 545)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 546)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 547)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 548)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 549)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 550)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 551)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 552)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 553)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 554)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 555)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 556)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 557)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 558)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 559)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 560)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 561)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 562)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 563)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 564)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 565)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 566)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 567)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 568)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 569)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 570)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 571)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 572)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 573)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 574)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 575)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 576)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 577)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 578)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 579)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 580)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 581)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 582)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 583)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 584)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 585)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 586)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 587)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 588)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 589)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 590)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 591)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 592)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 593)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 594)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 595)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 596)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 597)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 598)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 599)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 600)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 601)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 602)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 603)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 604)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 605)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 606)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 607)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 608)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 609)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 610)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 611)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 612)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 613)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 614)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 615)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 616)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 617)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 618)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 619)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 620)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 621)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 622)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 623)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 624)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 625)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 626)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 627)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 628)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 629)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 630)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 631)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 632)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 633)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 634)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 635)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 636)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 637)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 638)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 639)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 640)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 641)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 642)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 643)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 644)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 645)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 646)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 647)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 648)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 649)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 650)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 651)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 652)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 653)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 654)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 655)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 656)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 657)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 658)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 659)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 660)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 661)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 662)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 663)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 664)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 665)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 666)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 667)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 668)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 669)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 670)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 671)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 672)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 673)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 674)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 675)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 676)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 677)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 678)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 679)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 680)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 681)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 682)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 683)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 684)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 685)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 686)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 687)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 688)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 689)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 690)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 691)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 692)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 693)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 694)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 695)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 696)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 697)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 698)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 699)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 700)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 701)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 702)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 703)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 704)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 705)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 706)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 707)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 708)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 709)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 710)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 711)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 712)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 713)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 714)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 715)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 716)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 717)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 718)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 719)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 720)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 721)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 722)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 723)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 724)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 725)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 726)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 727)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 728)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 729)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 730)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 731)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 732)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 733)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 734)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 735)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 736)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 737)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 738)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 739)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 740)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 741)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 742)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 743)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 744)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 745)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 746)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 747)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 748)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 749)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 750)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 751)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 752)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 753)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 754)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 755)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 756)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 757)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 758)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 759)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 760)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 761)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 762)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 763)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 764)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 765)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 766)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 767)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 768)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 769)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 770)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 771)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 772)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 773)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 774)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 775)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 776)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 777)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 778)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 779)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 780)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 781)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 782)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 783)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 784)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 785)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 786)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 787)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 788)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 789)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 790)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 791)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 792)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 793)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 794)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 795)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 796)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 797)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 798)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 799)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 800)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 801)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 802)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 803)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 804)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 805)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 806)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 807)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 808)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 809)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 810)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 811)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 812)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 813)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 814)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 815)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 816)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 817)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 818)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 819)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 820)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 821)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 822)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 823)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 824)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 825)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 826)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 827)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 828)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 829)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 830)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 831)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 832)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 833)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 834)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 835)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 836)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 837)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 838)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 839)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 840)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 841)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 842)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 843)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 844)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 845)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 846)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 847)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 848)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 849)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 850)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 851)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 852)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 853)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 854)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 855)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 856)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 857)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 858)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 859)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 860)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 861)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 862)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 863)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 864)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 865)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 866)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 867)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 868)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 869)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 870)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 871)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 872)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 873)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 874)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 875)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 876)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 877)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 878)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 879)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 880)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 881)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 882)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 883)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 884)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 885)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 886)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 887)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 888)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 889)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 890)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 891)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 892)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 893)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 894)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 895)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 896)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 897)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 898)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 899)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 900)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 901)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 902)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 903)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 904)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 905)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 906)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 907)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 908)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 909)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 910)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 911)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 912)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 913)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 914)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 915)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 916)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 917)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 918)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 919)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 920)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 921)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 922)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 923)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 924)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 925)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 926)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 927)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 928)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 929)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 930)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 931)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 932)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 933)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 934)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 935)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 936)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 937)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 938)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 939)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 940)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 941)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 942)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 943)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 944)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 945)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 946)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 947)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Create a CSS tooltip on hover (variant 948)", "solution": ".tooltip { position: relative; }\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);\n background: #333; color: #fff; padding: 4px 8px; border-radius: 4px;\n font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s;\n pointer-events: none;\n}\n.tooltip:hover::after { opacity: 1; }", "language": "javascript"}
|
||
{"domain": "html-css-js", "problem": "Implement a copy-to-clipboard button (variant 949)", "solution": "async function copyToClipboard(text) {\n try {\n await navigator.clipboard.writeText(text);\n showToast('Copied!');\n } catch {\n const ta = document.createElement('textarea');\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand('copy');\n ta.remove();\n showToast('Copied!');\n }\n}", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Create a wireframe material (variant 950)", "solution": "const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x00ff00 });\nconst mesh = new THREE.Mesh(geometry, material);", "language": "javascript"}
|
||
{"domain": "three.js", "problem": "Add a grid helper to scene (variant 951)", "solution": "const grid = new THREE.GridHelper(20, 20, 0x444444, 0x222222);\nscene.add(grid);", "language": "javascript"}
|
||
{"domain": "games", "problem": "Create a cooldown timer for abilities (variant 952)", "solution": "class Cooldown {\n constructor(duration) { this.duration = duration; this.ready = true; this.timer = 0; }\n use() { if (!this.ready) return false; this.ready = false; this.timer = this.duration; return true; }\n update(dt) { if (!this.ready) { this.timer -= dt; if (this.timer <= 0) this.ready = true; } }\n get progress() { return this.ready ? 1 : 1 - (this.timer / this.duration); }\n}", "language": "javascript"}
|
||
{"domain": "gallery", "problem": "Create a thumbnail grid with hover zoom (variant 953)", "solution": ".thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }\n.thumb { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.2s; }\n.thumb:hover { transform: scale(1.5); z-index: 10; position: relative; }", "language": "javascript"}
|