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."Wild Wonders" is a memory game featuring eight extraordinary animals, each with a unique and surprising trait, presented in a vibrant, flat-design art style on a 4×4 board.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wild Wonders</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: Arial, sans-serif;
background: #f0f0f0;
padding: 20px;
}
h1 { margin-bottom: 10px; font-size: 2rem; color: #333; }
.stats { margin-bottom: 20px; font-size: 1.2rem; color: #555; }
.board {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 10px;
width: 100%;
max-width: 600px;
aspect-ratio: 1;
}
.card {
position: relative;
width: 100%;
padding-top: 100%;
cursor: pointer;
transition: transform 0.3s;
}
.card-inner {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card.flipped .card-inner { transform: rotateY(180deg); }
.card-face {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
backface-visibility: hidden;
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.card-back {
background: #3498db;
display: flex;
align-items: center;
justify-content: center;
background-image: url('art/cards.png');
background-size: 33.33% 33.33%;
}
.card-face.filled {
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
text-align: center;
padding: 10px;
background-color: #fff;
}
.card-face.filled::before {
content: attr(data-name);
font-weight: bold;
color: #333;
}
.card-face img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
button {
margin-top: 20px;
padding: 12px 24px;
font-size: 1.1rem;
background: #2ecc71;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s;
}
button:hover { background: #27ae60; }
.fact {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.8);
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 1rem;
max-width: 90%;
text-align: center;
display: none;
}
.win-message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2ecc71;
color: white;
padding: 30px 40px;
border-radius: 16px;
font-size: 1.5rem;
text-align: center;
display: none;
z-index: 1000;
}
</style>
</head>
<body>
<h1>Wild Wonders</h1>
<div class="stats">
Moves: <span id="moves">0</span> | Pairs left: <span id="pairs-left">8</span>
</div>
<div class="board" id="board"></div>
<button id="new-game">New Game</button>
<div class="fact" id="fact"></div>
<div class="win-message" id="win-message">Congratulations! You matched all pairs!</div>
<img src="art/cards.png" alt="Card artwork" id="card-art">
<script>
const animals = [
{ id: 'axolotl', name: 'Axolotl', fact: 'It regrows lost limbs, and even parts of its brain, without scarring.' },
{ id: 'platypus', name: 'Platypus', fact: 'Lays eggs like birds but nurses babies like mammals.' },
{ id: 'mantis-shrimp', name: 'Mantis Shrimp', fact: 'Has the strongest punch in the animal kingdom, breaking aquarium glass.' },
{ id: 'octopus', name: 'Octopus', fact: 'Three hearts pump blood, and can change color to blend into any background.' },
{ id: 'naked-mole-rat', name: 'Naked Mole Rat', fact: 'Eusocial insects and live over 30 years underground, rarely seen above ground.' },
{ id: 'vampire-squid', name: 'Vampire Squid', fact: 'Doesn\'t suck blood; uses bioluminescent hooks to deter predators.' },
{ id: 'pangolin', name: 'Pangolin', fact: 'World\'s only scaly mammals, critically endangered from poaching for scales.' },
{ id: 'narwhal', name: 'Narwhal', fact: 'Male tusks are teeth that can grow over 3 feet, sensing water temperature.' }
];
let cards = [];
let flippedCards = [];
let moves = 0;
let matchedPairs = 0;
let gameWon = false;
function createBoard(demo = false) {
const board = document.getElementById('board');
board.innerHTML = '';
let animalIndices = demo ?
[0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7] :
shuffle([0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7]);
if (demo) {
animalIndices = [0,1,2,3,4,5,6,7,0,1,2,3,4,5,6,7];
}
for (let i = 0; i < 16; i++) {
const card = document.createElement('div');
card.className = 'card';
card.dataset.index = i;
card.dataset.animalIndex = animalIndices[i];
const inner = document.createElement('div');
inner.className = 'card-inner';
const front = document.createElement('div');
front.className = 'card-face card-back';
const back = document.createElement('div');
back.className = 'card-face filled';
back.dataset.name = animals[animalIndices[i]].name;
inner.appendChild(front);
inner.appendChild(back);
card.appendChild(inner);
board.appendChild(card);
card.addEventListener('click', () => handleCardClick(card));
}
}
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function handleCardClick(card) {
if (gameWon || card.classList.contains('flipped') ||
flippedCards.length >= 2) return;
card.classList.add('flipped');
flippedCards.push(card);
if (flippedCards.length === 2) {
checkMatch();
}
}
function checkMatch() {
const [card1, card2] = flippedCards;
const animal1 = card1.dataset.animalIndex;
const animal2 = card2.dataset.animalIndex;
if (animal1 === animal2) {
matchedPairs++;
updateStats();
showFact(animals[parseInt(animal1)].fact);
if (matchedPairs === 8) endGame();
} else {
setTimeout(() => {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
}, 1000);
}
moves++;
updateStats();
flippedCards = [];
}
function updateStats() {
document.getElementById('moves').textContent = moves;
document.getElementById('pairs-left').textContent = 8 - matchedPairs;
}
function showFact(fact) {
const factEl = document.getElementById('fact');
factEl.textContent = fact;
factEl.style.display = 'block';
setTimeout(() => {
factEl.style.display = 'none';
}, 3000);
}
function endGame() {
gameWon = true;
document.getElementById('win-message').style.display = 'block';
}
function newGame() {
moves = 0;
matchedPairs = 0;
gameWon = false;
flippedCards = [];
updateStats();
document.getElementById('win-message').style.display = 'none';
createBoard(window.location.hash === '#demo');
}
window.addEventListener('load', () => {
const cardArt = document.getElementById('card-art');
cardArt.onerror = function() {
const style = document.createElement('style');
style.textContent = `
.card-face.filled {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.9rem;
text-align: center;
padding: 10px;
}
.card-back { background: #3498db; }
`;
document.head.appendChild(style);
};
newGame();
});
document.getElementById('new-game').addEventListener('click', newGame);
</script>
</body>
</html>
{
"game": { "name": "Wild Wonders" },
"sheet": {
"style": "Vibrant, detailed flat design with clean lines, soft lighting, and a consistent color palette of earthy tones and bright accent colors. Each cell features the subject centered against a solid background with subtle shadows for depth.",
"cells": [
{
"cell": 0,
"id": "axolotl",
"name": "Axolotl",
"role": "animal",
"prompt": "A smiling axolotl with feathery gills and pinkish skin, floating in a vibrant underwater scene with soft coral and gentle lighting. Flat design style with clean lines and bright colors.",
"fact": "It regrows lost limbs, and even parts of its brain, without scarring."
},
{
"cell": 1,
"id": "platypus",
"name": "Platypus",
"role": "animal",
"prompt": "A platypus with distinctive duck bill and webbed feet emerging from a riverbank at golden hour, with soft rippling water and warm orange sunset colors. Flat design style with clean lines and bright colors.",
"fact": "Lays eggs like birds but nurses babies like mammals."
},
{
"cell": 2,
"id": "mantis-shrimp",
"name": "Mantis Shrimp",
"role": "animal",
"prompt": "A vivid mantis shrimp with colorful club-like appendages in a coral reef, surrounded by glowing plankton and neon blue-green water. Flat design style with clean lines and bright colors.",
"fact": "Has the strongest punch in the animal kingdom, breaking aquarium glass."
},
{
"cell": 3,
"id": "octopus",
"name": "Octopus",
"role": "animal",
"prompt": "An octopus with eight undulating arms changing colors to match a rocky seabed, with subtle texture on its skin and soft ambient lighting. Flat design style with clean lines and bright colors.",
"fact": "Three hearts pump blood, and can change color to blend into any background."
},
{
"cell": 4,
"id": "naked-mole-rat",
"name": "Naked Mole Rat",
"role": "animal",
"prompt": "A naked mole rat with pinkish skin and buck teeth, emerging from dark soil into a dimly lit underground tunnel with glowing crystals. Flat design style with clean lines and bright colors.",
"fact": "Eusocial insects and live over 30 years underground, rarely seen above ground."
},
{
"cell": 5,
"id": "vampire-squid",
"name": "Vampire Squid",
"role": "animal",
"prompt": "A vampire squid with translucent body and bioluminescent spots, floating in the deep ocean with faint blue-green light filtering down. Flat design style with clean lines and bright colors.",
"fact": "Doesn't suck blood; uses bioluminescent hooks to deter predators."
},
{
"cell": 6,
"id": "pangolin",
"name": "Pangolin",
"role": "animal",
"prompt": "A pangolin with overlapping keratin scales curled into a ball, in a savanna sunset with acacia trees and warm golden light. Flat design style with clean lines and bright colors.",
"fact": "World's only scaly mammals, critically endangered from poaching for scales."
},
{
"cell": 7,
"id": "narwhal",
"name": "Narwhal",
"role": "animal",
"prompt": "A narwhal with a long spiral tusk breaching in Arctic waters, surrounded by icebergs and aurora borealis in soft pastel colors. Flat design style with clean lines and bright colors.",
"fact": "Male tusks are teeth that can grow over 3 feet, sensing water temperature."
},
{
"cell": 8,
"id": "back",
"name": "Card back",
"role": "back",
"prompt": "A geometric pattern of interlocking hexagons in deep blue and silver, with subtle gradient shading and clean lines. Flat design style with clean lines and bright colors."
}
]
},
"extras": []
}