17:31Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)
Sep 2, 2026 · YouTube
17:37Tencent Hy4 Preview Tested: Is It Really Better Than Kimi K3 and GLM 5.3?
Aug 28, 2026 · YouTube
23:58Qwen 3.8 Flash Tested: UI, Coding, Physics & more - compared to Opus 5, Sol Pro, Grok
Aug 27, 2026 · YouTube
Build a memory game — also called concentration or pairs — as one self-contained HTML page.
The theme is fascinating animals. You choose the eight animals and the art style.
The player must be able to see how many moves they have made and how many pairs are left.
When a pair is matched, show that animal's fact.
When the game is won, say so clearly.
Clicking a card is the main interaction.
You may add exactly one button: New game.
Do not add:
Choose 8 animals that are genuinely fascinating — something about each one is strange, extreme, or surprising.
For each animal, provide:
The facts must be true. They will be checked.
Do not use the eight most obvious zoo animals. Lion, tiger, elephant, giraffe, panda, penguin, dolphin and zebra are all forbidden.
You do not create the artwork yourself. You write the prompts, and an image model draws them afterwards.
The art is delivered as one PNG:
art/cards.png
The file is a 2048×2048 3×3 contact sheet:
The grid layout, numbering, and background are fixed. Your job is to specify what belongs in each cell.
The path art/cards.png must appear exactly once in your HTML.
You may slice it with CSS background positioning, a canvas, clipped elements, or another technique.
Because the PNG has a black background, make sure the artwork sits properly on your card design.
The game must be playable before art/cards.png exists.
If the image cannot be loaded, each face-up card must show a readable fallback — the animal's name, a drawn shape, or a styled placeholder. Blank cards are not acceptable, because a memory game with blank faces cannot be played at all.
You may request one additional image, such as a table surface or background.
It must use the form art/<id>.png and it must be optional decoration — the page must look finished without it.
The page must support one URL mode.
#demoDeal a board where 7 of the 8 pairs are already matched and only one pair is left to find.
This exists so the win can be filmed without playing a whole game.
It must be a real board state that the normal game logic plays out — not a fake animation.
The game must be a single HTML file.
It must:
art/ filesDo not use:
localStoragesessionStorageindexedDBThe page must have no scrollbars at any window size. The board should scale to fit whatever space it is given.
Sound is optional. If you add any, generate it with the Web Audio API — no audio files.
Your response must contain exactly these four sections.
One line: what the game is called and what it looks like.
Provide exactly one fenced html code block containing the complete HTML page and nothing else.
Provide exactly one fenced json code block using this structure:
{
"game": { "name": "TURN TWO CARDS" },
"sheet": {
"style": "One paragraph, appended to every cell prompt below: medium, palette, lighting, line quality. This is what makes nine separate images look like one deck.",
"cells": [
{
"cell": 0,
"id": "axolotl",
"name": "Axolotl",
"role": "animal",
"prompt": "What to draw in this cell. One animal.",
"fact": "It regrows lost limbs, and even parts of its brain, without scarring."
},
{ "cell": 8, "id": "back", "name": "Card back", "role": "back", "prompt": "The pattern on the back of every card." }
]
},
"extras": [{ "id": "table", "aspect": "16:9", "prompt": "..." }]
}
Rules:
cells contains exactly 9 entries.cell values are 0–8 with no gaps or duplicates."role": "animal" and a fact."role": "back" and no fact.id is a single lowercase token and is unique.fact is 120 characters or fewer.extras may contain at most one entry, or be left out.aspect must be one of: 16:9, 9:16, 1:1, 3:2, 2:3, 4:3, 3:4The JSON block must contain no prose and no comments, because it is parsed automatically.
Four bullets:
art/cards.png is unavailable.Turn Two Cards — a 4×4 memory match of eight extraordinary animals, rendered as a flat nocturne deck on a lamplit wooden table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Turn Two Cards</title>
<style>
:root{
--bg:#0d1117; --ink:#e9f1f7; --dim:#8ea3b5; --accent:#ffd166; --line:#2b3a4a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
background:var(--bg) url('art/table.png') center/cover no-repeat;
color:var(--ink);
font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
display:flex;flex-direction:column;
user-select:none;-webkit-user-select:none;
}
header{display:flex;align-items:center;gap:1em;flex-wrap:wrap;padding:.7em 1.1em .3em}
h1{font-size:clamp(.95rem,2.4vw,1.35rem);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
h1 small{display:block;font-size:.55em;letter-spacing:.3em;color:var(--dim);font-weight:400}
.stats{display:flex;gap:1.4em;font-size:clamp(.75rem,1.9vw,.95rem);color:var(--dim)}
.stats b{color:var(--ink);font-variant-numeric:tabular-nums}
#newgame{
margin-left:auto;background:transparent;color:var(--accent);
border:1px solid var(--accent);border-radius:999px;
padding:.45em 1.1em;font:inherit;font-size:clamp(.75rem,1.9vw,.95rem);
letter-spacing:.08em;cursor:pointer;transition:background .2s,color .2s;
}
#newgame:hover{background:var(--accent);color:#141414}
#stage{flex:1;min-height:0;position:relative;display:grid;place-items:center;padding:.6em}
#board{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:clamp(5px,1.1vw,12px)}
.card{position:relative;background:none;border:0;cursor:pointer;perspective:700px}
.card .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,.1,.2,1)}
.card.up .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:clamp(6px,1.2vw,12px);overflow:hidden;background:#000}
.face.back{border:1px solid var(--line);background-image:var(--art,none);background-size:300% 300%;background-position:100% 100%}
body.no-art .face.back{background-image:repeating-linear-gradient(45deg,#16202b 0 10px,#101821 10px 20px)}
.face.front{transform:rotateY(180deg);border:1px solid var(--line);background-image:var(--art,none);background-size:300% 300%;display:grid;place-items:center}
.card.matched .face.front{border-color:var(--accent);box-shadow:0 0 14px rgba(255,209,102,.45)}
.fname{display:none;flex-direction:column;align-items:center;gap:.3em;padding:.4em;text-align:center}
.fname i{width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,hsl(var(--h) 70% 65%),hsl(var(--h) 70% 30%));border:2px solid hsl(var(--h) 70% 75%)}
.fname span{font-size:clamp(.55rem,1.6vw,.85rem);letter-spacing:.05em;color:var(--ink)}
body.no-art .fname{display:flex}
#factbar{padding:.4em 1.1em .8em;text-align:center;font-size:clamp(.75rem,2vw,1rem);color:var(--dim);min-height:2.4em}
#factbar b{color:var(--accent)}
#win{position:absolute;inset:0;display:none;place-items:center;background:rgba(8,10,14,.72);pointer-events:none}
#win.show{display:grid}
#win div{text-align:center;padding:1em}
#win h2{font-size:clamp(1.4rem,5vw,2.6rem);letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
#win p{margin-top:.5em;font-size:clamp(.9rem,2.5vw,1.2rem);color:var(--ink)}
</style>
</head>
<body class="no-art">
<header>
<h1>Turn Two Cards<small>fascinating animals</small></h1>
<div class="stats">
<span>Moves <b id="moves">0</b></span>
<span>Pairs left <b id="pairs">8</b></span>
</div>
<button id="newgame" type="button">New game</button>
</header>
<div id="stage">
<div id="board" aria-label="memory board"></div>
<div id="win"><div><h2>You win</h2><p id="wintext"></p></div></div>
</div>
<footer id="factbar"><span id="fact">Flip two cards and find the matching pairs.</span></footer>
<script>
const ANIMALS=[
{id:'axolotl',name:'Axolotl',hue:335,fact:'It regrows lost limbs, and even parts of its brain, without scarring.'},
{id:'shrimp',name:'Mantis Shrimp',hue:15,fact:'Its punch is so fast it boils the water, creating bubbles that flash light.'},
{id:'platypus',name:'Platypus',hue:28,fact:"The male's hind legs carry venomous spurs — one of only five venomous mammals."},
{id:'tardigrade',name:'Tardigrade',hue:150,fact:'It can survive the vacuum of space, temperatures near absolute zero, and extreme radiation.'},
{id:'cuttlefish',name:'Cuttlefish',hue:190,fact:'It has three hearts, blue blood, and can change skin color in a tenth of a second.'},
{id:'molerat',name:'Naked Mole-Rat',hue:350,fact:'It is virtually immune to cancer and does not feel pain when injected with acid.'},
{id:'jelly',name:'Immortal Jellyfish',hue:265,fact:'When injured or old, it reverts to a polyp and starts life over — biologically immortal.'},
{id:'eel',name:'Electric Eel',hue:55,fact:'It can discharge up to 860 volts — enough to stun a horse.'}
];
const ART='art/cards.png';
document.documentElement.style.setProperty('--art',"url('"+ART+"')");
const probe=new Image();
probe.onload=()=>document.body.classList.remove('no-art');
probe.src=ART;
const board=document.getElementById('board'),
movesEl=document.getElementById('moves'),
pairsEl=document.getElementById('pairs'),
factEl=document.getElementById('fact'),
winEl=document.getElementById('win'),
winText=document.getElementById('wintext'),
stage=document.getElementById('stage');
let S={first:null,lock:false,moves:0,matched:0};
function shuffle(a){for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];}return a;}
function makeCard(cell){
const a=ANIMALS[cell];
const b=document.createElement('button');
b.type='button';
b.className='card';
b.dataset.cell=cell;
b.setAttribute('aria-label','card');
const col=cell%3,row=Math.floor(cell/3);
b.innerHTML='<div class="inner"><div class="face back"></div><div class="face front" style="background-position:'+(col*50)+'% '+(row*50)+'%"><span class="fname" style="--h:'+a.hue+'"><i></i><span>'+a.name+'</span></span></div></div>';
b.addEventListener('click',()=>flip(b));
return b;
}
function deal(demo){
S={first:null,lock:false,moves:0,matched:0};
winEl.classList.remove('show');
factEl.textContent='Flip two cards and find the matching pairs.';
const cells=shuffle(ANIMALS.flatMap((_,i)=>[i,i]));
board.innerHTML='';
const cards=cells.map(c=>{const el=makeCard(c);board.appendChild(el);return el;});
if(demo){
const leave=Math.floor(Math.random()*8);
cards.forEach(el=>{
if(+el.dataset.cell!==leave){el.classList.add('up','matched');S.matched++;}
});
factEl.innerHTML='<b>Demo board</b> — one pair left to find.';
}
update();
}
function update(){
movesEl.textContent=S.moves;
pairsEl.textContent=8-S.matched;
}
function flip(card){
if(S.lock||card.classList.contains('up'))return;
card.classList.add('up');
tone(520,.06);
if(!S.first){S.first=card;return;}
S.moves++;
const a=S.first,b=card;
if(a.dataset.cell===b.dataset.cell){
a.classList.add('matched');b.classList.add('matched');
S.matched++;S.first=null;
const an=ANIMALS[+b.dataset.cell];
factEl.innerHTML='<b>'+an.name+'</b> — '+an.fact;
tone(660,.09);setTimeout(()=>tone(880,.12),90);
if(S.matched===8){
winText.textContent='All eight pairs found in '+S.moves+' moves.';
winEl.classList.add('show');
tone(523,.1);setTimeout(()=>tone(659,.1),120);setTimeout(()=>tone(784,.2),240);
}
}else{
S.lock=true;
setTimeout(()=>{a.classList.remove('up');b.classList.remove('up');S.lock=false;S.first=null;},900);
}
update();
}
document.getElementById('newgame').addEventListener('click',()=>deal(false));
let AC=null;
function tone(f,d){
try{
AC=AC||new (window.AudioContext||window.webkitAudioContext)();
const o=AC.createOscillator(),g=AC.createGain();
o.type='sine';o.frequency.value=f;
g.gain.setValueAtTime(.12,AC.currentTime);
g.gain.exponentialRampToValueAtTime(.001,AC.currentTime+d);
o.connect(g).connect(AC.destination);
o.start();o.stop(AC.currentTime+d);
}catch(e){}
}
function fit(){
const r=stage.getBoundingClientRect();
const w=Math.min(r.width,r.height*3/4);
board.style.width=w+'px';
board.style.height=(w*4/3)+'px';
}
window.addEventListener('resize',fit);
deal(location.hash==='#demo');
fit();
</script>
</body>
</html>
{
"game": { "name": "TURN TWO CARDS" },
"sheet": {
"style": "Flat vector illustration in a warm nocturne palette of deep teal, coral, amber, and cream on a flat black background; soft rim lighting, clean bold outlines, minimal flat shading, one subject centered in each cell at the same scale, no text or borders.",
"cells": [
{ "cell": 0, "id": "axolotl", "name": "Axolotl", "role": "animal", "prompt": "A smiling pink axolotl with feathery external gills, curled in a gentle S-shape, front view.", "fact": "It regrows lost limbs, and even parts of its brain, without scarring." },
{ "cell": 1, "id": "shrimp", "name": "Mantis Shrimp", "role": "animal", "prompt": "A peacock mantis shrimp in side profile with a raised raptorial club, vivid blue and orange body bands.", "fact": "Its punch is so fast it boils the water, creating bubbles that flash light." },
{ "cell": 2, "id": "platypus", "name": "Platypus", "role": "animal", "prompt": "A platypus swimming in side profile, flat bill, webbed hind foot, dark fur with a lighter belly.", "fact": "The male's hind legs carry venomous spurs — one of only five venomous mammals." },
{ "cell": 3, "id": "tardigrade", "name": "Tardigrade", "role": "animal", "prompt": "A magnified tardigrade, plump segmented body with eight stubby clawed legs, top-down view.", "fact": "It can survive the vacuum of space, temperatures near absolute zero, and extreme radiation." },
{ "cell": 4, "id": "cuttlefish", "name": "Cuttlefish", "role": "animal", "prompt": "A cuttlefish facing forward with rippling chromatophore patterns across its skin and tentacles spread.", "fact": "It has three hearts, blue blood, and can change skin color in a tenth of a second." },
{ "cell": 5, "id": "molerat", "name": "Naked Mole-Rat", "role": "animal", "prompt": "A naked mole-rat in side profile, wrinkled pink skin, whiskers, and two large front incisors.", "fact": "It is virtually immune to cancer and does not feel pain when injected with acid." },
{ "cell": 6, "id": "jelly", "name": "Immortal Jellyfish", "role": "animal", "prompt": "A translucent jellyfish bell with four horseshoe-shaped rings inside, short trailing tentacles, glowing softly.", "fact": "When injured or old, it reverts to a polyp and starts life over — biologically immortal." },
{ "cell": 7, "id": "eel", "name": "Electric Eel", "role": "animal", "prompt": "An electric eel coiled in a loose spiral, yellow-blue arcs of electricity crackling along its body.", "fact": "It can discharge up to 860 volts — enough to stun a horse." },
{ "cell": 8, "id": "back", "name": "Card back", "role": "back", "prompt": "A symmetrical ornamental card-back pattern: a lattice of small animal silhouettes — fish, bird, beetle, leaf — in muted gold and teal, with a centered medallion." }
]
},
"extras": [ { "id": "table", "aspect": "16:9", "prompt": "A dark wooden table surface seen from directly above, warm amber lamplight from the upper left, subtle wood grain, deep soft shadows at the edges, flat photographic style." } ]
}