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: Fascinating Animals is a 4x4 memory game featuring eight bizarre and amazing animals, illustrated in warm gouache style on a dark forest green felt background.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Turn Two Cards: Fascinating Animals</title>
<style>
:root {
--card-art: url('art/cards.png');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
overflow: hidden;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #1a3a2a;
background-image: url('art/table.png');
background-size: cover;
background-position: center;
color: #f0f0f0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
}
.game-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
width: 100%;
}
.game-header {
width: min(90vw, calc(100vh - 8rem));
display: flex;
justify-content: space-between;
align-items: center;
font-size: clamp(1rem, 2vmin, 1.5rem);
font-weight: 600;
z-index: 20;
position: relative;
}
.stats {
display: flex;
gap: 1.5rem;
}
.new-game-btn {
padding: 0.5rem 1rem;
font-size: clamp(0.9rem, 1.8vmin, 1.1rem);
font-weight: 600;
border: none;
border-radius: 6px;
background-color: #e67e22;
color: white;
cursor: pointer;
transition: background-color 0.2s;
}
.new-game-btn:hover {
background-color: #d35400;
}
.board-container {
width: min(90vw, calc(100vh - 8rem));
aspect-ratio: 1 / 1;
}
.board {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.card {
perspective: 1000px;
cursor: pointer;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card.flipped .card-inner,
.card.matched .card-inner {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0.25rem;
overflow: hidden;
background-color: #000;
background-image: var(--card-art);
background-size: 300% 300%;
}
.card-front {
transform: rotateY(180deg);
color: transparent;
font-size: clamp(0.7rem, 2vmin, 1rem);
font-weight: 700;
}
.card-back {
background-position: 100% 100%;
}
/* Fallback styles when art is missing */
.no-art .card-front {
background-image: none;
color: #111;
}
.card-front[data-animal="axolotl"] { background-color: #ff9aa2; }
.card-front[data-animal="mantis_shrimp"] { background-color: #ff7f50; }
.card-front[data-animal="tardigrade"] { background-color: #a0d2db; }
.card-front[data-animal="platypus"] { background-color: #c5a3ff; }
.card-front[data-animal="glass_frog"] { background-color: #b5e48c; }
.card-front[data-animal="immortal_jellyfish"] { background-color: #ffd6a5; }
.card-front[data-animal="hoatzin"] { background-color: #fdffb6; }
.card-front[data-animal="star_nosed_mole"] { background-color: #9bf6ff; }
.fact-display {
width: min(90vw, calc(100vh - 8rem));
min-height: 3rem;
padding: 0.75rem;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 8px;
text-align: center;
font-size: clamp(0.9rem, 1.5vmin, 1.1rem);
line-height: 1.4;
display: flex;
align-items: center;
justify-content: center;
}
.win-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 10;
}
.win-overlay.show {
display: flex;
}
.win-message {
text-align: center;
padding: 2rem 3rem;
background-color: #1a3a2a;
border-radius: 12px;
border: 2px solid #e67e22;
}
.win-message h2 {
font-size: clamp(2rem, 5vmin, 3rem);
margin-bottom: 1rem;
color: #e67e22;
}
.win-message p {
font-size: clamp(1rem, 2.5vmin, 1.5rem);
}
</style>
</head>
<body>
<div class="game-container">
<header class="game-header">
<div class="stats">
<div>Moves: <span class="moves">0</span></div>
<div>Pairs left: <span class="pairs-left">8</span></div>
</div>
<button class="new-game-btn">New Game</button>
</header>
<div class="board-container">
<div class="board"></div>
</div>
<div class="fact-display">Click a card to start! Find all 8 animal pairs.</div>
</div>
<div class="win-overlay">
<div class="win-message">
<h2>You Win!</h2>
<p>Completed in <span class="win-moves">0</span> moves</p>
</div>
</div>
<script>
const animals = [
{ id: 'axolotl', name: 'Axolotl', cell: 0, fact: 'Regrows lost limbs, spinal cord, and even parts of its brain without scarring throughout its entire life.' },
{ id: 'mantis_shrimp', name: 'Mantis Shrimp', cell: 1, fact: 'Has 16 color-receptive cones in its eyes (humans have 3) and can punch with the force of a .22 caliber bullet.' },
{ id: 'tardigrade', name: 'Tardigrade', cell: 2, fact: 'Survives extreme temperatures, radiation, and the vacuum of space by entering a dehydrated, death-like state.' },
{ id: 'platypus', name: 'Platypus', cell: 3, fact: 'A venomous, egg-laying mammal that uses electroreception to hunt prey underwater with its eyes closed.' },
{ id: 'glass_frog', name: 'Glass Frog', cell: 4, fact: 'Has translucent skin on its underside, so you can see its beating heart, intestines, and other organs.' },
{ id: 'immortal_jellyfish', name: 'Immortal Jellyfish', cell: 5, fact: 'Can revert to its juvenile polyp stage after reaching maturity, effectively making it biologically immortal.' },
{ id: 'hoatzin', name: 'Hoatzin', cell: 6, fact: 'A bird with clawed wings as a chick that ferments plant matter in its gut, giving it a cow-like smell.' },
{ id: 'star_nosed_mole', name: 'Star-Nosed Mole', cell: 7, fact: 'Has 22 fleshy tentacles on its nose that can detect and eat prey in less than a quarter of a second.' }
];
const totalPairs = animals.length;
let deck = [];
let flippedCards = [];
let matchedPairs = 0;
let moves = 0;
let isLocked = false;
const boardEl = document.querySelector('.board');
const movesEl = document.querySelector('.moves');
const pairsLeftEl = document.querySelector('.pairs-left');
const factDisplayEl = document.querySelector('.fact-display');
const winOverlayEl = document.querySelector('.win-overlay');
const winMovesEl = document.querySelector('.win-moves');
const newGameBtn = document.querySelector('.new-game-btn');
// Check if card art loads
const cardArt = new Image();
cardArt.onerror = () => {
document.body.classList.add('no-art');
};
cardArt.src = 'art/cards.png';
function shuffle(array) {
let currentIndex = array.length;
let randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
[array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
}
return array;
}
function createDeck() {
const deck = [];
animals.forEach(animal => {
deck.push({ ...animal });
deck.push({ ...animal });
});
return shuffle(deck);
}
function createBoard() {
boardEl.innerHTML = '';
deck.forEach((animal, index) => {
const card = document.createElement('div');
card.classList.add('card');
card.dataset.index = index;
card.dataset.animalId = animal.id;
const cardInner = document.createElement('div');
cardInner.classList.add('card-inner');
const cardFront = document.createElement('div');
cardFront.classList.add('card-front');
cardFront.dataset.animal = animal.id;
cardFront.textContent = animal.name;
const cell = animal.cell;
const xPos = (cell % 3) * 50;
const yPos = Math.floor(cell / 3) * 50;
cardFront.style.backgroundPosition = `${xPos}% ${yPos}%`;
const cardBack = document.createElement('div');
cardBack.classList.add('card-back');
cardInner.appendChild(cardFront);
cardInner.appendChild(cardBack);
card.appendChild(cardInner);
card.addEventListener('click', () => flipCard(card));
boardEl.appendChild(card);
});
}
function flipCard(card) {
if (isLocked) return;
if (card.classList.contains('flipped') || card.classList.contains('matched')) return;
if (flippedCards.length >= 2) return;
card.classList.add('flipped');
flippedCards.push(card);
if (flippedCards.length === 2) {
moves++;
updateStats();
checkMatch();
}
}
function checkMatch() {
const [card1, card2] = flippedCards;
const isMatch = card1.dataset.animalId === card2.dataset.animalId;
if (isMatch) {
card1.classList.add('matched');
card2.classList.add('matched');
matchedPairs++;
updateStats();
const animal = animals.find(a => a.id === card1.dataset.animalId);
showFact(animal.fact);
flippedCards = [];
checkWin();
} else {
isLocked = true;
setTimeout(() => {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
flippedCards = [];
isLocked = false;
}, 1000);
}
}
function showFact(fact) {
factDisplayEl.textContent = fact;
}
function updateStats() {
movesEl.textContent = moves;
pairsLeftEl.textContent = totalPairs - matchedPairs;
}
function checkWin() {
if (matchedPairs === totalPairs) {
winMovesEl.textContent = moves;
winOverlayEl.classList.add('show');
}
}
function setupDemoMode() {
const animalsToMatch = animals.slice(0, 7);
animalsToMatch.forEach(animal => {
const cards = document.querySelectorAll(`.card[data-animal-id="${animal.id}"]`);
cards.forEach(card => {
card.classList.add('flipped', 'matched');
});
matchedPairs++;
});
updateStats();
factDisplayEl.textContent = 'Only one pair left to find!';
}
function newGame() {
matchedPairs = 0;
moves = 0;
flippedCards = [];
isLocked = false;
winOverlayEl.classList.remove('show');
factDisplayEl.textContent = 'Click a card to start! Find all 8 animal pairs.';
deck = createDeck();
createBoard();
updateStats();
if (window.location.hash === '#demo') {
setupDemoMode();
}
}
newGameBtn.addEventListener('click', newGame);
window.addEventListener('hashchange', newGame);
window.addEventListener('DOMContentLoaded', newGame);
</script>
</body>
</html>
{
"game": { "name": "TURN TWO CARDS: FASCINATING ANIMALS" },
"sheet": {
"style": "Warm gouache illustration with soft textured brushstrokes, muted earthy base tones with vibrant accent colors, soft diffused side lighting, clean bold outlines, centered composition on a flat black background.",
"cells": [
{
"cell": 0,
"id": "axolotl",
"name": "Axolotl",
"role": "animal",
"prompt": "Axolotl with feathery external gills, floating gently, facing forward",
"fact": "Regrows lost limbs, spinal cord, and even parts of its brain without scarring throughout its entire life."
},
{
"cell": 1,
"id": "mantis_shrimp",
"name": "Mantis Shrimp",
"role": "animal",
"prompt": "Vibrant mantis shrimp with raised raptorial claws, facing forward, colorful exoskeleton",
"fact": "Has 16 color-receptive cones in its eyes (humans have 3) and can punch with the force of a .22 caliber bullet."
},
{
"cell": 2,
"id": "tardigrade",
"name": "Tardigrade",
"role": "animal",
"prompt": "Microscopic tardigrade (water bear) with plump segmented body and eight legs, close-up view",
"fact": "Survives extreme temperatures, radiation, and the vacuum of space by entering a dehydrated, death-like state."
},
{
"cell": 3,
"id": "platypus",
"name": "Platypus",
"role": "animal",
"prompt": "Platypus with duck-like bill and beaver tail, standing on a rock, facing forward",
"fact": "A venomous, egg-laying mammal that uses electroreception to hunt prey underwater with its eyes closed."
},
{
"cell": 4,
"id": "glass_frog",
"name": "Glass Frog",
"role": "animal",
"prompt": "Small glass frog sitting on a leaf, underside visible showing internal organs, translucent skin",
"fact": "Has translucent skin on its underside, so you can see its beating heart, intestines, and other organs."
},
{
"cell": 5,
"id": "immortal_jellyfish",
"name": "Immortal Jellyfish",
"role": "animal",
"prompt": "Tiny transparent immortal jellyfish (Turritopsis dohrnii) floating in dark water, glowing softly",
"fact": "Can revert to its juvenile polyp stage after reaching maturity, effectively making it biologically immortal."
},
{
"cell": 6,
"id": "hoatzin",
"name": "Hoatzin",
"role": "animal",
"prompt": "Hoatzin bird with spiky crest and blue face, perched on a branch, facing forward",
"fact": "A bird with clawed wings as a chick that ferments plant matter in its gut, giving it a cow-like smell."
},
{
"cell": 7,
"id": "star_nosed_mole",
"name": "Star-Nosed Mole",
"role": "animal",
"prompt": "Star-nosed mole with 22 tentacled snout, facing forward, dark fur",
"fact": "Has 22 fleshy tentacles on its nose that can detect and eat prey in less than a quarter of a second."
},
{
"cell": 8,
"id": "back",
"name": "Card back",
"role": "back",
"prompt": "Intricate symmetrical pattern of interlocking fern leaves and vine tendrils in deep forest green and burnt orange, centered on black background"
}
]
},
"extras": [
{
"id": "table",
"aspect": "16:9",
"prompt": "Dark forest green felt table surface with subtle woven texture and soft vignette edges, flat lay perspective, no objects on surface"
}
]
}