Compare Qwen Plus 0728 (thinking) by Qwen against GPT OSS 20B by OpenAI, context windows of 1.0M vs 131K, tested across 37 shared challenges. Updated February 2026.
32 challenges
Tests an AI's ability to make educated estimates based on technical knowledge
Tests an AI's ability to solve a simple but potentially confusing logic puzzle
Tests an AI's randomness and creativity
Tests an AI's ability to create detailed SVG illustrations of gaming hardware
Tests an AI's ability to simulate personalities and predict future trends
Tests an AI's humor and understanding of current events
Tests an AI's ability to write in distinct character voices
Tests an AI's ability to generate a complete, working landing page
Recreate an interactive, nostalgic Pokémon battle UI in a single HTML file.
Recreate an interactive, classic Mario level in a single HTML file.
Couldn't render this response
This model didn't return a displayable web page for this challenge.
# Super Mario Bros. Level Recreation
I've created a fully interactive Super Mario Bros. level that captures the spirit of Nintendo games. This single-page HTML features authentic gameplay mechanics, colorful pixel art, and classic Mario elements - all while staying true to the original game's charm.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Super Mario Bros. - Castle Run</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Courier New', monospace;
background: linear-gradient(to bottom, #6495ED, #1E90FF);
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
text-shadow: 2px 2px 0 #000;
}
.game-container {
position: relative;
width: 800px;
height: 500px;
overflow: hidden;
border: 4px solid #DAA520;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
background: linear-gradient(to bottom, #6495ED 70%, #2E8B57 70%);
}
.game-title {
position: absolute;
top: 10px;
left: 0;
width: 100%;
text-align: center;
font-size: 36px;
font-weight: bold;
color: #FFFFFF;
text-shadow:
3px 0 0 #E52421,
-3px 0 0 #E52421,
0 3px 0 #E52421,
0 -3px 0 #E52421,
3px 3px 0 #E52421,
-3px 3px 0 #E52421,
3px -3px 0 #E52421,
-3px -3px 0 #E52421;
z-index: 10;
letter-spacing: 3px;
text-transform: uppercase;
}
.ui-overlay {
position: absolute;
top: 10px;
left: 10px;
display: flex;
gap: 20px;
z-index: 10;
}
.ui-element {
background: rgba(0, 0, 0, 0.5);
padding: 8px 15px;
border-radius: 20px;
font-weight: bold;
min-width: 80px;
text-align: center;
}
.ui-element span {
color: #FFFF00;
font-size: 24px;
display: block;
}
.level-container {
position: absolute;
width: 4000px;
height: 500px;
transform: translateX(0);
transition: transform 0.1s linear;
}
/* Ground and platforms */
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #8B4513;
border-top: 4px solid #DAA520;
}
.platform {
position: absolute;
background: #8B4513;
border: 2px solid #DAA520;
border-bottom: none;
}
/* Pipes */
.pipe {
position: absolute;
background: #00A86B;
border: 2px solid #000;
border-bottom: none;
}
.pipe-top {
position: absolute;
background: #00A86B;
border: 2px solid #000;
border-top: none;
border-radius: 0 0 10px 10px;
}
/* Coins */
.coin {
position: absolute;
width: 20px;
height: 20px;
background: #FFD700;
border-radius: 50%;
box-shadow: 0 0 5px #FFA500, inset 0 0 5px #DAA520;
animation: coinSpin 0.5s infinite alternate;
}
@keyframes coinSpin {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
/* Question blocks */
.question-block {
position: absolute;
width: 40px;
height: 40px;
background: #E5D9B6;
border: 2px solid #000;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
color: #000;
animation: blockBounce 1.5s infinite;
}
@keyframes blockBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.used-block {
background: #A9A9A9;
}
/* Mario character */
#mario {
position: absolute;
width: 40px;
height: 60px;
z-index: 10;
transition: transform 0.1s;
}
/* Mario CSS art */
#mario::before {
content: '';
position: absolute;
width: 40px;
height: 60px;
background: #E52421;
border-radius: 20px 20px 0 0;
z-index: 2;
}
#mario::after {
content: '';
position: absolute;
width: 40px;
height: 15px;
background: #E52421;
top: -5px;
border-radius: 20px 20px 0 0;
z-index: 3;
}
.mario-hat {
position: absolute;
width: 40px;
height: 15px;
background: #E52421;
top: -10px;
border-radius: 20px 20px 0 0;
z-index: 4;
}
.mario-face {
position: absolute;
width: 30px;
height: 25px;
background: #FFB6C1;
top: 20px;
left: 5px;
border-radius: 15px 15px 0 0;
z-index: 5;
}
.mario-eyes {
position: absolute;
width: 8px;
height: 8px;
background: #000;
border-radius: 50%;
top: 25px;
}
.mario-eye-left {
left: 8px;
}
.mario-eye-right {
right: 8px;
}
.mario-mustache {
position: absolute;
width: 20px;
height: 5px;
background: #000;
top: 35px;
left: 10px;
border-radius: 0 0 5px 5px;
}
.mario-arms {
position: absolute;
width: 10px;
height: 20px;
background: #FFB6C1;
top: 30px;
}
.mario-arm-left {
left: -5px;
border-radius: 5px 0 0 5px;
}
.mario-arm-right {
right: -5px;
border-radius: 0 5px 5px 0;
}
.mario-legs {
position: absolute;
width: 15px;
height: 20px;
background: #000;
bottom: 0;
}
.mario-leg-left {
left: 5px;
border-radius: 0 0 3px 3px;
}
.mario-leg-right {
right: 5px;
border-radius: 0 0 3px 3px;
}
/* Goomba enemy */
.goomba {
position: absolute;
width: 40px;
height: 30px;
z-index: 5;
}
.goomba::before {
content: '';
position: absolute;
width: 40px;
height: 30px;
background: #8B4513;
border-radius: 50% 50% 0 0;
}
.goomba::after {
content: '';
position: absolute;
width: 40px;
height: 10px;
background: #000;
bottom: -5px;
border-radius: 0 0 10px 10px;
}
.goomba-eye {
position: absolute;
width: 8px;
height: 8px;
background: #000;
border-radius: 50%;
top: 5px;
}
.goomba-eye-left {
left: 8px;
}
.goomba-eye-right {
right: 8px;
}
/* Koopa Troopa */
.koopa {
position: absolute;
width: 40px;
height: 45px;
z-index: 5;
}
.koopa-shell {
position: absolute;
width: 40px;
height: 30px;
background: #008000;
border-radius: 50% 50% 0 0;
top: 0;
}
.koopa-body {
position: absolute;
width: 30px;
height: 25px;
background: #FFB6C1;
border-radius: 15px 15px 0 0;
top: 15px;
left: 5px;
}
.koopa-eye {
position: absolute;
width: 6px;
height: 6px;
background: #000;
border-radius: 50%;
top: 20px;
}
.koopa-eye-left {
left: 10px;
}
.koopa-eye-right {
right: 10px;
}
.koopa-leg {
position: absolute;
width: 8px;
height: 15px;
background: #FFB6C1;
bottom: 0;
border-radius: 2px;
}
/* Flag */
.flag-pole {
position: absolute;
width: 8px;
height: 300px;
background: #D3D3D3;
bottom: 100px;
left: 3700px;
}
.flag {
position: absolute;
width: 30px;
height: 30px;
background: #FF0000;
bottom: 250px;
left: 3690px;
border: 1px solid #000;
}
/* Castle */
.castle {
position: absolute;
width: 200px;
height: 200px;
background: #D3D3D3;
bottom: 100px;
right: 50px;
border: 2px solid #000;
}
.castle-top {
position: absolute;
width: 220px;
height: 40px;
background: #8B4513;
bottom: 200px;
right: 40px;
}
.castle-tower {
position: absolute;
width: 60px;
height: 80px;
background: #D3D3D3;
border: 2px solid #000;
}
.castle-tower-left {
bottom: 180px;
right: 190px;
}
.castle-tower-right {
bottom: 180px;
right: 30px;
}
.tower-top {
position: absolute;
width: 70px;
height: 20px;
background: #8B4513;
border: 2px solid #000;
}
.tower-top-left {
bottom: 260px;
right: 185px;
}
.tower-top-right {
bottom: 260px;
right: 25px;
}
.castle-door {
position: absolute;
width: 50px;
height: 80px;
background: #8B4513;
bottom: 100px;
right: 125px;
border: 1px solid #000;
}
/* Coins collection effect */
.coin-collected {
animation: coinCollect 0.5s forwards;
}
@keyframes coinCollect {
to {
transform: translateY(-30px) scale(0.5);
opacity: 0;
}
}
/* Jump effect */
.mario-jump {
animation: marioJump 0.3s forwards;
}
@keyframes marioJump {
50% { transform: translateY(-15px); }
100% { transform: translateY(0); }
}
/* Game over */
.game-over {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 100;
display: none;
}
.game-over h2 {
font-size: 48px;
color: #FF0000;
margin-bottom: 20px;
text-shadow: 3px 3px 0 #000;
}
.game-over p {
font-size: 24px;
margin: 10px 0;
}
.restart-btn {
background: #E52421;
color: white;
border: none;
padding: 12px 30px;
font-size: 20px;
font-weight: bold;
border-radius: 30px;
margin-top: 20px;
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 2px;
box-shadow: 0 4px 0 #A00000;
}
.restart-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 0 #A00000;
}
.restart-btn:active {
transform: translateY(2px);
box-shadow: 0 2px 0 #A00000;
}
/* Controls info */
.controls {
position: absolute;
bottom: 15px;
left: 0;
width: 100%;
text-align: center;
font-size: 16px;
background: rgba(0, 0, 0, 0.3);
padding: 5px;
}
.controls span {
background: rgba(0, 0, 0, 0.3);
padding: 0 10px;
border-radius: 15px;
margin: 0 5px;
font-weight: bold;
}
/* Score animation */
.score-popup {
position: absolute;
color: #FFFF00;
font-weight: bold;
z-index: 20;
animation: scoreRise 1s forwards;
}
@keyframes scoreRise {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(-30px); opacity: 0; }
}
/* Power-up effects */
.starman {
animation: starman 0.2s infinite;
}
@keyframes starman {
0% { filter: hue-rotate(0deg); }
50% { filter: hue-rotate(180deg); }
100% { filter: hue-rotate(360deg); }
}
/* Hidden elements for sound */
.sound {
display: none;
}
</style>
</head>
<body>
<div class="game-container">
<div class="game-title">Super Mario Bros. - Castle Run</div>
<div class="ui-overlay">
<div class="ui-element">
COINS<br><span id="coin-count">0</span>
</div>
<div class="ui-element">
SCORE<br><span id="score">0</span>
</div>
<div class="ui-element">
WORLD<br><span>1-1</span>
</div>
</div>
<div class="level-container" id="level">
<div class="ground"></div>
<!-- Platforms -->
<div class="platform" style="left: 200px; top: 300px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 400px; top: 250px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 600px; top: 200px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 800px; top: 150px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 1000px; top: 200px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 1200px; top: 250px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 1400px; top: 300px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 1600px; top: 250px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 1800px; top: 200px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 2000px; top: 150px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 2200px; top: 200px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 2400px; top: 250px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 2600px; top: 300px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 2800px; top: 250px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 3000px; top: 200px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 3200px; top: 150px; width: 100px; height: 20px;"></div>
<div class="platform" style="left: 3400px; top: 100px; width: 100px; height: 20px;"></div>
<!-- Pipes -->
<div class="pipe" style="left: 300px; bottom: 100px; width: 60px; height: 80px;"></div>
<div class="pipe-top" style="left: 300px; bottom: 180px; width: 60px; height: 20px;"></div>
<div class="pipe" style="left: 700px; bottom: 100px; width: 80px; height: 100px;"></div>
<div class="pipe-top" style="left: 700px; bottom: 200px; width: 80px; height: 20px;"></div>
<div class="pipe" style="left: 1100px; bottom: 100px; width: 100px; height: 120px;"></div>
<div class="pipe-top" style="left: 1100px; bottom: 220px; width: 100px; height: 20px;"></div>
<!-- Question blocks -->
<div class="question-block" style="left: 500px; bottom: 160px;" id="qblock1"></div>
<div class="question-block" style="left: 900px; bottom: 160px;" id="qblock2"></div>
<div class="question-block" style="left: 1300px; bottom: 160px;" id="qblock3"></div>
<div class="question-block" style="left: 1700px; bottom: 160px;" id="qblock4"></div>
<div class="question-block" style="left: 2100px; bottom: 160px;" id="qblock5"></div>
<div class="question-block" style="left: 2500px; bottom: 160px;" id="qblock6"></div>
<div class="question-block" style="left: 2900px; bottom: 160px;" id="qblock7"></div>
<!-- Coins -->
<div class="coin" style="left: 250px; bottom: 130px;"></div>
<div class="coin" style="left: 270px; bottom: 130px;"></div>
<div class="coin" style="left: 290px; bottom: 130px;"></div>
<div class="coin" style="left: 450px; bottom: 80px;"></div>
<div class="coin" style="left: 470px; bottom: 80px;"></div>
<div class="coin" style="left: 490px; bottom: 80px;"></div>
<div class="coin" style="left: 650px; bottom: 50px;"></div>
<div class="coin" style="left: 670px; bottom: 50px;"></div>
<div class="coin" style="left: 690px; bottom: 50px;"></div>
<div class="coin" style="left: 850px; bottom: 0px;"></div>
<div class="coin" style="left: 870px; bottom: 0px;"></div>
<div class="coin" style="left: 890px; bottom: 0px;"></div>
<div class="coin" style="left: 1050px; bottom: 50px;"></div>
<div class="coin" style="left: 1070px; bottom: 50px;"></div>
<div class="coin" style="left: 1090px; bottom: 50px;"></div>
<div class="coin" style="left: 1250px; bottom: 80px;"></div>
<div class="coin" style="left: 1270px; bottom: 80px;"></div>
<div class="coin" style="left: 1290px; bottom: 80px;"></div>
<div class="coin" style="left: 1450px; bottom: 130px;"></div>
<div class="coin" style="left: 1470px; bottom: 130px;"></div>
<div class="coin" style="left: 1490px; bottom: 130px;"></div>
<div class="coin" style="left: 1650px; bottom: 80px;"></div>
<div class="coin" style="left: 1670px; bottom: 80px;"></div>
<div class="coin" style="left: 1690px; bottom: 80px;"></div>
<div class="coin" style="left: 1850px; bottom: 50px;"></div>
<div class="coin" style="left: 1870px; bottom: 50px;"></div>
<div class="coin" style="left: 1890px; bottom: 50px;"></div>
<div class="coin" style="left: 2050px; bottom: 0px;"></div>
<div class="coin" style="left: 2070px; bottom: 0px;"></div>
<div class="coin" style="left: 2090px; bottom: 0px;"></div>
<div class="coin" style="left: 2250px; bottom: 50px;"></div>
<div class="coin" style="left: 2270px; bottom: 50px;"></div>
<div class="coin" style="left: 2290px; bottom: 50px;"></div>
<div class="coin" style="left: 2450px; bottom: 80px;"></div>
<div class="coin" style="left: 2470px; bottom: 80px;"></div>
<div class="coin" style="left: 2490px; bottom: 80px;"></div>
<div class="coin" style="left: 2650px; bottom: 130px;"></div>
<div class="coin" style="left: 2670px; bottom: 130px;"></div>
<div class="coin" style="left: 2690px; bottom: 130px;"></div>
<div class="coin" style="left: 2850px; bottom: 80px;"></div>
<div class="coin" style="left: 2870px; bottom: 80px;"></div>
<div class="coin" style="left: 2890px; bottom: 80px;"></div>
<div class="coin" style="left: 3050px; bottom: 50px;"></div>
<div class="coin" style="left: 3070px; bottom: 50px;"></div>
<div class="coin" style="left: 3090px; bottom: 50px;"></div>
<div class="coin" style="left: 3250px; bottom: 0px;"></div>
<div class="coin" style="left: 3270px; bottom: 0px;"></div>
<div class="coin" style="left: 3290px; bottom: 0px;"></div>
<div class="coin" style="left: 3450px; bottom: -40px;"></div>
<div class="coin" style="left: 3470px; bottom: -40px;"></div>
<div class="coin" style="left: 3490px; bottom: -40px;"></div>
<!-- Enemies -->
<div class="goomba" style="left: 400px; bottom: 100px;"></div>
<div class="goomba" style="left: 800px; bottom: 100px;"></div>
<div class="goomba" style="left: 1200px; bottom: 100px;"></div>
<div class="goomba" style="left: 1600px; bottom: 100px;"></div>
<div class="goomba" style="left: 2000px; bottom: 100px;"></div>
<div class="goomba" style="left: 2400px; bottom: 100px;"></div>
<div class="goomba" style="left: 2800px; bottom: 100px;"></div>
<div class="goomba" style="left: 3200px; bottom: 100px;"></div>
<div class="koopa" style="left: 1000px; bottom: 100px;"></div>
<div class="koopa" style="left: 1800px; bottom: 100px;"></div>
<div class="koopa" style="left: 2600px; bottom: 100px;"></div>
<div class="koopa" style="left: 3400px; bottom: 100px;"></div>
<!-- Flag and castle -->
<div class="flag-pole"></div>
<div class="flag"></div>
<div class="castle"></div>
<div class="castle-top"></div>
<div class="castle-tower castle-tower-left"></div>
<div class="castle-tower castle-tower-right"></div>
<div class="tower-top tower-top-left"></div>
<div class="tower-top tower-top-right"></div>
<div class="castle-door"></div>
<!-- Mario -->
<div id="mario">
<div class="mario-hat"></div>
<div class="mario-face">
<div class="mario-eyes mario-eye-left"></div>
<div class="mario-eyes mario-eye-right"></div>
<div class="mario-mustache"></div>
</div>
<div class="mario-arms mario-arm-left"></div>
<div class="mario-arms mario-arm-right"></div>
<div class="mario-legs mario-leg-left"></div>
<div class="mario-legs mario-leg-right"></div>
</div>
</div>
<div class="controls">
CONTROLS: <span>← →</span> Move | <span>SPACE</span> Jump | <span>ENTER</span> Restart
</div>
<div class="game-over" id="game-over">
<h2>GAME OVER</h2>
<p>Your adventure ends here!</p>
<p>Coins collected: <span id="final-coins">0</span></p>
<p>Final score: <span id="final-score">0</span></p>
<button class="restart-btn" id="restart-btn">Play Again</button>
</div>
<!-- Sound effects -->
<audio id="coin-sound" class="sound">
<source src="data:audio/wav;base64,UklGRiQDAABXQVZFZm10IBAAAAABAAEAiBUAAIgVAAABAAgAZGF0YQADAACBhYqFbF1fdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBhQkFfdJivrJBh......Tests an AI's ability to create smooth web animations
Tests an AI's UI design skills with theming support