Tillbaka till resurser
Förhandsvisning
Silly sentenses
Grammatik, meningsbyggnad
Prompt som användes
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Silly Sentences - Image Cards</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@media print {
.no-print { display: none; }
body { background: white; }
.card { break-inside: avoid; }
}
.card {
border: 2px solid #e2e8f0;
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.02);
}
.icon-container svg {
width: 80px;
height: 80px;
}
</style>
</head>
<body class="bg-gray-100 p-8 font-sans">
<div class="max-w-5xl mx-auto">
<header class="mb-8 text-center no-print">
<h1 class="text-3xl font-bold text-gray-800">Silly Sentences - Flashcards</h1>
<p class="text-gray-600 mt-2">Klipp ut korten för att bygga tokiga meningar fysiskt på lektionen.</p>
<button onclick="window.print()" class="mt-4 bg-blue-600 text-white px-6 py-2 rounded-full shadow hover:bg-blue-700 transition">
Skriv ut korten
</button>
</header>
<!-- WHO SECTION (BLUE) -->
<h2 class="text-xl font-bold text-blue-700 mb-4 border-b-2 border-blue-200 no-print">WHO? (Subjects)</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-12">
<!-- 1. Hungry Shark -->
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-blue-500">
<div class="icon-container flex justify-center mb-4 text-blue-600">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M19.34 10.37a5.55 5.55 0 0 0-2.43-1.63c-1.44-.45-3.08-.25-4.47.5L8.5 11.5l-4-1.5 2 4.5L3 18l5-1 3.5 3 2.5-6.5c1.4-.75 3.03-.95 4.47-.5a5.55 5.55 0 0 0 2.43 1.63l.94-4.26z"/>
<path d="M12 11l1-3 4-1-1 4"/>
<circle cx="16" cy="11" r=".5" fill="currentColor"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800">A hungry shark</p>
<span class="text-xs text-blue-400 uppercase font-bold tracking-widest">Who?</span>
</div>
<!-- 2. Invisible Teacher -->
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-blue-500">
<div class="icon-container flex justify-center mb-4 text-blue-200">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="2 2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
<path d="M17 2l2 2m-2 0l2-2"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800">The invisible teacher</p>
<span class="text-xs text-blue-400 uppercase font-bold tracking-widest">Who?</span>
</div>
<!-- 3. Grumpy Alien -->
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-blue-500">
<div class="icon-container flex justify-center mb-4 text-green-500">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 2c-4 0-7 3.5-7 8s3 9 7 9 7-4.5 7-9-3-8-7-8z"/>
<ellipse cx="9" cy="10" rx="2" ry="3" fill="currentColor"/>
<ellipse cx="15" cy="10" rx="2" ry="3" fill="currentColor"/>
<path d="M9 16c1.5-1 4.5-1 6 0"/>
<path d="M12 2v-1M8 3L7 2M16 3l1-1"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800">A grumpy alien</p>
<span class="text-xs text-blue-400 uppercase font-bold tracking-widest">Who?</span>
</div>
<!-- 4. Spotted Giraffe -->
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-blue-500">
<div class="icon-container flex justify-center mb-4 text-yellow-600">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M16 3l-1 5-2 10v3h-2v-3l1-8-2-1V3l1.5-1L16 3z"/>
<circle cx="13" cy="4" r=".5" fill="currentColor"/>
<circle cx="13.5" cy="7" r=".5" fill="currentColor"/>
<circle cx="13" cy="10" r=".5" fill="currentColor"/>
<path d="M12 3h1"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800">The spotted giraffe</p>
<span class="text-xs text-blue-400 uppercase font-bold tracking-widest">Who?</span>
</div>
<!-- 5. Confused Wizard -->
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-blue-500">
<div class="icon-container flex justify-center mb-4 text-purple-600">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 2l-6 10h12L12 2z"/>
<path d="M6 12l-2 9h16l-2-9"/>
<path d="M10 16s1 1 2 1 2-1 2-1"/>
<circle cx="12" cy="7" r=".5" fill="white"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800">A confused wizard</p>
<span class="text-xs text-blue-400 uppercase font-bold tracking-widest">Who?</span>
</div>
<!-- 6. Brave Hamster -->
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-blue-500">
<div class="icon-container flex justify-center mb-4 text-orange-400">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="14" r="7"/>
<circle cx="7" cy="8" r="2.5"/>
<circle cx="17" cy="8" r="2.5"/>
<path d="M10 13h.01M14 13h.01M12 16c.5 0 1 .5 1 1s-.5 1-1 1-1-.5-1-1 .5-1 1-1z"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800">The brave hamster</p>
<span class="text-xs text-blue-400 uppercase font-bold tracking-widest">Who?</span>
</div>
</div>
<!-- DOES WHAT SECTION (GREEN) -->
<h2 class="text-xl font-bold text-green-700 mb-4 border-b-2 border-green-200 no-print">DOES WHAT? (Actions)</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-12">
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-green-500">
<div class="icon-container flex justify-center mb-4 text-gray-800">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="2" y="6" width="20" height="12" rx="2"/>
<circle cx="17" cy="10" r="1" fill="currentColor"/>
<circle cx="19" cy="12" r="1" fill="currentColor"/>
<path d="M6 12h4M8 10v4"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800 italic">plays video games</p>
<span class="text-xs text-green-400 uppercase font-bold tracking-widest">Action</span>
</div>
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-green-500">
<div class="icon-container flex justify-center mb-4 text-pink-500">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 2l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1 2-4z"/>
<path d="M5 21l2-2M19 21l-2-2M12 18v3"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800 italic">dances disco</p>
<span class="text-xs text-green-400 uppercase font-bold tracking-widest">Action</span>
</div>
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-green-500">
<div class="icon-container flex justify-center mb-4 text-orange-600">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="4" y="16" width="4" height="4" fill="currentColor"/>
<rect x="10" y="16" width="4" height="4" fill="currentColor"/>
<rect x="16" y="16" width="4" height="4" fill="currentColor"/>
<rect x="7" y="10" width="4" height="4" fill="currentColor"/>
<rect x="13" y="10" width="4" height="4" fill="currentColor"/>
<rect x="10" y="4" width="4" height="4" fill="currentColor"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800 italic">builds a Lego castle</p>
<span class="text-xs text-green-400 uppercase font-bold tracking-widest">Action</span>
</div>
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-green-500">
<div class="icon-container flex justify-center mb-4 text-red-500">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 18V5l12-2v13"/>
<circle cx="6" cy="18" r="3"/>
<circle cx="18" cy="16" r="3"/>
<path d="M13 8h2m-2 3h3"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800 italic">sings a song</p>
<span class="text-xs text-green-400 uppercase font-bold tracking-widest">Action</span>
</div>
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-green-500">
<div class="icon-container flex justify-center mb-4 text-amber-800">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M6 10V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v5"/>
<path d="M6 10c0 4 3 7 6 7s6-3 6-7H6z"/>
<path d="M9 17v4m6-4v4"/>
<circle cx="12" cy="11" r="1" fill="currentColor"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800 italic">eats a stinky sock</p>
<span class="text-xs text-green-400 uppercase font-bold tracking-widest">Action</span>
</div>
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-green-500">
<div class="icon-container flex justify-center mb-4 text-blue-500">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M4 14h16l2 2H2l2-2z"/>
<circle cx="7" cy="18" r="2"/>
<circle cx="17" cy="18" r="2"/>
<path d="M12 14v-4l3-2"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800 italic">rides a skateboard</p>
<span class="text-xs text-green-400 uppercase font-bold tracking-widest">Action</span>
</div>
</div>
<!-- WHERE SECTION (RED) -->
<h2 class="text-xl font-bold text-red-700 mb-4 border-b-2 border-red-200 no-print">WHERE? (Places)</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-red-500">
<div class="icon-container flex justify-center mb-4 text-red-600">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M2 20h20L12 4 2 20z"/>
<path d="M12 8c1 0 2 1 2 2s-1 2-2 2-2-1-2-2 1-2 2-2z"/>
<path d="M10 20c0-3 1-5 2-5s2 2 2 5" stroke="orange"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800">in a volcano.</p>
<span class="text-xs text-red-400 uppercase font-bold tracking-widest">Where?</span>
</div>
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-red-500">
<div class="icon-container flex justify-center mb-4 text-yellow-500">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3 21h18L21 7l-9-4-9 4v14z"/>
<circle cx="7" cy="10" r="1.5" fill="currentColor"/>
<circle cx="15" cy="15" r="2" fill="currentColor"/>
<circle cx="10" cy="18" r="1" fill="currentColor"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800">inside a giant cheese.</p>
<span class="text-xs text-red-400 uppercase font-bold tracking-widest">Where?</span>
</div>
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-red-500">
<div class="icon-container flex justify-center mb-4 text-gray-500">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="9"/>
<circle cx="8" cy="9" r="1.5" fill="currentColor"/>
<circle cx="15" cy="14" r="2.5" fill="currentColor"/>
<path d="M18 8l1-1M5 16l-1 1"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800">on the moon.</p>
<span class="text-xs text-red-400 uppercase font-bold tracking-widest">Where?</span>
</div>
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-red-500">
<div class="icon-container flex justify-center mb-4 text-pink-400">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 10c3 0 6-2 6-5s-3-3-6-3-6 0-6 3 3 5 6 5z"/>
<path d="M12 10v4"/>
<rect x="10" y="14" width="4" height="3"/>
<path d="M8 12l2-2m4 0l2 2"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800">in a flying balloon.</p>
<span class="text-xs text-red-400 uppercase font-bold tracking-widest">Where?</span>
</div>
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-red-500">
<div class="icon-container flex justify-center mb-4 text-blue-500">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M2 12c4-2 8-2 12 0s8 2 12 0"/>
<path d="M2 16c4-2 8-2 12 0s8 2 12 0"/>
<path d="M8 8s1-2 4-2 4 2 4 2"/>
<circle cx="12" cy="14" r="3" stroke="white"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800">under the ocean.</p>
<span class="text-xs text-red-400 uppercase font-bold tracking-widest">Where?</span>
</div>
<div class="card bg-white p-4 rounded-xl shadow-sm text-center border-l-8 border-red-500">
<div class="icon-container flex justify-center mb-4 text-cyan-200">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M4 20h16l-2-12-6-4-6 4-2 12z"/>
<path d="M8 20l1-4h6l1 4"/>
<path d="M2 22h20"/>
</svg>
</div>
<p class="text-lg font-bold text-gray-800">on top of an iceberg.</p>
<span class="text-xs text-red-400 uppercase font-bold tracking-widest">Where?</span>
</div>
</div>
</div>
</body>
</html>Information
- Datum
- 26 april 2026
- Typ
- Spel
- Visningar
- 0
- Favoriter
- 0
Ämne & stadium
EngelskaMellanstadietLågstadiet
Skapad med
Gemini