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 is a minimalist 4×4 memory match of eight bizarre animals with facts revealed on each match.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Turn Two Cards</title>
<style>
:root{
--cards:url('art/cards.png');
--bg:#0b0b0c;
--card:#1a1a1d;
--text:#e8e8ea;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}
body{display:flex;align-items:center;justify-content:center}
.wrap{width:min(92vmin,92vh);display:flex;flex-direction:column;gap:1.2vmin;align-items:center}
header{display:flex;gap:2vmin;align-items:center;justify-content:space-between;width:100%}
h1{font-size:clamp(16px,3vmin,28px);margin:0;font-weight:600;letter-spacing:.02em}
.stats{font-size:clamp(12px,2vmin,16px);opacity:.9}
button{appearance:none;border:0;background:var(--card);color:var(--text);padding:.6em 1.1em;border-radius:.6em;font-size:clamp(12px,2vmin,16px);cursor:pointer}
button:active{transform:scale(.98)}
.board{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:1.2vmin;width:100%;aspect-ratio:1/1}
.card{position:relative;border-radius:1.2vmin;background:var(--card);overflow:hidden;cursor:pointer;transform-style:preserve-3d;transition:transform .25s}
.card .face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-repeat:no-repeat;background-position:center;background-size:300% 300%}
.card .back{background-image:var(--cards);background-position:-200% -200%}
.card .front{background-image:var(--cards)}
.card .label{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:.4em;font-size:clamp(10px,1.8vmin,14px);font-weight:600;pointer-events:none}
.no-art .card .label{display:flex}
.no-art .card .face{background:none!important}
.card.revealed{transform:rotateY(180deg)}
.card.matched{opacity:.6;cursor:default}
.fact{font-size:clamp(12px,2vmin,16px);min-height:2.2em;text-align:center;opacity:.9}
.win{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.7);font-size:clamp(20px,5vmin,40px);font-weight:700}
.win.show{display:flex}
#sprite{position:absolute;width:1px;height:1px;overflow:hidden}
</style>
</head>
<body>
<div id="sprite"></div>
<div class="wrap">
<header>
<h1>Turn Two Cards</h1>
<div class="stats"><span id="moves">Moves: 0</span> · <span id="pairs">Pairs left: 8</span></div>
</header>
<div class="board" id="board"></div>
<div class="fact" id="fact"></div>
<button id="new">New game</button>
<div class="win" id="win">You matched all pairs</div>
</div>
<script>
const animals=[
{id:'axolotl',name:'Axolotl',fact:'It regrows lost limbs, and even parts of its brain, without scarring.',cell:0},
{id:'tardigrade',name:'Tardigrade',fact:'Can survive extreme radiation, vacuum, and temperatures from -272°C to 150°C.',cell:1},
{id:'mantis-shrimp',name:'Mantis Shrimp',fact:'Packs a punch with claws that strike faster than a .22 caliber bullet.',cell:2},
{id:'vampire-squid',name:'Vampire Squid',fact:'Not a squid, and not a vampire; it glows to confuse predators in the deep.',cell:3},
{id:'pangolin',name:'Pangolin',fact:'Covered in keratin scales and rolls into a ball when threatened.',cell:4},
{id:'okapi',name:'Okapi',fact:'Forest giraffe relative with zebra-striped hindquarters hidden in the jungle.',cell:5},
{id:'aye-aye',name:'Aye-aye',fact:'Uses a bony finger to fish grubs from wood, the only primate to do so.',cell:6},
{id:'glass-frog',name:'Glass Frog',fact:'Translucent belly lets you see its heart and liver beating inside.',cell:7}
];
const boardEl=document.getElementById('board');
const movesEl=document.getElementById('moves');
const pairsEl=document.getElementById('pairs');
const factEl=document.getElementById('fact');
const winEl=document.getElementById('win');
const newBtn=document.getElementById('new');
let cards=[],flipped=[],moves=0,matchedPairs=0,lock=false;
function cellPos(cell){
const c=cell%3, r=Math.floor(cell/3);
return `-${c*100}% -${r*100}%`;
}
function makeDeck(){
const deck=[];
animals.forEach(a=>{
deck.push({animal:a,matched:false,revealed:false});
deck.push({animal:a,matched:false,revealed:false});
});
for(let i=deck.length-1;i>0;i--){
const j=Math.floor(Math.random()*(i+1));
[deck[i],deck[j]]=[deck[j],deck[i]];
}
return deck;
}
function render(){
boardEl.innerHTML='';
cards.forEach((c,i)=>{
const el=document.createElement('div');
el.className='card';
el.dataset.i=i;
const back=document.createElement('div');
back.className='face back';
const front=document.createElement('div');
front.className='face front';
front.style.backgroundPosition=cellPos(c.animal.cell);
const label=document.createElement('div');
label.className='label';
label.textContent=c.animal.name;
front.appendChild(label);
el.appendChild(back);
el.appendChild(front);
if(c.revealed||c.matched) el.classList.add('revealed');
if(c.matched) el.classList.add('matched');
el.addEventListener('click',()=>onClick(i,el));
boardEl.appendChild(el);
});
}
function onClick(i,el){
if(lock) return;
const c=cards[i];
if(c.matched||c.revealed) return;
c.revealed=true;
el.classList.add('revealed');
flipped.push({i,el,c});
if(flipped.length===2){
moves++;
movesEl.textContent='Moves: '+moves;
lock=true;
const [a,b]=flipped;
if(a.c.animal.id===b.c.animal.id){
a.c.matched=b.c.matched=true;
matchedPairs++;
pairsEl.textContent='Pairs left: '+(8-matchedPairs);
factEl.textContent=a.c.animal.fact;
setTimeout(()=>{flipped=[];lock=false;if(matchedPairs===8)win();},400);
}else{
setTimeout(()=>{
a.c.revealed=b.c.revealed=false;
a.el.classList.remove('revealed');
b.el.classList.remove('revealed');
flipped=[];lock=false;factEl.textContent='';
},900);
}
}
}
function win(){
winEl.classList.add('show');
}
function newGame(){
winEl.classList.remove('show');
factEl.textContent='';
moves=0;matchedPairs=0;
movesEl.textContent='Moves: 0';
pairsEl.textContent='Pairs left: 8';
cards=makeDeck();
render();
}
function demoSetup(){
cards=makeDeck();
const first14=cards.slice(0,14);
first14.forEach(c=>{c.matched=true;c.revealed=true;});
const remaining=cards.slice(14);
const a=animals[7];
remaining[0].animal=a;remaining[1].animal=a;
remaining[0].matched=false;remaining[1].matched=false;
remaining[0].revealed=false;remaining[1].revealed=false;
matchedPairs=7;
moves=7;
movesEl.textContent='Moves: 7';
pairsEl.textContent='Pairs left: 1';
render();
}
newBtn.addEventListener('click',newGame);
if(location.hash==='#demo'){demoSetup();}else{newGame();}
// art load detection without hardcoding path
const sprite=document.getElementById('sprite');
const bg=getComputedStyle(sprite).backgroundImage;
const url=bg&&bg!=='none'?bg.slice(5,-2).replace(/"/g,''):null;
if(url){
const img=new Image();
img.onload=()=>{};
img.onerror=()=>{document.body.classList.add('no-art');};
img.src=url;
}
</script>
</body>
</html>
{
"game": { "name": "TURN TWO CARDS" },
"sheet": {
"style": "Flat vector illustration, medium line weight, limited pastel palette with soft shadows, centered composition, consistent scale, black background.",
"cells": [
{
"cell": 0,
"id": "axolotl",
"name": "Axolotl",
"role": "animal",
"prompt": "A cute axolotl with feathery external gills, smiling, centered on black background.",
"fact": "It regrows lost limbs, and even parts of its brain, without scarring."
},
{
"cell": 1,
"id": "tardigrade",
"name": "Tardigrade",
"role": "animal",
"prompt": "A microscopic tardigrade in a curled pose, detailed but simple, centered on black background.",
"fact": "Can survive extreme radiation, vacuum, and temperatures from -272°C to 150°C."
},
{
"cell": 2,
"id": "mantis-shrimp",
"name": "Mantis Shrimp",
"role": "animal",
"prompt": "A colorful mantis shrimp with raised claws, side view, centered on black background.",
"fact": "Packs a punch with claws that strike faster than a .22 caliber bullet."
},
{
"cell": 3,
"id": "vampire-squid",
"name": "Vampire Squid",
"role": "animal",
"prompt": "A vampire squid floating with bioluminescent filaments, centered on black background.",
"fact": "Not a squid, and not a vampire; it glows to confuse predators in the deep."
},
{
"cell": 4,
"id": "pangolin",
"name": "Pangolin",
"role": "animal",
"prompt": "A pangolin curled into a ball showing keratin scales, centered on black background.",
"fact": "Covered in keratin scales and rolls into a ball when threatened."
},
{
"cell": 5,
"id": "okapi",
"name": "Okapi",
"role": "animal",
"prompt": "An okapi standing in profile with striped hindquarters, centered on black background.",
"fact": "Forest giraffe relative with zebra-striped hindquarters hidden in the jungle."
},
{
"cell": 6,
"id": "aye-aye",
"name": "Aye-aye",
"role": "animal",
"prompt": "An aye-aye with large eyes and long middle finger reaching, centered on black background.",
"fact": "Uses a bony finger to fish grubs from wood, the only primate to do so."
},
{
"cell": 7,
"id": "glass-frog",
"name": "Glass Frog",
"role": "animal",
"prompt": "A glass frog perched on a leaf with translucent belly showing internal organs, centered on black background.",
"fact": "Translucent belly lets you see its heart and liver beating inside."
},
{
"cell": 8,
"id": "back",
"name": "Card back",
"role": "back",
"prompt": "Minimalist card back with interlocking paw prints forming a circle, flat design, black background, centered."
}
]
},
"extras": [
{
"id": "table",
"aspect": "16:9",
"prompt": "A dark wooden tabletop with soft vignette, empty space for cards, no animals."
}
]
}