iklim dan cuaca
Mapel
Ilmu Pengetahuan Alam (IPA)
Jenjang
Kelas 4 SD
Platform
HTML5 · Web
Tentang Game Ini
<!doctype html> <html lang="id"> <head><script src="/_sdk/telemetry_sdk.js"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cuaca dan Iklim</title> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet"> <style> body { font-family: 'DM Sans', sans-serif; } .tab-btn.active { border-color: #0ea5e9; color: #0ea5e9; background: #f0f9ff; } .weather-card { transition: transform 0.3s, box-shadow 0.3s; } .weather-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.12); } .quiz-option { transition: all 0.2s; cursor: pointer; } .quiz-option:hover { background: #e0f2fe; } .quiz-option.correct { background: #dcfce7; border-color: #16a34a; } .quiz-option.wrong { background: #fee2e2; border-color: #dc2626; } .section-panel { display: none; } .section-panel.active { display: block; } </style> <script src="/_sdk/data_sdk.js" type="text/javascript"></script> <script src="/_sdk/resizing_sdk.js" type="text/javascript"></script> </head> <body data-template-id="__page-root" class="min-h-screen w-full"> <header class="relative overflow-hidden"><img data-template-id="hero-img" class="canva-image w-full h-64 object-cover" loading="lazy"> <div class="absolute inset-0 bg-gradient-to-b from-black/40 to-black/60 flex items-center justify-center"> <div class="text-center px-4"> <h1 data-template-id="main-title" class="canva-text text-white font-bold drop-shadow-lg"></h1> <p data-template-id="main-subtitle" class="canva-text text-white/90 mt-2"></p> </div> </div> </header> <main class="max-w-5xl mx-auto px-4 py-8"> <nav class="flex flex-wrap gap-2 mb-8 border-b pb-4" role="tablist"><button class="tab-btn active px-4 py-2 rounded-lg border-2 font-medium text-sm" onclick="showSection(0)" data-template-id="tab-1" role="tab">Pengertian</button> <button class="tab-btn px-4 py-2 rounded-lg border-2 border-gray-200 font-medium text-sm" onclick="showSection(1)" data-template-id="tab-2" role="tab">Jenis Cuaca</button> <button class="tab-btn px-4 py-2 rounded-lg border-2 border-gray-200 font-medium text-sm" onclick="showSection(2)" data-template-id="tab-3" role="tab">Perbedaan</button> <button class="tab-btn px-4 py-2 rounded-lg border-2 border-gray-200 font-medium text-sm" onclick="showSection(3)" data-template-id="tab-4" role="tab">Kuis</button> </nav><!-- Section 1: Pengertian --> <section class="section-panel active" aria-label="Pengertian"> <div data-template-id="section1-card" class="canva-card bg-white rounded-2xl p-6 shadow-md"> <h2 data-template-id="s1-title" class="canva-text font-bold text-sky-800 mb-4"></h2> <div class="space-y-4"> <div class="bg-sky-50 rounded-xl p-4 border-l-4 border-sky-400"> <h3 data-template-id="s1-cuaca-title" class="canva-text font-semibold mb-1"></h3> <p data-template-id="s1-cuaca-desc" class="canva-text text-gray-700"></p> </div> <div class="bg-emerald-50 rounded-xl p-4 border-l-4 border-emerald-400"> <h3 data-template-id="s1-iklim-title" class="canva-text font-semibold mb-1"></h3> <p data-template-id="s1-iklim-desc" class="canva-text text-gray-700"></p> </div> </div> </div> <div class="mt-6 grid md:grid-cols-2 gap-4"> <div data-template-id="sikap-card" class="canva-card bg-amber-50 rounded-2xl p-5 border border-amber-200"> <h3 data-template-id="sikap-title" class="canva-text font-bold text-amber-800 mb-3"></h3> <ul class="space-y-2"> <li data-template-id="sikap-1" class="canva-text text-gray-700 flex items-start gap-2"><span>🤝</span><span></span></li> <li data-template-id="sikap-2" class="canva-text text-gray-700 flex items-start gap-2"><span>✅</span><span></span></li> <li data-template-id="sikap-3" class="canva-text text-gray-700 flex items-start gap-2"><span>💬</span><span></span></li> </ul> </div> </div> </section><!-- Section 2: Jenis Cuaca --> <section class="section-panel" aria-label="Jenis Cuaca"> <h2 data-template-id="s2-title" class="canva-text font-bold text-sky-800 mb-6"></h2> <div class="grid sm:grid-cols-2 gap-5"> <div class="weather-card bg-white rounded-2xl overflow-hidden shadow-md"><img data-template-id="img-cerah" class="canva-image w-full h-40 object-cover" loading="lazy"> <div class="p-4"> <h3 data-template-id="cerah-title" class="canva-text font-bold text-lg"></h3> <p data-template-id="cerah-desc" class="canva-text text-gray-600 mt-1 text-sm"></p> </div> </div> <div class="weather-card bg-white rounded-2xl overflow-hidden shadow-md"><img data-template-id="img-berawan" class="canva-image w-full h-40 object-cover" loading="lazy"> <div class="p-4"> <h3 data-template-id="berawan-title" class="canva-text font-bold text-lg"></h3> <p data-template-id="berawan-desc" class="canva-text text-gray-600 mt-1 text-sm"></p> </div> </div> <div class="weather-card bg-white rounded-2xl overflow-hidden shadow-md"><img data-template-id="img-hujan" class="canva-image w-full h-40 object-cover" loading="lazy"> <div class="p-4"> <h3 data-template-id="hujan-title" class="canva-text font-bold text-lg"></h3> <p data-template-id="hujan-desc" class="canva-text text-gray-600 mt-1 text-sm"></p> </div> </div> <div class="weather-card bg-white rounded-2xl overflow-hidden shadow-md"><img data-template-id="img-angin" class="canva-image w-full h-40 object-cover" loading="lazy"> <div class="p-4"> <h3 data-template-id="angin-title" class="canva-text font-bold text-lg"></h3> <p data-template-id="angin-desc" class="canva-text text-gray-600 mt-1 text-sm"></p> </div> </div> </div> </section><!-- Section 3: Perbedaan --> <section class="section-panel" aria-label="Perbedaan Cuaca dan Iklim"> <h2 data-template-id="s3-title" class="canva-text font-bold text-sky-800 mb-6"></h2> <div class="overflow-x-auto"> <table class="w-full bg-white rounded-2xl overflow-hidden shadow-md text-sm"> <thead class="bg-sky-600 text-white"> <tr> <th data-template-id="th-aspek" class="canva-text p-3 text-left"></th> <th data-template-id="th-cuaca" class="canva-text p-3 text-left"></th> <th data-template-id="th-iklim" class="canva-text p-3 text-left"></th> </tr> </thead> <tbody> <tr class="border-b"> <td data-template-id="row1-aspek" class="canva-text p-3 font-medium"></td> <td data-template-id="row1-cuaca" class="canva-text p-3"></td> <td data-template-id="row1-iklim" class="canva-text p-3"></td> </tr> <tr class="border-b bg-gray-50"> <td data-template-id="row2-aspek" class="canva-text p-3 font-medium"></td> <td data-template-id="row2-cuaca" class="canva-text p-3"></td> <td data-template-id="row2-iklim" class="canva-text p-3"></td> </tr> <tr class="border-b"> <td data-template-id="row3-aspek" class="canva-text p-3 font-medium"></td> <td data-template-id="row3-cuaca" class="canva-text p-3"></td> <td data-template-id="row3-iklim" class="canva-text p-3"></td> </tr> <tr class="bg-gray-50"> <td data-template-id="row4-aspek" class="canva-text p-3 font-medium"></td> <td data-template-id="row4-cuaca" class="canva-text p-3"></td> <td data-template-id="row4-iklim" class="canva-text p-3"></td> </tr> </tbody> </table> </div> <div data-template-id="pengaruh-card" class="canva-card mt-6 bg-teal-50 rounded-2xl p-5 border border-teal-200"> <h3 data-template-id="pengaruh-title" class="canva-text font-bold text-teal-800 mb-3"></h3> <p data-template-id="pengaruh-desc" class="canva-text text-gray-700"></p> </div> </section><!-- Section 4: Kuis --> <section class="section-panel" aria-label="Kuis Interaktif"> <h2 data-template-id="s4-title" class="canva-text font-bold text-sky-800 mb-6"></h2> <div id="quiz-container" class="space-y-6"></div> <div id="quiz-result" class="hidden mt-6 bg-white rounded-2xl p-6 shadow-md text-center"> <p id="result-text" class="text-xl font-bold"></p><button onclick="resetQuiz()" class="mt-4 px-6 py-2 bg-sky-500 text-white rounded-lg font-medium hover:bg-sky-600">Coba Lagi</button> </div> </section> </main> <footer data-template-id="footer-section" class="canva-footer text-center py-6 mt-8 border-t"> <p data-template-id="footer-text" class="canva-text text-gray-500 text-sm"></p> </footer> <script src="/_sdk/editing_sdk.js"></script> <script> // Tab navigation function showSection(idx) { document.querySelectorAll('.section-panel').forEach((s, i) => { s.classList.toggle('active', i === idx); }); document.querySelectorAll('.tab-btn').forEach((b, i) => { b.classList.toggle('active', i === idx); if (i !== idx) { b.classList.add('border-gray-200'); } else { b.classList.remove('border-gray-200'); } }); } // Quiz data const quizData = [ { q: "Apa yang dimaksud dengan cuaca?", opts: ["Keadaan udara di suatu tempat dalam waktu singkat", "Rata-rata cuaca dalam waktu lama", "Perubahan musim", "Suhu bumi"], answer: 0 }, { q: "Manakah yang termasuk cuaca cerah?", opts: ["Langit gelap dan petir", "Langit biru, matahari bersinar terang", "Hujan deras disertai angin", "Kabut tebal menutupi jalan"], answer: 1 }, { q: "Iklim diukur dalam jangka waktu berapa?", opts: ["1 hari", "1 minggu", "30 tahun atau lebih", "1 bulan"], answer: 2 }, { q: "Saat cuaca hujan, kegiatan apa yang sebaiknya dilakukan?", opts: ["Bermain di lapangan", "Belajar di dalam kelas", "Berenang di sungai", "Menjemur pakaian"], answer: 1 }, { q: "Indonesia memiliki iklim apa?", opts: ["Subtropis", "Tropis", "Kutub", "Gurun"], answer: 1 } ]; let userAnswers = new Array(quizData.length).fill(-1); function buildQuiz() { const container = document.getElementById('quiz-container'); container.innerHTML = ''; quizData.forEach((item, qi) => { const div = document.createElement('div'); div.className = 'bg-white rounded-2xl p-5 shadow-md'; div.innerHTML = `<p class="font-semibold mb-3">${qi + 1}. ${item.q}</p> <div class="space-y-2">${item.opts.map((o, oi) => `<div class="quiz-option border rounded-lg p-3 flex items-center gap-2" data-q="${qi}" data-o="${oi}" onclick="selectAnswer(${qi},${oi},this)"> <span class="w-6 h-6 rounded-full border-2 flex items-center justify-center text-xs font-bold">${String.fromCharCode(65+oi)}</span> <span>${o}</span> </div>` ).join('')}</div>`; container.appendChild(div); }); // Add submit button const btn = document.createElement('button'); btn.className = 'mt-4 px-6 py-3 bg-sky-500 text-white rounded-lg font-semibold hover:bg-sky-600 w-full'; btn.textContent = 'Periksa Jawaban'; btn.onclick = checkQuiz; container.appendChild(btn); } function selectAnswer(qi, oi, el) { userAnswers[qi] = oi; el.closest('.bg-white').querySelectorAll('.quiz-option').forEach(o => { o.classList.remove('bg-sky-100', 'border-sky-400'); }); el.classList.add('bg-sky-100', 'border-sky-400'); } function checkQuiz() { let score = 0; quizData.forEach((item, qi) => { const opts = document.querySelectorAll(`[data-q="${qi}"]`); opts.forEach(o => { const oi = parseInt(o.dataset.o); o.classList.remove('bg-sky-100', 'border-sky-400'); o.style.pointerEvents = 'none'; if (oi === item.answer) o.classList.add('correct'); else if (oi === userAnswers[qi] && userAnswers[qi] !== item.answer) o.classList.add('wrong'); }); if (userAnswers[qi] === item.answer) score++; }); const result = document.getElementById('quiz-result'); result.classList.remove('hidden'); document.getElementById('result-text').textContent = `Skor kamu: ${score} dari ${quizData.length} 🎉`; } function resetQuiz() { userAnswers = new Array(quizData.length).fill(-1); document.getElementById('quiz-result').classList.add('hidden'); buildQuiz(); } buildQuiz(); lucide.createIcons(); </script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a12b9ea2c2ea4ad7',t:'MTc4MjYzODQ2OS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
Manfaat Pembelajaran Ilmu Pengetahuan Alam (IPA)
- ✓Memvisualisasikan proses sains yang tidak bisa dilihat langsung di kelas
- ✓Melatih kemampuan berpikir ilmiah dan pemecahan masalah
- ✓Menghubungkan teori dengan fenomena alam yang nyata
- ✓Mendorong rasa ingin tahu yang menjadi dasar semangat belajar sains
Cara Menggunakan Game Ini
- 1Guru: Ideal sebagai pengantar sebelum praktikum atau sebagai penguatan konsep setelah diskusi kelas
- 2Siswa: Perhatikan hubungan antara setiap aksi dalam game dengan konsep IPA yang sedang dipelajari
- 3Diskusikan: Setelah bermain, tanyakan "Fenomena alam apa yang digambarkan game ini?"
💡 Tips Belajar
IPA terbaik dipelajari dengan mengamati dan mencoba. Saat bermain, aktifkan mode "ilmuwan" — ajukan pertanyaan "Mengapa ini terjadi?" dan "Apa yang akan berubah jika...?"
- \n
- 🤝 \n
- ✅ \n
- 💬 \n
| \n | \n | \n |
|---|---|---|
| \n | \n | \n |
| \n | \n | \n |
| \n | \n | \n |
| \n | \n | \n |