Navigable multi-slide HTML presentations, judged on layout and navigation.
5 tasks ·
19 models tested ·
95 results
Startup pitch
html
anthropicclaude-haiku-4-5-20251001
9.8/1012.4 s
anthropicclaude-haiku-4-5-20251001
Tokens2 669
Source code5.6 KB
Time12.4 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.75
Review
The model perfectly adhered to all technical constraints, specifically the container size (400x400), keyboard and button navigation, and the position indicator. The visual rendering is professional, featuring excellent typographic hierarchy and a modern, clean design.
The model perfectly adhered to all technical constraints, specifically the 400x400 container and the complete navigation system (keyboard + buttons + indicator). The visual rendering is exceptional for pure HTML/CSS, featuring polished typographic hierarchy and modern gradients that capture the aesthetic of a startup pitch.
The model perfectly adhered to all constraints, including the specific container dimensions (400x400) and the complex navigation mechanisms. The visual rendering is professional, featuring excellent typographic hierarchy and a modern design. The code is concise, efficient, and fully functional.
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#1a1a2e;font-family:-apple-system,'Segoe UI',sans-serif}
.deck{width:400px;height:400px;background:#fff;border-radius:16px;overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.slide{position:absolute;inset:0;padding:32px;display:none;flex-direction:column;justify-content:center}
.slide.active{display:flex}
.tag{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#7c5ce8;font-weight:600;margin-bottom:12px}
h1{font-size:34px;font-weight:800;line-height:1.1;color:#1a1a2e;margin-bottom:14px;letter-spacing:-1px}
h2{font-size:22px;font-weight:700;color:#1a1a2e;margin-bottom:14px;letter-spacing:-.5px}
p{font-size:14px;line-height:1.55;color:#4a4a6a}
.logo{font-size:48px;font-weight:900;background:linear-gradient(135deg,#7c5ce8,#ff6b9d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
ul{list-style:none}
li{font-size:13px;color:#3a3a5a;padding:8px 0;border-bottom:1px solid #eee;display:flex;justify-content:space-between}
li:last-child{border:0}
li b{color:#7c5ce8}
.stat{display:flex;gap:16px;margin-top:14px}
.stat div{flex:1;background:#f4f1ff;padding:12px;border-radius:10px}
.stat span{display:block;font-size:24px;font-weight:800;color:#7c5ce8}
.stat small{font-size:10px;color:#6a6a8a;text-transform:uppercase;letter-spacing:1px}
.cta{background:linear-gradient(135deg,#7c5ce8,#ff6b9d);color:#fff;padding:14px;border-radius:10px;text-align:center;font-weight:700;margin-top:14px;font-size:14px}
.nav{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:14px;z-index:10}
.nav button{width:30px;height:30px;border-radius:50%;border:0;background:#1a1a2e;color:#fff;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center}
.nav button:hover{background:#7c5ce8}
.ind{font-size:12px;color:#6a6a8a;font-weight:600;min-width:30px;text-align:center}
</style>
</head>
<body>
<div class="deck">
<div class="slide active">
<div class="logo">Nimbus<span style="color:#1a1a2e">Brew</span></div>
<div class="tag">Coffee, Reimagined</div>
<p style="margin-top:10px">AI-curated cold brew, delivered fresh to your door every Tuesday.</p>
</div>
<div class="slide">
<div class="tag">The Problem</div>
<h1>Bad Coffee Costs Time</h1>
<p>Office workers waste <b style="color:#7c5ce8">26 minutes daily</b> hunting decent coffee. Subscription boxes are stale, generic, and never match your taste.</p>
</div>
<div class="slide">
<div class="tag">The Solution</div>
<h2>Personalized Cold Brew</h2>
<ul>
<li>Taste Quiz <b>30 sec</b></li>
<li>AI Roast Match <b>99% acc</b></li>
<li>Weekly Delivery <b>Free</b></li>
<li>Ethical Sourcing <b>Direct</b></li>
</ul>
</div>
<div class="slide">
<div class="tag">Traction</div>
<h2>Growing Fast</h2>
<div class="stat">
<div><span>12K</span><small>Subscribers</small></div>
<div><span>4.9★</span><small>App Rating</small></div>
</div>
<div class="stat">
<div><span>$1.4M</span><small>ARR</small></div>
<div><span>22%</span><small>MoM Growth</small></div>
</div>
</div>
<div class="slide">
<div class="tag">The Ask</div>
<h1>$3M Seed</h1>
<p>Fueling roastery expansion, ML personalization, and entry into 5 new metros by Q4.</p>
<div class="cta">Join the brew →</div>
</div>
<div class="nav">
<button id="prev">◀</button>
<div class="ind" id="ind">1/5</div>
<button id="next">▶</button>
</div>
</div>
<script>
var slides=document.querySelectorAll('.slide');
var ind=document.getElementById('ind');
var i=0;
function show(n){
slides[i].classList.remove('active');
i=(n+slides.length)%slides.length;
slides[i].classList.add('active');
ind.textContent=(i+1)+'/'+slides.length;
}
document.getElementById('prev').onclick=function(){show(i-1)};
document.getElementById('next').onclick=function(){show(i+1)};
document.addEventListener('keydown',function(e){
if(e.key==='ArrowLeft')show(i-1);
if(e.key==='ArrowRight')show(i+1);
});
</script>
</body>
</html>
anthropicclaude-sonnet-4-6
9.8/1046.6 s
anthropicclaude-sonnet-4-6
Tokens5 219
Source code12.4 KB
Time46.6 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.75
Review
The model perfectly adhered to all technical constraints, specifically the 400x400 container and the complex navigation (keyboard + buttons + indicator). The visual rendering is high quality, featuring polished typography and a clear hierarchy typical of a professional pitch. The code is clean and well-structured, although truncated in the provided snippet (which is normal for a code test).
The model perfectly adhered to all prompt constraints, specifically the 400x400 format, keyboard and button navigation, and the exact number of slides. The visual output is clean and professional with a clear hierarchy, although the design remains quite minimalist.
The model perfectly adhered to all technical and functional constraints of the prompt, including keyboard navigation, buttons, the position indicator, and the 400x400 container. The code is clean and efficient. The visual output is functional but very minimalist, lacking the true typographic and design "polish" required for a professional pitch, although it does respect the structural requirements.
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0; font-family: sans-serif; }
#container { width: 400px; height: 400px; background: #fff; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
.slide { width: 400px; height: 350px; display: none; padding: 40px; box-sizing: border-box; }
.active { display: block; }
h1 { font-size: 24px; color: #333; }
p { font-size: 16px; color: #666; line-height: 1.5; }
#nav { position: absolute; bottom: 0; width: 400px; height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-sizing: border-box; border-top: 1px solid #eee; }
button { cursor: pointer; background: #333; color: #fff; border: none; padding: 5px 15px; }
</style>
</head>
<body>
<div id="container">
<div class="slide active"><h1>SolarStream</h1><p>Revolutionizing clean energy distribution through decentralized micro-grids.</p></div>
<div class="slide"><h1>The Problem</h1><p>Traditional power grids are inefficient, prone to failure, and rely on centralized fossil fuel sources.</p></div>
<div class="slide"><h1>Our Solution</h1><p>AI-driven peer-to-peer energy trading platform that optimizes local renewable production.</p></div>
<div class="slide"><h1>Market Growth</h1><p>We are targeting a 50 billion dollar market in residential solar hardware and software integration.</p></div>
<div class="slide"><h1>Join Us</h1><p>Help us power the future. Investing in sustainability, one home at a time.</p></div>
<div id="nav">
<button onclick="change(-1)">◀</button>
<span id="counter">1/5</span>
<button onclick="change(1)">▶</button>
</div>
</div>
<script>
var current = 0;
var slides = document.getElementsByClassName('slide');
function change(dir) {
slides[current].className = 'slide';
current = (current + dir + 5) % 5;
slides[current].className = 'slide active';
document.getElementById('counter').innerHTML = (current + 1) + '/5';
}
document.onkeydown = function(e) {
if(e.keyCode === 37) change(-1);
if(e.keyCode === 39) change(1);
};
</script>
</body>
</html>
mistralmistral-large-latest
9.6/1025.6 s
mistralmistral-large-latest
Tokens1 775
Source code5.6 KB
Time25.6 s
Matania Judgment
Rendering
8
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.63
Review
The model perfectly adhered to all technical constraints, including the container size (400x400), keyboard and button navigation, and the indicator format. The code is clean and semantic, and the visual rendering is professional despite the small size of the presentation area.
The model perfectly adhered to all technical constraints: the container is indeed 400x400, arrow and button navigation is implemented with a position indicator, and the design is clean. The code is slightly truncated at the end of the provided block, but the logical structure is excellent and aligns with the requested pitch.
The model perfectly adhered to all technical constraints: the container is indeed 400x400, both keyboard and button navigation are functional, and the position indicator is present. The visual rendering is clean, minimalist, and professional, featuring a clear typographic hierarchy despite the simplicity of the code.
<style>
* {margin:0;padding:0;box-sizing:border-box}
body {font-family:"Helvetica Neue",Arial,sans-serif;background:#f5f5f5;overflow:hidden}
#presentation {width:400px;height:400px;margin:20px auto;position:relative;background:#fff;box-shadow:0 0 20px rgba(0,0,0,0.1)}
.slide {position:absolute;top:0;left:0;width:100%;height:100%;padding:40px;display:none;text-align:center;opacity:0;transition:opacity 0.5s}
.slide.active {display:block;opacity:1}
.slide h1 {font-size:28px;font-weight:300;color:#333;margin-bottom:20px}
.slide p {font-size:16px;line-height:1.6;color:#666;margin-bottom:15px}
.slide .highlight {color:#e74c3c;font-weight:600}
.slide .cta {font-size:18px;color:#fff;background:#3498db;padding:12px 30px;border-radius:4px;text-decoration:none;display:inline-block;margin-top:20px}
.slide .cta:hover {background:#2980b9}
.nav {position:absolute;bottom:20px;left:0;width:100%;text-align:center}
.nav button {background:none;border:none;color:#999;font-size:24px;cursor:pointer;margin:0 10px}
.nav button:hover {color:#333}
.nav span {color:#999;font-size:16px}
</style>
</head>
<body>
<div id="presentation">
<div class="slide active" id="slide1">
<h1>Welcome to <span class="highlight">NexusFlow</span></h1>
<p>Revolutionizing the way teams collaborate with our AI-powered workflow engine.</p>
<p>Built for the future, powered by intelligence.</p>
</div>
<div class="slide" id="slide2">
<h1>Our Mission</h1>
<p>To eliminate inefficiencies in project management by automating repetitive tasks and providing real-time insights.</p>
<p>We believe work should be intuitive, not complicated.</p>
</div>
<div class="slide" id="slide3">
<h1>Key Features</h1>
<ul style="list-style:none;text-align:left;display:inline-block;font-size:16px;text-align:left">
<li>✓ AI Task Automation</li>
<li>✓ Real-time Collaboration</li>
<li>✓ Smart Scheduling</li>
<li>✓ Data Analytics Dashboard</li>
</ul>
</div>
<div class="slide" id="slide4">
<h1>Why Choose Us?</h1>
<p>NexusFlow reduces project completion time by up to <span class="highlight">40%</span> and cuts operational costs by <span class="highlight">30%</span>.</p>
<p>Trusted by over <span class="highlight">5,000</span> companies worldwide.</p>
</div>
<div class="slide" id="slide5">
<h1>Join the Future</h1>
<p>Ready to transform your workflow?</p>
<a href="#" class="cta">Get Started Free</a>
</div>
<div class="nav">
<button id="prev">◀</button><span id="counter">1/5</span><button id="next">▶</button>
</div>
</div>
<script>
var currentSlide = 0;
var slides = document.querySelectorAll('.slide');
var totalSlides = slides.length;
var counter = document.getElementById('counter');
var prevBtn = document.getElementById('prev');
var nextBtn = document.getElementById('next');
function showSlide(index) {
for (var i = 0; i < totalSlides; i++) {
slides[i].classList.remove('active');
}
if (index >= totalSlides) currentSlide = 0;
if (index < 0) currentSlide = totalSlides - 1;
slides[currentSlide].classList.add('active');
counter.textContent = (currentSlide + 1) + '/' + totalSlides;
}
prevBtn.onclick = function() {
currentSlide--;
showSlide(currentSlide);
};
nextBtn.onclick = function() {
currentSlide++;
showSlide(currentSlide);
};
document.onkeydown = function(e) {
if (e.keyCode == 37) {
currentSlide--;
showSlide(currentSlide);
} else if (e.keyCode == 39) {
currentSlide++;
showSlide(currentSlide);
}
};
showSlide(0);
</script>
</body>
</html
openaigpt-4o-mini
8.8/1019.2 s
openaigpt-4o-mini
Tokens1 204
Source code3.3 KB
Time19.2 s
Matania Judgment
Rendering
4
Navigation
9
Code quality
7
Completeness
10
Fidelity
10
Overall
8.75
Review
The model perfectly adheres to all technical and functional constraints (navigation, number of slides, 400x400 container, indicator). However, the visual output is extremely minimalist and lacks the requested "polished typography" and "clear visual hierarchy," settling instead for a very basic, raw HTML style.
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#container {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
border: 2px solid #333;
background-color: #fff;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
transition: opacity 0.5s;
}
.active {
opacity: 1;
}
#nav-buttons {
display: flex;
justify-content: space-between;
position: absolute;
bottom: 20px;
width: 100%;
padding: 0 10px;
}
button {
background-color: #007BFF;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
#slide-indicator {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
}
</style>
</head>
<body>
<div id="container">
<div class="slide active">
<h1>Startup Idea</h1>
<p>Revolutionizing the way you connect with local businesses.</p>
</div>
<div class="slide">
<h1>Our Mission</h1>
<p>Empowering communities through technology and connections.</p>
</div>
<div class="slide">
<h1>Market Opportunity</h1>
<p>Over 30 million small businesses can benefit from our platform.</p>
</div>
<div class="slide">
<h1>Competitive Advantage</h1>
<p>We offer unique features that set us apart from competitors.</p>
</div>
<div class="slide">
<h1>Get Involved</h1>
<p>Join us on this journey to transform local business interactions!</p>
</div>
<div id="nav-buttons">
<button id="prev">◀</button>
<button id="next">▶</button>
</div>
<div id="slide-indicator">1/5</div>
</div>
<script>
var slides = document.getElementsByClassName('slide');
var currentIndex = 0;
function showSlide(index) {
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
slides[index].classList.add('active');
document.getElementById('slide-indicator').innerText = (index + 1) + '/5';
}
function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length;
showSlide(currentIndex);
}
function prevSlide() {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
showSlide(currentIndex);
}
document.getElementById('next').onclick = nextSlide;
document.getElementById('prev').onclick = prevSlide;
document.onkeydown = function(event) {
if (event.key === 'ArrowRight') {
nextSlide();
} else if (event.key === 'ArrowLeft') {
prevSlide();
}
};
</script>
</body>
</html>
openaigpt-5.4
6.9/1039.8 s
openaigpt-5.4
Tokens2 923
Source code9.9 KB
Time39.8 s
Matania Judgment
Rendering
9
Navigation
9
Code quality
9
Completeness
4
Fidelity
6
Overall
6.88
Review
The visual rendering is excellent, featuring polished typography and a clear hierarchy that perfectly respects the 400x400 container. However, the code is truncated (incomplete), which prevents the presentation from reaching the requested 5 slides and makes it impossible to navigate through the entire content. Fidelity is heavily penalized by this abrupt cutoff of the source code.
The model failed critically: the source code is truncated (it cuts off abruptly in the middle of a tag), making the HTML file invalid and non-functional. Consequently, navigation, the completeness of the 5 slides, and the code structure are either entirely missing or broken. Only the partial visual rendering of the first slide is acceptable.
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background: #0f1220;
font-family: Arial, Helvetica, sans-serif;
color: #f4f7fb;
}
.deck {
width: 400px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
background: #0f1220;
}
.slide {
position: absolute;
inset: 0;
padding: 28px;
box-sizing: border-box;
display: none;
flex-direction: column;
justify-content: space-between;
background: linear-gradient(180deg, #12162a 0%, #0f1220 100%);
}
.slide.active {
display: flex;
}
.kicker {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 11px;
color: #7dd3fc;
margin-bottom: 10px;
font-weight: bold;
}
h1, h2 {
margin: 0;
line-height: 0.96;
font-weight: 800;
}
h1 {
font-size: 40px;
max-width: 320px;
}
h2 {
font-size: 28px;
max-width: 320px;
}
p {
margin: 0;
color: #c6cbe0;
font-size: 14px;
line-height: 1.5;
max-width: 330px;
}
.accent {
color: #7dd3fc;
}
.card {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(125,211,252,0.18);
border-radius: 18px;
padding: 16px;
box-sizing: border-box;
}
.stats {
display: flex;
gap: 10px;
}
.stat {
flex: 1;
padding: 14px 12px;
border-radius: 16px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
}
.stat .num {
font-size: 26px;
font-weight: 800;
color: #ffffff;
margin-bottom: 4px;
}
.stat .lbl {
font-size: 11px;
color: #aeb7d5;
text-transform: uppercase;
letter-spacing: 1px;
}
ul {
margin: 0;
padding-left: 18px;
color: #dbe3ff;
line-height: 1.6;
font-size: 14px;
}
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
pointer-events: auto;
}
.nav-btn {
width: 34px;
height: 34px;
border: none;
border-radius: 999px;
background: #1d2440;
color: #ffffff;
font-size: 18px;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
.nav-btn:hover {
background: #2a3560;
}
.indicator {
min-width: 52px;
text-align: center;
font-size: 12px;
color: #dbe3ff;
letter-spacing: 1px;
}
.logo {
width: 44px;
height: 44px;
border-radius: 14px;
background: linear-gradient(135deg, #7dd3fc 0%, #818cf8 100%);
display: flex;
align-items: center;
justify-content: center;
color: #07111f;
font-weight: 900;
font-size: 20px;
margin-bottom: 18px;
}
.big-metric {
font-size: 52px;
font-weight: 900;
line-height: 0.95;
margin: 10px 0 8px;
color: #ffffff;
}
.subtle {
color: #9aa4c7;
font-size: 12px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mini {
padding: 12px;
border-radius: 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
}
.mini h3 {
margin: 0 0 6px;
font-size: 13px;
color: #ffffff;
}
.mini p {
font-size: 12px;
}
.timeline {
display: flex;
gap: 8px;
margin-top: 12px;
}
.step {
flex: 1;
height: 8px;
border-radius: 999px;
background: rgba(255,255,255,0.1);
overflow: hidden;
}
.step.active {
background: linear-gradient(90deg, #7dd3fc, #818cf8);
}
</style>
</head>
<body>
<div class="deck">
<section class="slide active">
<div>
<div class="logo">A</div>
<div class="kicker">Introducing AeroSync</div>
<h1>Autonomous operations for modern delivery fleets.</h1>
<p style="margin-top:14px;">AeroSync turns scattered vehicles, routes, and dispatch decisions into one intelligent system that cuts delays, lowers fuel burn, and keeps customers informed in real time.</p>
</div>
<div class="card">
<div class="subtle">We help logistics teams move faster with less manual coordination.</div>
</div>
</section>
<section class="slide">
<div>
<div class="kicker">The problem</div>
<h2>Fleet operations are still run like it’s 2010.</h2>
<div style="height:14px;"></div>
<ul>
<li>Dispatchers juggle spreadsheets, calls, and chat threads.</li>
<li>Routes change constantly, but systems react too slowly.</li>
<li>Late deliveries create support tickets and lost trust.</li>
<li>Managers lack a live view of performance and risk.</li>
</ul>
</div>
<div class="stats">
<div class="stat">
<div class="num">27%</div>
<div class="lbl">idle time</div>
</div>
<div class="stat">
<div class="num">19%</div>
<div class="lbl">late orders</div>
</div>
</div>
</section>
<section class="slide">
<div>
<div class="kicker">Our solution</div>
<h2>A single AI layer that orchestrates every move.</h2>
<div style="height:12px;"></div>
<div class="grid">
<div class="mini">
<h3>Smart dispatch</h3>
<p>Auto-assigns jobs based on location, capacity, and urgency.</p>
</div>
<div class="mini">
<h3>Live routing</h3>
<p>Re-optimizes paths instantly when traffic or demand shifts.</p>
</div>
<div class="mini">
<h3>Predictive alerts</h3>
<p>Flags delays before they happen, with recommended fixes.</p>
</div>
<div class="mini">
<h3>Customer updates</h3>
<p>Sends accurate ETAs without manual follow-up.</p>
</div>
</div>
</div>
<div class="card">
<p><span class="accent">Result:</span> fewer late deliveries, lower costs, and a calmer operations team.</p>
</div>
</section>
<section class="slide">
<div>
<div class="kicker">Traction</div>
<h2>Early pilots are showing strong efficiency gains.</h2>
<div class="big-metric">-31%</div>
<p>Average reduction in delivery delays across pilot fleets in the first 60 days.</p>
<div class="timeline">
<div class="step active"></div>
<div class="step active"></div>
<div class="step active"></div>
<div class="step"></div>
</div>
</div>
<div class="stats">
<div class="stat">
<div class="num">8</div>
<div class="lbl">pilot customers</div>
</div>
<div class="stat">
<div class="num">2.4x</div>
<div class="lbl">faster dispatch</div>
</div>
</div>
</section>
<section class="slide">
<div>
<div class="kicker">Why now</div>
<h2>We’re building the control plane for the next generation of logistics.</h2>
<div style="height:12px;"></div>
<ul>
<li>Fleet software is fragmented and overdue for automation.</li>
<li>Real-time data from vehicles and roads is now widely available.</li>
<li>Customers expect Amazon-level precision from every business.</li>
</ul>
</div>
<div class="card">
<p><span class="accent">AeroSync</span> is raising seed funding to scale integrations, expand sales, and bring autonomous operations to more fleets.</p>
</div>
</section>
<div class="footer">
<button class="nav-btn" id="prevBtn">◀</button>
<div class="indicator" id="indicator">1/5</div>
<button class="nav-btn" id="nextBtn">▶</button>
</div>
</div>
<script>
(function () {
var slides = document.getElementsByClassName('slide');
var indicator = document.getElementById('indicator');
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');
var index = 0;
function showSlide(i) {
if (i < 0) i = slides.length - 1;
if (i >= slides.length) i = 0;
index = i;
for (var j = 0; j < slides.length; j++) {
slides[j].className = slides[j].className.replace(/\s?active/g, '');
if (j === index) {
slides[j].className += ' active';
}
}
indicator.innerHTML = (index + 1) + '/5';
}
prevBtn.onclick = function () {
showSlide(index - 1);
};
nextBtn.onclick = function () {
showSlide(index + 1);
};
document.addEventListener('keydown', function (e) {
if (e.keyCode === 37) {
showSlide(index - 1);
} else if (e.keyCode === 39) {
showSlide(index + 1);
}
});
showSlide(0);
})();
</script>
</body>
</html>
openaigpt-5.4-nano
9.8/1046.4 s
openaigpt-5.4-nano
Tokens5 258
Source code19.1 KB
Time46.4 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.75
Review
The model perfectly adhered to all technical constraints, including the 400x400 container, arrow and button navigation, and the position indicator. The visual rendering is extremely professional, featuring excellent typographic hierarchy and a very polished dark mode design. The code is clean, well-structured, and utilizes smooth transitions.
The model perfectly adhered to all constraints, including the specific 400x400 container size and the navigation requirements (arrows, buttons, and indicator). The visual hierarchy and typography are professional and polished, looking like a real startup pitch. The code is well-structured and highly efficient for a self-contained file.
The visual rendering is excellent, featuring polished typography and a clear hierarchy that respects the 400x400 container perfectly. The navigation (buttons, indicators, arrows) complies with the instructions. However, the code_quality score is severely impacted because the script is truncated at the end (incomplete code), which would render the navigation functionality inactive in a real-world environment despite the correct HTML structure.
<style>
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;font-family:Inter,Arial,Helvetica,sans-serif;background:#101623;color:#ffffff}
body{display:flex;align-items:center;justify-content:center}
.deck{width:400px;height:400px;position:relative;overflow:hidden;background:#151f33;border-radius:24px;box-shadow:0 18px 60px rgba(0,0,0,0.45)}
.slide{display:none;position:absolute;left:0;top:0;width:400px;height:400px;padding:34px 30px 74px 30px}
.slide.active{display:block}
.kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:800;color:#67e8f9;margin-bottom:12px}
h1{font-size:36px;line-height:0.95;margin:0 0 16px 0;font-weight:900}
h2{font-size:28px;line-height:1.05;margin:0 0 16px 0;font-weight:900}
p{font-size:15px;line-height:1.45;margin:0;color:#d7e0f4}
.big{font-size:18px;color:#ffffff;font-weight:700}
.logo{width:58px;height:58px;border-radius:18px;background:#67e8f9;color:#101623;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:26px;margin-bottom:20px}
.card{background:#202c45;border:1px solid #33415f;border-radius:18px;padding:16px;margin-top:16px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.metric{background:#202c45;border-radius:16px;padding:14px;border:1px solid #33415f}
.metric b{display:block;font-size:24px;color:#ffffff;margin-bottom:4px}
.metric span{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#aab8d4;font-weight:800}
.list{margin:18px 0 0 0;padding:0;list-style:none}
.list li{font-size:14px;line-height:1.35;margin:0 0 12px 0;padding-left:24px;position:relative;color:#e7eefc}
.list li:before{content:"";width:9px;height:9px;background:#67e8f9;border-radius:50%;position:absolute;left:0;top:5px}
.pillrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pill{font-size:12px;font-weight:800;color:#101623;background:#a7f3d0;border-radius:999px;padding:8px 10px}
.nav{position:absolute;left:0;bottom:0;width:400px;height:58px;background:#0f1729;border-top:1px solid #283654;display:flex;align-items:center;justify-content:space-between;padding:0 18px}
button{width:46px;height:36px;border:0;border-radius:12px;background:#67e8f9;color:#101623;font-size:18px;font-weight:900;cursor:pointer}
button:active{transform:translateY(1px)}
.indicator{font-size:13px;font-weight:900;letter-spacing:1px;color:#dbeafe}
.accent{position:absolute;right:-42px;top:-42px;width:150px;height:150px;background:#1e7a8a;border-radius:50%;opacity:0.9}
.bar{height:10px;background:#33415f;border-radius:999px;margin-top:10px;overflow:hidden}
.fill{height:10px;background:#67e8f9;border-radius:999px}
.quote{font-size:20px;line-height:1.25;font-weight:900;color:#ffffff;margin-top:18px}
.price{font-size:42px;font-weight:900;margin-top:12px;color:#ffffff}
.small{font-size:12px;color:#aab8d4;margin-top:6px}
</style>
</head>
<body>
<div class="deck" aria-label="Startup pitch deck">
<section class="slide active">
<div class="accent"></div>
<div class="logo">N</div>
<div class="kicker">NimbleNest</div>
<h1>AI that runs home services while owners sleep.</h1>
<p class="big">A voice-first operations copilot for cleaners, plumbers, landscapers, and repair teams.</p>
<div class="pillrow">
<div class="pill">Scheduling</div>
<div class="pill">Dispatch</div>
<div class="pill">Follow-ups</div>
</div>
</section>
<section class="slide">
<div class="kicker">The problem</div>
<h2>Local service teams lose revenue to admin chaos.</h2>
<ul class="list">
<li>Missed calls become missed jobs.</li>
<li>Manual routing wastes fuel and technician hours.</li>
<li>Quotes, reminders, and reviews fall through the cracks.</li>
</ul>
<div class="card">
<p class="quote">Owners spend 14+ hours per week coordinating work instead of winning it.</p>
</div>
</section>
<section class="slide">
<div class="kicker">Our solution</div>
<h2>One AI dispatcher for every job.</h2>
<p>NimbleNest answers calls, books appointments, assigns technicians, sends updates, collects payment, and asks for reviews.</p>
<div class="grid">
<div class="metric"><b>24/7</b><span>Call capture</span></div>
<div class="metric"><b>18%</b><span>Less idle time</span></div>
<div class="metric"><b>2 min</b><span>Setup per route</span></div>
<div class="metric"><b>4.8</b><span>Review boost</span></div>
</div>
</section>
<section class="slide">
<div class="kicker">Business model</div>
<h2>Simple SaaS with usage upside.</h2>
<div class="price">$149</div>
<p class="small">per crew per month, plus 1% of payments processed</p>
<div class="card">
<p><strong style="color:#ffffff">Beachhead:</strong> 120,000 small home-service companies in the U.S. with 2–20 employees.</p>
<div class="bar"><div class="fill" style="width:68%"></div></div>
<p class="small">Target gross margin: 82%</p>
</div>
</section>
<section class="slide">
<div class="kicker">The ask</div>
<h2>Raising $1.8M to launch nationally.</h2>
<ul class="list">
<li>Hire product, voice AI, and customer success leads.</li>
<li>Expand integrations with Stripe, QuickBooks, and Google Calendar.</li>
<li>Reach 1,000 paying crews within 18 months.</li>
</ul>
<div class="card">
<p class="big">NimbleNest turns every small service business into an always-on operation.</p>
</div>
</section>
<div class="nav">
<button id="prev" aria-label="Previous slide">◀</button>
<div class="indicator" id="indicator">1/5</div>
<button id="next" aria-label="Next slide">▶</button>
</div>
</div>
<script>
(function(){
var slides=document.getElementsByClassName("slide");
var indicator=document.getElementById("indicator");
var index=0;
function show(n){
if(n<0){n=slides.length-1}
if(n>=slides.length){n=0}
slides[index].className="slide";
index=n;
slides[index].className="slide active";
indicator.innerHTML=(index+1)+"/"+slides.length;
}
document.getElementById("prev").onclick=function(){show(index-1)};
document.getElementById("next").onclick=function(){show(index+1)};
document.onkeydown=function(e){
e=e||window.event;
var code=e.keyCode||e.which;
if(code===37){show(index-1)}
if(code===39){show(index+1)}
};
}());
</script>
</body>
</html>
openaigpt-5.5-pro
2.6/10309.3 s
openaigpt-5.5-pro
Tokens2 454
Source code8.1 KB
Time309.3 s
Matania Judgment
Rendering
9
Navigation
0
Code quality
2
Completeness
2
Fidelity
2
Overall
2.63
Review
The model failed critically by providing truncated code that stops midway through the 4th slide, leaving the presentation incomplete and non-functional. Navigation is impossible because the JavaScript code and the closing HTML tags are missing, and the requested number of slides (5) was not met. While the visual rendering of the first few slides is high quality, the structural failure and failure to meet completeness constraints heavily penalize the score.
<style>
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#182033;color:#102033;display:flex;align-items:center;justify-content:center}
.deck{width:400px;height:400px;background:#f7f4ed;border-radius:22px;overflow:hidden;position:relative;box-shadow:0 24px 60px rgba(0,0,0,0.35)}
.slide{position:absolute;left:0;top:0;width:100%;height:340px;padding:26px 28px 18px 28px;display:none}
.slide.active{display:flex;flex-direction:column}
.kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:800;color:#0e8a74;margin-bottom:10px}
h1{font-size:38px;line-height:0.94;margin:0 0 12px 0;color:#12243a;letter-spacing:-1.6px}
h2{font-size:27px;line-height:1.02;margin:0 0 12px 0;color:#12243a;letter-spacing:-1px}
p{font-size:14px;line-height:1.45;margin:0;color:#475569}
.big{font-size:17px;color:#26364a;line-height:1.42}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;color:#12243a;font-size:18px;margin-bottom:34px}
.mark{width:30px;height:30px;border-radius:10px;background:#10a37f;position:relative}
.mark:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#f7f4ed;left:9px;top:9px}
.hero-card{margin-top:auto;background:#12243a;color:#fff;border-radius:20px;padding:18px;display:flex;gap:12px;align-items:center}
.hero-card strong{font-size:30px;line-height:1;color:#68e0bd}
.hero-card span{font-size:12px;line-height:1.25;color:#d8e3ea}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:10px}
.tile{background:#fff;border:1px solid #e5dfd1;border-radius:17px;padding:14px;min-height:94px}
.tile b{display:block;font-size:24px;color:#12243a;margin-bottom:6px}
.tile span{font-size:12px;line-height:1.25;color:#64748b}
.mock{margin-top:12px;background:#fff;border:1px solid #e3ddcf;border-radius:20px;padding:12px;box-shadow:0 8px 20px rgba(18,36,58,0.08)}
.bar{height:12px;border-radius:9px;background:#dbe4e0;margin:9px 0;overflow:hidden}
.bar i{display:block;height:100%;background:#10a37f;border-radius:9px}
.row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#64748b;margin-top:9px}
.pill{display:inline-block;border-radius:999px;background:#dff7ef;color:#08715f;font-size:12px;font-weight:800;padding:7px 10px;margin-top:12px}
.steps{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.step{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:16px;padding:12px;border:1px solid #e5dfd1}
.num{width:26px;height:26px;border-radius:9px;background:#12243a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex:0 0 auto}
.step b{display:block;font-size:14px;color:#12243a;margin-bottom:2px}
.step span{font-size:12px;color:#64748b;line-height:1.25}
.metric-line{display:flex;gap:10px;margin-top:16px}
.metric{flex:1;background:#fff;border-radius:18px;padding:14px 12px;border:1px solid #e5dfd1}
.metric b{display:block;font-size:25px;color:#10a37f;letter-spacing:-1px}
.metric span{font-size:11px;color:#64748b;line-height:1.2}
.ask{margin-top:auto;background:#10a37f;color:#fff;border-radius:20px;padding:18px}
.ask b{display:block;font-size:25px;letter-spacing:-0.8px;margin-bottom:4px}
.ask span{font-size:13px;line-height:1.3;color:#ecfff9}
.nav{position:absolute;left:0;bottom:0;width:100%;height:60px;background:#fff;border-top:1px solid #e9e1d2;display:flex;align-items:center;justify-content:center;gap:18px}
button{width:44px;height:36px;border:0;border-radius:13px;background:#12243a;color:#fff;font-size:18px;font-weight:900;cursor:pointer}
button:hover{background:#10a37f}
.indicator{width:54px;text-align:center;font-size:13px;font-weight:900;color:#12243a}
.accent{position:absolute;border-radius:50%;background:#bff1e2}
.a1{width:122px;height:122px;right:-42px;top:42px}
.a2{width:72px;height:72px;right:24px;top:150px;background:#f7d774}
</style>
</head>
<body>
<div class="deck" role="region" aria-label="PulseNest startup pitch deck">
<section class="slide active">
<div class="accent a1"></div>
<div class="accent a2"></div>
<div class="logo"><div class="mark"></div>PulseNest</div>
<div class="kicker">Fictional startup pitch</div>
<h1>Sleep intelligence for modern families.</h1>
<p class="big">PulseNest turns nursery sound, light, and motion into gentle, actionable sleep coaching for parents.</p>
<div class="hero-card"><strong>42%</strong><span>fewer night wake-ups in our simulated pilot cohort after four weeks.</span></div>
</section>
<section class="slide">
<div class="kicker">The problem</div>
<h2>Parents are drowning in guesswork.</h2>
<p>Baby sleep advice is fragmented, generic, and hard to apply at 3 a.m.</p>
<div class="grid">
<div class="tile"><b>71%</b><span>of new parents track sleep manually or not at all.</span></div>
<div class="tile"><b>3.2h</b><span>average nightly sleep loss in the first year.</span></div>
<div class="tile"><b>12+</b><span>competing apps, monitors, notes, and opinions.</span></div>
<div class="tile"><b>$9B</b><span>family wellness market seeking better guidance.</span></div>
</div>
</section>
<section class="slide">
<div class="kicker">Our solution</div>
<h2>A calm coach powered by room context.</h2>
<p>PulseNest learns each child’s rhythm and suggests tiny adjustments before sleep debt builds.</p>
<div class="mock">
<div class="row"><b>Tonight readiness</b><span>86%</span></div>
<div class="bar"><i style="width:86%"></i></div>
<div class="row"><span>Dim lights by 7:10 PM</span><span>+18 min sleep</span></div>
<div class="row"><span>White noise stable</span><span>Good</span></div>
<div class="row"><span>Nap window</span><span>2:05 PM</span></div>
</div>
<span class="pill">No cameras. Privacy-first sensor fusion.</span>
</section>
<section class="slide">
<div class="kicker">How it wins</div>
<h2>Hardware trust, software margins.</h2>
<div class="steps">
<div class="step"><div class="num">1</div><div><b>Smart bedside hub</b><span>Measures sound, light, temperature, humidity, and routine signals.</span></div></div>
<div class="step"><div class="num">2</div><div><b>Adaptive sleep model</b><span>Personalizes wake windows, bedtime cues, and environment targets.</span></div></div>
<div class="step"><div class="num">3</div><div><b>Subscription coaching</b><span>Weekly plans, partner sharing, and pediatrician-friendly reports.</span></div></div>
</div>
</section>
<section class="slide">
<div class="kicker">The ask</div>
<h2>Raising $2.4M to launch in 18 months.</h2>
<p>Funds support sensor manufacturing, clinical validation, and a focused go-to-market with sleep consultants.</p>
<div class="metric-line">
<div class="metric"><b>$129</b><span>hub retail price</span></div>
<div class="metric"><b>$12</b><span>monthly coaching plan</span></div>
<div class="metric"><b>58%</b><span>target gross margin</span></div>
</div>
<div class="ask"><b>PulseNest</b><span>Helping families wake up rested, connected, and confident.</span></div>
</section>
<div class="nav">
<button id="prev" type="button" aria-label="Previous slide">◀</button>
<div id="indicator" class="indicator">1/5</div>
<button id="next" type="button" aria-label="Next slide">▶</button>
</div>
</div>
<script>
(function(){
var slides=document.getElementsByClassName("slide");
var indicator=document.getElementById("indicator");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var index=0;
function show(n){
var i;
index=(n+slides.length)%slides.length;
for(i=0;i<slides.length;i++){
slides[i].className=slides[i].className.replace(" active","");
}
slides[index].className+=" active";
indicator.innerHTML=(index+1)+"/"+slides.length;
}
prev.onclick=function(){show(index-1)};
next.onclick=function(){show(index+1)};
document.onkeydown=function(e){
e=e||window.event;
if(e.keyCode===37){show(index-1)}
if(e.keyCode===39){show(index+1)}
};
})();
</script>
</body>
</html>
productiviamatania-latest
9.8/1010.1 s
productiviamatania-latest
Tokens1 427
Source code4.2 KB
Time10.1 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.75
Review
The model perfectly adhered to all technical constraints, including the 400x400 container, keyboard and button navigation, and the position indicator. The design is sleek, professional, and respects a clear visual hierarchy. The code is clean, well-structured, and self-contained.
The model perfectly adhered to all technical and content constraints. The design is modern, featuring excellent visual hierarchy and polished typography that integrates well within the 400x400 container. The navigation is comprehensive (buttons, indicator, directional keys) and the code is clean and efficient.
The model perfectly adhered to all technical and structural constraints. Navigation is complete (keyboard, buttons, indicator), the container respects the 400x400 dimensions, and the design is clean with excellent visual hierarchy. The code is clean, efficient, and free of unnecessary duplication.
The model perfectly adhered to all constraints, including the 400x400 format and keyboard navigation. The output is clean and educational, and the source code is well-structured with effective manual syntax highlighting. The position indicator and buttons function exactly as requested.
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 10px;
}
.container {
width: 400px;
height: 400px;
background: white;
border-radius: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
overflow: hidden;
}
.slides {
flex: 1;
position: relative;
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
padding: 30px;
opacity: 0;
transition: opacity 0.4s ease-in-out;
display: flex;
flex-direction: column;
justify-content: center;
color: #333;
}
.slide.active {
opacity: 1;
}
.slide h2 {
font-size: 24px;
margin-bottom: 20px;
color: #667eea;
}
.slide p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
font-size: 12px;
line-height: 1.5;
overflow-x: auto;
margin: 10px 0;
}
.controls {
background: #f5f5f5;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #ddd;
}
button {
background: #667eea;
color: white;
border: none;
padding: 8px 16px;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
transition: background 0.3s;
}
button:hover {
background: #764ba2;
}
button:disabled {
background: #ccc;
cursor: not-allowed;
}
.indicator {
font-size: 14px;
font-weight: bold;
color: #667eea;
}
.kw { color: #ff79c6; }
.fn { color: #8be9fd; }
.num { color: #bd93f9; }
.cmt { color: #6272a4; }
</style>
</head>
<body>
<div class="container">
<div class="slides">
<div class="slide active">
<h2>1. What is Recursion?</h2>
<p><strong>Recursion</strong> is a programming technique where a function calls itself to solve a smaller version of the same problem.</p>
<p>Key idea: Break a complex problem into simpler subproblems of the same type until reaching a base case.</p>
<p style="margin-top: 20px; font-style: italic; color: #666;">Think: Russian nesting dolls, each containing a smaller version inside.</p>
</div>
<div class="slide">
<h2>2. Factorial Example</h2>
<p>Calculate 5! = 5 × 4 × 3 × 2 × 1 = 120</p>
<div class="code-block">
<span class="kw">function</span> <span class="fn">factorial</span>(n) {<br>
<span class="kw">if</span> (n === <span class="num">1</span>) {<br>
<span class="kw">return</span> <span class="num">1</span>;<br>
}<br>
<span class="kw">return</span> n * <span class="fn">factorial</span>(n - <span class="num">1</span>);<br>
}
</div>
<p style="font-size: 12px; margin-top: 10px;">Each call reduces n until it reaches 1.</p>
</div>
<div class="slide">
<h2>3. The Base Case</h2>
<p><strong>Base case:</strong> The condition that stops recursion. Without it, the function calls itself infinitely.</p>
<p>In the factorial example:</p>
<div class="code-block">
<span class="kw">if</span> (n === <span class="num">1</span>) {<br>
<span class="kw">return</span> <span class="num">1</span>; <span class="cmt">// Base case</span><br>
}
</div>
<p style="margin-top: 15px; font-size: 12px;">Every recursive function must have at least one base case to prevent stack overflow.</p>
</div>
<div class="slide">
<h2>4. Common Pitfalls</h2>
<p><strong>❌ Missing base case:</strong> Function recurses infinitely → Stack overflow</p>
<p><strong>❌ Wrong base case:</strong> Recursion doesn't terminate properly</p>
<p><strong>❌ Inefficient recursion:</strong> Recalculating same values (use memoization)</p>
<p style="margin-top: 15px; font-size: 12px; color: #666;"><strong>✓ Solution:</strong> Always define clear base case and ensure progress toward it.</p>
</div>
</div>
<div class="controls">
<button id="prevBtn" onclick="prevSlide()">← Previous</button>
<span class="indicator"><span id="current">1</span>/4</span>
<button id="nextBtn" onclick="nextSlide()">Next →</button>
</div>
</div>
<script>
var currentSlide = 0;
var slides = document.querySelectorAll('.slide');
var totalSlides = slides.length;
function showSlide(n) {
slides.forEach(function(slide) {
slide.classList.remove('active');
});
slides[n].classList.add('active');
document.getElementById('current').textContent = n + 1;
document.getElementById('prevBtn').disabled = n === 0;
document.getElementById('nextBtn').disabled = n === totalSlides - 1;
}
function nextSlide() {
if (currentSlide < totalSlides - 1) {
currentSlide++;
showSlide(currentSlide);
}
}
function prevSlide() {
if (currentSlide > 0) {
currentSlide--;
showSlide(currentSlide);
}
}
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight') nextSlide();
if (e.key === 'ArrowLeft') prevSlide();
});
showSlide(0);
</script>
</body>
</html>
anthropicclaude-opus-4-6
9.6/1034.4 s
anthropicclaude-opus-4-6
Tokens2 986
Source code6.5 KB
Time34.4 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
8
Completeness
10
Fidelity
10
Overall
9.63
Review
The model followed all instructions perfectly, including the strict 400x400 constraint and the specific slide topics. The visual design is professional, featuring excellent syntax highlighting and a clear hierarchy. Note: Although the code snippet provided in the prompt was truncated at the end, the logic and structure are complete and functional based on the visible implementation.
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 400px;
height: 400px;
font-family: Arial, Helvetica, sans-serif;
background: #1a1a2e;
color: #eee;
overflow: hidden;
}
.presentation {
width: 400px;
height: 400px;
position: relative;
}
.slide {
display: none;
width: 400px;
height: 400px;
padding: 30px 25px 60px 25px;
position: absolute;
top: 0;
left: 0;
}
.slide.active {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.slide h2 {
font-size: 22px;
margin-bottom: 18px;
color: #e94560;
text-align: center;
}
.slide p {
font-size: 14px;
line-height: 1.6;
text-align: center;
max-width: 340px;
}
.slide ul {
font-size: 13px;
line-height: 1.8;
max-width: 340px;
padding-left: 20px;
}
.slide ul li {
margin-bottom: 6px;
}
.code-block {
background: #0f0f23;
border: 1px solid #e94560;
border-radius: 8px;
padding: 15px 18px;
font-family: "Courier New", Courier, monospace;
font-size: 13px;
line-height: 1.7;
text-align: left;
width: 340px;
margin-top: 10px;
}
.code-block .keyword { color: #c678dd; }
.code-block .func { color: #61afef; }
.code-block .number { color: #d19a66; }
.code-block .comment { color: #5c6370; font-style: italic; }
.code-block .operator { color: #56b6c2; }
.code-block .return-kw { color: #c678dd; }
.code-block .string { color: #98c379; }
.nav-bar {
position: absolute;
bottom: 0;
left: 0;
width: 400px;
height: 50px;
background: #16213e;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
border-top: 2px solid #e94560;
}
.nav-bar button {
background: #e94560;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 5px;
cursor: pointer;
font-size: 13px;
font-weight: bold;
transition: background 0.2s;
}
.nav-bar button:hover {
background: #c73652;
}
.nav-bar button:disabled {
background: #444;
cursor: default;
}
.indicator {
font-size: 15px;
font-weight: bold;
color: #e94560;
}
.highlight-box {
background: #16213e;
border-left: 4px solid #e94560;
padding: 12px 16px;
border-radius: 0 6px 6px 0;
margin-top: 12px;
max-width: 340px;
}
.highlight-box p {
font-size: 13px;
text-align: left;
}
.icon {
font-size: 40px;
margin-bottom: 10px;
}
.pitfall-item {
background: #16213e;
border-radius: 6px;
padding: 8px 12px;
margin-bottom: 8px;
width: 340px;
font-size: 13px;
line-height: 1.5;
}
.pitfall-item strong {
color: #e94560;
}
</style>
</head>
<body>
<div class="presentation">
<div class="slide active" id="slide1">
<div class="icon">🔄</div>
<h2>What is Recursion?</h2>
<p>A function that <strong style="color:#e94560;">calls itself</strong> to solve a problem by breaking it into smaller, identical subproblems.</p>
<div class="highlight-box">
<p>Every recursive function needs:<br>
✅ A <strong style="color:#61afef;">base case</strong> (stopping condition)<br>
✅ A <strong style="color:#61afef;">recursive case</strong> (self-call)</p>
</div>
</div>
<div class="slide" id="slide2">
<h2>Example: Factorial</h2>
<p style="margin-bottom:8px; font-size:13px;">5! = 5 × 4 × 3 × 2 × 1 = 120</p>
<div class="code-block">
<span class="keyword">def</span> <span class="func">factorial</span>(n):<br>
<span class="comment"># Base case</span><br>
<span class="keyword">if</span> n <span class="operator">==</span> <span class="number">0</span>:<br>
<span class="return-kw">return</span> <span class="number">1</span><br>
<span class="comment"># Recursive case</span><br>
<span class="return-kw">return</span> n <span class="operator">*</span> <span class="func">factorial</span>(n <span class="operator">-</span> <span class="number">1</span>)
</div>
<p style="margin-top:10px; font-size:12px; color:#aaa;">
factorial(3) → 3 × factorial(2) → 3 × 2 × factorial(1) → 3 × 2 × 1 = <strong style="color:#e94560;">6</strong>
</p>
</div>
<div class="slide" id="slide3">
<div class="icon">🛑</div>
<h2>The Base Case</h2>
<p>The base case is the <strong style="color:#e94560;">exit condition</strong> that stops recursion. Without it, the function calls itself forever.</p>
<div class="highlight-box">
<p><strong style="color:#61afef;">Think of it like this:</strong><br>
🪆 Russian dolls — you keep opening until you reach the smallest one. That smallest doll is your base case.</p>
</div>
<p style="margin-top:14px; font-size:13px; color:#aaa;">
Always ensure each recursive call moves <strong style="color:#e94560;">closer</strong> to the base case.
</p>
</div>
<div class="slide" id="slide4">
<h2>⚠️ Common Pitfalls</h2>
<div class="pitfall-item">
<strong>1. Missing base case</strong><br>
Causes infinite recursion → stack overflow crash.
</div>
<div class="pitfall-item">
<strong>2. Base case never reached</strong><br>
Arguments don't converge toward the stopping condition.
</div>
<div class="pitfall-item">
<strong>3. Excessive memory usage</strong><br>
Each call adds a frame to the call stack. Consider iteration for deep recursion.
</div>
<div class="pitfall-item">
<strong>4. Redundant computation</strong><br>
e.g., naive Fibonacci. Use memoization to cache results.
</div>
</div>
<div class="nav-bar">
<button id="prevBtn" onclick="changeSlide(-1)">◀ Prev</button>
<span class="indicator" id="indicator">1/4</span>
<button id="nextBtn" onclick="changeSlide(1)">Next ▶</button>
</div>
</div>
<script>
var currentSlide = 1;
var totalSlides = 4;
function showSlide(n) {
var slides = document.querySelectorAll('.slide');
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
slides[n - 1].classList.add('active');
document.getElementById('indicator').textContent = n + '/' + totalSlides;
document.getElementById('prevBtn').disabled = (n === 1);
document.getElementById('nextBtn').disabled = (n === totalSlides);
}
function changeSlide(direction) {
var newSlide = currentSlide + direction;
if (newSlide >= 1 && newSlide <= totalSlides) {
currentSlide = newSlide;
showSlide(currentSlide);
}
}
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
changeSlide(1);
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
changeSlide(-1);
}
});
showSlide(1);
</script>
</body>
</html>
anthropicclaude-opus-4-7
9.8/1019.7 s
anthropicclaude-opus-4-7
Tokens2 432
Source code3.9 KB
Time19.7 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.75
Review
Le modèle a suivi chaque instruction à la perfection. La présentation est contenue dans un conteneur de 400x400, inclut les 4 diapositives demandées, implémente une navigation au clavier et par boutons, et propose un bloc de code avec coloration syntaxique bien stylisé. Le design visuel est épuré, pédagogique et professionnel.
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#222;font-family:Arial,sans-serif}
.deck{width:400px;height:400px;background:#f5f5f5;position:relative;overflow:hidden;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.5)}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;padding:24px;display:none;flex-direction:column}
.slide.active{display:flex}
h2{color:#2a4d8f;font-size:20px;margin-bottom:12px;border-bottom:2px solid #2a4d8f;padding-bottom:6px}
p{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}
ul{font-size:13px;color:#333;padding-left:18px;line-height:1.6}
pre{background:#1e1e1e;color:#dcdcdc;padding:12px;border-radius:5px;font-family:'Courier New',monospace;font-size:12px;line-height:1.4;overflow:auto}
.kw{color:#569cd6}.fn{color:#dcdcaa}.num{color:#b5cea8}.cmt{color:#6a9955}.str{color:#ce9178}
.nav{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 12px}
button{background:#2a4d8f;color:#fff;border:none;padding:6px 14px;border-radius:4px;cursor:pointer;font-size:13px}
button:hover{background:#1a3a70}
.ind{font-size:12px;color:#555;font-weight:bold}
.box{background:#fff;border-left:4px solid #2a4d8f;padding:10px;font-size:13px;margin-top:8px;border-radius:3px}
</style>
</head>
<body>
<div class="deck">
<div class="slide active">
<h2>What is Recursion?</h2>
<p>A function that <b>calls itself</b> to solve smaller instances of the same problem.</p>
<div class="box">"To understand recursion, you must first understand recursion."</div>
<p style="margin-top:10px">Breaks a problem into simpler sub-problems until trivial.</p>
</div>
<div class="slide">
<h2>Example: Factorial</h2>
<pre><span class="kw">function</span> <span class="fn">factorial</span>(n) {
<span class="kw">if</span> (n <= <span class="num">1</span>) <span class="kw">return</span> <span class="num">1</span>;
<span class="kw">return</span> n * <span class="fn">factorial</span>(n - <span class="num">1</span>);
}
<span class="cmt">// factorial(4) = 24</span></pre>
<p style="margin-top:10px;font-size:13px">Each call reduces <b>n</b> until it reaches 1.</p>
</div>
<div class="slide">
<h2>The Base Case</h2>
<p>Every recursion needs a <b>stopping condition</b>.</p>
<pre><span class="kw">if</span> (n <= <span class="num">1</span>) <span class="kw">return</span> <span class="num">1</span>; <span class="cmt">// base</span>
<span class="kw">return</span> n * <span class="fn">factorial</span>(n-<span class="num">1</span>);<span class="cmt">// step</span></pre>
<ul style="margin-top:10px">
<li>Without it: infinite recursion</li>
<li>Each step must approach the base</li>
</ul>
</div>
<div class="slide">
<h2>Common Pitfalls</h2>
<ul>
<li><b>Missing base case</b> → stack overflow</li>
<li><b>Wrong direction</b> → never reaches base</li>
<li><b>Too deep</b> → memory limits</li>
<li><b>Repeated work</b> → use memoization</li>
<li><b>Heavy params</b> → slow calls</li>
</ul>
<div class="box" style="margin-top:12px">Tip: Trace small inputs by hand first.</div>
</div>
<div class="nav">
<button onclick="nav(-1)">Prev</button>
<span class="ind" id="ind">1/4</span>
<button onclick="nav(1)">Next</button>
</div>
</div>
<script>
var idx=0;
var slides=document.querySelectorAll('.slide');
function show(){
for(var i=0;i<slides.length;i++)slides[i].classList.remove('active');
slides[idx].classList.add('active');
document.getElementById('ind').textContent=(idx+1)+'/'+slides.length;
}
function nav(d){
idx+=d;
if(idx<0)idx=0;
if(idx>=slides.length)idx=slides.length-1;
show();
}
document.addEventListener('keydown',function(e){
if(e.key==='ArrowRight')nav(1);
if(e.key==='ArrowLeft')nav(-1);
});
</script>
</body>
</html>
anthropicclaude-sonnet-4-6
9.8/1028.5 s
anthropicclaude-sonnet-4-6
Tokens2 964
Source code6.5 KB
Time28.5 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.75
Review
The model perfectly followed all constraints, including the strict 400x400 size limit and the specific slide content requirements. The visual design is professional, featuring excellent typography and a well-implemented syntax-highlighted code block. Navigation is complete, including buttons, keyboard support (implied in the logic), and the requested 'X/4' indicator.
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
width: 400px;
height: 400px;
overflow: hidden;
font-family: Arial, sans-serif;
background: #1a1a2e;
display: flex;
align-items: center;
justify-content: center;
}
.presentation {
width: 400px;
height: 400px;
position: relative;
}
.slide {
display: none;
width: 400px;
height: 400px;
flex-direction: column;
padding: 30px 30px 60px 30px;
position: absolute;
top: 0;
left: 0;
}
.slide.active {
display: flex;
}
.slide-1 { background: linear-gradient(135deg, #16213e, #0f3460); }
.slide-2 { background: linear-gradient(135deg, #1b1b2f, #162447); }
.slide-3 { background: linear-gradient(135deg, #1f2833, #0d7377); }
.slide-4 { background: linear-gradient(135deg, #2d1b33, #6a1a4c); }
.slide-num {
font-size: 11px;
color: #aaa;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
}
h2 {
font-size: 22px;
color: #e0e0ff;
margin-bottom: 16px;
border-bottom: 2px solid rgba(255,255,255,0.2);
padding-bottom: 8px;
}
p {
font-size: 14px;
color: #ccc;
line-height: 1.6;
margin-bottom: 10px;
}
ul {
padding-left: 18px;
}
ul li {
font-size: 14px;
color: #ccc;
line-height: 1.7;
}
ul li span.bad { color: #ff6b6b; font-weight: bold; }
ul li span.good { color: #6bff9e; font-weight: bold; }
.code-block {
background: #0d0d0d;
border: 1px solid #333;
border-radius: 6px;
padding: 14px;
font-family: "Courier New", Courier, monospace;
font-size: 13px;
line-height: 1.7;
margin-top: 8px;
color: #f8f8f2;
}
.kw { color: #66d9ef; }
.fn { color: #a6e22e; }
.num { color: #ae81ff; }
.cm { color: #75715e; font-style: italic; }
.op { color: #f92672; }
.nav {
position: absolute;
bottom: 12px;
left: 0;
width: 400px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}
.nav button {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
padding: 6px 18px;
border-radius: 20px;
font-size: 13px;
cursor: pointer;
transition: background 0.2s;
}
.nav button:hover { background: rgba(255,255,255,0.3); }
.nav button:disabled { opacity: 0.3; cursor: default; }
.indicator {
font-size: 13px;
color: #ddd;
min-width: 36px;
text-align: center;
}
.tag {
display: inline-block;
background: rgba(255,255,255,0.1);
border-radius: 4px;
padding: 2px 8px;
font-size: 12px;
color: #aef;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="presentation" id="pres">
<div class="slide slide-1 active">
<div class="slide-num">Recursion Explained</div>
<h2>What is Recursion?</h2>
<span class="tag">Definition</span>
<p>A function is <strong style="color:#6bdfff">recursive</strong> when it calls <em>itself</em> as part of its own definition.</p>
<p>Each call works on a <strong style="color:#6bdfff">smaller</strong> version of the same problem, until a stopping condition is reached.</p>
<p style="margin-top:8px; color:#aaa; font-size:13px;">“To understand recursion, you must first understand recursion.”</p>
</div>
<div class="slide slide-2">
<div class="slide-num">Recursion Explained</div>
<h2>Factorial Example</h2>
<span class="tag">Code</span>
<p style="font-size:13px; margin-bottom:6px;">5! = 5 × 4 × 3 × 2 × 1 = 120</p>
<div class="code-block">
<span class="kw">function</span> <span class="fn">factorial</span>(n) {<br>
<span class="kw">if</span> (n <span class="op">===</span> <span class="num">0</span>) {<br>
<span class="kw">return</span> <span class="num">1</span>; <span class="cm">// base case</span><br>
}<br>
<span class="kw">return</span> n <span class="op">*</span> <span class="fn">factorial</span>(n <span class="op">-</span> <span class="num">1</span>);<br>
}<br>
<span class="cm">// factorial(5) → 120</span>
</div>
</div>
<div class="slide slide-3">
<div class="slide-num">Recursion Explained</div>
<h2>The Base Case</h2>
<span class="tag">Key Concept</span>
<p>Every recursive function <strong style="color:#6fffb0">must</strong> have a <strong style="color:#6fffb0">base case</strong> — a condition that stops the recursion.</p>
<ul>
<li>Without it: <span class="bad">infinite loop</span> & stack overflow</li>
<li>Base case returns a <strong style="color:#6fffb0">direct value</strong></li>
<li>Each call must <strong style="color:#6fffb0">move toward</strong> the base case</li>
</ul>
<p style="margin-top:12px; font-size:13px; color:#aaa;">Think of it as the ladder touching the ground — it gives the recursion somewhere to stop.</p>
</div>
<div class="slide slide-4">
<div class="slide-num">Recursion Explained</div>
<h2>Common Pitfalls</h2>
<span class="tag">Watch Out</span>
<ul>
<li><span class="bad">Missing base case</span> — causes infinite recursion</li>
<li><span class="bad">Wrong base case</span> — wrong results or crash</li>
<li><span class="bad">No progress</span> — calls never get smaller</li>
<li><span class="bad">Stack overflow</span> — too many nested calls</li>
<li><span class="good">Tip:</span> trace small inputs by hand first</li>
<li><span class="good">Tip:</span> use iteration for very deep problems</li>
</ul>
</div>
<div class="nav">
<button id="prevBtn" onclick="navigate(-1)" disabled>← Prev</button>
<span class="indicator" id="indicator">1 / 4</span>
<button id="nextBtn" onclick="navigate(1)">Next →</button>
</div>
</div>
<script>
var current = 0;
var total = 4;
function navigate(dir) {
var slides = document.querySelectorAll('.slide');
slides[current].classList.remove('active');
current += dir;
if (current < 0) current = 0;
if (current >= total) current = total - 1;
slides[current].classList.add('active');
document.getElementById('indicator').textContent = (current + 1) + ' / ' + total;
document.getElementById('prevBtn').disabled = (current === 0);
document.getElementById('nextBtn').disabled = (current === total - 1);
}
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
if (current < total - 1) navigate(1);
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
if (current > 0) navigate(-1);
}
});
</script>
</body>
</html>
googlegemini-flash-latest
9.8/1010.2 s
googlegemini-flash-latest
Tokens1 606
Source code3.7 KB
Time10.2 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.75
Review
The model perfectly adhered to all constraints, including the 400x400 size, keyboard navigation, and slide format. The code is clean and well-structured, and the visual output is clear, featuring effective syntax highlighting for the code block.
<style>
body { margin: 0; padding: 0; font-family: sans-serif; background: #f0f0f0; overflow: hidden; }
#presentation { width: 400px; height: 400px; position: relative; background: #ffffff; border: 1px solid #ccc; box-sizing: border-box; }
.slide { display: none; width: 100%; height: 340px; padding: 20px; box-sizing: border-box; }
.slide.active { display: block; }
h1 { font-size: 24px; color: #333; margin-top: 0; }
p { font-size: 16px; color: #555; line-height: 1.4; }
.code-block { background: #2d2d2d; color: #f8f8f2; padding: 10px; font-family: monospace; font-size: 13px; border-radius: 4px; overflow-x: auto; }
.keyword { color: #66d9ef; }
.func { color: #a6e22e; }
.num { color: #ae81ff; }
#nav { position: absolute; bottom: 0; width: 100%; height: 60px; background: #eee; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box; border-top: 1px solid #ccc; }
button { padding: 8px 12px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 4px; font-size: 14px; }
button:disabled { background: #ccc; cursor: not-allowed; }
#indicator { font-weight: bold; color: #666; }
</style>
</head>
<body>
<div id="presentation">
<div class="slide active" id="slide1">
<h1>1. Definition</h1>
<p>Recursion is a programming technique where a function calls itself to solve a smaller version of the same problem.</p>
<p>It breaks down complex tasks into simpler, repeating steps until a stopping point is reached.</p>
</div>
<div class="slide" id="slide2">
<h1>2. Factorial Example</h1>
<div class="code-block">
<span class="keyword">function</span> <span class="func">factorial</span>(n) {<br>
<span class="keyword">if</span> (n <= <span class="num">1</span>) <span class="keyword">return</span> <span class="num">1</span>;<br>
<span class="keyword">return</span> n * <span class="func">factorial</span>(n - <span class="num">1</span>);<br>
}
</div>
<p>The function calls itself with (n-1) until it hits the base case.</p>
</div>
<div class="slide" id="slide3">
<h1>3. The Base Case</h1>
<p>Every recursive function MUST have a base case: a condition where the function returns a value without calling itself.</p>
<p>Without it, the recursion would continue forever, causing a crash.</p>
</div>
<div class="slide" id="slide4">
<h1>4. Common Pitfalls</h1>
<p><strong>Stack Overflow:</strong> Occurs when recursion is too deep and memory runs out.</p>
<p><strong>Infinite Loops:</strong> Forgetting the base case or failing to reach it.</p>
<p><strong>Redundant Work:</strong> Solving the same sub-problem multiple times.</p>
</div>
<div id="nav">
<button id="prevBtn" onclick="changeSlide(-1)" disabled>Prev</button>
<span id="indicator">1/4</span>
<button id="nextBtn" onclick="changeSlide(1)">Next</button>
</div>
</div>
<script>
var currentSlide = 0;
var totalSlides = 4;
var slides = document.getElementsByClassName("slide");
var indicator = document.getElementById("indicator");
var prevBtn = document.getElementById("prevBtn");
var nextBtn = document.getElementById("nextBtn");
function updateUI() {
for (var i = 0; i < slides.length; i++) {
slides[i].className = "slide";
}
slides[currentSlide].className = "slide active";
indicator.innerHTML = (currentSlide + 1) + "/" + totalSlides;
prevBtn.disabled = (currentSlide === 0);
nextBtn.disabled = (currentSlide === totalSlides - 1);
}
function changeSlide(step) {
var next = currentSlide + step;
if (next >= 0 && next < totalSlides) {
currentSlide = next;
updateUI();
}
}
window.addEventListener("keydown", function(e) {
if (e.keyCode === 37) changeSlide(-1);
if (e.keyCode === 39) changeSlide(1);
});
</script>
</body>
</html>
googlegemini-flash-lite-latest
9.4/103.6 s
googlegemini-flash-lite-latest
Tokens936
Source code1.7 KB
Time3.6 s
Matania Judgment
Rendering
7
Navigation
10
Code quality
8
Completeness
10
Fidelity
10
Overall
9.38
Review
The model followed all instructions perfectly, including the specific slide topics, the 400x400 constraint, and the navigation requirements (keyboard + buttons + indicator). The code is concise and functional, though the visual styling is extremely minimal/brutalist due to the small container size.
<style>body{margin:0;overflow:hidden;background:#222;color:#fff;font-family:monospace;display:flex;justify-content:center;align-items:center;height:100vh}#app{width:400px;height:400px;background:#000;position:relative;padding:20px;box-sizing:border-box}.slide{display:none;height:300px}h2{color:#0af;margin-top:0}code{background:#333;display:block;padding:10px;margin:10px 0}button{cursor:pointer;background:#444;color:#fff;border:none;padding:5px 10px}#nav{position:absolute;bottom:10px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center}</style></head><body><div id="app"><div class="slide" id="s0" style="display:block"><h2>1. Definition</h2><p>Recursion is a technique where a function calls itself to solve a smaller instance of the same problem.</p></div><div class="slide" id="s1"><h2>2. Factorial Code</h2><code>function f(n) {<br> if(n === 0) return 1;<br> return n * f(n - 1);<br>}</code></div><div class="slide" id="s2"><h2>3. Base Case</h2><p>The condition that stops the recursion. Without it, the function enters an infinite loop, causing a stack overflow.</p></div><div class="slide" id="s3"><h2>4. Pitfalls</h2><p>- Infinite recursion<br>- Excessive memory usage<br>- Redundant calculations<br>- Stack overflow errors</p></div><div id="nav"><button onclick="ch(-1)">Prev</button><span id="idx">1/4</span><button onclick="ch(1)">Next</button></div></div><script>var c=0;function ch(d){var s=document.getElementsByClassName('slide');s[c].style.display='none';c=(c+d+4)%4;s[c].style.display='block';document.getElementById('idx').innerHTML=(c+1)+'/4'}document.onkeydown=function(e){if(e.keyCode==37)ch(-1);if(e.keyCode==39)ch(1)}</script></body></html>
mistralmistral-large-latest
9.6/1012.1 s
mistralmistral-large-latest
Tokens1 000
Source code2.5 KB
Time12.1 s
Matania Judgment
Rendering
8
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.63
Review
The model followed all instructions perfectly, including the specific constraints on slide content, navigation methods, and dimensions. The code is clean and functional, and the visual rendering is polished and professional despite the minimal design. The syntax highlighting for the code block was implemented exactly as requested.
The model failed the completeness and fidelity constraints because the source code is truncated at the end (the file cuts off abruptly in the middle of slide 4), rendering the presentation incomplete. Although the visual rendering of the initial slides is clean and adheres to the size and style constraints, the inability to display the final slide and the absence of a functional JavaScript script (either not visible or not included in the snippet) for keyboard/button navigation heavily penalize the score.
The model perfectly adhered to all prompt constraints, including the number of slides, the 400x400 format, keyboard navigation, and the educational content. The visual output is clean and effective. However, the code quality is penalized by unnecessary duplication of control elements (buttons with different IDs for each slide instead of a single controller), which makes maintenance difficult.
<style>
body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;background:#f0f0f0;overflow:hidden}
#presentation{position:relative;width:400px;height:400px;margin:20px auto;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.3)}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;padding:40px;box-sizing:border-box;display:none;text-align:center}
.slide.active{display:block}
.slide h1{margin-top:0;font-size:24px}
.slide p{font-size:16px;line-height:1.5}
.slide pre{text-align:left;background:#282c34;color:#abb2bf;padding:15px;border-radius:5px;overflow-x:auto;font-family:monospace;font-size:14px;text-align:left;margin:20px auto;max-width:320px}
.slide pre code{color:#abb2bf}
.slide .highlight{background:#fffacd;padding:2px 4px;font-family:monospace}
.slide .controls{position:absolute;bottom:20px;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 40px;box-sizing:border-box}
.slide .controls button{background:#007bff;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:14px}
.slide .controls button:hover{background:#0056b3}
.slide .counter{font-size:14px;color:#666}
</style>
</head>
<body>
<div id="presentation">
<div class="slide active" id="slide1">
<h1>Recursion in Programming</h1>
<p>A function that calls itself to solve smaller instances of the same problem.</p>
<div class="controls">
<button id="prevBtn" disabled>Previous</button>
<span class="counter">1/4</span>
<button id="nextBtn">Next</button>
</div>
</div>
<div class="slide" id="slide2">
<h1>Factorial Example</h1>
<p>Compute n! by multiplying n with (n-1)!</p>
<pre><code>function factorial(n) {
if (n === 0) {
return <span class="highlight">1</span>;
}
return n * factorial(n - 1);
}</code></pre>
<div class="controls">
<button id="prevBtn2">Previous</button>
<span class="counter">2/4</span>
<button id="nextBtn2">Next</button>
</div>
</div>
<div class="slide" id="slide3">
<h1>Base Case</h1>
<p>The simplest case that stops recursion to prevent infinite loops.</p>
<pre><code>function sum(arr, n) {
if (n <= 0) {
return <span class="highlight">0</span>;
}
return arr[n - 1] + sum(arr, n - 1);
}</code></pre>
<div class="controls">
<button id="prevBtn3">Previous</button>
<span class="counter">3/4</span>
<button id="nextBtn3">Next</button>
</div>
</div>
<div class="slide" id="slide4">
<h1>Common Pitfalls</h1>
<ul style="text-align:left;display:inline-block;margin-top:0">
<li>Missing base case → infinite recursion</li>
<li>Incorrect base case → wrong results</li>
<li>Stack overflow from deep recursion</li>
<li>Unnecessary recomputation</li>
</ul>
<div class="controls">
<button id="prevBtn4">Previous</button>
<span class="counter">4/4</span>
<button id="nextBtn4" disabled>Next</button>
</div>
</div>
</div>
<script>
var currentSlide = 0;
var slides = document.querySelectorAll('.slide');
var totalSlides = slides.length;
var prevBtns = document.querySelectorAll('[id^="prevBtn"]');
var nextBtns = document.querySelectorAll('[id^="nextBtn"]');
function showSlide(index) {
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
prevBtns[i].disabled = (i === 0);
nextBtns[i].disabled = (i === slides.length - 1);
}
slides[index].classList.add('active');
document.querySelectorAll('.counter')[index].textContent = (index + 1) + '/' + totalSlides;
}
function goToPrev() {
if (currentSlide > 0) {
currentSlide--;
showSlide(currentSlide);
}
}
function goToNext() {
if (currentSlide < totalSlides - 1) {
currentSlide++;
showSlide(currentSlide);
}
}
for (var i = 0; i < prevBtns.length; i++) {
prevBtns[i].addEventListener('click', goToPrev);
}
for (var j = 0; j < nextBtns.length; j++) {
nextBtns[j].addEventListener('click', goToNext);
}
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowLeft') goToPrev();
if (e.key === 'ArrowRight') goToNext();
});
showSlide(currentSlide);
</script>
</body>
</html>
openaigpt-4o-mini
9.4/1010.9 s
openaigpt-4o-mini
Tokens1 176
Source code3.0 KB
Time10.9 s
Matania Judgment
Rendering
8
Navigation
10
Code quality
7
Completeness
10
Fidelity
10
Overall
9.38
Review
The model followed all instructions perfectly, including the specific constraints on dimensions, slide content, and navigation features. The code is functional, and the syntax highlighting for the factorial example is implemented as requested. The HTML structure is slightly malformed (missing opening tags like `<head>` and `<html>`, and using `</div` instead of `</div>`), but it remains a self-contained and working file.
The model perfectly followed all instructions, including the strict 400x400 constraint and the specific slide content. The code syntax highlighting is manually implemented via spans, which is a clever way to keep the file self-contained, and the navigation (keyboard, buttons, and counter) is fully functional and robust.
The model followed every instruction perfectly, including the strict 400x400 constraint and the specific slide content. The syntax highlighting is manually implemented via spans, which is a clever way to create a self-contained file, and the navigation (buttons, keyboard, and indicator) works flawlessly. The visual design is clean, professional, and fits the pedagogical purpose.
Le modèle a respecté parfaitement toutes les instructions, y compris la contrainte spécifique de 400x400, la structure en 4 diapositives et la coloration syntaxique. Le design visuel est professionnel et épuré, s'adaptant parfaitement au thème pédagogique. À noter que le code source fourni semble tronqué à la fin du script, mais la logique fonctionnelle de la navigation est clairement implémentée et visible dans la structure.
<style>
html, body {
margin: 0;
padding: 0;
width: 400px;
height: 400px;
overflow: hidden;
background: #0b1020;
font-family: Arial, Helvetica, sans-serif;
color: #e8eefc;
}
.wrap {
width: 400px;
height: 400px;
position: relative;
background: #0b1020;
}
.slide {
position: absolute;
inset: 0;
padding: 18px 16px;
box-sizing: border-box;
display: none;
background: #0b1020;
}
.slide.active {
display: block;
}
.title {
font-weight: 700;
letter-spacing: 0.2px;
font-size: 20px;
margin: 2px 0 10px 0;
}
.subtitle {
font-size: 13px;
color: #b7c4f0;
margin: 0 0 10px 0;
}
.content {
font-size: 14px;
color: #e8eefc;
line-height: 1.35;
}
.pill {
display: inline-block;
padding: 6px 10px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 12px;
background: rgba(255,255,255,0.04);
margin-top: 8px;
}
.codebox {
margin-top: 10px;
background: #0f1733;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 12px;
padding: 10px 10px;
box-sizing: border-box;
height: 222px;
overflow: hidden;
}
pre {
margin: 0;
white-space: pre;
overflow: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 12px;
line-height: 1.35;
color: #dbe6ff;
}
.kw { color: #7dd3fc; }
.fn { color: #a7f3d0; }
.num { color: #fbbf24; }
.id { color: #c4b5fd; }
.op { color: #e8eefc; }
.com { color: #94a3b8; }
.controls {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
button {
width: 110px;
height: 34px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.16);
color: #e8eefc;
border-radius: 10px;
cursor: pointer;
font-size: 13px;
}
button:active { background: rgba(255,255,255,0.10); }
.indicator {
flex: 1;
text-align: center;
font-weight: 700;
font-size: 13px;
color: #c7d2fe;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 10px;
height: 34px;
line-height: 34px;
user-select: none;
}
.hint {
position: absolute;
top: 8px;
right: 10px;
font-size: 11px;
color: rgba(232,238,252,0.7);
user-select: none;
}
</style>
</head>
<body>
<div class="wrap" aria-label="Recursion presentation">
<div class="hint">Use ← →</div>
<section class="slide active" data-index="1" aria-hidden="false">
<div class="title">Recursion</div>
<div class="subtitle">A function calls itself to solve smaller subproblems.</div>
<div class="content">
<div class="pill">Two parts: a <b>base case</b> and a <b>recursive step</b>.</div>
<div style="margin-top:10px; color:#b7c4f0; font-size:13px;">
Key idea: reduce the problem, then build the answer on the way back up.
</div>
</div>
</section>
<section class="slide" data-index="2" aria-hidden="true">
<div class="title">Factorial</div>
<div class="subtitle">Example of the recursive pattern.</div>
<div class="codebox" role="region" aria-label="Factorial code">
<pre><span class="com">// fact(n) = n * fact(n-1)</span>
<span class="kw">function</span> <span class="fn">fact</span>(<span class="id">n</span>) {
<span class="kw">if</span> (<span class="id">n</span> <span class="op"><=</span> <span class="num">1</span>) <span class="kw">return</span> <span class="num">1</span>;
<span class="kw">return</span> <span class="id">n</span> <span class="op">*</span> <span class="fn">fact</span>(<span class="id">n</span> <span class="op">-</span> <span class="num">1</span>);
}</pre>
</div>
<div class="content" style="margin-top:10px; color:#b7c4f0; font-size:13px;">
For n=4: 4*3*2*1
</div>
</section>
<section class="slide" data-index="3" aria-hidden="true">
<div class="title">Base case</div>
<div class="subtitle">Stops recursion from going forever.</div>
<div class="content">
<div class="pill">The base case returns a result directly (no further calls).</div>
<div style="margin-top:10px; color:#b7c4f0; font-size:13px;">
In factorial, it’s when n is 0 or 1: return 1.
</div>
</div>
</section>
<section class="slide" data-index="4" aria-hidden="true">
<div class="title">Common pitfalls</div>
<div class="subtitle">Small mistakes lead to big bugs.</div>
<div class="content">
<div class="pill">Missing or wrong base case → infinite recursion.</div>
<div class="pill" style="margin-left:0; margin-top:10px;">Not reducing the problem → never reaches the base case.</div>
<div class="pill" style="margin-left:0; margin-top:10px;">Off-by-one errors in recursive step.</div>
</div>
</section>
<div class="controls">
<button id="prevBtn" type="button" aria-label="Previous slide">Previous</button>
<div class="indicator" id="indicator">1/4</div>
<button id="nextBtn" type="button" aria-label="Next slide">Next</button>
</div>
</div>
<script type="text/javascript">
(function () {
var slides = [];
var i;
var slideEls = document.getElementsByClassName('slide');
for (i = 0; i < slideEls.length; i++) slides.push(slideEls[i]);
var indicator = document.getElementById('indicator');
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');
var current = 1;
var total = 4;
function show(n) {
if (n < 1) n = 1;
if (n > total) n = total;
current = n;
for (i = 0; i < slides.length; i++) {
slides[i].className = 'slide' + (slides[i].getAttribute('data-index') === String(current) ? ' active' : '');
slides[i].setAttribute('aria-hidden', slides[i].getAttribute('data-index') === String(current) ? 'false' : 'true');
}
indicator.textContent = String(current) + '/' + String(total);
}
prevBtn.onclick = function () { show(current - 1); };
nextBtn.onclick = function () { show(current + 1); };
document.addEventListener('keydown', function (e) {
var key = e.key || '';
if (key === 'ArrowLeft') show(current - 1);
if (key === 'ArrowRight') show(current + 1);
});
show(1);
})();
</script>
</body>
</html>
openaigpt-5.4-pro
9.8/10275.7 s
openaigpt-5.4-pro
Tokens1 753
Source code5.3 KB
Time275.7 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.75
Review
The model perfectly adhered to all constraints, including the 400x400 size and keyboard navigation. The visual rendering is clean and professional, and the syntax highlighting is manually implemented to maintain the 'self-contained' aspect. The pedagogical structure is clear and concise.
The model perfectly adhered to all constraints, including the 400x400 size, keyboard navigation, and the position indicator. The source code is clean and semantic, and the visual rendering is professional, featuring excellent manual syntax highlighting management.
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #222;
font-family: Arial, sans-serif;
}
.deck {
width: 400px;
height: 400px;
margin: 0 auto;
background: #f7f7f7;
color: #222;
position: relative;
overflow: hidden;
}
.slide {
display: none;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 34px 28px 70px 28px;
}
.slide.active {
display: block;
}
h1 {
margin: 0 0 20px 0;
font-size: 30px;
color: #174ea6;
}
p, li {
font-size: 21px;
line-height: 1.35;
}
ul {
padding-left: 24px;
}
.code {
background: #111827;
color: #f9fafb;
padding: 14px;
border-radius: 8px;
font-family: Consolas, Monaco, monospace;
font-size: 16px;
line-height: 1.35;
white-space: pre;
}
.kw { color: #93c5fd; }
.fn { color: #fbbf24; }
.num { color: #86efac; }
.op { color: #fca5a5; }
.nav {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 54px;
background: #174ea6;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 8px 14px;
}
button {
border: 0;
border-radius: 6px;
background: #fff;
color: #174ea6;
font-size: 15px;
font-weight: bold;
padding: 8px 12px;
cursor: pointer;
}
button:disabled {
opacity: 0.45;
cursor: default;
}
#indicator {
color: #fff;
font-weight: bold;
font-size: 16px;
}
.big {
font-size: 54px;
text-align: center;
margin-top: 28px;
color: #174ea6;
}
</style>
</head>
<body>
<div class="deck">
<section class="slide active">
<h1>1. Definition</h1>
<p><strong>Recursion</strong> is when a function calls itself.</p>
<p>It solves a big problem by solving smaller versions of it.</p>
<div class="big">↻</div>
</section>
<section class="slide">
<h1>2. Factorial</h1>
<p>Example: <strong>5! = 5 × 4 × 3 × 2 × 1</strong></p>
<div class="code"><span class="kw">function</span> <span class="fn">factorial</span>(n) {
<span class="kw">if</span> (n <span class="op">===</span> <span class="num">1</span>) <span class="kw">return</span> <span class="num">1</span>;
<span class="kw">return</span> n <span class="op">*</span> <span class="fn">factorial</span>(n <span class="op">-</span> <span class="num">1</span>);
}</div>
</section>
<section class="slide">
<h1>3. Base Case</h1>
<p>The <strong>base case</strong> stops the recursion.</p>
<p>Without it, calls continue forever.</p>
<p><strong>factorial(1) returns 1</strong></p>
</section>
<section class="slide">
<h1>4. Common Pitfalls</h1>
<ul>
<li>No base case</li>
<li>Base case never reached</li>
<li>Too many calls → stack overflow</li>
<li>Hard-to-read logic</li>
</ul>
</section>
<div class="nav">
<button id="prev">Previous</button>
<span id="indicator">1/4</span>
<button id="next">Next</button>
</div>
</div>
<script>
(function () {
var slides = document.getElementsByClassName("slide");
var index = 0;
var total = slides.length;
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var indicator = document.getElementById("indicator");
function showSlide(n) {
var i;
if (n < 0) {
n = 0;
}
if (n >= total) {
n = total - 1;
}
for (i = 0; i < total; i++) {
slides[i].className = "slide";
}
index = n;
slides[index].className = "slide active";
indicator.innerHTML = (index + 1) + "/" + total;
prev.disabled = index === 0;
next.disabled = index === total - 1;
}
prev.onclick = function () {
showSlide(index - 1);
};
next.onclick = function () {
showSlide(index + 1);
};
document.onkeydown = function (e) {
e = e || window.event;
if (e.keyCode === 37) {
showSlide(index - 1);
}
if (e.keyCode === 39) {
showSlide(index + 1);
}
};
showSlide(0);
}());
</script>
</body>
</html>
openaigpt-5.5-pro
9.8/10203.5 s
openaigpt-5.5-pro
Tokens1 667
Source code5.0 KB
Time203.5 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.75
Review
The model perfectly adhered to all constraints, including the strict 400x400 format and the complex navigation. The design is modern, educational, and very clean, featuring well-implemented syntax highlighting. Both keyboard and button navigation work exactly as requested.
The model followed every single instruction perfectly, including the strict 400x400 size constraint and the specific slide content. The syntax highlighting is well-implemented via manual spans, and the navigation (buttons, keyboard, and counter) works exactly as requested. The visual hierarchy and dark theme are professional and clean.
<style>
body { margin: 0; background: #1a1a1a; font-family: sans-serif; overflow: hidden; }
#container { width: 400px; height: 400px; position: relative; color: #eee; }
.slide { width: 400px; height: 400px; position: absolute; top: 0; left: 0; display: none; padding: 30px; box-sizing: border-box; }
.active { display: flex; flex-direction: column; justify-content: center; }
h1 { font-size: 22px; color: #4db8ff; margin: 0 0 15px 0; }
p, li { font-size: 15px; line-height: 1.4; margin: 8px 0; }
ul { padding-left: 20px; margin: 0; }
pre { background: #000; padding: 10px; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 13px; overflow-x: auto; border: 1px solid #333; margin: 10px 0; }
.keyword { color: #ff79c6; }
.func { color: #50fa7b; }
.num { color: #bd93f9; }
.comment { color: #6272a4; }
.controls { position: absolute; bottom: 0; width: 100%; height: 50px; display: flex; justify-content: space-between; padding: 0 20px; box-sizing: border-box; align-items: center; background: rgba(0,0,0,0.3); }
button { background: #444; border: none; color: white; padding: 6px 12px; cursor: pointer; border-radius: 4px; font-size: 12px; }
button:hover { background: #666; }
#counter { font-size: 14px; color: #888; font-weight: bold; }
</style>
</head>
<body>
<div id="container">
<div class="slide active">
<h1>1. Definition</h1>
<p>Recursion is a programming technique where a function calls itself to solve a problem.</p>
<p>It breaks a complex problem into smaller, identical sub-problems.</p>
</div>
<div class="slide">
<h1>2. Example</h1>
<pre>
<span class="keyword">function</span> <span class="func">factorial</span>(n) {
<span class="keyword">if</span> (n === 0) <span class="keyword">return</span> <span class="num">1</span>;
<span class="keyword">return</span> n * <span class="func">factorial</span>(n - <span class="num">1</span>);
}</pre>
<p>Each call waits for the next one.</p>
</div>
<div class="slide">
<h1>3. Base Case</h1>
<p>The <b>Base Case</b> is the condition that stops the recursion.</p>
<p>Without it, the function calls itself infinitely, leading to a <b>Stack Overflow</b>.</p>
<p>In factorial, <code style="color:#bd93f9">n === 0</code> is the base case.</p>
</div>
<div class="slide">
<h1>4. Pitfalls</h1>
<ul>
<li><b>Infinite Recursion:</b> Missing base case.</li>
<li><b>Stack Overflow:</b> Too many nested calls.</li>
<li><b>Performance:</b> Redundant calculations.</li>
</ul>
</div>
<div class="controls">
<button id="prev">Prev</button>
<span id="counter">1/4</span>
<button id="next">Next</button>
</div>
</div>
<script>
var currentSlide = 0;
var slides = document.getElementsByClassName('slide');
var counter = document.getElementById('counter');
var prevBtn = document.getElementById('prev');
var nextBtn = document.getElementById('next');
function updateSlides() {
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
slides[currentSlide].classList.add('active');
counter.innerHTML = (currentSlide + 1) + '/4';
}
function nextSlide() {
if (currentSlide < slides.length - 1) {
currentSlide++;
updateSlides();
}
}
function prevSlide() {
if (currentSlide > 0) {
currentSlide--;
updateSlides();
}
}
nextBtn.onclick = nextSlide;
prevBtn.onclick = prevSlide;
document.onkeydown = function(e) {
if (e.keyCode === 39) {
nextSlide();
} else if (e.keyCode === 37) {
prevSlide();
}
};
</script>
</body>
</html>
xaigrok-4-1-fast-non-reasoning
9.8/1021.2 s
xaigrok-4-1-fast-non-reasoning
Tokens1 147
Source code3.1 KB
Time21.2 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.75
Review
The model perfectly adhered to all constraints, including the container size (360x360 to respect the 400x400 limit), keyboard/button navigation, and the position indicator. The code is clean, semantic, and the syntax highlighting is efficiently implemented manually. The visual rendering is professional, readable, and educational.
<!DOCTYPE html>
<html>
<head>
<title>Recursion</title>
<style>
body{font-family:Arial,sans-serif;margin:0;padding:20px;background:#222;color:#eee;overflow:hidden}
#container{width:360px;height:360px;position:relative;background:#333;border-radius:10px;padding:20px;box-shadow:0 0 20px #000}
h1{font-size:28px;margin:0 0 20px;text-align:center;color:#4fc3f7}
p{font-size:18px;line-height:1.4;margin:10px 0}
pre{background:#1e1e1e;border-radius:8px;padding:15px;margin:10px 0;overflow:auto;font-family:'Courier New',monospace;font-size:14px;color:#d4d4d4;box-shadow:inset 0 2px 10px #000}
.code-kw{color:#569cd6}
.code-str{color:#ce9178}
.code-num{color:#b5cea8}
.code-comment{color:#6a9955}
button{position:absolute;bottom:20px;background:#4fc3f7;border:none;color:white;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:16px}
#prev{left:20px}
#next{right:20px}
#indicator{position:absolute;top:20px;right:20px;font-size:18px;color:#888}
.invisible{display:none}
</style>
</head>
<body>
<div id="container">
<div id="slide1">
<h1>1/4 Recursion</h1>
<p><strong>Definition:</strong> A function that calls <em>itself</em> to solve smaller instances of the same problem.</p>
<p>Like Russian dolls: each contains a smaller version inside.</p>
</div>
<div id="slide2" class="invisible">
<h1>2/4 Factorial Example</h1>
<p>n! = n × (n-1)!</p>
<pre><span class="code-kw">function</span> factorial(n) {
<span class="code-kw">if</span> (n <= 1) <span class="code-kw">return</span> 1;
<span class="code-kw">return</span> n * factorial(n - 1);
}
factorial(5) <span class="code-comment">// = 120</span></pre>
</div>
<div id="slide3" class="invisible">
<h1>3/4 Base Case</h1>
<p><strong>Essential:</strong> Must stop recursion!</p>
<pre><span class="code-kw">if</span> (n <= 1) <span class="code-kw">return</span> 1;</pre>
<p>Without base case → infinite loop → stack overflow!</p>
<p>5! calls 4! calls 3! calls 2! calls <strong>1! → STOP</strong></p>
</div>
<div id="slide4" class="invisible">
<h1>4/4 Common Pitfalls</h1>
<p>❌ <strong>No base case</strong> → Crash</p>
<p>❌ <strong>Wrong base case</strong> → Wrong answer</p>
<p>❌ <strong>No progress</strong> → Infinite recursion</p>
<p>✅ Always verify: "Does it eventually reach base case?"</p>
</div>
<button id="prev" onclick="prevSlide()">← Prev</button>
<button id="next" onclick="nextSlide()">Next →</button>
<div id="indicator">1/4</div>
</div>
<script>
var currentSlide = 1;
var totalSlides = 4;
function showSlide(n) {
for(var i=1; i<=totalSlides; i++) {
document.getElementById('slide'+i).className = 'invisible';
}
document.getElementById('slide'+n).className = '';
document.getElementById('indicator').innerHTML = n + '/4';
currentSlide = n;
}
function nextSlide() {
if(currentSlide < totalSlides) showSlide(currentSlide + 1);
}
function prevSlide() {
if(currentSlide > 1) showSlide(currentSlide - 1);
}
document.onkeydown = function(e) {
e = e || window.event;
if(e.keyCode == '37' && currentSlide > 1) prevSlide(); // Left
else if(e.keyCode == '39' && currentSlide < totalSlides) nextSlide(); // Right
};
</script>
</body>
</html>
xaigrok-4-1-fast-reasoning
9.8/1063.4 s
xaigrok-4-1-fast-reasoning
Tokens1 364
Source code3.9 KB
Time63.4 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.75
Review
The model perfectly adhered to all constraints, including the 400x400 dimension, the number of slides, and the navigation features (keyboard and buttons). The code is clean, the visual output is neat and educational, and the syntax highlighting is correctly implemented manually as requested.
The model perfectly adhered to all technical constraints, including the 400x400 format and the inclusion of a CSS bar chart. The output is professional, clean, and respects the requested business aesthetic with a consistent color palette. The code structure is semantic and well-organized.
The model perfectly adhered to all prompt constraints, including the 400x400 size and the professional business style. The visual output is excellent, featuring clear hierarchy, a consistent color palette, and the successful implementation of the CSS bar chart. The navigation and position indicators are both functional and elegant.
The visual rendering is excellent, perfectly adhering to the professional business aesthetic and the dimension constraints (400x400). However, the source code is truncated at the end (the JavaScript script is incomplete), which prevents the navigation from actually working, thereby impacting technical completeness. Prompt fidelity is very high, respecting all requested content and structural constraints.
The model perfectly adhered to all constraints, including the restricted 400x400 size and the creation of the chart using CSS. The output is extremely professional, featuring a consistent color palette and clear visual hierarchy. The navigation is functional, and the full set of 5 requested slides is present and well-structured.
The model perfectly adhered to all constraints, including the area size (400x400), the number of slides, and the inclusion of the CSS chart. The design is professional, sleek, and respects the requested business aesthetic. The code is clean, functional, and self-contained.
The model adheres to almost all constraints, notably the 400x400 format and the inclusion of a CSS bar chart. However, the 'Regions' slide contains only 2 zones instead of the requested 4, which impacts fidelity. The aesthetics are very basic and lack the expected 'professional' touch, but the code is functional and compact.
The model failed critically by generating truncated code (the file cuts off abruptly in the middle of the HTML), rendering the presentation non-functional and incomplete. Navigation and the final slides are entirely missing from the provided code, and the 'ONLY the raw HTML' output constraint is not met because the code is incomplete. While the partial visual rendering is correct, the inability to use the object causes all functionality scores to plummet.
The model failed significantly on completeness and fidelity, as the provided code is truncated and incomplete, preventing the full presentation from being rendered. While the code structure and visual style (CSS) are professional and follow aesthetic principles, the output is a partial snippet rather than a functional 5-slide presentation. The 'fidelity' score is heavily penalized because the core requirement of a self-contained 5-slide HTML document was not met due to the cutoff.
The model perfectly adhered to all prompt constraints, including the 400x400 format, the number of slides, the CSS chart, and the arrow navigation. The code is clean and functional. The visual output is professional, though it feels a bit cramped within the restricted 400px space, which slightly undermines the visual hierarchy of the KPI slide.
<style>
body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;background:#f5f5f5;color:#333;overflow:hidden}
#presentation{width:400px;height:400px;position:relative;background:#fff;margin:20px auto;border:1px solid #ddd}
.slide{width:100%;height:100%;display:none;position:absolute;top:0;left:0;padding:30px;box-sizing:border-box}
.slide.active{display:block}
.slide h1{font-size:24px;text-align:center;margin:0 0 20px 0}
.slide h2{font-size:18px;margin:0 0 15px 0;border-bottom:2px solid #ddd;padding-bottom:10px}
.slide p{font-size:14px;margin:5px 0}
.cover{text-align:center}
.cover h1{font-size:28px;margin:80px 0 30px 0}
.kpi{text-align:center}
.kpi .metric{display:inline-block;width:280px;height:120px;margin:10px;border:1px solid #eee;background:#f9f9f9;padding:20px;box-sizing:border-box}
.kpi .metric h3{font-size:16px;margin:0 0 10px 0}
.kpi .metric .value{font-size:32px;font-weight:bold;color:#0066cc}
.top-products{padding:10px}
.top-products table{width:100%;border-collapse:collapse}
.top-products th, .top-products td{padding:8px;text-align:left;border-bottom:1px solid #eee}
.top-products th{background:#f0f0f0}
.regions{padding:10px}
.regions .region{margin:10px 0}
.regions .region .name{font-weight:bold}
.bar-chart{width:100%;height:120px;margin:10px 0}
.bar{height:20px;margin:5px 0;background:#0066cc;position:relative}
.bar-label{position:absolute;right:0;top:0;font-size:12px;color:#666}
.bar-value{position:absolute;left:5px;top:0;font-size:12px;color:#fff}
.conclusion{text-align:center}
.nav{position:absolute;bottom:10px;width:100%;text-align:center}
.nav button{background:#0066cc;color:#fff;border:none;padding:8px 15px;margin:0 5px;border-radius:3px;cursor:pointer}
.nav button:disabled{background:#ccc}
.indicator{position:absolute;bottom:40px;width:100%;text-align:center}
.indicator span{display:inline-block;width:10px;height:10px;margin:0 5px;border-radius:50%;background:#ccc}
.indicator span.active{background:#0066cc}
</style>
</head>
<body>
<div id="presentation">
<div class="slide cover active">
<h1>Q3 2023 E-Commerce Quarterly Report</h1>
<p>Prepared by: Business Intelligence Team</p>
<p>Date: October 2023</p>
</div>
<div class="slide kpi">
<h1>Key Performance Indicators</h1>
<div class="metric">
<h3>Revenue</h3>
<div class="value">$2.45M</div>
<p>+12% vs Q2 2023</p>
</div>
<div class="metric">
<h3>Conversion Rate</h3>
<div class="value">3.8%</div>
<p>+0.4pp vs Q2 2023</p>
</div>
<div class="metric">
<h3>Customer Retention</h3>
<div class="value">78%</div>
<p>+5pp vs Q2 2023</p>
</div>
</div>
<div class="slide top-products">
<h1>Top 5 Products by Revenue</h1>
<table>
<tr><th>Rank</th><th>Product</th><th>Revenue</th><th>Units Sold</th></tr>
<tr><td>1</td><td>Wireless Headphones Pro</td><td>$325,000</td><td>1,250</td></tr>
<tr><td>2</td><td>Smart Watch X1</td><td>$280,000</td><td>980</td></tr>
<tr><td>3</td><td>Bluetooth Speaker 3000</td><td>$195,000</td><td>1,100</td></tr>
<tr><td>4</td><td>Laptop Stand Pro</td><td>$150,000</td><td>1,500</td></tr>
<tr><td>5</td><td>Phone Charger 20000mAh</td><td>$120,000</td><td>2,000</td></tr>
</table>
</div>
<div class="slide regions">
<h1>Regional Performance</h1>
<div class="region">
<div class="name">North America</div>
<div class="bar-chart">
<div class="bar" style="width:35%">
<span class="bar-value">35%</span>
<span class="bar-label">$857K</span>
</div>
</div>
</div>
<div class="region">
<div class="name">Europe</div>
<div class="bar-chart">
<div class="bar" style="width:28%">
<span class="bar-value">28%</span>
<span class="bar-label">$686K</span>
</div>
</div>
</div>
<div class="region">
<div class="name">Asia-Pacific</div>
<div class="bar-chart">
<div class="bar" style="width:22%">
<span class="bar-value">22%</span>
<span class="bar-label">$539K</span>
</div>
</div>
</div>
<div class="region">
<div class="name">Latin America</div>
<div class="bar-chart">
<div class="bar" style="width:15%">
<span class="bar-value">15%</span>
<span class="bar-label">$368K</span>
</div>
</div>
</div>
</div>
<div class="slide conclusion">
<h1>Conclusion & Next Steps</h1>
<p><strong>Summary:</strong> Q3 showed strong growth across all KPIs with revenue up 12% and retention improving by 5pp.</p>
<p><strong>Key Wins:</strong> Top products performed well, especially Wireless Headphones Pro and Smart Watch X1.</p>
<p><strong>Challenges:</strong> Latin America growth lagging behind other regions.</p>
<p><strong>Next Steps:</strong></p>
<ul>
<li>Launch targeted marketing campaign in Latin America</li>
<li>Expand product line for top performers</li>
<li>Optimize conversion funnel based on heatmap data</li>
</ul>
<p>Next report: January 2024</p>
</div>
<div class="nav">
<button id="prev" onclick="prevSlide()">Previous</button>
<button id="next" onclick="nextSlide()">Next</button>
</div>
<div class="indicator" id="indicator">
<span class="active" data-slide="0"></span>
<span data-slide="1"></span>
<span data-slide="2"></span>
<span data-slide="3"></span>
<span data-slide="4"></span>
</div>
</div>
<script>
var currentSlide = 0;
var totalSlides = 5;
function showSlide(index) {
var slides = document.querySelectorAll('.slide');
var indicators = document.querySelectorAll('#indicator span');
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
indicators[i].classList.remove('active');
}
slides[index].classList.add('active');
indicators[index].classList.add('active');
document.getElementById('prev').disabled = index === 0;
document.getElementById('next').disabled = index === totalSlides - 1;
}
function nextSlide() {
if (currentSlide < totalSlides - 1) {
currentSlide++;
showSlide(currentSlide);
}
}
function prevSlide() {
if (currentSlide > 0) {
currentSlide--;
showSlide(currentSlide);
}
}
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight') nextSlide();
if (e.key === 'ArrowLeft') prevSlide();
});
showSlide(currentSlide);
</script>
</body>
</html>
openaigpt-4o-mini
8.9/1017.2 s
openaigpt-4o-mini
Tokens1 377
Source code3.9 KB
Time17.2 s
Matania Judgment
Rendering
6
Navigation
8
Code quality
7
Completeness
10
Fidelity
10
Overall
8.88
Review
The model strictly adheres to all structural and functional constraints of the prompt (5 slides, CSS charts, navigation, 400x400 format). The visual output is very basic and lacks a true "professional" aesthetic (standard typography, lack of spacing), but the technical implementation is perfectly compliant with the requirements.
The model failed critically to provide complete code: the file is truncated halfway through the second slide, rendering the presentation unusable. Consequently, navigation and completeness scores are near zero. Although the partial visual output is high quality and adheres to the requested aesthetic, the inability to complete the code constitutes a major failure in both fidelity and quality.
The model failed critically on completeness and faithfulness: the code is truncated (it cuts off abruptly in the middle of the 4th slide) and the JavaScript required for navigation is entirely missing. Although the visual aesthetics (CSS) are excellent and respect the design constraints, the absence of functional logic and the 5th slide renders the result unusable.
The model perfectly adhered to all the technical and aesthetic constraints of the prompt. The visual output is extremely professional, respecting the neutral palette with a consistent accent color, and the slide structure (KPIs, CSS bar charts, regions) is impeccable. The code is clean, semantic, and perfectly adapted to the 400x400 container.
The model generated extremely high-quality code in terms of design and structure, but the output is totally incomplete because the source code cuts off abruptly halfway through the second slide. Consequently, it is impossible to verify the presence of the 5 slides, the CSS chart, or the conclusion, which drastically reduces both faithfulness and completeness.
The model failed critically on completeness and faithfulness: the code is truncated (it cuts off abruptly in the middle of the HTML), rendering the presentation non-functional and incomplete (missing slides, non-existent navigation). Although the visual aesthetics and CSS are of high quality, the inability to use the final product due to an interrupted generation results in a very low score.
The visual rendering is excellent, featuring a professional aesthetic and a clear hierarchy that perfectly adheres to the requested palette. However, the code is truncated (incomplete), which prevents the remaining slides from being generated and causes the navigation/indicator to display incorrectly. The fidelity score is penalized by this abrupt interruption, which renders the final product non-functional.
The model perfectly adhered to all prompt constraints, including the 400x400 format, the number of slides, and the CSS chart. The output is professional and clean, and the navigation (buttons + indicator + arrow keys) is fully functional. The code is concise and well-structured.
The model perfectly adhered to all constraints, including the 400x400 format, the number of slides, the CSS graphics, and the navigation. The output is professional and clean, and the code implementation is both concise and functional.
The model produced code of very high visual and structural quality, perfectly adhering to the requested aesthetics and size constraints. However, the code is truncated (incomplete) at the end of the fourth slide, which prevents the fifth slide from existing and breaks the navigation functionality. The faithfulness score is heavily impacted by this technical cutoff, which renders the final product unusable.
The model failed critically on almost all constraints. The code is truncated (incomplete), which prevents the navigation from working and renders the presentation unusable. Although the SVGs are created and the styling is clean, the failure to respect the complete output structure and the absence of JavaScript logic for the slides (due to the code being cut off) cause the fidelity and completeness scores to plummet.
The visual rendering is excellent, featuring elegant typography and original SVGs that align well with the theme. However, the code is truncated at the end (the fourth slide is incomplete and the closing tag is missing), which prevents the work from being fully complete and impacts the faithfulness score.
The model perfectly adhered to all constraints, including the 400x400 format and the exclusion of external images by using high-quality embedded SVGs. The visual rendering is aesthetic, featuring a consistent color palette and typography suited to the travel journal theme. Navigation is smooth and comprehensive (arrows and indicators included).
The model produced a magnificent visual output with very polished SVGs and a consistent travel journal aesthetic. However, the code is truncated (incomplete) halfway through the second slide, which prevents the navigation from working and stops slides 3 and 4 from displaying. Fidelity is heavily penalized by this cutoff, which renders the final product unusable.
The model perfectly adhered to all constraints, including the container size (400x400), the absence of external images, and the use of inline SVGs. The visual rendering is elegant, successfully achieving a travel journal aesthetic, and the navigation is functional and complete. The code is clean, concise, and well-structured.
<style>
body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #e0e0e0; font-family: serif; }
#journal { width: 400px; height: 400px; background: #fdf5e6; border: 3px solid #5d4037; position: relative; overflow: hidden; box-sizing: border-box; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.slide { display: none; padding: 40px; text-align: center; height: 100%; box-sizing: border-box; }
.slide.active { display: block; }
h2 { color: #5d4037; margin-top: 0; font-size: 24px; border-bottom: 1px solid #d7ccc8; padding-bottom: 10px; }
p { color: #3e2723; line-height: 1.6; font-size: 16px; margin-top: 25px; font-style: italic; }
.visual { margin: 20px 0; height: 80px; display: flex; justify-content: center; align-items: center; }
.nav { position: absolute; bottom: 30px; width: 100%; display: flex; justify-content: center; align-items: center; }
.arrow { background: #5d4037; color: #ffffff; border: none; padding: 8px 12px; cursor: pointer; font-size: 14px; border-radius: 4px; }
.dots { margin: 0 20px; }
.dot { display: inline-block; width: 8px; height: 8px; background: #d7ccc8; border-radius: 50%; margin: 0 4px; }
.dot.active { background: #5d4037; }
</style>
</head>
<body>
<div id="journal">
<div class="slide active">
<h2>The Mountains</h2>
<div class="visual">
<svg width="120" height="80" viewBox="0 0 120 80">
<path d="M10 70 L40 20 L70 70 Z" fill="#9e9e9e" />
<path d="M50 70 L85 10 L115 70 Z" fill="#757575" />
<path d="M40 20 L48 35 L32 35 Z" fill="#ffffff" />
<path d="M85 10 L95 28 L75 28 Z" fill="#ffffff" />
</svg>
</div>
<p>The peaks were covered in a blanket of fresh snow. We hiked for hours before reaching the summit at sunset. The air was thin but incredibly crisp and refreshing.</p>
</div>
<div class="slide">
<h2>The Ocean</h2>
<div class="visual">
<svg width="120" height="80" viewBox="0 0 120 80">
<circle cx="90" cy="25" r="15" fill="#ffeb3b" />
<path d="M0 60 Q30 50 60 60 T120 60 L120 80 L0 80 Z" fill="#03a9f4" />
<path d="M0 70 Q30 60 60 70 T120 70 L120 80 L0 80 Z" fill="#01579b" />
</svg>
</div>
<p>The water was crystal clear and warm to the touch. We spent the afternoon watching the tide come in slowly. It was the perfect escape from the summer heat.</p>
</div>
<div class="slide">
<h2>The Forest</h2>
<div class="visual">
<svg width="120" height="80" viewBox="0 0 120 80">
<rect x="35" y="50" width="10" height="20" fill="#5d4037" />
<path d="M20 55 L40 20 L60 55 Z" fill="#2e7d32" />
<rect x="75" y="50" width="10" height="20" fill="#5d4037" />
<path d="M60 55 L80 15 L100 55 Z" fill="#1b5e20" />
</svg>
</div>
<p>The air smelled of pine and damp earth after the morning rain. Ancient trees towered above us, blocking out the sun. We found a hidden path near the creek.</p>
</div>
<div class="slide">
<h2>The City</h2>
<div class="visual">
<svg width="120" height="80" viewBox="0 0 120 80">
<rect x="20" y="30" width="20" height="40" fill="#455a64" />
<rect x="50" y="10" width="25" height="60" fill="#263238" />
<rect x="85" y="40" width="15" height="30" fill="#37474f" />
<rect x="55" y="20" width="5" height="5" fill="#ffeb3b" />
<rect x="65" y="20" width="5" height="5" fill="#ffeb3b" />
</svg>
</div>
<p>The cobblestone streets were filled with the sound of local music. Every corner revealed a new secret about the city's long history. We stayed up late exploring.</p>
</div>
<div class="nav">
<button class="arrow" onclick="changeSlide(-1)">Prev</button>
<div class="dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<button class="arrow" onclick="changeSlide(1)">Next</button>
</div>
</div>
<script>
var currentSlide = 0;
var slides = document.getElementsByClassName("slide");
var dots = document.getElementsByClassName("dot");
function changeSlide(n) {
slides[currentSlide].className = "slide";
dots[currentSlide].className = "dot";
currentSlide = (currentSlide + n + slides.length) % slides.length;
slides[currentSlide].className = "slide active";
dots[currentSlide].className = "dot active";
}
</script>
</body>
</html>
googlegemini-flash-lite-latest
8.9/106.4 s
googlegemini-flash-lite-latest
Tokens1 197
Source code2.3 KB
Time6.4 s
Matania Judgment
Rendering
6
Navigation
7
Code quality
8
Completeness
10
Fidelity
10
Overall
8.88
Review
The model strictly adheres to all prompt constraints: 4 slides, 400x400 format, exclusive use of inline SVG, and no external images. The code is clean and functional, although the visual output is very minimalist and lacks aesthetic refinement (raw typography, basic layout). Arrow navigation and the position indicator are both present and fully operational.
<style>
#container { width: 400px; height: 400px; position: relative; overflow: hidden; background: #fdf6e3; border: 1px solid #ccc; font-family: sans-serif; }
.slide { position: absolute; top: 0; left: 0; width: 400px; height: 400px; display: none; padding: 20px; box-sizing: border-box; }
.active { display: block; }
button { position: absolute; bottom: 20px; cursor: pointer; }
.nav { position: absolute; bottom: 20px; left: 150px; }
</style>
</head>
<body>
<div id="container">
<div class="slide active">
<h2>Paris</h2>
<svg width="100" height="100" viewBox="0 0 100 100"><path d="M50 10 L80 90 L20 90 Z" fill="#888"/><rect x="45" y="5" width="10" height="10" fill="#f00"/></svg>
<p>The Eiffel Tower stands tall against the evening sky. We enjoyed fresh baguettes while watching the city lights flicker to life.</p>
</div>
<div class="slide">
<h2>Tokyo</h2>
<svg width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="30" fill="#f00"/><rect x="10" y="80" width="80" height="10" fill="#333"/></svg>
<p>Tokyo is a vibrant blend of tradition and high-tech energy. Every corner reveals a new neon sign or a quiet, peaceful shrine.</p>
</div>
<div class="slide">
<h2>Rome</h2>
<svg width="100" height="100" viewBox="0 0 100 100"><path d="M10 90 Q50 10 90 90" fill="none" stroke="#d4af37" stroke-width="10"/></svg>
<p>Walking through the Colosseum feels like stepping back into ancient history. The pasta here is truly life-changing and authentic.</p>
</div>
<div class="slide">
<h2>Cairo</h2>
<svg width="100" height="100" viewBox="0 0 100 100"><path d="M50 10 L10 90 L90 90 Z" fill="#eec"/><rect x="40" y="70" width="20" height="20" fill="#8b4513"/></svg>
<p>The Great Pyramids are even more massive than I imagined. Exploring the golden sands of the desert was an unforgettable adventure.</p>
</div>
<button style="left: 20px;" onclick="change(-1)">Prev</button>
<div class="nav" id="nav"></div>
<button style="right: 20px;" onclick="change(1)">Next</button>
</div>
<script>
var idx = 0;
var slides = document.querySelectorAll('.slide');
function change(n) {
slides[idx].className = 'slide';
idx = (idx + n + slides.length) % slides.length;
slides[idx].className = 'slide active';
updateNav();
}
function updateNav() {
document.getElementById('nav').innerHTML = (idx + 1) + ' / 4';
}
updateNav();
</script>
</body>
</html>
mistralmistral-large-latest
6.5/1034.4 s
mistralmistral-large-latest
Tokens1 849
Source code5.9 KB
Time34.4 s
Matania Judgment
Rendering
7
Navigation
8
Code quality
6
Completeness
7
Fidelity
6
Overall
6.5
Review
The model respected most of the visual and thematic constraints, but the code is truncated at the end (the script is not closed), which prevents flawless execution and negatively impacts the code_quality score. Fidelity is penalized by this abrupt cutoff and the fact that the provided source code is incomplete, although the visual output appears to adhere to the 400x400 format and inline SVGs.
<style>
body { margin:0; font-family:Arial; overflow:hidden; }
#slides { width:400px; height:400px; position:relative; }
.slide { width:400px; height:400px; position:absolute; display:none; padding:20px; box-sizing:border-box; }
.slide.active { display:block; }
h1 { font-size:24px; margin:0 0 15px 0; }
p { font-size:14px; line-height:1.5; }
svg { display:block; margin:0 auto 15px auto; }
.nav { position:absolute; bottom:20px; width:360px; display:flex; justify-content:space-between; }
.nav button { background:#000; color:#fff; border:none; width:30px; height:30px; cursor:pointer; }
.indicators { position:absolute; bottom:25px; left:50%; transform:translateX(-50%); display:flex; gap:5px; }
.indicators span { width:8px; height:8px; border-radius:50%; background:#ccc; cursor:pointer; }
.indicators span.active { background:#000; }
</style>
</head>
<body>
<div id="slides">
<div class="slide active" data-index="0">
<h1>Paris, France</h1>
<svg viewBox="0 0 100 60" width="100" height="60">
<rect x="10" y="30" width="80" height="30" fill="#f0f0f0" stroke="#000" stroke-width="1"/>
<rect x="20" y="20" width="15" height="40" fill="#d0d0d0" stroke="#000" stroke-width="1"/>
<rect x="45" y="15" width="10" height="45" fill="#e0e0e0" stroke="#000" stroke-width="1"/>
<rect x="65" y="25" width="15" height="35" fill="#d0d0d0" stroke="#000" stroke-width="1"/>
<circle cx="50" cy="45" r="3" fill="#000"/>
<path d="M30 20 L50 5 L70 20" stroke="#000" stroke-width="1" fill="none"/>
</svg>
<p>Arrived in the City of Light and immediately fell in love with its charm. The Eiffel Tower stood tall against the evening sky, casting a golden glow over the Seine. Croissants from a local bakery were the perfect start to each morning.</p>
</div>
<div class="slide" data-index="1">
<h1>Kyoto, Japan</h1>
<svg viewBox="0 0 100 60" width="100" height="60">
<rect x="0" y="40" width="100" height="20" fill="#f5f5f5" stroke="#000" stroke-width="1"/>
<rect x="20" y="20" width="60" height="20" fill="#e0e0e0" stroke="#000" stroke-width="1"/>
<rect x="30" y="15" width="40" height="5" fill="#d0d0d0" stroke="#000" stroke-width="1"/>
<rect x="35" y="10" width="30" height="5" fill="#c0c0c0" stroke="#000" stroke-width="1"/>
<circle cx="50" cy="45" r="2" fill="#000"/>
<path d="M10 40 L10 30 L20 25 L30 30 L30 40" fill="#a0a0a0"/>
<path d="M70 40 L70 30 L80 25 L90 30 L90 40" fill="#a0a0a0"/>
</svg>
<p>Kyoto's temples and gardens offered a peaceful retreat from the bustling cities. The cherry blossoms were in full bloom, creating a dreamy pink canopy over the streets. Traditional tea ceremonies provided a glimpse into Japan's rich cultural heritage.</p>
</div>
<div class="slide" data-index="2">
<h1>Cape Town, South Africa</h1>
<svg viewBox="0 0 100 60" width="100" height="60">
<rect x="0" y="30" width="100" height="30" fill="#f0f0f0" stroke="#000" stroke-width="1"/>
<path d="M0 30 L20 10 L40 20 L60 5 L80 15 L100 10 L100 30" fill="#e0e0e0" stroke="#000" stroke-width="1"/>
<rect x="45" y="20" width="10" height="20" fill="#d0d0d0" stroke="#000" stroke-width="1"/>
<circle cx="50" cy="45" r="4" fill="#000"/>
<path d="M30 35 L30 45 L40 40 Z" fill="#a0a0a0"/>
<path d="M60 35 L60 45 L70 40 Z" fill="#a0a0a0"/>
</svg>
<p>The view from Table Mountain was breathtaking, with the city sprawling below and the ocean stretching to the horizon. Penguins at Boulders Beach waddled just feet away, their antics bringing constant laughter. Sunset at Camps Bay was the perfect end to each day.</p>
</div>
<div class="slide" data-index="3">
<h1>New York City, USA</h1>
<svg viewBox="0 0 100 60" width="100" height="60">
<rect x="0" y="20" width="100" height="40" fill="#f0f0f0" stroke="#000" stroke-width="1"/>
<rect x="10" y="10" width="8" height="10" fill="#d0d0d0" stroke="#000" stroke-width="1"/>
<rect x="20" y="5" width="6" height="15" fill="#e0e0e0" stroke="#000" stroke-width="1"/>
<rect x="30" y="12" width="10" height="8" fill="#c0c0c0" stroke="#000" stroke-width="1"/>
<rect x="45" y="8" width="8" height="12" fill="#d0d0d0" stroke="#000" stroke-width="1"/>
<rect x="58" y="10" width="6" height="10" fill="#e0e0e0" stroke="#000" stroke-width="1"/>
<rect x="68" y="6" width="12" height="14" fill="#c0c0c0" stroke="#000" stroke-width="1"/>
<rect x="85" y="9" width="5" height="11" fill="#d0d0d0" stroke="#000" stroke-width="1"/>
<circle cx="50" cy="50" r="3" fill="#000"/>
</svg>
<p>The energy of New York City was infectious, with Broadway shows and street performers around every corner. Central Park provided a green oasis amidst the concrete jungle, perfect for a leisurely stroll. Pizza slices bigger than my head became a daily indulgence.</p>
</div>
<div class="nav">
<button id="prev">←</button>
<button id="next">→</button>
</div>
<div class="indicators" id="indicators"></div>
</div>
<script>
var slides = document.querySelectorAll('.slide');
var prevBtn = document.getElementById('prev');
var nextBtn = document.getElementById('next');
var indicatorsContainer = document.getElementById('indicators');
var currentIndex = 0;
function showSlide(index) {
slides.forEach(function(slide) {
slide.classList.remove('active');
});
slides[index].classList.add('active');
updateIndicators(index);
}
function updateIndicators(index) {
var indicators = document.querySelectorAll('.indicators span');
indicators.forEach(function(indicator, i) {
indicator.classList.toggle('active', i === index);
});
}
function createIndicators() {
for (var i = 0; i < slides.length; i++) {
var span = document.createElement('span');
span.addEventListener('click', function(i) {
return function() {
currentIndex = i;
showSlide(currentIndex);
};
}(i));
indicatorsContainer.appendChild(span);
}
}
prevBtn.addEventListener('click', function() {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
showSlide(currentIndex);
});
nextBtn.addEventListener('click', function() {
currentIndex = (currentIndex + 1) % slides.length;
showSlide(currentIndex);
});
createIndicators();
showSlide(0);
</script>
</body>
</html>
mistralmistral-medium-latest
5.5/1016.2 s
mistralmistral-medium-latest
Tokens2 184
Source code7.2 KB
Time16.2 s
Matania Judgment
Rendering
8
Navigation
7
Code quality
4
Completeness
5
Fidelity
5
Overall
5.5
Review
The model failed to provide complete code, cutting off abruptly in the middle of the HTML (truncated code), which prevents the navigation from working (missing JavaScript). Although the visual design and SVGs adhere to the style guidelines, the inability to use the application due to the incomplete code heavily penalizes both faithfulness and completeness.
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.presentation {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px;
box-sizing: border-box;
display: none;
background-color: #fff;
}
.slide.active {
display: block;
}
.slide h2 {
margin-top: 0;
color: #333;
font-size: 24px;
}
.slide p {
font-size: 14px;
line-height: 1.5;
color: #555;
}
.slide svg {
display: block;
margin: 15px auto;
width: 100px;
height: 100px;
}
.nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, 0.3);
color: white;
border: none;
font-size: 18px;
cursor: pointer;
border-radius: 50%;
z-index: 10;
}
.nav-arrow:hover {
background-color: rgba(0, 0, 0, 0.7);
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
.indicators {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.indicator.active {
background-color: rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<div class="presentation">
<div class="slide active">
<h2>Paris, France</h2>
<svg viewBox="0 0 100 100">
<rect x="45" y="10" width="10" height="80" fill="#8B4513"/>
<rect x="40" y="10" width="20" height="10" fill="#8B4513"/>
<polygon points="20,30 40,10 60,10 80,30" fill="#8B4513"/>
<rect x="35" y="40" width="30" height="20" fill="#CD853F"/>
<rect x="30" y="60" width="40" height="30" fill="#CD853F"/>
<rect x="35" y="70" width="10" height="15" fill="#8B4513"/>
<rect x="55" y="70" width="10" height="15" fill="#8B4513"/>
</svg>
<p>Arrived in Paris this morning! The Eiffel Tower was even more magnificent than I imagined. Spent the afternoon wandering along the Seine and enjoying a croissant at a charming café.</p>
</div>
<div class="slide">
<h2>Kyoto, Japan</h2>
<svg viewBox="0 0 100 100">
<rect x="10" y="60" width="80" height="5" fill="#CD853F"/>
<rect x="15" y="50" width="70" height="10" fill="#CD853F"/>
<rect x="20" y="40" width="60" height="10" fill="#CD853F"/>
<rect x="25" y="30" width="50" height="10" fill="#CD853F"/>
<path d="M50,10 L30,30 L70,30 Z" fill="#8B0000"/>
<rect x="45" y="20" width="10" height="10" fill="#FFD700"/>
</svg>
<p>Visited the stunning Fushimi Inari Shrine today. The endless red torii gates create a mesmerizing path up the mountain. Later, I enjoyed matcha tea and traditional wagashi sweets.</p>
</div>
<div class="slide">
<h2>New York, USA</h2>
<svg viewBox="0 0 100 100">
<rect x="10" y="60" width="15" height="40" fill="#808080"/>
<rect x="30" y="50" width="15" height="50" fill="#808080"/>
<rect x="50" y="30" width="15" height="70" fill="#808080"/>
<rect x="70" y="40" width="15" height="60" fill="#808080"/>
<rect x="25" y="80" width="50" height="5" fill="#8B4513"/>
<rect x="20" y="75" width="60" height="5" fill="#8B4513"/>
</svg>
<p>The skyline of Manhattan is breathtaking! Spent the day exploring Central Park and Times Square. Ended the evening with a Broadway show—what an unforgettable experience!</p>
</div>
<div class="slide">
<h2>Santorini, Greece</h2>
<svg viewBox="0 0 100 100">
<rect x="10" y="60" width="20" height="20" fill="#fff"/>
<rect x="35" y="50" width="20" height="30" fill="#fff"/>
<rect x="60" y="40" width="20" height="40" fill="#fff"/>
<path d="M10,60 L30,60 L30,80 L10,80 Z" fill="#1E90FF"/>
<path d="M35,50 L55,50 L55,80 L35,80 Z" fill="#1E90FF"/>
<path d="M60,40 L80,40 L80,80 L60,80 Z" fill="#1E90FF"/>
<circle cx="20" y="50" r="5" fill="#1E90FF"/>
<circle cx="45" y="40" r="5" fill="#1E90FF"/>
<circle cx="70" y="30" r="5" fill="#1E90FF"/>
</svg>
<p>Woke up to the most stunning sunrise over the caldera. The white-washed buildings and blue domes are even more beautiful in person. Relaxed on the beach and enjoyed fresh seafood by the water.</p>
</div>
<button class="nav-arrow" id="prev">‹</button>
<button class="nav-arrow" id="next">›</button>
<div class="indicators">
<div class="indicator active" data-index="0"></div>
<div class="indicator" data-index="1"></div>
<div class="indicator" data-index="2"></div>
<div class="indicator" data-index="3"></div>
</div>
</div>
<script>
var slides = document.querySelectorAll('.slide');
var indicators = document.querySelectorAll('.indicator');
var prevBtn = document.getElementById('prev');
var nextBtn = document.getElementById('next');
var currentSlide = 0;
function showSlide(index) {
slides[currentSlide].classList.remove('active');
indicators[currentSlide].classList.remove('active');
currentSlide = index;
slides[currentSlide].classList.add('active');
indicators[currentSlide].classList.add('active');
}
prevBtn.addEventListener('click', function() {
var newIndex = currentSlide > 0 ? currentSlide - 1 : slides.length - 1;
showSlide(newIndex);
});
nextBtn.addEventListener('click', function() {
var newIndex = currentSlide < slides.length - 1 ? currentSlide + 1 : 0;
showSlide(newIndex);
});
indicators.forEach(function(indicator, index) {
indicator.addEventListener('click', function() {
showSlide(index);
});
});
</script>
</body>
</html
mistralmistral-small-latest
9.3/1011.9 s
mistralmistral-small-latest
Tokens1 620
Source code5.0 KB
Time11.9 s
Matania Judgment
Rendering
7
Navigation
9
Code quality
8
Completeness
10
Fidelity
10
Overall
9.25
Review
The model perfectly adhered to all the strict prompt constraints, specifically the number of slides, the exclusive use of inline SVG, and the 400x400 format. The navigation is comprehensive, featuring arrows, indicators, and keyboard support. The visual rendering is simple yet functional, although the SVG illustrations are very basic.
<style>
body{margin:0;padding:0;font-family:Arial;background:#f0f0f0;overflow:hidden}
#presentation{width:400px;height:400px;position:relative;background:#fff;margin:50px auto;border:1px solid #ccc}
.slide{width:100%;height:100%;position:absolute;top:0;left:0;display:none;padding:20px;box-sizing:border-box}
.slide.active{display:block}
.slide h2{margin-top:0;font-size:24px;text-align:center}
.slide p{font-size:14px;line-height:1.4;margin:10px 0}
.nav{position:absolute;bottom:20px;width:100%;text-align:center}
.nav button{background:#007acc;color:#fff;border:none;border-radius:50%;width:30px;height:30px;margin:0 5px;cursor:pointer;font-size:16px}
.nav button.active{background:#ff6600}
</style>
</head>
<body>
<div id="presentation">
<div class="slide active">
<h2>First Stop: Paris</h2>
<svg width="100%" height="200" viewBox="0 0 400 200">
<rect x="50" y="50" width="300" height="100" fill="#f5f5f5" stroke="#ccc" stroke-width="2"/>
<rect x="100" y="100" width="200" height="50" fill="#ff6600"/>
<circle cx="120" cy="80" r="15" fill="#ffcc00"/>
<circle cx="280" cy="80" r="15" fill="#ffcc00"/>
<circle cx="200" cy="60" r="10" fill="#ffcc00"/>
<path d="M150 150 L200 100 L250 150" stroke="#000" stroke-width="2" fill="none"/>
</svg>
<p>Paris greeted us with iconic landmarks and charming cafes. The Eiffel Tower sparkled at night, and croissants tasted best by the Seine. We wandered Montmartre, discovering hidden murals and local art.</p>
</div>
<div class="slide">
<h2>Second Stop: Santorini</h2>
<svg width="100%" height="200" viewBox="0 0 400 200">
<rect x="0" y="100" width="400" height="100" fill="#1a5fb4"/>
<path d="M0 100 L100 50 L200 80 L300 30 L400 60 L400 200 L0 200 Z" fill="#f5f5dc"/>
<rect x="150" y="120" width="30" height="40" fill="#ff6600"/>
<rect x="200" y="110" width="30" height="50" fill="#ff6600"/>
<rect x="250" y="125" width="30" height="35" fill="#ff6600"/>
<circle cx="50" cy="80" r="10" fill="#ffcc00"/>
<circle cx="350" cy="70" r="12" fill="#ffcc00"/>
</svg>
<p>Santorini's whitewashed buildings and blue domes took our breath away. Sunset in Oia painted the sky in fiery hues, while wine tasting revealed volcanic flavors. The caldera views were simply unforgettable.</p>
</div>
<div class="slide">
<h2>Third Stop: Kyoto</h2>
<svg width="100%" height="200" viewBox="0 0 400 200">
<rect x="0" y="100" width="400" height="100" fill="#2e8b57"/>
<rect x="50" y="80" width="300" height="40" fill="#f5f5dc"/>
<rect x="100" y="120" width="20" height="30" fill="#8b4513"/>
<rect x="150" y="110" width="20" height="40" fill="#8b4513"/>
<rect x="200" y="125" width="20" height="25" fill="#8b4513"/>
<rect x="250" y="115" width="20" height="35" fill="#8b4513"/>
<circle cx="200" cy="60" r="20" fill="#ff6600"/>
<path d="M180 40 L220 40 L200 20 Z" fill="#ffcc00"/>
</svg>
<p>Kyoto's temples and gardens offered serene moments of reflection. Cherry blossoms framed ancient shrines, and tea ceremonies taught us mindfulness. The bamboo forest at Arashiyama felt like stepping into another world.</p>
</div>
<div class="slide">
<h2>Final Stop: New York</h2>
<svg width="100%" height="200" viewBox="0 0 400 200">
<rect x="0" y="120" width="400" height="80" fill="#87ceeb"/>
<rect x="50" y="50" width="80" height="120" fill="#fff" stroke="#000" stroke-width="2"/>
<rect x="150" y="40" width="100" height="130" fill="#fff" stroke="#000" stroke-width="2"/>
<rect x="270" y="60" width="60" height="110" fill="#fff" stroke="#000" stroke-width="2"/>
<rect x="100" y="100" width="20" height="40" fill="#ff6600"/>
<rect x="200" y="90" width="20" height="50" fill="#ff6600"/>
<rect x="300" y="110" width="20" height="30" fill="#ff6600"/>
<circle cx="200" cy="30" r="15" fill="#ffcc00"/>
</svg>
<p>New York's energy was contagious, from Times Square's dazzling lights to Central Park's peaceful trails. Broadway shows left us spellbound, and diverse neighborhoods served incredible food. The city never slept, and neither did we.</p>
</div>
<div class="nav">
<button onclick="prevSlide()">‹</button>
<button class="active" onclick="goToSlide(0)">1</button>
<button onclick="goToSlide(1)">2</button>
<button onclick="goToSlide(2)">3</button>
<button onclick="goToSlide(3)">4</button>
<button onclick="nextSlide()">›</button>
</div>
</div>
<script>
var currentSlide = 0;
var slides = document.querySelectorAll('.slide');
var indicators = document.querySelectorAll('.nav button:not(:first-child):not(:last-child)');
function showSlide(index) {
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
indicators[i].classList.remove('active');
}
slides[index].classList.add('active');
indicators[index].classList.add('active');
currentSlide = index;
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
function prevSlide() {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
}
function goToSlide(index) {
showSlide(index);
}
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight') nextSlide();
if (e.key === 'ArrowLeft') prevSlide();
});
</script>
</body>
</html
openaigpt-4o-mini
8.3/1017.1 s
openaigpt-4o-mini
Tokens1 247
Source code3.5 KB
Time17.1 s
Matania Judgment
Rendering
5
Navigation
8
Code quality
7
Completeness
10
Fidelity
9
Overall
8.25
Review
The model adheres to almost all constraints, specifically the slide count, the use of inline SVGs, and the absence of external images. However, the visual rendering is extremely rudimentary, and the SVGs consist of very basic geometric shapes that only vaguely represent the destinations. The code structure is correct although incomplete (the <head> tag is improperly opened), but the navigation works perfectly.
<style>
body { font-family: Arial, sans-serif; }
.slide { display: none; width: 400px; height: 400px; position: relative; }
.active { display: block; }
.navigation { position: absolute; bottom: 10px; left: 10px; }
.indicator { display: inline-block; width: 10px; height: 10px; background: #ccc; border-radius: 50%; margin: 0 5px; cursor: pointer; }
.active-indicator { background: #333; }
</style>
</head>
<body>
<div class="slide active">
<h1>First Stop: Paris</h1>
<svg width="100" height="100" viewBox="0 0 100 100">
<rect x="10" y="20" width="80" height="60" fill="#007BFF" />
<polygon points="50,0 90,40 10,40" fill="#FF5733" />
</svg>
<p>Paris, the city of lights, greeted us with its stunning architecture. We explored the narrow streets filled with charming cafes.</p>
</div>
<div class="slide">
<h1>Second Stop: Tokyo</h1>
<svg width="100" height="100" viewBox="0 0 100 100">
<rect x="10" y="30" width="80" height="50" fill="#FF5733" />
<circle cx="50" cy="20" r="15" fill="#007BFF" />
</svg>
<p>Tokyo captivated us with its blend of tradition and modernity. The bustling streets contrast beautifully with serene temples.</p>
</div>
<div class="slide">
<h1>Third Stop: Sydney</h1>
<svg width="100" height="100" viewBox="0 0 100 100">
<polygon points="10,90 50,10 90,90" fill="#007BFF" />
<rect x="30" y="70" width="40" height="20" fill="#FF5733" />
</svg>
<p>Sydney's harbors are a sight to behold, highlighted by the iconic Opera House. The beaches were perfect for relaxation.</p>
</div>
<div class="slide">
<h1>Final Stop: New York</h1>
<svg width="100" height="100" viewBox="0 0 100 100">
<rect x="30" y="20" width="40" height="60" fill="#FF5733" />
<rect x="10" y="10" width="20" height="80" fill="#007BFF" />
</svg>
<p>New York buzzed with energy from morning till night. The skyline, adorned with skyscrapers, left us in awe.</p>
</div>
<div class="navigation">
<span class="indicator" onclick="showSlide(0)"></span>
<span class="indicator" onclick="showSlide(1)"></span>
<span class="indicator" onclick="showSlide(2)"></span>
<span class="indicator" onclick="showSlide(3)"></span>
<button onclick="prevSlide()">❮</button>
<button onclick="nextSlide()">❯</button>
</div>
<script>
var currentSlide = 0;
showSlide(currentSlide);
function showSlide(index) {
var slides = document.getElementsByClassName('slide');
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
slides[index].style.display = 'block';
currentSlide = index;
updateIndicators();
}
function nextSlide() {
if (currentSlide < 3) {
showSlide(currentSlide + 1);
}
}
function prevSlide() {
if (currentSlide > 0) {
showSlide(currentSlide - 1);
}
}
function updateIndicators() {
var indicators = document.getElementsByClassName('indicator');
for (var i = 0; i < indicators.length; i++) {
indicators[i].className = 'indicator';
}
indicators[currentSlide].className += ' active-indicator';
}
</script>
</body>
</html>
openaigpt-5.4
7.3/1035.6 s
openaigpt-5.4
Tokens2 195
Source code7.2 KB
Time35.6 s
Matania Judgment
Rendering
9
Navigation
8
Code quality
7
Completeness
6
Fidelity
7
Overall
7.25
Review
The model followed almost all instructions, creating beautiful inline SVG illustrations and a cohesive aesthetic. However, the provided code is truncated (cut off at the end), which prevents the JavaScript from functioning and the HTML from being valid/complete. While the visual design is excellent, the lack of functional navigation due to the incomplete code significantly impacts the completeness and fidelity scores.
<style>
html, body {
margin: 0;
padding: 0;
width: 400px;
height: 400px;
overflow: hidden;
background: #f4efe6;
font-family: Arial, sans-serif;
}
#deck {
position: relative;
width: 400px;
height: 400px;
background: #fcf8f1;
color: #2f2a24;
box-sizing: border-box;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 400px;
padding: 20px 44px 56px 44px;
box-sizing: border-box;
display: none;
}
.slide.active {
display: block;
}
h1 {
margin: 0 0 10px 0;
font-size: 24px;
line-height: 1.1;
text-align: center;
color: #5a3e2b;
}
.visual {
width: 120px;
height: 120px;
margin: 6px auto 14px auto;
display: block;
background: #ffffff;
border: 2px solid #d8c8b5;
border-radius: 12px;
}
p {
margin: 0;
font-size: 15px;
line-height: 1.45;
text-align: left;
}
.nav {
position: absolute;
bottom: 12px;
width: 32px;
height: 32px;
border: 0;
border-radius: 16px;
background: #8b6b4a;
color: #ffffff;
font-size: 20px;
line-height: 32px;
text-align: center;
cursor: pointer;
}
#prev {
left: 12px;
}
#next {
right: 12px;
}
#indicators {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
text-align: center;
}
.dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
border-radius: 5px;
background: #cbb9a4;
cursor: pointer;
}
.dot.active {
background: #8b6b4a;
}
</style>
</head>
<body>
<div id="deck">
<div class="slide active">
<h1>Day 1: Mountain Arrival</h1>
<svg class="visual" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="120" height="120" fill="#dff1ff"/>
<circle cx="92" cy="24" r="12" fill="#ffd36b"/>
<polygon points="10,92 42,48 72,92" fill="#6f8f72"/>
<polygon points="46,92 78,38 110,92" fill="#57745c"/>
<polygon points="68,55 78,38 88,55" fill="#ffffff"/>
<rect x="0" y="92" width="120" height="28" fill="#9bc27c"/>
<path d="M8 104 C28 96, 44 112, 62 102 C80 92, 96 108, 112 100" fill="none" stroke="#7b5a3a" stroke-width="3"/>
</svg>
<p>The train curved into the valley just after sunrise, and the air turned cool and pine-scented. I spent the afternoon walking quiet paths between steep green slopes, feeling as if the whole town had been tucked gently into the mountains.</p>
</div>
<div class="slide">
<h1>Day 2: Seaside Afternoon</h1>
<svg class="visual" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="120" height="70" fill="#8fd3ff"/>
<rect x="0" y="70" width="120" height="50" fill="#f1d08a"/>
<path d="M0 66 C15 60, 30 72, 45 66 C60 60, 75 72, 90 66 C105 60, 115 70, 120 66 L120 82 L0 82 Z" fill="#3ba7d6"/>
<rect x="78" y="56" width="4" height="34" fill="#8b6b4a"/>
<polygon points="80,56 80,36 98,50" fill="#ff7f6e"/>
<polygon points="80,58 80,74 95,66" fill="#ffd36b"/>
<circle cx="22" cy="20" r="10" fill="#fff2b0"/>
<path d="M18 96 C24 86, 32 86, 38 96" fill="none" stroke="#c79b58" stroke-width="3"/>
<path d="M54 104 C60 94, 68 94, 74 104" fill="none" stroke="#c79b58" stroke-width="3"/>
</svg>
<p>By noon I had reached the shore, where bright sails moved lazily across the water. I wrote postcards with sandy hands and stayed long enough to watch the waves turn silver under the late sun.</p>
</div>
<div class="slide">
<h1>Day 3: Old City Evening</h1>
<svg class="visual" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="120" height="120" fill="#1f3050"/>
<circle cx="92" cy="22" r="10" fill="#f5e7a1"/>
<rect x="10" y="58" width="26" height="62" fill="#8f5d4a"/>
<rect x="38" y="44" width="24" height="76" fill="#a46a54"/>
<rect x="64" y="52" width="18" height="68" fill="#7d5142"/>
<rect x="84" y="36" width="26" height="84" fill="#99624e"/>
<rect x="16" y="66" width="6" height="6" fill="#ffd98a"/>
<rect x="24" y="80" width="6" height="6" fill="#ffd98a"/>
<rect x="44" y="54" width="6" height="6" fill="#ffd98a"/>
<rect x="44" y="66" width="6" height="6" fill="#ffd98a"/>
<rect x="68" y="62" width="6" height="6" fill="#ffd98a"/>
<rect x="92" y="46" width="6" height="6" fill="#ffd98a"/>
<rect x="100" y="62" width="6" height="6" fill="#ffd98a"/>
<rect x="0" y="112" width="120" height="8" fill="#3d2d28"/>
</svg>
<p>After sunset the old streets glowed with amber windows and the sound of dishes from narrow cafes. I wandered without a map, guided by music, warm bread, and the echo of footsteps over the stones.</p>
</div>
<div class="slide">
<h1>Day 4: Forest Camp</h1>
<svg class="visual" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="120" height="120" fill="#cfe8d0"/>
<rect x="0" y="84" width="120" height="36" fill="#7eab6f"/>
<polygon points="18,84 32,54 46,84" fill="#4d7b4f"/>
<rect x="29" y="84" width="4" height="18" fill="#6f5236"/>
<polygon points="72,84 88,46 104,84" fill="#3f6c45"/>
<rect x="86" y="84" width="4" height="18" fill="#6f5236"/>
<polygon points="44,88 60,66 76,88" fill="#d97b4f"/>
<line x1="60" y1="66" x2="60" y2="88" stroke="#b85f39" stroke-width="2"/>
<path d="M54 98 C57 88, 63 88, 66 98" fill="none" stroke="#ffb25a" stroke-width="4"/>
<path d="M56 94 C58 88, 62 88, 64 94" fill="none" stroke="#ffe08a" stroke-width="3"/>
<circle cx="20" cy="20" r="8" fill="#ffffff"/>
<circle cx="30" cy="18" r="10" fill="#ffffff"/>
<circle cx="40" cy="20" r="8" fill="#ffffff"/>
</svg>
<p>My last night was spent under tall trees, with a small tent and a fire that crackled softly into the dark. The woods smelled of smoke and damp leaves, and I fell asleep thinking this was the quietest page in the whole journey.</p>
</div>
<button id="prev" class="nav">‹</button>
<div id="indicators">
<span class="dot active" data-index="0"></span>
<span class="dot" data-index="1"></span>
<span class="dot" data-index="2"></span>
<span class="dot" data-index="3"></span>
</div>
<button id="next" class="nav">›</button>
</div>
<script>
(function() {
var slides = document.getElementsByClassName('slide');
var dots = document.getElementsByClassName('dot');
var current = 0;
function showSlide(index) {
var i;
if (index < 0) {
index = slides.length - 1;
}
if (index >= slides.length) {
index = 0;
}
for (i = 0; i < slides.length; i++) {
slides[i].className = 'slide' + (i === index ? ' active' : '');
dots[i].className = 'dot' + (i === index ? ' active' : '');
}
current = index;
}
document.getElementById('prev').onclick = function() {
showSlide(current - 1);
};
document.getElementById('next').onclick = function() {
showSlide(current + 1);
};
var i;
for (i = 0; i < dots.length; i++) {
dots[i].onclick = function() {
showSlide(parseInt(this.getAttribute('data-index'), 10));
};
}
document.onkeydown = function(e) {
e = e || window.event;
if (e.keyCode === 37) {
showSlide(current - 1);
} else if (e.keyCode === 39) {
showSlide(current + 1);
}
};
})();
</script>
</body>
</html>
openaigpt-5.4-mini
5.5/1025.1 s
openaigpt-5.4-mini
Tokens3 212
Source code11.1 KB
Time25.1 s
Matania Judgment
Rendering
8
Navigation
9
Code quality
7
Completeness
4
Fidelity
4
Overall
5.5
Review
The model failed the completeness and fidelity constraints: the source code is truncated at the end of the second slide, preventing the inclusion of the requested 4 slides and making navigation impossible beyond slide 2. Although the visual rendering and SVGs are of good quality, the inability to execute the entire presentation is a major flaw.
The model perfectly adhered to all constraints, including the strict 400x400 dimensions and the exclusion of external images through highly creative inline SVGs. The navigation is complete, featuring arrows and position indicators, and the design is aesthetic and consistent with the travel journal theme.
The model failed critically on code generation: the file is truncated (the code cuts off abruptly in the middle of an SVG tag), rendering the presentation incomplete and non-functional. Consequently, the navigation and all 4 slides cannot be verified or used. Although the visual style suggested by the initial code is aesthetic, the inability to provide complete code is a major flaw.
The model perfectly adhered to all constraints, including the strict 400x400 dimensions and the absence of external images by using high-quality embedded SVGs. Navigation is complete (arrows and indicators), and the design respects a travel journal aesthetic. The code is clean, well-structured, and fully functional.
<style>
html,body{margin:0;padding:0;width:100%;height:100%;background:#d9c7a3;font-family:Georgia,serif;color:#3b2a1a}
#journal{width:400px;height:400px;box-sizing:border-box;margin:0 auto;background:#f7efd9;border:10px solid #6b4a2b;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #b48a5a}
.slide{display:none;width:100%;height:100%;box-sizing:border-box;padding:26px 42px 58px 42px;text-align:center}
.slide.active{display:block}
h1{font-size:23px;margin:0 0 12px 0;color:#5b321d}
p{font-size:15px;line-height:1.35;margin:14px 0 0 0}
svg{width:135px;height:105px;border:2px solid #8b6842;background:#fff7df}
.nav{position:absolute;bottom:13px;width:38px;height:32px;border:0;background:#8b5a2b;color:#fff;font-size:23px;line-height:32px;cursor:pointer;border-radius:4px}
#prev{left:22px}
#next{right:22px}
#dots{position:absolute;bottom:22px;left:0;right:0;text-align:center}
.dot{display:inline-block;width:9px;height:9px;margin:0 4px;border-radius:50%;background:#b89b74}
.dot.active{background:#5b321d}
</style>
</head>
<body>
<div id="journal">
<section class="slide active">
<h1>Day 1: Harbor Arrival</h1>
<svg viewBox="0 0 135 105" aria-label="harbor">
<rect x="0" y="0" width="135" height="105" fill="#9fd6e8"/>
<rect x="0" y="70" width="135" height="35" fill="#2f86a6"/>
<circle cx="108" cy="22" r="13" fill="#f6c65b"/>
<rect x="28" y="58" width="52" height="18" fill="#7a3f25"/>
<polygon points="42,58 61,28 61,58" fill="#fff4d6"/>
<polygon points="64,58 64,34 88,58" fill="#f4e0b2"/>
<rect x="24" y="76" width="64" height="5" fill="#4b2b1c"/>
</svg>
<p>I stepped off the ferry with salt on my coat and gulls circling overhead. The harbor smelled of rope, oranges, and rain-wet stone.</p>
</section>
<section class="slide">
<h1>Day 2: Mountain Road</h1>
<svg viewBox="0 0 135 105" aria-label="mountain road">
<rect x="0" y="0" width="135" height="105" fill="#bfe3f2"/>
<rect x="0" y="68" width="135" height="37" fill="#7aa95c"/>
<polygon points="5,70 42,20 80,70" fill="#6f7f55"/>
<polygon points="52,70 94,15 132,70" fill="#536d4b"/>
<polygon points="35,70 45,38 55,70" fill="#fff7e6"/>
<polygon points="82,70 95,34 108,70" fill="#fff7e6"/>
<path d="M62 105 C58 88 75 80 70 68 C67 61 60 57 62 48" fill="none" stroke="#5b4634" stroke-width="8"/>
<path d="M62 105 C58 88 75 80 70 68 C67 61 60 57 62 48" fill="none" stroke="#e8d7a8" stroke-width="3"/>
</svg>
<p>The bus climbed in slow loops above terraces of green fields. At every bend, the valley opened like a folded map in my lap.</p>
</section>
<section class="slide">
<h1>Day 3: Desert Camp</h1>
<svg viewBox="0 0 135 105" aria-label="desert camp">
<rect x="0" y="0" width="135" height="105" fill="#26364d"/>
<rect x="0" y="66" width="135" height="39" fill="#d99d4a"/>
<circle cx="105" cy="22" r="11" fill="#f2e7b8"/>
<circle cx="31" cy="18" r="2" fill="#fff"/>
<circle cx="54" cy="28" r="2" fill="#fff"/>
<circle cx="78" cy="15" r="2" fill="#fff"/>
<polygon points="30,76 56,46 82,76" fill="#9b4d2d"/>
<polygon points="56,46 56,76 82,76" fill="#6f341f"/>
<rect x="51" y="68" width="10" height="8" fill="#2b1b13"/>
<path d="M8 84 C30 73 50 91 73 80 C96 69 111 80 135 72" fill="none" stroke="#c27d36" stroke-width="5"/>
</svg>
<p>Night came quickly, turning the dunes blue and the fire copper. I wrote by lantern light while the wind erased our footprints.</p>
</section>
<section class="slide">
<h1>Day 4: City Morning</h1>
<svg viewBox="0 0 135 105" aria-label="city morning">
<rect x="0" y="0" width="135" height="105" fill="#f0cfa5"/>
<circle cx="25" cy="24" r="13" fill="#f5a34d"/>
<rect x="0" y="74" width="135" height="31" fill="#6f6b63"/>
<rect x="18" y="38" width="20" height="36" fill="#8a5e45"/>
<rect x="45" y="26" width="26" height="48" fill="#5f7184"/>
<rect x="78" y="44" width="18" height="30" fill="#9a6b50"/>
<rect x="103" y="32" width="20" height="42" fill="#6a4c3b"/>
<rect x="23" y="47" width="5" height="5" fill="#ffe8a3"/>
<rect x="53" y="36" width="5" height="5" fill="#ffe8a3"/>
<rect x="63" y="53" width="5" height="5" fill="#ffe8a3"/>
<rect x="109" y="43" width="5" height="5" fill="#ffe8a3"/>
<path d="M0 82 L135 82" stroke="#ded0b8" stroke-width="3"/>
</svg>
<p>My last morning began with bells, coffee, and shutters opening one by one. I tucked ticket stubs between the pages and promised the city I would return.</p>
</section>
<button class="nav" id="prev" aria-label="previous">‹</button>
<button class="nav" id="next" aria-label="next">›</button>
<div id="dots"><span class="dot active"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
</div>
<script>
(function(){
var index=0;
var slides=document.getElementsByClassName('slide');
var dots=document.getElementsByClassName('dot');
function show(n){
var i;
index=(n+slides.length)%slides.length;
for(i=0;i<slides.length;i++){
slides[i].className='slide';
dots[i].className='dot';
}
slides[index].className='slide active';
dots[index].className='dot active';
}
document.getElementById('prev').onclick=function(){show(index-1);};
document.getElementById('next').onclick=function(){show(index+1);};
var i;
for(i=0;i<dots.length;i++){
(function(n){dots[n].onclick=function(){show(n);};})(i);
}
}());
</script>
</body>
</html>
openaigpt-5.5-pro
6.0/10157.7 s
openaigpt-5.5-pro
Tokens1 849
Source code5.8 KB
Time157.7 s
Matania Judgment
Rendering
9
Navigation
8
Code quality
7
Completeness
4
Fidelity
5
Overall
6
Review
The model produced a magnificent visual rendering that is highly consistent with the 'travel journal' theme (colors, typography, original SVGs). However, the code is truncated at the end (the 4th slide is incomplete and the HTML is not closed), which prevents navigation and the completeness of the application. Fidelity is heavily penalized by this technical cutoff, which renders the final product non-functional.
The model perfectly adhered to all constraints, including the 400x400 format, the absence of external images, and the use of inline SVGs. The design is consistent with the travel journal theme, the navigation is functional and smooth, and the code is clean and well-structured.
<style>
body { margin: 0; padding: 0; background: #f0e6d2; font-family: serif; display: flex; justify-content: center; align-items: center; height: 100vh; }
#journal { width: 400px; height: 400px; background: #fffef0; border: 10px solid #5d4037; box-sizing: border-box; position: relative; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.slide { position: absolute; width: 100%; height: 100%; padding: 30px; box-sizing: border-box; display: none; text-align: center; }
.slide.active { display: block; }
h2 { color: #5d4037; margin: 10px 0; font-size: 24px; border-bottom: 1px solid #d7ccc8; padding-bottom: 5px; }
p { color: #3e2723; font-size: 14px; line-height: 1.5; }
.svg-container { height: 120px; width: 100%; display: flex; justify-content: center; align-items: center; margin: 15px 0; }
.nav { position: absolute; bottom: 20px; width: 100%; display: flex; justify-content: center; align-items: center; gap: 20px; }
.arrow { cursor: pointer; font-size: 24px; color: #5d4037; user-select: none; font-weight: bold; }
.dots { display: flex; gap: 5px; }
.dot { width: 8px; height: 8px; background: #d7ccc8; border-radius: 50%; }
.dot.active { background: #5d4037; }
</style>
</head>
<body>
<div id="journal">
<div class="slide active">
<h2>The Departure</h2>
<div class="svg-container">
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100" height="100" fill="#81d4fa" />
<rect x="20" y="60" width="60" height="20" fill="#cfd8dc" />
<circle cx="35" cy="55" r="15" fill="#ffccbc" />
<circle cx="65" cy="55" r="15" fill="#ffccbc" />
<rect x="45" y="30" width="10" height="30" fill="#5d4037" />
</svg>
</div>
<p>The morning sun rose over the station. I packed my heavy leather bag and felt a rush of excitement for the unknown journey ahead.</p>
</div>
<div class="slide">
<h2>Mountain Peaks</h2>
<div class="svg-container">
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100" height="100" fill="#e1f5fe" />
<polygon points="10,90 50,20 90,90" fill="#78909c" />
<polygon points="40,90 60,50 80,90" fill="#546e7a" />
<rect x="0" y="85" width="100" height="15" fill="#4caf50" />
</svg>
</div>
<p>The air grew thin and crisp as we climbed. The snow-capped peaks looked like giants sleeping under the bright blue sky.</p>
</div>
<div class="slide">
<h2>Coastal Breeze</h2>
<div class="svg-container">
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100" height="100" fill="#fff9c4" />
<rect x="0" y="60" width="100" height="40" fill="#0288d1" />
<circle cx="80" cy="30" r="15" fill="#ffeb3b" />
<path d="M0 70 Q 25 60 50 70 T 100 70" fill="none" stroke="#fff" stroke-width="2" />
</svg>
</div>
<p>Salt spray filled my lungs by the ocean. The rhythmic sound of the waves provided a soothing soundtrack to my afternoon rest.</p>
</div>
<div class="slide">
<h2>Final Sunset</h2>
<div class="svg-container">
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100" height="100" fill="#ffccbc" />
<circle cx="50" cy="50" r="30" fill="#ff5722" />
<rect x="0" y="80" width="100" height="20" fill="#3e2723" />
<rect x="20" y="70" width="5" height="15" fill="#3e2723" />
<rect x="75" y="70" width="5" height="15" fill="#3e2723" />
</svg>
</div>
<p>The day ended with a golden glow across the horizon. Every mile traveled was a story written in the sand and sky.</p>
</div>
<div class="nav">
<div class="arrow" onclick="changeSlide(-1)">←</div>
<div class="dots" id="dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="arrow" onclick="changeSlide(1)">→</div>
</div>
</div>
<script>
var currentSlide = 0;
var slides = document.getElementsByClassName('slide');
var dots = document.getElementsByClassName('dot');
function changeSlide(direction) {
slides[currentSlide].classList.remove('active');
dots[currentSlide].classList.remove('active');
currentSlide += direction;
if (currentSlide >= slides.length) {
currentSlide = 0;
}
if (currentSlide < 0) {
currentSlide = slides.length - 1;
}
slides[currentSlide].classList.add('active');
dots[currentSlide].classList.add('active');
}
</script>
</body>
</html>
xaigrok-4-1-fast-non-reasoning
9.5/1011.4 s
xaigrok-4-1-fast-non-reasoning
Tokens1 368
Source code4.1 KB
Time11.4 s
Matania Judgment
Rendering
8
Navigation
9
Code quality
9
Completeness
10
Fidelity
10
Overall
9.5
Review
The model perfectly adhered to all prompt constraints, including the absence of external images, the use of inline SVGs, and the 400x400 format. The code is clean and functional, and the navigation is intuitive. The visual rendering is simple yet effective and respects the required structure for each slide.
<!DOCTYPE html>
<html>
<head>
<title>Travel Journal</title>
<style>
body {margin:0;padding:20px;background:#f0f8ff;font-family:Arial,sans-serif;color:#333;}
.container {max-width:400px;margin:0 auto;text-align:center;}
h1 {font-size:24px;margin:10px 0;color:#2c5aa0;}
.slide {display:none;min-height:350px;padding:20px;}
.slide.active {display:block;}
.visual {width:100px;height:100px;margin:20px auto;display:block;}
.content {font-size:16px;line-height:1.5;}
.nav {margin:20px 0;}
.prev,.next {background:#2c5aa0;color:white;border:none;padding:10px 15px;font-size:18px;cursor:pointer;border-radius:5px;}
.prev:hover,.next:hover {background:#1e447f;}
.dots {margin:10px 0;}
.dot {display:inline-block;width:12px;height:12px;margin:0 5px;background:#ccc;border-radius:50%;cursor:pointer;}
.dot.active {background:#2c5aa0;}
</style>
</head>
<body>
<div class="container">
<h1>🌍 My Travel Journal</h1>
<div class="slides">
<div class="slide active">
<svg class="visual" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#4CAF50" stroke="#388E3C" stroke-width="3"/>
<path d="M30 45 Q50 25 70 45 Q50 45 50 65" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>
</svg>
<div class="content">
<h2>Arrival in Paris</h2>
<p>The Eiffel Tower sparkled against the night sky as I stepped off the train. The air smelled of fresh croissants and adventure. I couldn't wait to explore the City of Light.</p>
</div>
</div>
<div class="slide">
<svg class="visual" viewBox="0 0 100 100">
<rect x="20" y="30" width="60" height="40" rx="10" fill="#2196F3" stroke="#1976D2" stroke-width="3"/>
<circle cx="35" cy="75" r="12" fill="#FF9800"/>
<circle cx="65" cy="75" r="12" fill="#FF9800"/>
<line x1="30" y1="45" x2="70" y2="45" stroke="#fff" stroke-width="4"/>
</svg>
<div class="content">
<h2>Amsterdam Canals</h2>
<p>Biking along the winding canals felt like a dream. Colorful houseboats bobbed gently in the water while bicycles chimed their bells. The Dutch hospitality made every moment special.</p>
</div>
</div>
<div class="slide">
<svg class="visual" viewBox="0 0 100 100">
<circle cx="50" cy="30" r="25" fill="#FF5722" stroke="#D84315" stroke-width="3"/>
<rect x="35" y="55" width="30" height="35" rx="5" fill="#795548"/>
<path d="M40 60 L50 52 L60 60 Z" fill="#FF9800"/>
<line x1="45" y1="70" x2="55" y2="70" stroke="#fff" stroke-width="3"/>
</svg>
<div class="content">
<h2>Rome's Colosseum</h2>
<p>Standing where gladiators once fought gave me chills. The ancient stones whispered stories of emperors and triumph. Pasta carbonara never tasted so good after exploring ruins all day.</p>
</div>
</div>
<div class="slide">
<svg class="visual" viewBox="0 0 100 100">
<circle cx="50" cy="40" r="35" fill="#9C27B0" stroke="#7B1FA2" stroke-width="3"/>
<path d="M25 75 L50 85 L75 75 L70 95 L50 90 L30 95 Z" fill="#FFC107"/>
<circle cx="50" cy="25" r="8" fill="#fff"/>
</svg>
<div class="content">
<h2>Tokyo Nights</h2>
<p>Neon lights reflected in puddles as I wandered Shibuya. Street food aromas mixed with the energy of endless crowds. This city never sleeps, and neither did I.</p>
</div>
</div>
</div>
<div class="nav">
<button class="prev" onclick="changeSlide(-1)">❮</button>
<div class="dots">
<span class="dot active" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
<button class="next" onclick="changeSlide(1)">❯</button>
</div>
</div>
<script>
var slideIndex=1;
showSlides(slideIndex);
function changeSlide(n){showSlides(slideIndex+=n);}
function currentSlide(n){slideIndex=n;showSlides(n);}
function showSlides(n){
var slides=document.getElementsByClassName("slide");
var dots=document.getElementsByClassName("dot");
if(n>slides.length){slideIndex=1}
if(n<1){slideIndex=slides.length}
for(var i=0;i<slides.length;i++){slides[i].className=slides[i].className.replace(" active","");}
for(var i=0;i<dots.length;i++){dots[i].className=dots[i].className.replace(" active","");}
slides[slideIndex-1].className+=" active";
dots[slideIndex-1].className+=" active";
}
</script>
</body>
</html>
xaigrok-4-1-fast-reasoning
9.3/1036.2 s
xaigrok-4-1-fast-reasoning
Tokens1 882
Source code6.1 KB
Time36.2 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
7
Completeness
8
Fidelity
10
Overall
9.25
Review
The model strictly adheres to all prompt constraints: 4 slides, inline SVG, no external images, and a 400x400 format. The visual output is elegant, featuring beautiful serif typography and consistent SVG illustrations. However, the source code is truncated at the end (the script is cut off), which prevents perfect execution if used as is; nevertheless, for the purpose of evaluating the requested rendering, the objective has been met.
The model followed all instructions perfectly, including the specific constraints like the 400x400 fit, keyboard navigation, and progress bar. The visual aesthetic is warm and professional, and the code is clean, although it contains a minor HTML syntax error (unclosed <div> tags in the body) which doesn't affect the final rendering.
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Georgia', serif;
background: linear-gradient(135deg, #f5deb3 0%, #ffe4b5 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.container {
width: 100%;
max-width: 400px;
background: #fff8dc;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
overflow: hidden;
}
.slide-container {
width: 100%;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 30px;
position: relative;
}
.slide-content {
opacity: 1;
transition: opacity 0.3s ease;
}
.slide-icon {
font-size: 80px;
margin-bottom: 20px;
display: block;
}
.slide-title {
font-size: 28px;
color: #8b4513;
margin-bottom: 15px;
font-weight: bold;
}
.slide-text {
font-size: 16px;
color: #654321;
line-height: 1.6;
margin-bottom: 20px;
}
.step-indicator {
font-size: 14px;
color: #a0826d;
margin-bottom: 15px;
font-weight: 600;
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 30px;
background: #ffefd5;
}
.btn {
background: #d2a679;
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: background 0.3s ease;
}
.btn:hover {
background: #c79575;
}
.btn:disabled {
background: #ccc;
cursor: not-allowed;
}
.progress-bar {
width: 100%;
height: 8px;
background: #e8d4c0;
position: relative;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: #d2a679;
transition: width 0.3s ease;
}
</style>
</head>
<body>
<div class="container">
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="slide-container">
<div class="slide-content" id="slideContent">
<div class="step-indicator" id="stepIndicator">Step 1/5</div>
<span class="slide-icon" id="slideIcon">🫖</span>
<h1 class="slide-title" id="slideTitle">Boil Fresh Water</h1>
<p class="slide-text" id="slideText">Start with fresh, cold water. Fill your kettle and bring it to a rolling boil. Using filtered water will give you the best taste and avoid mineral buildup in your kettle.</p>
</div>
</div>
<div class="controls">
<button class="btn" id="prevBtn" onclick="previousSlide()">← Previous</button>
<button class="btn" id="nextBtn" onclick="nextSlide()">Next →</button>
</div>
</div>
<script>
var currentSlide = 0;
var slides = [
{
icon: '🫖',
title: 'Boil Fresh Water',
text: 'Start with fresh, cold water. Fill your kettle and bring it to a rolling boil. Using filtered water will give you the best taste and avoid mineral buildup.'
},
{
icon: '☕',
title: 'Prepare Your Cup',
text: 'Warm your teacup by rinsing it with hot water. This helps maintain the perfect brewing temperature. Use a teapot for multiple cups, or a single infuser for one cup.'
},
{
icon: '🍃',
title: 'Add Tea Leaves',
text: 'Use one teaspoon of loose leaves per cup, plus one extra for the pot. If using tea bags, one bag per cup is ideal. Choose quality tea for the best flavor and aroma.'
},
{
icon: '⏱️',
title: 'Steep for Right Time',
text: 'Pour hot water over leaves and steep for 3-5 minutes, depending on tea type. Black tea needs longer steeping, while green and white teas require less time.'
},
{
icon: '✨',
title: 'Sip and Enjoy',
text: 'Pour into your warmed cup and savor slowly. Add honey, milk, or lemon if desired. The perfect tea is a moment of calm and comfort in your day.'
}
];
function updateSlide() {
var slide = slides[currentSlide];
document.getElementById('slideIcon').textContent = slide.icon;
document.getElementById('slideTitle').textContent = slide.title;
document.getElementById('slideText').textContent = slide.text;
document.getElementById('stepIndicator').textContent = 'Step ' + (currentSlide + 1) + '/5';
var progressPercent = ((currentSlide + 1) / 5) * 100;
document.getElementById('progressFill').style.width = progressPercent + '%';
document.getElementById('prevBtn').disabled = currentSlide === 0;
document.getElementById('nextBtn').disabled = currentSlide === slides.length - 1;
}
function nextSlide() {
if (currentSlide < slides.length - 1) {
currentSlide++;
updateSlide();
}
}
function previousSlide() {
if (currentSlide > 0) {
currentSlide--;
updateSlide();
}
}
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowRight') nextSlide();
if (event.key === 'ArrowLeft') previousSlide();
});
updateSlide();
</script>
</body>
</html>
anthropicclaude-opus-4-6
8.4/1030.3 s
anthropicclaude-opus-4-6
Tokens2 668
Source code6.2 KB
Time30.3 s
Matania Judgment
Rendering
9
Navigation
8
Code quality
7
Completeness
7
Fidelity
9
Overall
8.38
Review
The visual rendering is excellent and perfectly adheres to the requested 'warm' aesthetic with a beautiful typographic hierarchy. However, the source code is truncated at the end (the `updateControls` function is not closed and the script is incomplete), which prevents navigation from actually working in a real-world environment. While fidelity to the prompt is very high regarding design and structure, technical completeness is penalized by this abrupt code cutoff.
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Georgia, serif; background: #f5e6d3; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.container { width: 400px; height: 400px; background: linear-gradient(135deg, #fdf6ee 0%, #f5e1c8 100%); border-radius: 16px; box-shadow: 0 8px 32px rgba(139, 90, 43, 0.25); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.header { text-align: center; padding: 12px 16px 6px; background: rgba(139, 90, 43, 0.08); }
.header h1 { font-size: 16px; color: #6b3a1f; letter-spacing: 0.5px; }
.slide-area { flex: 1; position: relative; overflow: hidden; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 28px; opacity: 0; transform: translateX(60px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
.slide.active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.slide.exit-left { opacity: 0; transform: translateX(-60px); }
.step-label { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: #a0764a; margin-bottom: 6px; font-weight: bold; }
.slide-icon { font-size: 56px; margin-bottom: 10px; line-height: 1.2; }
.slide-title { font-size: 20px; color: #5a2d0c; margin-bottom: 10px; text-align: center; font-weight: bold; }
.slide-text { font-size: 13px; color: #7a5535; line-height: 1.6; text-align: center; max-width: 300px; }
.nav-area { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
.nav-btn { background: #8b5a2b; color: #fff; border: none; border-radius: 20px; padding: 7px 18px; font-size: 13px; font-family: Georgia, serif; cursor: pointer; transition: background 0.2s, transform 0.1s; }
.nav-btn:hover { background: #a0693a; }
.nav-btn:active { transform: scale(0.96); }
.nav-btn:disabled { background: #c9ad8e; cursor: default; transform: none; }
.step-indicator { font-size: 13px; color: #8b5a2b; font-weight: bold; }
.progress-bar-bg { width: 100%; height: 6px; background: rgba(139, 90, 43, 0.15); }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, #c97b3a, #8b5a2b); transition: width 0.4s ease; border-radius: 0 3px 3px 0; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>☕ How to Make the Perfect Tea</h1>
</div>
<div class="slide-area">
<div class="slide active" id="slide-0">
<div class="step-label">Step 1</div>
<div class="slide-icon">💧</div>
<div class="slide-title">Boil Fresh Water</div>
<div class="slide-text">Start with cold, fresh filtered water. Bring it to a rolling boil in a kettle. Fresh water contains more oxygen, which helps extract the best flavor from your tea leaves.</div>
</div>
<div class="slide" id="slide-1">
<div class="step-label">Step 2</div>
<div class="slide-icon">🫖</div>
<div class="slide-title">Warm Your Teapot</div>
<div class="slide-text">Pour a little hot water into your teapot or cup and swirl it around. This pre-warming prevents a temperature drop when you brew, ensuring optimal extraction.</div>
</div>
<div class="slide" id="slide-2">
<div class="step-label">Step 3</div>
<div class="slide-icon">🍃</div>
<div class="slide-title">Add Tea Leaves</div>
<div class="slide-text">Use one teaspoon of loose leaf tea per cup (about 2-3 grams). Quality loose leaf tea gives a richer, more nuanced flavor than standard tea bags.</div>
</div>
<div class="slide" id="slide-3">
<div class="step-label">Step 4</div>
<div class="slide-icon">⏱️</div>
<div class="slide-title">Steep at the Right Time</div>
<div class="slide-text">Black tea: 3-5 minutes. Green tea: 2-3 minutes at 80°C. Herbal tea: 5-7 minutes. Over-steeping causes bitterness, so set a timer!</div>
</div>
<div class="slide" id="slide-4">
<div class="step-label">Step 5</div>
<div class="slide-icon">😌</div>
<div class="slide-title">Serve & Enjoy</div>
<div class="slide-text">Remove the tea leaves and pour into your favorite cup. Add milk, honey, or lemon if desired. Take a moment to savor the aroma before your first sip. Perfection!</div>
</div>
</div>
<div class="nav-area">
<button class="nav-btn" id="prevBtn" onclick="changeSlide(-1)" disabled>← Prev</button>
<span class="step-indicator" id="stepIndicator">Step 1 / 5</span>
<button class="nav-btn" id="nextBtn" onclick="changeSlide(1)">Next →</button>
</div>
<div class="progress-bar-bg">
<div class="progress-bar-fill" id="progressBar" style="width: 20%;"></div>
</div>
</div>
<script>
var currentSlide = 0;
var totalSlides = 5;
function changeSlide(direction) {
var newSlide = currentSlide + direction;
if (newSlide < 0 || newSlide >= totalSlides) return;
var slides = document.querySelectorAll('.slide');
var oldSlide = slides[currentSlide];
var nextSlideEl = slides[newSlide];
oldSlide.className = 'slide';
if (direction > 0) {
oldSlide.style.transform = 'translateX(-60px)';
oldSlide.style.opacity = '0';
nextSlideEl.style.transform = 'translateX(60px)';
} else {
oldSlide.style.transform = 'translateX(60px)';
oldSlide.style.opacity = '0';
nextSlideEl.style.transform = 'translateX(-60px)';
}
setTimeout(function() {
nextSlideEl.className = 'slide active';
nextSlideEl.style.transform = '';
nextSlideEl.style.opacity = '';
}, 20);
currentSlide = newSlide;
updateControls();
}
function updateControls() {
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');
var indicator = document.getElementById('stepIndicator');
var progressBar = document.getElementById('progressBar');
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === totalSlides - 1;
indicator.textContent = 'Step ' + (currentSlide + 1) + ' / ' + totalSlides;
progressBar.style.width = ((currentSlide + 1) / totalSlides * 100) + '%';
}
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
changeSlide(1);
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
changeSlide(-1);
}
});
updateControls();
</script>
</body>
</html>
anthropicclaude-opus-4-7
9.8/1034.6 s
anthropicclaude-opus-4-7
Tokens2 943
Source code4.6 KB
Time34.6 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.75
Review
The model perfectly adhered to all constraints, including the 400x400 format, inline SVG icons, and hybrid navigation (keyboard/buttons). The design is warm and consistent with the subject matter, and both the progress bar and the step indicator function without error.
The model failed on completeness and faithfulness because the code is truncated (it cuts off abruptly in the middle of slide 3), which prevents it from delivering the 5 requested slides. However, the visual aesthetics are excellent, the adherence to dimensions (400x400) is perfect, and the integrated SVGs are of high quality.
The model perfectly adhered to all prompt constraints, including the 400x400 format and the navigation functionalities. The aesthetics are warm and consistent with the subject matter, the SVGs are cleanly integrated, and the progression logic is impeccable. The code is clean, although the absence of a complete <head> tag (even though <style> is present) is a minor technical imperfection that has no impact on the final rendering.
The model perfectly adhered to all constraints, including the 400x400 dimensions and hybrid navigation (keyboard/buttons). The code is clean and efficient, and the requested warm aesthetic is well-rendered visually. The progress bar and step indicator function smoothly and accurately.
<style>
body { margin: 0; background: #fdf6e3; font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; }
#app { width: 400px; height: 400px; background: #fffaf0; position: relative; border: 1px solid #d3af86; overflow: hidden; }
.slide { position: absolute; width: 100%; height: 100%; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; text-align: center; }
.slide.active { display: flex; }
h2 { color: #856404; margin-top: 0; }
.icon { font-size: 60px; margin: 10px 0; }
p { color: #5e4726; line-height: 1.4; }
.nav { position: absolute; bottom: 40px; width: 100%; display: flex; justify-content: space-around; }
#progress { position: absolute; bottom: 0; height: 10px; background: #d3af86; transition: width 0.3s; }
button { background: #d3af86; border: none; padding: 5px 15px; cursor: pointer; color: #fff; border-radius: 4px; }
</style>
</head>
<body>
<div id="app">
<div id="slides">
<div class="slide active"><h2>Step 1: Fresh Water</h2><div class="icon">💧</div><p>Start with cold, filtered water. Fresh water has more oxygen, which is essential for flavor.</p></div>
<div class="slide"><h2>Step 2: Heat It Up</h2><div class="icon">🔥</div><p>Heat water until it is just below boiling. Never re-boil water, as it goes flat.</p></div>
<div class="slide"><h2>Step 3: Warm The Pot</h2><div class="icon">🏺</div><p>Rinse your teapot with hot water. This prevents the pot from cooling the tea too quickly.</p></div>
<div class="slide"><h2>Step 4: Steep</h2><div class="icon">🍵</div><p>Add tea leaves and pour water. Let it steep for 3-5 minutes depending on the variety.</p></div>
<div class="slide"><h2>Step 5: Enjoy</h2><div class="icon">✨</div><p>Remove leaves immediately. Pour into a cup and enjoy your perfect brew.</p></div>
</div>
<div id="progress" style="width: 20%;"></div>
<div class="nav"><button onclick="change(-1)">Prev</button><span id="indicator">Step 1/5</span><button onclick="change(1)">Next</button></div>
</div>
<script>
var current = 0;
function change(dir) {
current = Math.max(0, Math.min(4, current + dir));
var slides = document.getElementsByClassName('slide');
for(var i=0; i<slides.length; i++) slides[i].classList.remove('active');
slides[current].classList.add('active');
document.getElementById('indicator').innerText = 'Step ' + (current + 1) + '/5';
document.getElementById('progress').style.width = ((current + 1) * 20) + '%';
}
document.addEventListener('keydown', function(e) {
if(e.keyCode === 37) change(-1);
if(e.keyCode === 39) change(1);
});
</script>
</body>
</html>
mistralmistral-large-latest
9.8/1017.8 s
mistralmistral-large-latest
Tokens1 410
Source code4.2 KB
Time17.8 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.75
Review
The model perfectly adhered to all constraints, including the strict 400x400 dimensions and hybrid navigation (keyboard/buttons). The aesthetics are warm and consistent with the subject matter, and the code is clean, semantic, and functional.
The model failed on almost all structural constraints. It generated only 4 slides instead of 5, the code is truncated (missing closing tags, no JavaScript for navigation, no progress bar logic), and the 'ONLY raw HTML' output constraint was partially ignored due to an incomplete code structure. While the visual rendering is correct, the functionality is non-existent because the code is unfinished.
The model perfectly adhered to all prompt constraints, including the 400x400 size, the progress bar, the text indicator, and keyboard navigation. The rendering is aesthetic, warm, and meets expectations. The code is clean and functional, although an opening <html> tag is missing and the body closing tag is malformed, which is negligible for a self-contained component.
<style>body{margin:0;font-family:Arial,sans-serif;background:#f8f4e9;color:#3a2c1a;overflow:hidden}.slide{position:absolute;top:0;left:0;width:400px;height:400px;display:none;text-align:center;padding:40px 20px;box-sizing:border-box}.slide.active{display:block}.title{font-size:28px;font-weight:bold;margin-bottom:10px}.icon{font-size:40px;margin-bottom:15px}.text{font-size:16px;line-height:1.4;margin-bottom:20px}.nav{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px}.nav button{padding:8px 16px;font-size:14px;background:#d4a76a;color:#fff;border:none;border-radius:4px;cursor:pointer}.nav button:hover{background:#b8955f}.step-indicator{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);font-size:14px;color:#5d4037}.progress-container{position:absolute;bottom:0;left:0;width:100%;height:6px;background:#e0d8c8}.progress-bar{height:100%;width:0%;background:#d4a76a;transition:width 0.3s ease}.hidden{display:none}</style></head><body>
<div class="slide active" id="slide1">
<div class="title">Step 1: Boil Fresh Water</div>
<div class="icon">🔥</div>
<div class="text">Use filtered water for best flavor.<br>Heat until rolling boil (100°C).</div>
</div>
<div class="slide hidden" id="slide2">
<div class="title">Step 2: Warm the Teapot</div>
<div class="icon">🫖</div>
<div class="text">Pour hot water into teapot and swirl.<br>Discard water before adding leaves.</div>
</div>
<div class="slide hidden" id="slide3">
<div class="title">Step 3: Add Tea Leaves</div>
<div class="icon">🍃</div>
<div class="text">Use 1 tsp loose leaves per cup.<br>Adjust to taste (1-2 tsp).</div>
</div>
<div class="slide hidden" id="slide4">
<div class="title">Step 4: Steep Properly</div>
<div class="icon">⏳</div>
<div class="text">Steep 3-5 minutes based on type.<br>Black tea: 3-5 min, Green: 2-3 min.</div>
</div>
<div class="slide hidden" id="slide5">
<div class="title">Step 5: Serve & Enjoy</div>
<div class="icon">☕</div>
<div class="text">Pour through strainer into cup.<br>Add milk/sweetener if desired.</div>
</div>
<div class="step-indicator" id="step-indicator">Step 1/5</div>
<div class="progress-container"><div class="progress-bar" id="progress-bar"></div></div>
<div class="nav">
<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>
</div>
<script>var currentSlide=0;var slides=document.querySelectorAll('.slide');var totalSlides=slides.length;var stepIndicator=document.getElementById('step-indicator');var progressBar=document.getElementById('progress-bar');var prevBtn=document.getElementById('prev-btn');var nextBtn=document.getElementById('next-btn');function showSlide(index){for(var i=0;i<slides.length;i++){slides[i].classList.add('hidden');slides[i].classList.remove('active');}slides[index].classList.remove('hidden');slides[index].classList.add('active');stepIndicator.textContent='Step '+(index+1)+'/'+totalSlides;progressBar.style.width=((index+1)/totalSlides*100)+'%';currentSlide=index;}function nextSlide(){if(currentSlide<totalSlides-1){showSlide(currentSlide+1);}}function prevSlide(){if(currentSlide>0){showSlide(currentSlide-1);}}nextBtn.addEventListener('click',nextSlide);prevBtn.addEventListener('click',prevSlide);document.addEventListener('keydown',function(e){if(e.key==='ArrowRight'||e.key===' '){nextSlide();}else if(e.key==='ArrowLeft'){prevSlide();}});showSlide(0);</script>
</body
openaigpt-4o-mini
8.6/1010.6 s
openaigpt-4o-mini
Tokens1 165
Source code3.0 KB
Time10.6 s
Matania Judgment
Rendering
6
Navigation
9
Code quality
8
Completeness
10
Fidelity
9
Overall
8.63
Review
The model adheres to almost all constraints, including keyboard navigation, the progress bar, and the content format. The visual rendering is very basic and does not strictly follow the sizing constraint (400x400) as it uses a full-screen display (100vh), but the functional structure is excellent.
<style>
body { font-family: Arial, sans-serif; background-color: #f5e6cd; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }
.slide { display: none; text-align: center; }
.active { display: block; }
.nav { margin-top: 20px; }
button { background-color: #ffcc00; border: none; padding: 10px 20px; cursor: pointer; }
#progress { width: 100%; height: 10px; background-color: #fff; position: absolute; bottom: 0; }
.progress-bar { height: 100%; background-color: #ffcc00; width: 0%; }
</style>
</head>
<body>
<div class="slide active">
<h2>Step 1: Gather Ingredients 🍵</h2>
<p>Start with high-quality tea leaves, fresh water, and a good teapot.</p>
<p>Measure out the right amount of tea for your desired strength.</p>
</div>
<div class="slide">
<h2>Step 2: Heat Water 💧</h2>
<p>Boil fresh, filtered water to the right temperature for your tea type.</p>
<p>Green tea prefers under boiling water, while black tea likes it hotter.</p>
</div>
<div class="slide">
<h2>Step 3: Steep the Tea ⏳</h2>
<p>Pour water over tea leaves and let it steep for the recommended time.</p>
<p>Avoid over-steeping to prevent bitterness.</p>
</div>
<div class="slide">
<h2>Step 4: Pour & Enjoy ☕</h2>
<p>Pour the tea into your cup, straining out the leaves.</p>
<p>Optionally, add milk, lemon, or sweeteners to taste.</p>
</div>
<div class="slide">
<h2>Step 5: Savor the Moment 😊</h2>
<p>Take time to enjoy your perfectly brewed cup of tea.</p>
<p>Share your experience with friends or relax with a good book!</p>
</div>
<div class="nav">
<button onclick="changeSlide(-1)">Previous</button>
<span id="step-indicator">Step 1/5</span>
<button onclick="changeSlide(1)">Next</button>
</div>
<div id="progress">
<div class="progress-bar" id="progress-bar"></div>
</div>
<script>
var currentSlide = 0;
var slides = document.getElementsByClassName('slide');
function showSlide(index) {
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
slides[index].classList.add('active');
document.getElementById('step-indicator').innerText = 'Step ' + (index + 1) + '/5';
document.getElementById('progress-bar').style.width = ((index + 1) / slides.length * 100) + '%';
}
function changeSlide(step) {
currentSlide += step;
if (currentSlide < 0) currentSlide = 0;
if (currentSlide >= slides.length) currentSlide = slides.length - 1;
showSlide(currentSlide);
}
document.onkeydown = function(e) {
if (e.keyCode === 37) changeSlide(-1);
if (e.keyCode === 39) changeSlide(1);
};
showSlide(currentSlide);
</script>
</body>
</html>
openaigpt-5.4
9.6/1034.3 s
openaigpt-5.4
Tokens2 423
Source code8.0 KB
Time34.3 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
8
Completeness
10
Fidelity
10
Overall
9.63
Review
Le modèle a parfaitement respecté toutes les contraintes, y compris la taille stricte de 400x400, la structure en 5 étapes et l'esthétique chaleureuse. Le design visuel est cohérent, les icônes SVG sont bien intégrées et toutes les exigences de navigation (clavier, boutons, barre de progression, indicateur) sont correctement implémentées. Le code est propre et autonome.
<style>
html, body {
margin: 0;
padding: 0;
width: 400px;
height: 400px;
overflow: hidden;
background: #f4e6cf;
font-family: Arial, Helvetica, sans-serif;
}
#deck {
position: relative;
width: 400px;
height: 400px;
background: #fff8ee;
color: #4a3426;
box-sizing: border-box;
border: 4px solid #d8b98a;
}
.slide {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 400px;
display: none;
padding: 18px 20px 62px 20px;
box-sizing: border-box;
background: #fff8ee;
}
.slide.active {
display: block;
}
.step-label {
font-size: 16px;
font-weight: bold;
color: #9a6a3a;
letter-spacing: 0.5px;
}
.title {
font-size: 28px;
font-weight: bold;
line-height: 1.1;
margin: 6px 0 8px 0;
color: #5a3924;
}
.icon-wrap {
width: 92px;
height: 92px;
margin: 8px 0 12px 0;
}
.text {
font-size: 18px;
line-height: 1.35;
color: #5a4639;
}
.text div {
margin: 8px 0;
}
.controls {
position: absolute;
left: 12px;
right: 12px;
bottom: 18px;
height: 34px;
}
button {
height: 34px;
min-width: 72px;
border: 0;
border-radius: 17px;
background: #a86d3d;
color: #fff8ee;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
button:disabled {
background: #d1b08b;
cursor: default;
}
#prevBtn {
position: absolute;
left: 0;
}
#nextBtn {
position: absolute;
right: 0;
}
#indicator {
position: absolute;
left: 120px;
right: 120px;
top: 7px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #7a573c;
}
#progressTrack {
position: absolute;
left: 0;
bottom: 0;
width: 400px;
height: 10px;
background: #ead7bc;
}
#progressFill {
width: 20%;
height: 10px;
background: #c58742;
}
.accent {
color: #b86f2c;
}
</style>
</head>
<body>
<div id="deck">
<div class="slide active">
<div class="step-label">Step 1</div>
<div class="title">Start with Fresh Water</div>
<div class="icon-wrap">
<svg viewBox="0 0 92 92" width="92" height="92" aria-hidden="true">
<rect x="0" y="0" width="92" height="92" rx="18" ry="18" fill="#fde7c2"></rect>
<path d="M46 15 C35 31 28 39 28 49 C28 60 36 68 46 68 C56 68 64 60 64 49 C64 39 57 31 46 15 Z" fill="#6db7d8"></path>
<ellipse cx="46" cy="71" rx="20" ry="6" fill="#e2c79f"></ellipse>
</svg>
</div>
<div class="text">
<div>Use cold, fresh water for the cleanest flavor.</div>
<div>Filtered water helps your tea taste brighter and smoother.</div>
<div>Avoid reboiled water if you want the best cup.</div>
</div>
</div>
<div class="slide">
<div class="step-label">Step 2</div>
<div class="title">Heat to the Right Temperature</div>
<div class="icon-wrap">
<svg viewBox="0 0 92 92" width="92" height="92" aria-hidden="true">
<rect x="0" y="0" width="92" height="92" rx="18" ry="18" fill="#fde7c2"></rect>
<rect x="38" y="16" width="16" height="44" rx="8" ry="8" fill="#ffffff" stroke="#8a5b34" stroke-width="4"></rect>
<circle cx="46" cy="67" r="13" fill="#ffffff" stroke="#8a5b34" stroke-width="4"></circle>
<rect x="42" y="28" width="8" height="28" rx="4" ry="4" fill="#e25a44"></rect>
<circle cx="46" cy="67" r="8" fill="#e25a44"></circle>
</svg>
</div>
<div class="text">
<div>Black tea likes near-boiling water; green tea prefers cooler water.</div>
<div>Too hot can make delicate leaves taste bitter.</div>
<div><span class="accent">Match the water to the tea.</span></div>
</div>
</div>
<div class="slide">
<div class="step-label">Step 3</div>
<div class="title">Measure Your Tea</div>
<div class="icon-wrap">
<svg viewBox="0 0 92 92" width="92" height="92" aria-hidden="true">
<rect x="0" y="0" width="92" height="92" rx="18" ry="18" fill="#fde7c2"></rect>
<ellipse cx="50" cy="58" rx="22" ry="12" fill="#c58742"></ellipse>
<rect x="20" y="28" width="34" height="10" rx="5" ry="5" fill="#8a5b34" transform="rotate(-18 20 28)"></rect>
<circle cx="59" cy="56" r="4" fill="#5c8a45"></circle>
<circle cx="52" cy="52" r="4" fill="#5c8a45"></circle>
<circle cx="46" cy="58" r="4" fill="#5c8a45"></circle>
<circle cx="57" cy="62" r="4" fill="#5c8a45"></circle>
</svg>
</div>
<div class="text">
<div>Use about 1 teaspoon of loose tea per cup.</div>
<div>For tea bags, one bag per mug usually works well.</div>
<div>Adjust a little stronger or lighter to your taste.</div>
</div>
</div>
<div class="slide">
<div class="step-label">Step 4</div>
<div class="title">Steep with Patience</div>
<div class="icon-wrap">
<svg viewBox="0 0 92 92" width="92" height="92" aria-hidden="true">
<rect x="0" y="0" width="92" height="92" rx="18" ry="18" fill="#fde7c2"></rect>
<circle cx="46" cy="46" r="24" fill="#fffaf2" stroke="#8a5b34" stroke-width="4"></circle>
<line x1="46" y1="46" x2="46" y2="30" stroke="#8a5b34" stroke-width="4" stroke-linecap="round"></line>
<line x1="46" y1="46" x2="58" y2="46" stroke="#8a5b34" stroke-width="4" stroke-linecap="round"></line>
<circle cx="46" cy="46" r="2" fill="#8a5b34"></circle>
</svg>
</div>
<div class="text">
<div>Steep most black teas for 3 to 5 minutes.</div>
<div>Green teas often need only 2 to 3 minutes.</div>
<div>Over-steeping can turn a lovely cup harsh.</div>
</div>
</div>
<div class="slide">
<div class="step-label">Step 5</div>
<div class="title">Pour and Enjoy</div>
<div class="icon-wrap">
<svg viewBox="0 0 92 92" width="92" height="92" aria-hidden="true">
<rect x="0" y="0" width="92" height="92" rx="18" ry="18" fill="#fde7c2"></rect>
<rect x="22" y="37" width="38" height="24" rx="6" ry="6" fill="#ffffff" stroke="#8a5b34" stroke-width="4"></rect>
<path d="M60 42 C70 42 72 48 72 50 C72 56 67 58 60 58" fill="none" stroke="#8a5b34" stroke-width="4"></path>
<rect x="25" y="40" width="32" height="18" rx="4" ry="4" fill="#c58742"></rect>
<path d="M32 25 C30 20 34 18 34 14" fill="none" stroke="#d6b18d" stroke-width="3" stroke-linecap="round"></path>
<path d="M44 25 C42 20 46 18 46 14" fill="none" stroke="#d6b18d" stroke-width="3" stroke-linecap="round"></path>
<path d="M56 25 C54 20 58 18 58 14" fill="none" stroke="#d6b18d" stroke-width="3" stroke-linecap="round"></path>
</svg>
</div>
<div class="text">
<div>Remove the leaves or tea bag before serving.</div>
<div>Add milk, lemon, honey, or nothing at all.</div>
<div>Take a sip and enjoy your perfect tea.</div>
</div>
</div>
<div class="controls">
<button id="prevBtn" type="button">◀ Prev</button>
<div id="indicator">Step 1/5</div>
<button id="nextBtn" type="button">Next ▶</button>
</div>
<div id="progressTrack"><div id="progressFill"></div></div>
</div>
<script>
(function () {
var slides = document.getElementsByClassName('slide');
var index = 0;
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');
var indicator = document.getElementById('indicator');
var progressFill = document.getElementById('progressFill');
function update() {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].className = 'slide' + (i === index ? ' active' : '');
}
indicator.innerHTML = 'Step ' + (index + 1) + '/5';
progressFill.style.width = ((index + 1) * 20) + '%';
prevBtn.disabled = index === 0;
nextBtn.disabled = index === slides.length - 1;
}
function nextSlide() {
if (index < slides.length - 1) {
index += 1;
update();
}
}
function prevSlide() {
if (index > 0) {
index -= 1;
update();
}
}
prevBtn.onclick = prevSlide;
nextBtn.onclick = nextSlide;
document.onkeydown = function (e) {
e = e || window.event;
var key = e.keyCode;
if (key === 37) {
prevSlide();
} else if (key === 39) {
nextSlide();
}
};
update();
}());
</script>
</body>
</html>
openaigpt-5.4-mini
7.5/1017.4 s
openaigpt-5.4-mini
Tokens2 084
Source code6.6 KB
Time17.4 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
4
Completeness
5
Fidelity
8
Overall
7.5
Review
The visual rendering is excellent, perfectly adhering to the 'warm' aesthetic and dimensional constraints. However, the source code is truncated at the end (the script is incomplete), which prevents the navigation functionality from actually working in a real-world environment, even though the HTML structure is complete. The fidelity score is impacted by this major technical cutoff, which renders the 'presentation' object non-functional.
The model perfectly adhered to all constraints, including the strict 400x400 dimensions and the use of inline SVG. The aesthetics are warm and professional, featuring smooth navigation (buttons, indicator, and progress bar) and a very clean code structure.
<style>
html,body{height:100%;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#fbf6ef;}
.wrap{width:400px;max-width:100vw;height:400px;max-height:100vh;margin:0 auto;display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box;}
.app{
width:400px;height:400px;max-width:100vw;max-height:100vh;
background:#fff;
border-radius:18px;
box-shadow:0 16px 40px rgba(120,70,10,0.14);
position:relative;
overflow:hidden;
}
.stage{
position:absolute;left:0;top:0;right:0;bottom:0;
display:flex;flex-direction:column;
}
.slide{
flex:1;display:flex;flex-direction:column;
padding:18px 18px 14px 18px;
box-sizing:border-box;
}
.topbar{
display:flex;align-items:center;justify-content:space-between;
gap:12px;margin-bottom:10px;
}
.brand{
display:flex;align-items:center;gap:10px;
font-weight:800;color:#6a3b1a;letter-spacing:0.2px;
}
.chip{
width:36px;height:36px;border-radius:12px;
background:#fff2e3;border:1px solid rgba(180,110,50,0.25);
display:flex;align-items:center;justify-content:center;
color:#8a4a1f;font-size:18px;
}
.indicator{
font-weight:800;color:#8a4a1f;
background:#fff2e3;border:1px solid rgba(180,110,50,0.25);
padding:8px 10px;border-radius:12px;
white-space:nowrap;
}
.titleRow{
display:flex;align-items:center;gap:12px;
margin:6px 0 10px 0;
}
.title{
font-size:26px;line-height:1.1;margin:0;color:#4a2a14;font-weight:900;
}
.icon{
width:46px;height:46px;border-radius:16px;
background:#fff2e3;border:1px solid rgba(180,110,50,0.25);
display:flex;align-items:center;justify-content:center;
font-size:22px;
flex:0 0 auto;
}
.copy{
margin-top:4px;
background:rgba(255,242,227,0.65);
border:1px solid rgba(180,110,50,0.22);
border-radius:14px;
padding:14px 14px;
color:#5a3317;
font-weight:650;
line-height:1.45;
font-size:15px;
}
.copy .line{margin:0;}
.copy .muted{font-weight:600;opacity:0.95;}
.bottom{
padding:0 16px 14px 16px;
box-sizing:border-box;
}
.controls{
display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-top:12px;
}
.btn{
flex:1;
appearance:none;border:0;
background:#fff2e3;
border:1px solid rgba(180,110,50,0.28);
color:#7a4218;
border-radius:14px;
padding:10px 12px;
font-weight:900;
cursor:pointer;
font-size:14px;
box-shadow:0 8px 18px rgba(120,70,10,0.08);
transition:transform 0.08s ease, background 0.2s ease, opacity 0.2s ease;
user-select:none;
}
.btn:active{transform:translateY(1px);}
.btn[disabled]{opacity:0.45;cursor:not-allowed;box-shadow:none;}
.btn.secondary{
background:#ffffff;
border-color:rgba(180,110,50,0.2);
color:#5a3317;
}
.progressWrap{
height:12px;
background:rgba(210,150,90,0.22);
border-radius:999px;
border:1px solid rgba(180,110,50,0.25);
overflow:hidden;
position:relative;
}
.progressFill{
height:100%;
width:0%;
background:#e0a26a;
border-radius:999px;
transition:width 320ms ease;
}
.progressGlow{
position:absolute;inset:0;
background:radial-gradient(circle at 20% 50%, rgba(255,255,255,0.75), rgba(255,255,255,0) 55%);
pointer-events:none;
opacity:0.8;
}
.bgArt{
position:absolute;inset:-20px;
pointer-events:none;
opacity:0.95;
}
.slideGlow{
position:absolute;left:-60px;top:-40px;width:220px;height:220px;border-radius:50%;
background:rgba(224,162,106,0.22);
filter:blur(0px);
pointer-events:none;
}
.slideGlow2{
position:absolute;right:-70px;bottom:-90px;width:260px;height:260px;border-radius:50%;
background:rgba(255,210,150,0.22);
pointer-events:none;
}
.navHint{
font-size:12px;color:#7a4218;opacity:0.9;font-weight:800;
text-align:center;margin-top:10px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="app" role="application" aria-label="Tea tutorial presentation">
<svg class="bgArt" viewBox="0 0 400 400" preserveAspectRatio="none" aria-hidden="true">
<defs>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blur"/>
<feOffset dx="0" dy="10" result="off"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.35 0 0 0 0 0.18 0 0 0 0 0.08 0 0 0 0.22 0" result="color"/>
<feMerge>
<feMergeNode in="color"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect x="0" y="0" width="400" height="400" fill="#fbf6ef"></rect>
<path d="M-20 90 C 40 20, 140 10, 210 60 C 280 110, 370 90, 430 30 L 430 0 L -20 0 Z" fill="#fff2e3" opacity="0.9"></path>
<path d="M-20 250 C 60 190, 140 200, 205 245 C 270 290, 350 310, 430 270 L 430 400 L -20 400 Z" fill="#fff2e3" opacity="0.72"></path>
<g opacity="0.28">
<circle cx="70" cy="315" r="70" fill="#e0a26a"></circle>
<circle cx="335" cy="90" r="60" fill="#f3c08b"></circle>
<circle cx="300" cy="290" r="90" fill="#e9b57f"></circle>
</g>
<g filter="url(#softShadow)" opacity="0.9">
<path d="M70 170 C 70 130, 105 105, 145 115 C 180 123, 195 160, 178 192 C 160 226, 110 232, 88 205 C 78 192, 70 180, 70 170 Z" fill="#ffffff" opacity="0.85"></path>
<path d="M250 85 C 250 55, 280 38, 310 48 C 340 58, 350 92, 332 118 C 312 147, 268 150, 255 125 C 251 116, 250 100, 250 85 Z" fill="#ffffff" opacity="0.75"></path>
</g>
<g opacity="0.55">
<path d="M165 235 C 150 210, 160 180, 190 170 C 220 160, 255 180, 258 212 C 261 245, 230 268, 200 262 C 185 259, 172 250, 165 235 Z" fill="#ffe8cf"></path>
<path d="M110 105 C 95 90, 96 65, 117 55 C 138 45, 165 55, 170 80 C 175 103, 156 120, 134 118 C 122 117, 116 112, 110 105 Z" fill="#ffe8cf"></path>
</g>
</svg>
<div class="stage">
<div class="slideGlow" aria-hidden="true"></div>
<div class="slideGlow2" aria-hidden="true"></div>
<div class="slide" id="slide">
<div class="topbar">
<div class="brand">
<div class="chip" aria-hidden="true">🍵</div>
<div>Perfect Tea</div>
</div>
<div class="indicator" id="stepIndicator" aria-live="polite">Step 1/5</div>
</div>
<div class="titleRow">
<div class="icon" id="slideIcon" aria-hidden="true">✨</div>
<h1 class="title" id="slideTitle">Step 1: Choose your tea</h1>
</div>
<div class="copy" id="slideCopy" role="region" aria-label="Step explanation">
<p class="line">Pick a tea you love—black, green, or herbal.</p>
<p class="line muted">Use fresh leaves and keep them dry until brewing.</p>
<p class="line muted">A little quality goes a long way.</p>
</div>
<div class="navHint">Use ◀ ▶ keys or the buttons</div>
</div>
<div class="bottom">
<div class="progressWrap" role="progressbar" aria-valuemin="0" aria-valuemax="5" aria-valuenow="1" aria-label="Progress">
<div class="progressFill" id="progressFill"></div>
<div class="progressGlow" aria-hidden="true"></div>
</div>
<div class="controls">
<button class="btn secondary" id="prevBtn" type="button" aria-label="Previous step">◀ Previous</button>
<button class="btn" id="nextBtn" type="button" aria-label="Next step">Next ▶</button>
</div>
</div>
</div>
</div>
</div>
<script>
(function(){
var slides = [
{ step: 1, total: 5, title: "Step 1: Choose your tea", icon: "✨",
lines: [
"Pick a tea you love—black, green, or herbal.",
"Use fresh leaves and keep them dry until brewing.",
"A little quality goes a long way."
]
},
{ step: 2, total: 5, title: "Step 2: Heat the water", icon: "♨️",
lines: [
"Bring water to the right temperature.",
"Boiling works for black tea; cooler for green.",
"Wait 30 seconds after boiling if needed."
]
},
{ step: 3, total: 5, title: "Step 3: Measure & steep", icon: "🫖",
lines: [
"Use about 1 teaspoon per cup (adjust to taste).",
"Pour water over tea and start the timer.",
"Steep gently—don’t overdo it."
]
},
{ step: 4, total: 5, title: "Step 4: Taste & fine-tune", icon: "👅",
lines: [
"Take a small sip and evaluate strength.",
"If it’s weak, steep a bit longer next time.",
"If it’s bitter, reduce time or temperature."
]
},
{ step: 5, total: 5, title: "Step 5: Serve & enjoy", icon: "🍯",
lines: [
"Pour and serve right away for best flavor.",
"Add honey, lemon, or milk if you like.",
"Enjoy the aroma—tea is the moment."
]
}
];
var current = 0;
var slideTitle = document.getElementById("slideTitle");
var slideIcon = document.getElementById("slideIcon");
var slideCopy = document.getElementById("slideCopy");
var stepIndicator = document.getElementById("stepIndicator");
var progressFill = document.getElementById("progressFill");
var prevBtn = document.getElementById("prevBtn");
var nextBtn = document.getElementById("nextBtn");
function setSlide(index){
current = index;
var s = slides[index];
slideTitle.textContent = s.title;
slideIcon.textContent = s.icon;
stepIndicator.textContent = "Step " + s.step + "/" + s.total;
var html = "";
for (var i = 0; i < s.lines.length; i++){
html += '<p class="line' + (i === 1 ? ' muted' : '') + '">' + escapeHtml(s.lines[i]) + "</p>";
}
slideCopy.innerHTML = html;
var progress = (s.step / s.total) * 100;
progressFill.style.width = progress.toFixed(0) + "%";
prevBtn.disabled = (current === 0);
nextBtn.disabled = (current === slides.length - 1);
var pb = document.querySelector('[role="progressbar"]');
if (pb){
pb.setAttribute("aria-valuenow", String(s.step));
pb.setAttribute("aria-valuemin", "0");
pb.setAttribute("aria-valuemax", String(s.total));
}
}
function escapeHtml(str){
return String(str)
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
function next(){
if (current < slides.length - 1) setSlide(current + 1);
}
function prev(){
if (current > 0) setSlide(current - 1);
}
nextBtn.addEventListener("click", function(){ next(); });
prevBtn.addEventListener("click", function(){ prev(); });
document.addEventListener("keydown", function(e){
var key = e.key || "";
if (key === "ArrowRight"){
e.preventDefault();
next();
} else if (key === "ArrowLeft"){
e.preventDefault();
prev();
} else if (key === "Home"){
e.preventDefault();
setSlide(0);
} else if (key === "End"){
e.preventDefault();
setSlide(slides.length - 1);
}
});
setSlide(0);
})();
</script>
</body>
</html>
openaigpt-5.4-pro
6.1/10223.0 s
openaigpt-5.4-pro
Tokens1 647
Source code4.9 KB
Time223.0 s
Matania Judgment
Rendering
9
Navigation
8
Code quality
7
Completeness
5
Fidelity
5
Overall
6.13
Review
The visual rendering is excellent, featuring a warm aesthetic and polished typography that respects the requested atmosphere. However, the code is truncated (incomplete), which prevents functional navigation and the presence of all slides, resulting in a very low fidelity score despite the quality of the initial implementation.
The model perfectly adhered to all prompt constraints, including the dimensions (400x400), the number of slides, and the navigation functionalities. The output is aesthetically very successful, featuring a warm color palette and consistent typography. The code is clean, compact, and uses inline SVGs for the background as requested.
<style>
html,body{margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#ead7bd;font-family:Georgia,"Times New Roman",serif;color:#3b2618}
.deck{position:relative;width:400px;height:400px;overflow:hidden;background:#fff4df;box-shadow:0 12px 35px rgba(80,45,20,0.25)}
.bg{position:absolute;left:0;top:0;width:400px;height:400px}
.slide{position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;padding:34px 34px 72px 34px;display:none;text-align:center}
.slide.active{display:block}
.step{font:700 14px Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#9b5b25;margin-bottom:8px}
.icon{font-size:58px;line-height:1;margin:6px 0 12px}
h1{font-size:28px;line-height:1.08;margin:0 0 14px;color:#5a2f18}
p{font:18px/1.35 Arial,sans-serif;margin:7px auto;max-width:310px;color:#4a3426}
.nav{position:absolute;left:20px;right:20px;bottom:24px;height:36px;display:flex;align-items:center;justify-content:space-between;z-index:3}
button{border:0;border-radius:18px;background:#8b4a24;color:#fff;padding:9px 16px;font:700 14px Arial,sans-serif;cursor:pointer}
button:disabled{background:#c7a98b;cursor:default}
.indicator{font:700 14px Arial,sans-serif;color:#6b3b20;background:#ffe9c4;border-radius:15px;padding:7px 13px}
.bar{position:absolute;left:0;bottom:0;width:400px;height:10px;background:#d8b88e;z-index:4}
.fill{height:10px;width:20%;background:#8b4a24;transition:width 0.25s ease}
</style>
</head>
<body>
<div class="deck">
<svg class="bg" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect x="0" y="0" width="400" height="400" fill="#fff4df"/>
<circle cx="32" cy="42" r="58" fill="#f4d5a6"/>
<circle cx="370" cy="45" r="74" fill="#f7dfba"/>
<circle cx="55" cy="355" r="88" fill="#f0c991"/>
<circle cx="342" cy="335" r="78" fill="#f7dfba"/>
<path d="M260 62 C300 48 340 70 350 112 C308 124 274 108 260 62 Z" fill="#c9823d"/>
<path d="M70 95 C103 78 145 88 165 125 C124 145 87 132 70 95 Z" fill="#d99a50"/>
</svg>
<section class="slide active">
<div class="step">Step 1</div>
<div class="icon">💧</div>
<h1>Start with Fresh Water</h1>
<p>Use cold, clean water for the brightest flavor.</p>
<p>Measure one cup per serving, plus a little extra for warming the pot.</p>
</section>
<section class="slide">
<div class="step">Step 2</div>
<div class="icon">🔥</div>
<h1>Heat to the Right Temperature</h1>
<p>Bring water to a lively boil for black tea.</p>
<p>For green or white tea, let it cool briefly so leaves stay sweet.</p>
</section>
<section class="slide">
<div class="step">Step 3</div>
<div class="icon">🍃</div>
<h1>Add Quality Tea Leaves</h1>
<p>Use one teaspoon of loose tea per cup.</p>
<p>Give the leaves room to unfurl in an infuser or warm teapot.</p>
</section>
<section class="slide">
<div class="step">Step 4</div>
<div class="icon">⏳</div>
<h1>Steep with Care</h1>
<p>Pour water over the leaves and cover the cup.</p>
<p>Steep 2-5 minutes, then remove leaves before bitterness appears.</p>
</section>
<section class="slide">
<div class="step">Step 5</div>
<div class="icon">☕</div>
<h1>Sip and Enjoy</h1>
<p>Add milk, honey, or lemon if you like.</p>
<p>Take a calm breath, hold the warm cup, and enjoy your perfect tea.</p>
</section>
<div class="nav">
<button id="prev" type="button">Back</button>
<div id="indicator" class="indicator">Step 1/5</div>
<button id="next" type="button">Next</button>
</div>
<div class="bar"><div id="fill" class="fill"></div></div>
</div>
<script>
(function(){
var index=0;
var slides=document.querySelectorAll(".slide");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var indicator=document.getElementById("indicator");
var fill=document.getElementById("fill");
function show(i){
if(i<0){i=0;}
if(i>slides.length-1){i=slides.length-1;}
slides[index].className="slide";
index=i;
slides[index].className="slide active";
indicator.innerHTML="Step "+(index+1)+"/5";
fill.style.width=((index+1)*20)+"%";
prev.disabled=index===0;
next.disabled=index===slides.length-1;
}
prev.onclick=function(){show(index-1);};
next.onclick=function(){show(index+1);};
document.onkeydown=function(e){
e=e||window.event;
var key=e.keyCode;
if(key===37){show(index-1);}
if(key===39){show(index+1);}
};
show(0);
}());
</script>
</body>
</html>
openaigpt-5.5-pro
5.1/10149.0 s
openaigpt-5.5-pro
Tokens2 468
Source code8.2 KB
Time149.0 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
8
Completeness
2
Fidelity
3
Overall
5.13
Review
The model failed critically on completeness and faithfulness because the code is truncated (cutting off in the middle of the SVG on slide 5), which prevents the application from functioning fully. However, the generated portion is aesthetically excellent, perfectly adhering to the requested 'warm' design constraints, dimensions, and navigation features.
The model perfectly adhered to all constraints, including the 400x400 size and the use of inline SVG. The aesthetics are warm and consistent with the subject matter, and the navigation (keyboard, buttons, progress bar) is complete and functional.
The visual rendering is excellent, respecting both the warm aesthetic and the dimensional constraints. Navigation is comprehensive (buttons, keyboard, indicator, progress bar). However, fidelity is slightly compromised because the model included the 'Step X/5' indicator in both the H1 title of each slide and in a separate indicator, creating an unrequested redundancy; additionally, the presentation's main title is missing from the rendering, replaced by the individual slide titles.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to Make the Perfect Tea</title>
<style>
body{font-family:Georgia,'Times New Roman',serif;background:linear-gradient(135deg,#ff9a56 0%,#ff6b6b 50%,#feca57 100%);margin:0;padding:20px;height:400px;display:flex;align-items:center;justify-content:center;color:#5f4b44;overflow:hidden}
.slide{position:absolute;width:360px;height:360px;background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 40px rgba(0,0,0,0.2);opacity:0;transform:scale(0.8);transition:all 0.6s cubic-bezier(0.25,0.46,0.45,0.94)}
.slide.active{opacity:1;transform:scale(1)}
h1{font-size:32px;margin:0 0 20px;color:#d63031;text-align:center}
.emoji{font-size:64px;text-align:center;display:block;margin-bottom:20px}
p{font-size:18px;line-height:1.5;margin:12px 0;text-align:center}
.progress{position:absolute;bottom:20px;left:20px;right:20px;height:6px;background:#e17055;border-radius:3px;overflow:hidden}
.progress-fill{background:linear-gradient(90deg,#00b894,#00cec9);height:100%;border-radius:3px;transition:width 0.5s ease}
.nav{position:absolute;bottom:20px;width:100%;text-align:center}
.btn{display:inline-block;padding:10px 20px;margin:0 10px;background:#fdcb6e;color:#2d3436;border:none;border-radius:25px;cursor:pointer;font-size:16px;font-family:Georgia;transition:background 0.3s}
.btn:hover{background:#f39c12}
.btn:disabled{opacity:0.4;cursor:not-allowed}
.indicator{position:absolute;top:20px;right:20px;font-size:14px;color:#636e72}
</style>
</head>
<body>
<div class="slide active" data-step="1">
<h1>☕ Step 1/5</h1>
<div class="emoji">🌿</div>
<p>Boil fresh, filtered water to 80-90°C.</p>
<p>Perfect temperature prevents bitterness.</p>
</div>
<div class="slide" data-step="2">
<h1>☕ Step 2/5</h1>
<div class="emoji">🍵</div>
<p>Warm your teapot or cup first.</p>
<p>Pour a little hot water, swirl, discard.</p>
</div>
<div class="slide" data-step="3">
<h1>☕ Step 3/5</h1>
<div class="emoji">⏱️</div>
<p>Add 2g loose leaf tea per 200ml water.</p>
<p>Steep 2-4 minutes (check your tea type).</p>
</div>
<div class="slide" data-step="4">
<h1>☕ Step 4/5</h1>
<div class="emoji">🥛</div>
<p>Remove tea leaves completely.</p>
<p>Add milk or lemon to taste, never sugar first.</p>
</div>
<div class="slide" data-step="5">
<h1>☕ Step 5/5</h1>
<div class="emoji">❤️</div>
<p>Sip slowly and mindfully.</p>
<p>Perfect tea is 50% technique, 50% appreciation!</p>
</div>
<div class="progress"><div class="progress-fill" style="width:20%"></div></div>
<div class="nav">
<button class="btn" id="prev" disabled>← Previous</button>
<button class="btn" id="next">Next →</button>
</div>
<div class="indicator">Step 1/5</div>
<script>
var current=1,total=5;
function showSlide(n){
document.querySelectorAll('.slide').forEach(function(s,i){s.classList.toggle('active',i+1===n)});
document.querySelector('.progress-fill').style.width=n/total*100+'%';
document.querySelector('.indicator').textContent='Step '+n+'/'+total;
document.getElementById('prev').disabled=n===1;
document.getElementById('next').disabled=n===total;
document.querySelectorAll('.slide[data-step="'+n+'"] h1')[0].textContent='☕ Step '+n+'/'+total;
}
document.getElementById('next').onclick=function(){if(current<total){current++;showSlide(current)}};
document.getElementById('prev').onclick=function(){if(current>1){current--;showSlide(current)}};
document.onkeydown=function(e){if(e.keyCode===39&¤t<total){current++;showSlide(current)}else if(e.keyCode===37&¤t>1){current--;showSlide(current)}};
</script>
</body>
</html>
xaigrok-4-1-fast-reasoning
9.8/1097.1 s
xaigrok-4-1-fast-reasoning
Tokens1 250
Source code3.4 KB
Time97.1 s
Matania Judgment
Rendering
9
Navigation
10
Code quality
9
Completeness
10
Fidelity
10
Overall
9.75
Review
The model perfectly adhered to all constraints, including the strict 400x400 format and the implementation of hybrid navigation (keyboard/buttons). The design is warm and consistent with the subject matter, and both the progress bar and step indicator function smoothly. The code is clean and well-structured.
<style>
body {
margin:0;
padding:0;
width:400px;
height:400px;
overflow:hidden;
background:#FFF3E0;
font-family:Georgia,serif;
color:#8D6E63;
}
#presentation {
position:absolute;
top:0;
left:0;
width:2000px;
height:320px;
transition:transform 0.5s ease;
}
.slide {
width:400px;
height:320px;
float:left;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:40px 20px;
box-sizing:border-box;
text-align:center;
}
.slide h1 {
font-size:24px;
margin:0 0 20px 0;
color:#D84315;
font-weight:bold;
}
.icon {
font-size:80px;
margin-bottom:20px;
line-height:1;
}
.slide p {
font-size:18px;
margin:8px 0;
line-height:1.3;
}
.controls {
position:absolute;
bottom:70px;
left:0;
width:400px;
height:30px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 50px;
box-sizing:border-box;
}
button {
background:#FF8F00;
color:#fff;
border:none;
padding:8px 16px;
border-radius:15px;
cursor:pointer;
font-size:16px;
font-family:Georgia,serif;
font-weight:bold;
opacity:1;
transition:opacity 0.3s;
}
button:hover:not([disabled]) {
background:#FFB74D;
}
#indicator {
font-size:18px;
font-weight:bold;
}
.progress {
position:absolute;
bottom:25px;
left:50px;
width:300px;
height:8px;
background:#E0E0E0;
border-radius:4px;
overflow:hidden;
}
.progress-fill {
height:100%;
background:#FF8F00;
width:20%;
transition:width 0.5s ease;
border-radius:4px;
}
</style>
</head>
<body>
<div id="presentation">
<div class="slide">
<h1>Step 1: Boil Fresh Water</h1>
<div class="icon">☕</div>
<p>Start with fresh, cold water.</p>
<p>Fill your kettle.</p>
<p>Bring to a full rolling boil.</p>
</div>
<div class="slide">
<h1>Step 2: Preheat Teapot</h1>
<div class="icon">🫖</div>
<p>Pour boiling water into teapot.</p>
<p>Swirl around for 30 seconds.</p>
<p>Discard the water.</p>
</div>
<div class="slide">
<h1>Step 3: Add Tea</h1>
<div class="icon">🍵</div>
<p>Use 1 tsp loose leaf per cup.</p>
<p>Or 1 tea bag.</p>
<p>Place in preheated teapot.</p>
</div>
<div class="slide">
<h1>Step 4: Steep Properly</h1>
<div class="icon">⏳</div>
<p>Pour boiling water over tea.</p>
<p>Steep 3-5 minutes for black tea.</p>
<p>Remove tea to avoid bitterness.</p>
</div>
<div class="slide">
<h1>Step 5: Serve & Enjoy</h1>
<div class="icon">☕</div>
<p>Add milk after steeping.</p>
<p>Sweeten to taste with sugar or honey.</p>
<p>Sip and relax!</p>
</div>
</div>
<div class="controls">
<button id="prev">← Prev</button>
<span id="indicator">Step 1/5</span>
<button id="next">Next →</button>
</div>
<div class="progress">
<div class="progress-fill"></div>
</div>
<script>
var current=0;
var pres=document.getElementById('presentation');
var prevBtn=document.getElementById('prev');
var nextBtn=document.getElementById('next');
var ind=document.getElementById('indicator');
var fill=document.querySelector('.progress-fill');
function update(){
pres.style.transform='translateX('+(-current*400)+'px)';
ind.textContent='Step '+(current+1)+'/5';
fill.style.width=((current+1)/5*100)+'%';
prevBtn.disabled=current===0;
nextBtn.disabled=current===4;
prevBtn.style.opacity=current===0?0.5:1;
nextBtn.style.opacity=current===4?0.5:1;
}
prevBtn.onclick=function(){
if(current>0){
current--;
update();
}
};
nextBtn.onclick=function(){
if(current<4){
current++;
update();
}
};
document.onkeydown=function(e){
if(e.keyCode===37&¤t>0){
current--;
update();
}
if(e.keyCode===39&¤t<4){
current++;
update();
}
};
update();
</script>
</body>
</html>