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 midnight natural-history memory game with luminous animal specimens on a compact museum-drawer board.
<!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 {
color-scheme: dark;
--ink: #f3ead7;
--muted: #b4a994;
--gold: #d9a64c;
--panel: #171917;
--panel2: #0b0d0c;
--line: rgba(235, 211, 164, .24);
}
* { box-sizing: border-box; }
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background:
radial-gradient(circle at 50% -15%, #3d3526 0, #171914 34%, #080a09 73%);
font-family: Georgia, "Times New Roman", serif;
}
body {
color: var(--ink);
}
.app {
width: 100%;
height: 100dvh;
overflow: hidden;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: clamp(5px, 1.1vh, 12px);
padding: clamp(8px, 1.8vw, 24px);
}
header {
width: min(920px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
}
.title-block {
min-width: 0;
}
h1 {
margin: 0;
color: #f4d999;
font-size: clamp(17px, 3vw, 30px);
line-height: .94;
letter-spacing: .12em;
font-weight: normal;
}
.subtitle {
margin: 4px 0 0;
color: var(--muted);
font-size: clamp(9px, 1.55vw, 14px);
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#newGame {
appearance: none;
border: 1px solid rgba(242, 207, 130, .65);
border-radius: 5px;
background: linear-gradient(#363128, #1d201c);
color: #f6dfad;
cursor: pointer;
font: inherit;
font-size: clamp(10px, 1.8vw, 14px);
letter-spacing: .06em;
padding: .6em .85em;
white-space: nowrap;
box-shadow: inset 0 1px rgba(255,255,255,.12), 0 2px 8px #0008;
}
#newGame:hover,
#newGame:focus-visible {
outline: none;
background: linear-gradient(#504633, #292a20);
border-color: #ffe1a0;
}
.play-area {
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
#board {
height: min(100%, 91vw);
width: auto;
max-width: 100%;
aspect-ratio: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: clamp(3px, .9vmin, 10px);
padding: clamp(5px, 1.1vmin, 12px);
border: 1px solid var(--line);
border-radius: clamp(8px, 1.5vmin, 15px);
background:
linear-gradient(135deg, rgba(255,255,255,.04), transparent 28%),
#10120f;
box-shadow: 0 14px 35px #0008, inset 0 0 22px #000;
}
.card {
position: relative;
min-width: 0;
min-height: 0;
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
border-radius: clamp(4px, .8vmin, 9px);
overflow: hidden;
box-shadow: 0 3px 7px #0009;
}
.card:focus-visible {
outline: 2px solid #ffe29b;
outline-offset: 2px;
}
.card.matched {
cursor: default;
box-shadow: 0 0 0 1px rgba(255, 219, 137, .8), 0 3px 8px #0008;
}
.surface {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
}
.back {
display: grid;
place-items: center;
background:
repeating-linear-gradient(45deg, rgba(225,184,99,.15) 0 2px, transparent 2px 8px),
radial-gradient(circle, #353526 0 2px, transparent 2px 10px),
#20231e;
border: 1px solid rgba(244, 217, 153, .45);
}
.back::after {
content: "";
width: 42%;
height: 42%;
border: 1px solid rgba(246, 221, 159, .72);
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(246, 221, 159, .09);
}
.face {
display: none;
place-items: center;
background: #050606;
border: 1px solid rgba(244, 217, 153, .58);
}
.card.open .back,
.card.matched .back {
display: none;
}
.card.open .face,
.card.matched .face {
display: grid;
}
.sprite {
position: absolute;
inset: 0;
z-index: 2;
background-image: url("art/cards.png");
background-repeat: no-repeat;
background-size: 300% 300%;
background-position:
calc(var(--col) * 50%)
calc(var(--row) * 50%);
}
.fallback {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
padding: 8%;
display: grid;
place-items: center;
align-content: center;
gap: 5%;
color: #f7e1a8;
background:
radial-gradient(circle at 50% 42%, #22433c 0 18%, transparent 19%),
linear-gradient(135deg, #17312e, #101b1b);
text-align: center;
}
.fallback-shape {
width: 42%;
aspect-ratio: 1;
border: 2px solid #e0af55;
border-radius: 48% 52% 42% 58%;
transform: rotate(18deg);
box-shadow: inset 0 0 0 5px rgba(224, 175, 85, .16);
}
.fallback-name {
max-width: 100%;
font-size: clamp(7px, 1.4vmin, 15px);
line-height: 1.02;
letter-spacing: .04em;
overflow-wrap: anywhere;
}
footer {
width: min(920px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: auto auto minmax(0, 1fr);
align-items: center;
gap: clamp(7px, 1.6vw, 18px);
padding: clamp(6px, 1.2vh, 11px) clamp(8px, 1.8vw, 17px);
border: 1px solid var(--line);
border-radius: 8px;
background: rgba(15, 17, 14, .82);
}
.stat {
color: var(--muted);
font-size: clamp(9px, 1.6vw, 14px);
letter-spacing: .04em;
white-space: nowrap;
}
.stat strong {
color: #f1d38e;
font-size: 1.12em;
font-weight: normal;
}
#message {
min-width: 0;
color: #e7ddc8;
font-size: clamp(9px, 1.55vw, 14px);
line-height: 1.15;
border-left: 1px solid var(--line);
padding-left: clamp(7px, 1.5vw, 15px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.win {
color: #ffdc88 !important;
}
@media (max-width: 430px) {
footer {
grid-template-columns: auto auto;
}
#message {
grid-column: 1 / -1;
border-left: 0;
border-top: 1px solid var(--line);
padding: 5px 0 0;
}
}
</style>
</head>
<body>
<div class="app">
<header>
<div class="title-block">
<h1>TURN TWO CARDS</h1>
<p class="subtitle">A cabinet of remarkable animals</p>
</div>
<button id="newGame" type="button">New game</button>
</header>
<main class="play-area">
<div id="board" aria-label="Memory game board"></div>
</main>
<footer>
<div class="stat">Moves: <strong id="moves">0</strong></div>
<div class="stat">Pairs left: <strong id="pairsLeft">8</strong></div>
<div id="message" aria-live="polite">Turn over two cards to begin.</div>
</footer>
</div>
<script>
(() => {
const animals = [
{
id: "axolotl",
name: "Axolotl",
fact: "It can regrow lost limbs, spinal cord, heart tissue, and parts of its brain."
},
{
id: "mantisshrimp",
name: "Mantis shrimp",
fact: "Its club-like strike accelerates so fast it creates cavitation bubbles in water."
},
{
id: "tardigrade",
name: "Tardigrade",
fact: "Some tardigrade species have survived exposure to the vacuum of space."
},
{
id: "platypus",
name: "Platypus",
fact: "Males have venomous ankle spurs capable of delivering a painful venom."
},
{
id: "bombardierbeetle",
name: "Bombardier beetle",
fact: "It sprays a near-boiling chemical blast from its abdomen when threatened."
},
{
id: "lyrebird",
name: "Lyrebird",
fact: "It can imitate sounds including other birds, camera shutters, and chainsaws."
},
{
id: "nakedmolerat",
name: "Naked mole-rat",
fact: "It can survive up to five hours without oxygen by switching to fructose metabolism."
},
{
id: "cuttlefish",
name: "Cuttlefish",
fact: "It rapidly changes color and pattern using skin cells called chromatophores."
}
];
const board = document.getElementById("board");
const movesEl = document.getElementById("moves");
const pairsLeftEl = document.getElementById("pairsLeft");
const messageEl = document.getElementById("message");
const newGameButton = document.getElementById("newGame");
let deck = [];
let selected = [];
let matched = new Set();
let moves = 0;
let locked = false;
let demoMode = location.hash.toLowerCase() === "#demo";
function shuffle(list) {
const copy = [...list];
for (let i = copy.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[copy[i], copy[j]] = [copy[j], copy[i]];
}
return copy;
}
function cellPosition(index) {
return {
col: index % 3,
row: Math.floor(index / 3)
};
}
function updateStatus() {
movesEl.textContent = moves;
pairsLeftEl.textContent = 8 - matched.size;
}
function setMessage(text, isWin = false) {
messageEl.textContent = text;
messageEl.classList.toggle("win", isWin);
}
function render() {
board.innerHTML = "";
deck.forEach((animal, index) => {
const pos = cellPosition(animals.findIndex(item => item.id === animal.id));
const isOpen = selected.includes(index);
const isMatched = matched.has(animal.id);
const card = document.createElement("div");
card.className = "card" + (isOpen ? " open" : "") + (isMatched ? " matched" : "");
card.tabIndex = isMatched ? -1 : 0;
card.setAttribute("role", "button");
card.setAttribute(
"aria-label",
isMatched || isOpen ? animal.name : "Face-down card"
);
card.innerHTML = `
<div class="surface back" aria-hidden="true">
<span class="sprite" style="--col:2; --row:2"></span>
</div>
<div class="surface face">
<div class="fallback" aria-hidden="true">
<span class="fallback-shape"></span>
<span class="fallback-name">${animal.name}</span>
</div>
<span class="sprite" style="--col:${pos.col}; --row:${pos.row}" aria-hidden="true"></span>
</div>
`;
const activate = () => chooseCard(index);
card.addEventListener("click", activate);
card.addEventListener("keydown", event => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
activate();
}
});
board.appendChild(card);
});
}
function chooseCard(index) {
const animal = deck[index];
if (
locked ||
matched.has(animal.id) ||
selected.includes(index) ||
selected.length === 2
) {
return;
}
selected.push(index);
render();
if (selected.length !== 2) {
setMessage("Choose one more card.");
return;
}
moves += 1;
updateStatus();
const first = deck[selected[0]];
const second = deck[selected[1]];
if (first.id === second.id) {
matched.add(first.id);
selected = [];
updateStatus();
render();
if (matched.size === 8) {
setMessage("You found all eight pairs — the cabinet is complete.", true);
} else {
setMessage(first.name + ": " + first.fact);
}
return;
}
locked = true;
setMessage("Not a pair. Study them while they are visible.");
window.setTimeout(() => {
selected = [];
locked = false;
render();
setMessage("Try another pair.");
}, 900);
}
function startGame() {
demoMode = location.hash.toLowerCase() === "#demo";
deck = shuffle(animals.flatMap(animal => [animal, animal]));
selected = [];
matched = new Set();
moves = 0;
locked = false;
if (demoMode) {
const remainingAnimal = animals[Math.floor(Math.random() * animals.length)];
animals.forEach(animal => {
if (animal.id !== remainingAnimal.id) matched.add(animal.id);
});
setMessage("Demo deal: one final pair remains.");
} else {
setMessage("Turn over two cards to begin.");
}
updateStatus();
render();
}
newGameButton.addEventListener("click", startGame);
window.addEventListener("hashchange", startGame);
startGame();
})();
</script>
</body>
</html>
{
"game": { "name": "TURN TWO CARDS" },
"sheet": {
"style": "High-end natural-history specimen illustration in a square card composition, centered single subject, flat pure black background, deep teal, amber, coral, ivory, and muted gold palette, dramatic rim lighting, crisp hand-inked linework with luminous painted detail, no text, no border, all subjects rendered at the same apparent scale.",
"cells": [
{
"cell": 0,
"id": "axolotl",
"name": "Axolotl",
"role": "animal",
"prompt": "A pale axolotl floating front-facing with feathery coral-pink external gills, tiny limbs spread gently, and a soft halo of underwater particles.",
"fact": "It can regrow lost limbs, spinal cord, heart tissue, and parts of its brain."
},
{
"cell": 1,
"id": "mantisshrimp",
"name": "Mantis shrimp",
"role": "animal",
"prompt": "A mantis shrimp in a poised striking stance, huge layered emerald eyes, folded club-like forelimbs, and jewel-toned armored shell.",
"fact": "Its club-like strike accelerates so fast it creates cavitation bubbles in water."
},
{
"cell": 2,
"id": "tardigrade",
"name": "Tardigrade",
"role": "animal",
"prompt": "A magnified tardigrade walking through a small cluster of moss, its plump segmented body, eight clawed legs, and round mouth clearly visible.",
"fact": "Some tardigrade species have survived exposure to the vacuum of space."
},
{
"cell": 3,
"id": "platypus",
"name": "Platypus",
"role": "animal",
"prompt": "A male platypus swimming in profile, broad bill and webbed feet visible, with one hind ankle spur subtly highlighted.",
"fact": "Males have venomous ankle spurs capable of delivering a painful venom."
},
{
"cell": 4,
"id": "bombardierbeetle",
"name": "Bombardier beetle",
"role": "animal",
"prompt": "A bombardier beetle viewed slightly from above, polished dark wing cases and orange legs, releasing a small glowing defensive chemical plume behind it.",
"fact": "It sprays a near-boiling chemical blast from its abdomen when threatened."
},
{
"cell": 5,
"id": "lyrebird",
"name": "Lyrebird",
"role": "animal",
"prompt": "A superb lyrebird standing proudly with its ornate tail fully fanned into a lyre shape, delicate feathers catching warm gold light.",
"fact": "It can imitate sounds including other birds, camera shutters, and chainsaws."
},
{
"cell": 6,
"id": "nakedmolerat",
"name": "Naked mole-rat",
"role": "animal",
"prompt": "A naked mole-rat emerging from a winding soil tunnel, wrinkled pink skin, oversized incisors, whiskers, and small paws clearly defined.",
"fact": "It can survive up to five hours without oxygen by switching to fructose metabolism."
},
{
"cell": 7,
"id": "cuttlefish",
"name": "Cuttlefish",
"role": "animal",
"prompt": "A cuttlefish hovering with undulating fin fringe, W-shaped pupil, curling tentacles, and a vivid shifting pattern of teal, amber, and coral across its body.",
"fact": "It rapidly changes color and pattern using skin cells called chromatophores."
},
{
"cell": 8,
"id": "back",
"name": "Card back",
"role": "back",
"prompt": "An elegant symmetrical card-back pattern inspired by cabinet-of-curiosities engraving: concentric rings, tiny specimen silhouettes, radiating lines, and a central eye-like oval motif."
}
]
},
"extras": []
}