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 candlelit curiosity-cabinet memory game where sixteen black-backed cards on a dark botanical table hide eight of nature's strangest creatures, painted in jewel-toned gouache.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Turn Two Cards — Fascinating Animal Pairs</title>
<style>
:root{
--gold:#e8b84b;
--gold-dim:#9a7a35;
--card-r:clamp(5px,1.1vmin,12px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden}
body{
display:flex;flex-direction:column;
font-family:Georgia,'Times New Roman',serif;
color:#e9e2cf;user-select:none;
background:
radial-gradient(120% 90% at 50% 0%, rgba(232,184,75,.09), transparent 60%),
linear-gradient(180deg,#0d1f1c 0%,#081210 55%,#050b0a 100%);
}
/* Optional decoration: the page looks finished without it. */
body::before{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:url(art/table.png) center/cover no-repeat;opacity:.26;
}
body::after{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(90% 70% at 50% 40%, transparent 30%, rgba(3,8,7,.78) 100%);
}
header,#factbar,main{position:relative;z-index:1}
header{
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
gap:8px 18px;padding:10px clamp(10px,2.5vmin,28px) 4px;
}
h1{
margin:0;font-size:clamp(15px,3vmin,28px);font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.tag{margin:2px 0 0;font-style:italic;color:#8fae9e;font-size:clamp(10px,1.6vmin,14px)}
.hud{display:flex;align-items:center;gap:clamp(6px,1.2vmin,14px)}
.stat{
display:flex;flex-direction:column;align-items:center;min-width:7ch;
padding:4px 10px;border:1px solid rgba(232,184,75,.3);border-radius:8px;
background:rgba(10,25,22,.6);
}
.num{font-size:clamp(14px,2.4vmin,22px);line-height:1.15;color:#f4ead2}
.cap{font-size:clamp(8px,1.3vmin,11px);letter-spacing:.12em;text-transform:uppercase;color:#8fae9e}
#newgame{
font:inherit;font-size:clamp(10px,1.6vmin,14px);letter-spacing:.14em;text-transform:uppercase;
color:var(--gold);background:transparent;border:1px solid var(--gold-dim);border-radius:8px;
padding:.6em 1.15em;cursor:pointer;transition:background .2s,color .2s;
}
#newgame:hover{background:var(--gold);color:#141005}
#newgame:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#factbar{
min-height:2.7em;display:flex;align-items:center;justify-content:center;text-align:center;
padding:2px clamp(10px,3vmin,32px);font-style:italic;color:#cfe3d8;
font-size:clamp(11px,1.8vmin,16px);
}
#factbar b{color:var(--gold);font-style:normal;letter-spacing:.06em}
#factbar.flash{animation:factin .45s ease}
@keyframes factin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
main{flex:1;min-height:0;display:grid;place-items:center;padding:2px 12px 14px}
#stage{position:relative;height:100%;max-width:100%;aspect-ratio:3/4}
#board{
position:absolute;inset:0;display:grid;
grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);
gap:clamp(4px,1.1vmin,12px);
}
.card{
position:relative;border:0;padding:0;background:none;cursor:pointer;
border-radius:var(--card-r);perspective:900px;animation:deal .45s ease backwards;
}
.card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@keyframes deal{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.inner{
position:absolute;inset:0;transform-style:preserve-3d;
transition:transform .35s cubic-bezier(.4,.2,.2,1);
}
.card.up .inner,.card.matched .inner{transform:rotateY(180deg)}
.card:not(.up):not(.matched):hover .inner{transform:translateY(-2px)}
.card.matched{cursor:default}
.face{
position:absolute;inset:0;border-radius:var(--card-r);overflow:hidden;
backface-visibility:hidden;-webkit-backface-visibility:hidden;
border:1px solid rgba(232,184,75,.28);background:#000;
}
.front{transform:rotateY(180deg);display:flex;flex-direction:column}
.back{display:grid;place-items:center}
.art{
background-image:var(--sheet,none);
background-size:300% 300%;background-repeat:no-repeat;
width:100%;aspect-ratio:1;
}
.front .art{flex:none}
.label{
flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
color:var(--gold);letter-spacing:.12em;text-transform:uppercase;
font-size:clamp(7px,1.6vmin,15px);padding:0 4px;text-align:center;overflow:hidden;
}
.card.matched .face.front{
border-color:rgba(232,184,75,.8);
box-shadow:0 0 16px rgba(232,184,75,.3);
animation:pop .45s ease;
}
@keyframes pop{
0%{transform:rotateY(180deg) scale(1)}
50%{transform:rotateY(180deg) scale(1.07)}
100%{transform:rotateY(180deg) scale(1)}
}
/* ---- Fallback art, used until art/cards.png loads (or if it never does) ---- */
.no-art .front .art{display:grid;place-items:center;position:relative}
.no-art .front .art::before{
content:"";position:absolute;width:46%;aspect-ratio:1;
border:2px solid var(--ac,#e8b84b);border-radius:6px;opacity:.5;transform:rotate(45deg);
}
.no-art .front .art::after{
content:attr(data-initial);position:relative;font-style:italic;
font-size:clamp(22px,8vmin,70px);color:var(--ac,#e8b84b);
text-shadow:0 0 18px rgba(0,0,0,.9);
}
.no-art .back .art{
border:1px solid rgba(232,184,75,.3);border-radius:4px;
background:
repeating-linear-gradient(45deg,rgba(232,184,75,.10) 0 5px,transparent 5px 14px),
repeating-linear-gradient(-45deg,rgba(232,184,75,.10) 0 5px,transparent 5px 14px),
radial-gradient(circle at 50% 50%,#123029 0%,#071512 78%);
}
/* ---- Win overlay ---- */
#win{
position:absolute;inset:-1.5%;z-index:5;display:grid;place-items:center;
background:rgba(3,9,8,.6);backdrop-filter:blur(2px);border-radius:14px;
opacity:0;pointer-events:none;transition:opacity .6s ease;
}
#win.show{opacity:1}
.winbox{
text-align:center;border:1px solid rgba(232,184,75,.55);border-radius:14px;
background:rgba(8,18,16,.92);box-shadow:0 0 44px rgba(232,184,75,.16);
padding:clamp(14px,3vmin,36px) clamp(20px,5vmin,64px);
}
.winbox h2{
margin:0 0 .35em;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;
font-size:clamp(20px,4.5vmin,42px);
}
.winbox p{margin:0;font-style:italic;color:#d9e6dd;font-size:clamp(11px,2vmin,18px)}
</style>
</head>
<body class="no-art">
<header>
<div>
<h1>Turn Two Cards</h1>
<p class="tag">Eight strange animals. Find their pairs.</p>
</div>
<div class="hud">
<div class="stat"><span class="num" id="moves">0</span><span class="cap">moves</span></div>
<div class="stat"><span class="num" id="pairs">8</span><span class="cap">pairs left</span></div>
<button id="newgame" type="button">New game</button>
</div>
</header>
<div id="factbar" aria-live="polite"></div>
<main>
<div id="stage">
<div id="board"></div>
<div id="win">
<div class="winbox">
<h2>You win</h2>
<p id="winline"></p>
</div>
</div>
</div>
</main>
<script>
(function(){
"use strict";
var SHEET = 'art/cards.png';
var ANIMALS = [
{name:'Axolotl', cell:0, hue:'#f2a0b6', fact:'It regrows lost limbs, tail, and even parts of its heart and brain — without scarring.'},
{name:'Mantis Shrimp', cell:1, hue:'#4fd0a8', fact:'Its club accelerates as fast as a .22 bullet, punching hard enough to break aquarium glass.'},
{name:'Platypus', cell:2, hue:'#c98a4b', fact:'It has no stomach, sweats milk through its skin, and hunts by sensing electric fields.'},
{name:'Tardigrade', cell:3, hue:'#9fc46a', fact:'This water bear has survived the vacuum of space, boiling heat, and near absolute zero.'},
{name:'Lyrebird', cell:4, hue:'#b08968', fact:'It mimics chainsaws, camera shutters, and car alarms with near-perfect accuracy.'},
{name:'Aye-Aye', cell:5, hue:'#8d7bd4', fact:'It taps wood and listens for echoes, then fishes grubs out with one long finger.'},
{name:'Pistol Shrimp', cell:6, hue:'#ef8354', fact:'Its snap makes a bubble that collapses at about 4,700 °C — nearly as hot as the sun\u2019s surface.'},
{name:'Mimic Octopus', cell:7, hue:'#e5c07b', fact:'It impersonates lionfish, sea snakes, and flatfish to fool predators.'}
];
var board = document.getElementById('board'),
winEl = document.getElementById('win'),
winLine = document.getElementById('winline'),
factbar = document.getElementById('factbar'),
movesEl = document.getElementById('moves'),
pairsEl = document.getElementById('pairs');
document.documentElement.style.setProperty('--sheet', 'url("' + SHEET + '")');
/* Detect whether the contact sheet exists; fall back gracefully if not. */
var probe = new Image();
probe.addEventListener('load', function(){ document.body.classList.remove('no-art'); });
probe.addEventListener('error', function(){ document.body.classList.add('no-art'); });
probe.src = SHEET;
var deck = [], cardEls = [], first = null,
lock = false, moves = 0, matched = 0, over = false;
/* ---------- tiny Web Audio sounds ---------- */
var AC = null;
function ac(){
if(!AC){ try{ AC = new (window.AudioContext || window.webkitAudioContext)(); }catch(e){ AC = null; } }
if(AC && AC.state === 'suspended'){ AC.resume(); }
return AC;
}
function tone(f, delay, dur, type, vol){
var c = ac(); if(!c) return;
try{
var t = c.currentTime + (delay || 0),
o = c.createOscillator(), g = c.createGain();
o.type = type || 'sine'; o.frequency.value = f;
g.gain.setValueAtTime(0.0001, t);
g.gain.exponentialRampToValueAtTime(vol || 0.1, t + 0.015);
g.gain.exponentialRampToValueAtTime(0.0001, t + dur);
o.connect(g); g.connect(c.destination);
o.start(t); o.stop(t + dur + 0.05);
}catch(e){}
}
function sfxFlip(){ tone(540, 0, .07, 'triangle', .045); }
function sfxMatch(){ tone(659.3, 0, .16, 'sine', .09); tone(987.8, .09, .22, 'sine', .09); }
function sfxMiss(){ tone(185, 0, .22, 'sine', .07); }
function sfxWin(){ [523.3,659.3,784,1046.5].forEach(function(f,i){ tone(f, i*.13, .32, 'sine', .1); }); }
function sfxDeal(){ tone(392, 0, .06, 'triangle', .04); tone(523, .06, .06, 'triangle', .04); }
/* ---------- helpers ---------- */
function cellPos(c){ return ((c % 3) * 50) + '% ' + (Math.floor(c / 3) * 50) + '%'; }
function div(cls){ var d = document.createElement('div'); d.className = cls; return d; }
function shuffle(a){
for(var i = a.length - 1; i > 0; i--){
var j = Math.floor(Math.random() * (i + 1)), t = a[i]; a[i] = a[j]; a[j] = t;
}
}
function hud(){ movesEl.textContent = moves; pairsEl.textContent = 8 - matched; }
function say(name, text){
factbar.textContent = '';
if(name){
var b = document.createElement('b'); b.textContent = name;
factbar.appendChild(b);
factbar.appendChild(document.createTextNode(' — '));
}
factbar.appendChild(document.createTextNode(text));
factbar.classList.remove('flash'); void factbar.offsetWidth; factbar.classList.add('flash');
}
/* ---------- cards ---------- */
function makeCard(i, isMatched){
var a = ANIMALS[deck[i]],
b = document.createElement('button');
b.type = 'button';
b.className = 'card' + (isMatched ? ' matched' : '');
b.style.animationDelay = (i * 26) + 'ms';
b.setAttribute('aria-label', 'Card ' + (i + 1) + (isMatched ? ', ' + a.name + ', face up' : ', face down'));
var inner = div('inner');
var back = div('face back'),
bart = div('art');
bart.style.backgroundPosition = cellPos(8);
back.appendChild(bart);
var front = div('face front'),
art = div('art'),
label = div('label');
art.style.backgroundPosition = cellPos(a.cell);
art.setAttribute('data-initial', a.name.charAt(0));
art.style.setProperty('--ac', a.hue);
label.textContent = a.name;
front.appendChild(art); front.appendChild(label);
inner.appendChild(back); inner.appendChild(front);
b.appendChild(inner);
b.addEventListener('click', function(){ onCard(i); });
return b;
}
function onCard(i){
if(over || lock) return;
var el = cardEls[i];
if(el.classList.contains('up') || el.classList.contains('matched')) return;
el.classList.add('up');
el.setAttribute('aria-label', 'Card ' + (i + 1) + ', ' + ANIMALS[deck[i]].name);
sfxFlip();
if(first === null){ first = i; return; }
var f = first; first = null;
moves++; hud();
if(deck[f] === deck[i]){
cardEls[f].classList.replace('up', 'matched');
el.classList.replace('up', 'matched');
matched++; hud();
say(ANIMALS[deck[i]].name, ANIMALS[deck[i]].fact);
sfxMatch();
if(matched === 8) win();
}else{
lock = true; sfxMiss();
setTimeout(function(){
cardEls[f].classList.remove('up');
el.classList.remove('up');
lock = false;
}, 900);
}
}
function win(){
over = true;
winLine.textContent = 'All eight pairs found in ' + moves + (moves === 1 ? ' move.' : ' moves.');
winEl.classList.add('show');
say(null, 'You win — every strange creature accounted for.');
sfxWin();
}
function newGame(){
var demo = location.hash === '#demo';
moves = 0; matched = 0; first = null; lock = false; over = false;
winEl.classList.remove('show');
deck = [];
ANIMALS.forEach(function(_, i){ deck.push(i, i); });
shuffle(deck);
board.textContent = '';
cardEls = [];
var leftover = 7; /* in demo mode this pair stays hidden */
for(var i = 0; i < 16; i++){
var el = makeCard(i, demo && deck[i] !== leftover);
cardEls.push(el);
board.appendChild(el);
}
if(demo){
matched = 7;
say(null, 'One pair remains hidden. Find it to win.');
}else{
say(null, 'Flip two cards and find the pairs.');
}
hud();
sfxDeal();
}
document.getElementById('newgame').addEventListener('click', newGame);
window.addEventListener('hashchange', newGame);
newGame();
})();
</script>
</body>
</html>
{
"game": { "name": "TURN TWO CARDS" },
"sheet": {
"style": "Flat matte gouache illustration in the style of a vintage natural-history plate: one centered subject, bold clean ink outlines, soft rim lighting, rich jewel-tone palette of deep teal, moss green, antique gold, coral and cream against a flat pure-black background, subtle paper grain, no text, no borders, no watermark.",
"cells": [
{
"cell": 0,
"id": "axolotl",
"name": "Axolotl",
"role": "animal",
"prompt": "A smiling pink axolotl floating gently, its six frilly external gills fanned out like ferns, plump tail curled, facing the viewer.",
"fact": "It regrows lost limbs, tail, and even parts of its heart and brain — without scarring."
},
{
"cell": 1,
"id": "mantisshrimp",
"name": "Mantis Shrimp",
"role": "animal",
"prompt": "A peacock mantis shrimp in a proud stance, segmented body glowing blue-green and orange, stalked eyes raised, raptorial clubs held up like boxing gloves.",
"fact": "Its club accelerates as fast as a .22 bullet, punching hard enough to break aquarium glass."
},
{
"cell": 2,
"id": "platypus",
"name": "Platypus",
"role": "animal",
"prompt": "A duck-billed platypus waddling in three-quarter view, dense brown fur, wide rubbery bill, webbed feet, one small knowing eye.",
"fact": "It has no stomach, sweats milk through its skin, and hunts by sensing electric fields."
},
{
"cell": 3,
"id": "tardigrade",
"name": "Tardigrade",
"role": "animal",
"prompt": "A chubby tardigrade water bear with eight stubby clawed legs, translucent tea-colored body and round snout, drawn heroic and oddly cute.",
"fact": "This water bear has survived the vacuum of space, boiling heat, and near absolute zero."
},
{
"cell": 4,
"id": "lyrebird",
"name": "Lyrebird",
"role": "animal",
"prompt": "A superb lyrebird mid-display, its spectacular tail feathers fanned into a lyre shape above its back, lace-like barbs, head turned proudly.",
"fact": "It mimics chainsaws, camera shutters, and car alarms with near-perfect accuracy."
},
{
"cell": 5,
"id": "ayeaye",
"name": "Aye-Aye",
"role": "animal",
"prompt": "An aye-aye perched on a branch, enormous bat-like ears, huge amber eyes, one impossibly long thin middle finger extended, tapping the wood.",
"fact": "It taps wood and listens for echoes, then fishes grubs out with one long finger."
},
{
"cell": 6,
"id": "pistolshrimp",
"name": "Pistol Shrimp",
"role": "animal",
"prompt": "A pistol shrimp in profile raising one enormous oversized snapping claw like a pistol, small body, a faint shockwave ripple bursting from the claw.",
"fact": "Its snap makes a bubble that collapses at about 4,700 °C — nearly as hot as the sun's surface."
},
{
"cell": 7,
"id": "mimicoctopus",
"name": "Mimic Octopus",
"role": "animal",
"prompt": "A mimic octopus with long flowing banded arms, two arms raised to imitate a lionfish, elegant S-curve body, one intelligent eye.",
"fact": "It impersonates lionfish, sea snakes, and flatfish to fool predators."
},
{
"cell": 8,
"id": "back",
"name": "Card back",
"role": "back",
"prompt": "Symmetrical card-back design: an art-nouveau lattice of curling fern fronds and moon moths arranged around a central diamond, antique gold linework on flat black, perfectly centered, no text."
}
]
},
"extras": [
{
"id": "table",
"aspect": "16:9",
"prompt": "Dark atmospheric tabletop seen from above: deep green-black polished wood with faint scattered botanical sketches and gold dust, heavy vignette, moody candlelight, low contrast so interface text stays readable on top."
}
]
}