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 sleek, neon-edged memory game filled with surreal portraits of eight extraordinary animals.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>TURN TWO CARDS</title>
<style>
:root {
color-scheme: dark;
--ink: #f7f2e8;
--muted: #aaa8b5;
--panel: #171722;
--accent: #7ce7d3;
--accent2: #d59cff;
--gap: clamp(5px, 1.2vmin, 12px);
}
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
body {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
min-width: 0;
min-height: 0;
padding: clamp(7px, 1.5vmin, 16px);
color: var(--ink);
background:
radial-gradient(circle at 15% 15%, rgba(124, 231, 211, .12), transparent 30%),
radial-gradient(circle at 85% 80%, rgba(213, 156, 255, .12), transparent 34%),
#0b0b11;
font-family: Arial, Helvetica, sans-serif;
}
header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 0 1px clamp(7px, 1.2vmin, 12px);
}
.heading {
min-width: 0;
}
h1 {
margin: 0;
overflow: hidden;
font-size: clamp(17px, 3.2vmin, 32px);
line-height: 1;
letter-spacing: .09em;
white-space: nowrap;
text-overflow: ellipsis;
}
.score {
display: flex;
gap: clamp(10px, 3vw, 30px);
margin-top: 5px;
color: var(--muted);
font-size: clamp(11px, 1.8vmin, 15px);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.score strong {
color: var(--accent);
}
#newGame {
appearance: none;
border: 1px solid rgba(124, 231, 211, .65);
border-radius: 999px;
padding: clamp(7px, 1.4vmin, 11px) clamp(11px, 2.4vmin, 20px);
color: var(--ink);
background: rgba(23, 23, 34, .9);
font: inherit;
font-size: clamp(11px, 1.7vmin, 14px);
font-weight: 800;
letter-spacing: .05em;
white-space: nowrap;
cursor: pointer;
}
#newGame:hover,
#newGame:focus-visible {
outline: none;
background: rgba(124, 231, 211, .16);
box-shadow: 0 0 0 3px rgba(124, 231, 211, .15);
}
main {
display: grid;
min-width: 0;
min-height: 0;
place-items: center;
}
#board {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: var(--gap);
width: 0;
height: 0;
perspective: 1100px;
}
.card {
position: relative;
min-width: 0;
min-height: 0;
border-radius: clamp(7px, 1.6vmin, 15px);
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.card:focus-visible {
box-shadow: 0 0 0 3px var(--accent);
}
.card.matched {
cursor: default;
}
.card-inner {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transition: transform 360ms cubic-bezier(.2, .75, .25, 1);
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.face {
position: absolute;
inset: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: inherit;
background-color: #050507;
background-repeat: no-repeat;
background-size: 300% 300%;
background-position: var(--x, 100%) var(--y, 100%);
box-shadow:
0 5px 14px rgba(0, 0, 0, .38),
inset 0 0 20px rgba(255, 255, 255, .035);
backface-visibility: hidden;
}
.front {
transform: rotateY(180deg);
}
.card.matched .front {
border-color: rgba(124, 231, 211, .8);
box-shadow:
0 0 0 2px rgba(124, 231, 211, .22),
0 0 22px rgba(124, 231, 211, .25);
}
.fallback {
position: absolute;
inset: 0;
display: grid;
place-items: center;
transition: opacity 160ms linear;
}
.fallback::before {
width: 47%;
aspect-ratio: 1;
border: 2px solid var(--accent);
border-radius: 58% 42% 55% 45% / 45% 60% 40% 55%;
background:
radial-gradient(circle at 35% 32%, rgba(255,255,255,.72) 0 4%, transparent 5%),
linear-gradient(145deg, rgba(124,231,211,.3), rgba(213,156,255,.24));
box-shadow: 0 0 20px rgba(124, 231, 211, .2);
content: "";
transform: rotate(-9deg);
}
.fallback-name {
position: absolute;
right: 5px;
bottom: 7px;
left: 5px;
padding: 3px;
color: #fff;
font-size: clamp(8px, 1.8vmin, 15px);
font-weight: 900;
letter-spacing: .04em;
line-height: 1.05;
text-align: center;
text-shadow: 0 1px 4px #000, 0 0 7px #000;
text-transform: uppercase;
}
.back .fallback {
background:
linear-gradient(45deg, transparent 46%, rgba(124,231,211,.24) 47% 53%, transparent 54%),
linear-gradient(-45deg, transparent 46%, rgba(213,156,255,.2) 47% 53%, transparent 54%),
#11111a;
background-size: 24px 24px;
}
.back .fallback::before {
width: 39%;
border-color: var(--accent2);
border-radius: 50%;
background: rgba(10, 10, 15, .88);
box-shadow:
0 0 0 5px rgba(124,231,211,.16),
0 0 24px rgba(213,156,255,.35);
}
.art-ready .face {
background-image: var(--sheet);
}
.art-ready .fallback {
opacity: 0;
}
footer {
display: grid;
align-items: center;
min-height: clamp(52px, 8.5vmin, 80px);
padding-top: clamp(7px, 1.2vmin, 12px);
}
#fact {
width: min(760px, 100%);
margin: 0 auto;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 12px;
padding: clamp(8px, 1.5vmin, 13px) clamp(11px, 2vmin, 18px);
color: var(--muted);
background: rgba(23, 23, 34, .78);
font-size: clamp(11px, 1.8vmin, 15px);
line-height: 1.25;
text-align: center;
}
#fact strong {
color: var(--accent);
}
#fact.win {
border-color: rgba(124, 231, 211, .65);
color: var(--ink);
background:
linear-gradient(90deg, rgba(124,231,211,.12), rgba(213,156,255,.12)),
rgba(23, 23, 34, .9);
box-shadow: 0 0 24px rgba(124, 231, 211, .15);
}
@media (max-height: 430px) {
body {
padding-top: 5px;
padding-bottom: 5px;
}
.score {
margin-top: 2px;
}
footer {
min-height: 42px;
padding-top: 5px;
}
#fact {
padding-top: 5px;
padding-bottom: 5px;
line-height: 1.1;
}
}
@media (prefers-reduced-motion: reduce) {
.card-inner {
transition-duration: 0ms;
}
}
</style>
</head>
<body>
<header>
<div class="heading">
<h1>TURN TWO CARDS</h1>
<div class="score" aria-live="polite">
<span>Moves <strong id="moves">0</strong></span>
<span>Pairs left <strong id="left">8</strong></span>
</div>
</div>
<button id="newGame" type="button">New game</button>
</header>
<main id="playArea">
<div id="board" role="grid" aria-label="Animal memory card board"></div>
</main>
<footer>
<div id="fact" aria-live="polite">Turn over two cards to find a fascinating animal pair.</div>
</footer>
<script>
(() => {
"use strict";
const animals = [
{
id: "axolotl",
name: "Axolotl",
fact: "It can regrow limbs and parts of its heart and brain, often without scarring."
},
{
id: "tardigrade",
name: "Tardigrade",
fact: "Some survive space vacuum by drying into a dormant state called a tun."
},
{
id: "mantisshrimp",
name: "Mantis shrimp",
fact: "Its club strikes so fast it creates collapsing cavitation bubbles."
},
{
id: "lyrebird",
name: "Lyrebird",
fact: "It can copy camera shutters, alarms and other birds with startling accuracy."
},
{
id: "platypus",
name: "Platypus",
fact: "Males carry venomous ankle spurs that can cause severe pain."
},
{
id: "wombat",
name: "Wombat",
fact: "Its intestines shape droppings into cubes, which are less likely to roll away."
},
{
id: "narwhal",
name: "Narwhal",
fact: "Its tusk is a long tooth packed with millions of sensory nerve endings."
},
{
id: "woodfrog",
name: "Wood frog",
fact: "Its heart stops while much of its body freezes, then starts again after thawing."
}
];
const board = document.getElementById("board");
const playArea = document.getElementById("playArea");
const movesDisplay = document.getElementById("moves");
const leftDisplay = document.getElementById("left");
const factDisplay = document.getElementById("fact");
const newGame = document.getElementById("newGame");
let deck = [];
let first = null;
let second = null;
let moves = 0;
let matchedPairs = 0;
let locked = false;
let generation = 0;
let pendingTimers = [];
function shuffle(items) {
for (let i = items.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[items[i], items[j]] = [items[j], items[i]];
}
return items;
}
function cellPosition(index) {
const column = index % 3;
const row = Math.floor(index / 3);
return {
x: column === 0 ? "0%" : column === 1 ? "50%" : "100%",
y: row === 0 ? "0%" : row === 1 ? "50%" : "100%"
};
}
function makeFace(className, cell, name) {
const position = cellPosition(cell);
const face = document.createElement("div");
face.className = "face " + className;
face.style.setProperty("--x", position.x);
face.style.setProperty("--y", position.y);
const fallback = document.createElement("div");
fallback.className = "fallback";
if (className === "front") {
const label = document.createElement("span");
label.className = "fallback-name";
label.textContent = name;
fallback.appendChild(label);
}
face.appendChild(fallback);
return face;
}
function render() {
board.textContent = "";
deck.forEach((card, index) => {
const animal = animals[card.animal];
const element = document.createElement("div");
element.className = "card";
element.tabIndex = 0;
element.setAttribute("role", "button");
element.setAttribute("aria-label", card.matched || card.up ? animal.name : "Face-down card");
element.setAttribute("aria-pressed", card.matched || card.up ? "true" : "false");
element.dataset.index = index;
if (card.up || card.matched) element.classList.add("flipped");
if (card.matched) element.classList.add("matched");
const inner = document.createElement("div");
inner.className = "card-inner";
inner.appendChild(makeFace("back", 8, ""));
inner.appendChild(makeFace("front", card.animal, animal.name));
element.appendChild(inner);
element.addEventListener("click", () => chooseCard(index));
element.addEventListener("keydown", event => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
chooseCard(index);
}
});
board.appendChild(element);
});
movesDisplay.textContent = moves;
leftDisplay.textContent = 8 - matchedPairs;
}
function refreshCard(index) {
const element = board.children[index];
const card = deck[index];
const animal = animals[card.animal];
element.classList.toggle("flipped", card.up || card.matched);
element.classList.toggle("matched", card.matched);
element.setAttribute("aria-label", card.matched || card.up ? animal.name : "Face-down card");
element.setAttribute("aria-pressed", card.matched || card.up ? "true" : "false");
}
function chooseCard(index) {
if (locked) return;
const card = deck[index];
if (!card || card.matched || card.up) return;
card.up = true;
refreshCard(index);
if (first === null) {
first = index;
return;
}
second = index;
moves++;
movesDisplay.textContent = moves;
locked = true;
const currentGeneration = generation;
if (deck[first].animal === deck[second].animal) {
schedule(() => {
if (currentGeneration !== generation) return;
const animal = animals[deck[first].animal];
deck[first].matched = true;
deck[second].matched = true;
matchedPairs++;
refreshCard(first);
refreshCard(second);
leftDisplay.textContent = 8 - matchedPairs;
const won = matchedPairs === 8;
factDisplay.classList.toggle("win", won);
factDisplay.innerHTML = won
? "<strong>You won in " + moves + " moves.</strong> " + animal.name + ": " + animal.fact
: "<strong>" + animal.name + ":</strong> " + animal.fact;
first = null;
second = null;
locked = false;
}, 320);
} else {
schedule(() => {
if (currentGeneration !== generation) return;
deck[first].up = false;
deck[second].up = false;
refreshCard(first);
refreshCard(second);
first = null;
second = null;
locked = false;
}, 900);
}
}
function schedule(callback, delay) {
const timer = window.setTimeout(callback, delay);
pendingTimers.push(timer);
}
function clearPending() {
pendingTimers.forEach(window.clearTimeout);
pendingTimers = [];
}
function startGame() {
generation++;
clearPending();
first = null;
second = null;
moves = 0;
locked = false;
const demo = location.hash === "#demo";
const hiddenAnimal = demo ? Math.floor(Math.random() * animals.length) : -1;
deck = shuffle(
animals.flatMap((animal, animalIndex) => [
{
animal: animalIndex,
up: false,
matched: demo && animalIndex !== hiddenAnimal
},
{
animal: animalIndex,
up: false,
matched: demo && animalIndex !== hiddenAnimal
}
])
);
matchedPairs = demo ? 7 : 0;
factDisplay.classList.remove("win");
factDisplay.textContent = demo
? "Seven pairs are already matched. Find the final pair."
: "Turn over two cards to find a fascinating animal pair.";
render();
fitBoard();
}
function fitBoard() {
const width = Math.max(0, playArea.clientWidth);
const height = Math.max(0, playArea.clientHeight);
const size = Math.floor(Math.min(width, height));
board.style.width = size + "px";
board.style.height = size + "px";
}
newGame.addEventListener("click", startGame);
window.addEventListener("resize", fitBoard);
if ("ResizeObserver" in window) {
new ResizeObserver(fitBoard).observe(playArea);
}
const sheet = new Image();
sheet.onload = () => {
document.body.style.setProperty("--sheet", 'url("' + sheet.src + '")');
document.body.classList.add("art-ready");
};
sheet.src = "art/cards.png";
startGame();
})();
</script>
</body>
</html>
{
"game": {
"name": "TURN TWO CARDS"
},
"sheet": {
"style": "A unified deck of luminous natural-history portraits in crisp screen-printed gouache, combining accurate anatomy with subtly surreal geometric accents. Use saturated turquoise, coral, violet, amber and icy blue against a perfectly flat black background. One centered subject per cell, full body where practical, generous clear space, consistent scale and frontal three-quarter presentation. Soft rim lighting, restrained internal shading, sharp clean contours, fine engraved details, no text, no letters, no numbers, no borders and no scenery.",
"cells": [
{
"cell": 0,
"id": "axolotl",
"name": "Axolotl",
"role": "animal",
"prompt": "One pale pink axolotl floating horizontally, centered, with feathery coral external gills, tiny feet, translucent tail fin and a calm forward-facing expression.",
"fact": "It can regrow limbs and parts of its heart and brain, often without scarring."
},
{
"cell": 1,
"id": "tardigrade",
"name": "Tardigrade",
"role": "animal",
"prompt": "One scientifically recognizable tardigrade enlarged to portrait scale, centered in side view, with a plump segmented body, eight stubby clawed legs and jewel-like translucent textures.",
"fact": "Some survive space vacuum by drying into a dormant state called a tun."
},
{
"cell": 2,
"id": "mantisshrimp",
"name": "Mantis shrimp",
"role": "animal",
"prompt": "One peacock mantis shrimp centered in a dynamic three-quarter pose, showing stalked eyes, folded hammer-like clubs and vivid segmented armor in turquoise, emerald, orange and violet.",
"fact": "Its club strikes so fast it creates collapsing cavitation bubbles."
},
{
"cell": 3,
"id": "lyrebird",
"name": "Lyrebird",
"role": "animal",
"prompt": "One male superb lyrebird centered in profile with its spectacular lyre-shaped tail raised and fanned overhead, accurate brown-gray plumage highlighted with silver and amber.",
"fact": "It can copy camera shutters, alarms and other birds with startling accuracy."
},
{
"cell": 4,
"id": "platypus",
"name": "Platypus",
"role": "animal",
"prompt": "One platypus centered in a swimming three-quarter pose, with a broad soft bill, dense chestnut fur, webbed feet and flat beaver-like tail, anatomically accurate and alert.",
"fact": "Males carry venomous ankle spurs that can cause severe pain."
},
{
"cell": 5,
"id": "wombat",
"name": "Wombat",
"role": "animal",
"prompt": "One sturdy common wombat centered and facing slightly left, full body, with compact muscular build, short powerful legs, coarse brown fur and an inquisitive dark nose.",
"fact": "Its intestines shape droppings into cubes, which are less likely to roll away."
},
{
"cell": 6,
"id": "narwhal",
"name": "Narwhal",
"role": "animal",
"prompt": "One narwhal centered in a graceful swimming pose, mottled silver body curving gently around its long spiral tusk, with accurate fins and no surrounding water or scenery.",
"fact": "Its tusk is a long tooth packed with millions of sensory nerve endings."
},
{
"cell": 7,
"id": "woodfrog",
"name": "Wood frog",
"role": "animal",
"prompt": "One wood frog centered in a compact crouch, anatomically accurate, with tan-bronze skin, dark mask through the eyes, delicate toes and icy blue crystalline accents suggesting freeze tolerance.",
"fact": "Its heart stops while much of its body freezes, then starts again after thawing."
},
{
"cell": 8,
"id": "back",
"name": "Card back",
"role": "back",
"prompt": "A centered symmetrical card-back emblem made from interlocking abstract animal tracks, feather curves, scales and branching gill forms, arranged as a radiant circular rosette in turquoise, violet and coral."
}
]
}
}