Berikut ini adalah hasil experimen sederhana membuat media pembelajaran interaktif sederhana dengan bantuan chatGPT.
langkah pertama silakan tuliskan prompt sederhana, boleh dimodifikasi
Buatkan saya sebuah media pembelajaran interaktif untuk materi IPAS sekolah dasar kelas 5 dengan tujuan pembelajaran yaitu mempelajari tentang proses-proses yang terjadi dalam siklus air serta faktor-faktor yang memengaruhinya. Gunakan visual dengan gaya 3D pixar, berikan gambar vektor untuk memperkuat materi. berikan juga latihan soal sebanyak 20. tambahkan halaman khusus untuk menampilkan game interaktif atau simulasi interaktif. berikan tulisan copyright 'dikembangkan oleh Arief Qosim'. Jadikan kode HTML yang bisa di embbed di website tanpa hosting.maka hasilnya adalah kode prompt berikut.
<div id="ipas-air-app">
<style>
#ipas-air-app{font-family:'Trebuchet MS',Arial,sans-serif;color:#193a55;max-width:1050px;margin:auto;background:#eef9ff;border-radius:22px;overflow:hidden;box-shadow:0 8px 30px #1c73952b}
#ipas-air-app *{box-sizing:border-box}
#ipas-air-app .hero{background:linear-gradient(135deg,#188fdd,#67d7f3);padding:28px 20px;text-align:center;color:white}
#ipas-air-app h1{font-size:clamp(25px,4vw,40px);margin:8px 0}
#ipas-air-app h2{color:#0874b7;margin-top:0}
#ipas-air-app h3{color:#166c9e}
#ipas-air-app p{line-height:1.7}
#ipas-air-app .nav{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;padding:14px;background:white}
#ipas-air-app button{font-family:inherit;cursor:pointer;border:0;border-radius:12px;padding:11px 17px;background:#087fcb;color:white;font-weight:bold;transition:.2s}
#ipas-air-app button:hover{filter:brightness(1.1);transform:translateY(-1px)}
#ipas-air-app button:disabled{opacity:.45;cursor:not-allowed}
#ipas-air-app .nav button{font-size:13px;background:#dff2ff;color:#17618e}
#ipas-air-app .nav button.active{background:#087fcb;color:white}
#ipas-air-app .page{display:none;padding:25px;min-height:440px}
#ipas-air-app .page.active{display:block}
#ipas-air-app .panel{background:white;border-radius:18px;padding:22px;margin:14px 0;box-shadow:0 3px 12px #247ba51a}
#ipas-air-app .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
#ipas-air-app .tile{background:white;border-radius:16px;padding:18px;text-align:center;box-shadow:0 3px 12px #247ba51a}
#ipas-air-app .emoji{font-size:48px;display:block;margin:10px}
#ipas-air-app .art{width:100%;max-height:360px}
#ipas-air-app .options{display:grid;gap:10px;margin:18px 0}
#ipas-air-app .options button{text-align:left;background:#e5f4ff;color:#174c72;border:2px solid transparent}
#ipas-air-app .options button.chosen{border-color:#087fcb;background:#c5eaff}
#ipas-air-app .options button.correct{background:#c8f5d5;border-color:#219b56}
#ipas-air-app .options button.wrong{background:#ffdad9;border-color:#e14a48}
#ipas-air-app .feedback{background:#e8f6ff;padding:15px;border-radius:12px;margin:12px 0;line-height:1.6}
#ipas-air-app .progress{height:12px;background:#d5e8f2;border-radius:20px;overflow:hidden;margin:15px 0}
#ipas-air-app .progress span{display:block;height:100%;background:#21bba4;width:0;transition:.3s}
#ipas-air-app input[type=range]{width:100%;accent-color:#078fd5}
#ipas-air-app .stat{font-size:24px;font-weight:bold;color:#087fcb}
#ipas-air-app .step{background:#e6f5ff;padding:13px;border-radius:12px;margin:9px 0}
#ipas-air-app .gamebtn{margin:5px;background:#17a6a0}
#ipas-air-app footer{text-align:center;background:#124e79;color:white;padding:17px;font-size:13px}
#ipas-air-app .center{text-align:center}
#ipas-air-app .hidden{display:none}
#ipas-air-app .small{font-size:13px;color:#54748b}
@media(max-width:600px){#ipas-air-app .page{padding:15px}#ipas-air-app .panel{padding:16px}}
</style>
<header class="hero">
<div style="font-size:55px">💧🌈☀️</div>
<h1>Petualangan Siklus Air</h1>
<p>Media Pembelajaran IPAS • Kelas 5 SD</p>
<p>Jelajahi perjalanan air bersama Tetes si Penjelajah!</p>
</header>
<nav class="nav" aria-label="Navigasi pembelajaran">
<button data-page="home" class="active">🏠 Beranda</button>
<button data-page="tujuan">🎯 Tujuan</button>
<button data-page="materi">📚 Materi</button>
<button data-page="faktor">🌤️ Faktor</button>
<button data-page="simulasi">🔬 Simulasi</button>
<button data-page="game">🎮 Game</button>
<button data-page="kuis">📝 Kuis 20 Soal</button>
</nav>
<section class="page active" data-screen="home">
<div class="panel center">
<h2>Halo, Penjelajah Cilik! 👋</h2>
<p>Aku Tetes! Ayo ikuti perjalananku dari laut menuju awan, turun menjadi hujan, lalu kembali lagi ke bumi.</p>
<svg class="art" viewBox="0 0 800 350" role="img" aria-label="Ilustrasi vektor matahari, awan, gunung, pepohonan, sungai, dan karakter tetesan air">
<defs>
<linearGradient id="skyA" x2="0" y2="1"><stop stop-color="#73d8ff"/><stop offset="1" stop-color="#e3faff"/></linearGradient>
<linearGradient id="seaA" x2="0" y2="1"><stop stop-color="#37c8ee"/><stop offset="1" stop-color="#087dbd"/></linearGradient>
<radialGradient id="dropA"><stop stop-color="#aaf4ff"/><stop offset="1" stop-color="#148bd9"/></radialGradient>
</defs>
<rect width="800" height="350" rx="20" fill="url(#skyA)"/>
<circle cx="650" cy="65" r="45" fill="#ffce38" stroke="#fff2a0" stroke-width="9"/>
<g fill="white" stroke="#d4efff" stroke-width="3">
<ellipse cx="200" cy="95" rx="85" ry="30"/>
<circle cx="170" cy="75" r="40"/>
<circle cx="225" cy="68" r="48"/>
<ellipse cx="470" cy="100" rx="75" ry="25"/>
<circle cx="445" cy="83" r="36"/>
<circle cx="490" cy="80" r="40"/>
</g>
<path d="M0 245L160 95L315 245L435 135L600 255L800 190V350H0Z" fill="#83b7a0"/>
<path d="M90 160L160 95L225 160L180 150L160 130L140 150Z" fill="#f4fcff"/>
<path d="M390 180L435 135L485 184L445 170L435 155L420 174Z" fill="#f4fcff"/>
<path d="M0 280Q200 250 350 280T800 275V350H0Z" fill="url(#seaA)"/>
<path d="M0 302Q150 285 300 305T600 300T800 302" fill="none" stroke="#a6efff" stroke-width="6"/>
<g transform="translate(365 185)">
<path d="M0 -75C-20 -35 -55 -5 -55 28A55 55 0 0 0 55 28C55 -5 20 -35 0 -75Z" fill="url(#dropA)" stroke="white" stroke-width="5"/>
<ellipse cx="-18" cy="15" rx="7" ry="10" fill="#123e68"/>
<ellipse cx="18" cy="15" rx="7" ry="10" fill="#123e68"/>
<path d="M-16 39Q0 54 17 39" stroke="#123e68" stroke-width="5" fill="none" stroke-linecap="round"/>
<ellipse cx="-29" cy="32" rx="11" ry="6" fill="#ff99ae" opacity=".7"/>
<ellipse cx="29" cy="32" rx="11" ry="6" fill="#ff99ae" opacity=".7"/>
<ellipse cx="-20" cy="-9" rx="12" ry="24" fill="white" opacity=".38" transform="rotate(30 -20 -9)"/>
</g>
<g fill="#158d5d">
<path d="M60 275L95 185L130 275Z"/><path d="M95 260L125 195L155 260Z"/>
<path d="M670 275L710 170L750 275Z"/>
</g>
</svg>
<p>Siap belajar, bereksperimen, dan bermain?</p>
<button data-go="tujuan">Mulai Petualangan ➜</button>
</div>
</section>
<section class="page" data-screen="tujuan">
<h2>🎯 Tujuan Pembelajaran</h2>
<div class="panel">
<p>Setelah mengikuti petualangan ini, kamu diharapkan mampu:</p>
<div class="step">✅ Menjelaskan pengertian siklus air.</div>
<div class="step">✅ Mengidentifikasi proses penguapan, pengembunan, hujan, dan peresapan air.</div>
<div class="step">✅ Menjelaskan peran tumbuhan dalam siklus air.</div>
<div class="step">✅ Menganalisis faktor yang memengaruhi proses siklus air.</div>
<div class="step">✅ Melakukan percobaan sederhana melalui simulasi.</div>
<div class="step">✅ Menjelaskan pentingnya menjaga lingkungan agar siklus air tetap berlangsung dengan baik.</div>
</div>
<button data-go="materi">Pelajari Materi ➜</button>
</section>
<section class="page" data-screen="materi">
<h2>📚 Mengenal Siklus Air</h2>
<div class="panel">
<p><strong>Siklus air</strong> adalah perjalanan air yang berlangsung terus-menerus dari permukaan bumi ke atmosfer dan kembali lagi ke bumi. Air dapat berubah menjadi uap, membentuk awan, turun sebagai hujan, kemudian mengalir atau meresap ke dalam tanah.</p>
<svg class="art" viewBox="0 0 800 410" role="img" aria-label="Diagram vektor siklus air">
<defs>
<marker id="arrowAir" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0 0L6 3L0 6Z" fill="#086cb4"/></marker>
</defs>
<rect width="800" height="410" rx="18" fill="#dcf5ff"/>
<circle cx="685" cy="70" r="43" fill="#ffd044"/>
<g fill="white" stroke="#b4dbea" stroke-width="3"><ellipse cx="325" cy="100" rx="115" ry="36"/><circle cx="290" cy="78" r="48"/><circle cx="365" cy="75" r="52"/></g>
<path d="M0 270L150 145L300 270L480 180L650 275L800 240V410H0Z" fill="#87bda0"/>
<path d="M0 300Q180 270 350 300T800 290V410H0Z" fill="#43b8e9"/>
<path d="M105 320Q75 230 160 160" stroke="#087bc5" stroke-width="7" stroke-dasharray="13 9" fill="none" marker-end="url(#arrowAir)"/>
<path d="M240 175Q275 130 310 140" stroke="#087bc5" stroke-width="6" fill="none" marker-end="url(#arrowAir)"/>
<path d="M420 145Q505 195 510 260" stroke="#087bc5" stroke-width="7" stroke-dasharray="13 9" fill="none" marker-end="url(#arrowAir)"/>
<path d="M570 290Q550 345 520 365" stroke="#087bc5" stroke-width="6" fill="none" marker-end="url(#arrowAir)"/>
<path d="M700 300Q660 320 610 320" stroke="#087bc5" stroke-width="6" fill="none" marker-end="url(#arrowAir)"/>
<g font-size="17" font-weight="bold" fill="#124a72">
<text x="15" y="200">Evaporasi</text>
<text x="270" y="35">Kondensasi</text>
<text x="500" y="185">Presipitasi</text>
<text x="475" y="390">Infiltrasi</text>
<text x="600" y="345">Aliran</text>
</g>
<g fill="#268f62"><path d="M610 285L645 190L680 285Z"/><path d="M645 275L675 215L705 275Z"/></g>
<text x="585" y="165" font-size="15" font-weight="bold" fill="#176445">Transpirasi</text>
</svg>
</div>
<div class="grid">
<div class="tile"><span class="emoji">☀️💨</span><h3>1. Evaporasi</h3><p>Panas matahari mengubah air di laut, sungai, dan danau menjadi uap air yang naik ke udara.</p></div>
<div class="tile"><span class="emoji">🌳💧</span><h3>2. Transpirasi</h3><p>Tumbuhan melepaskan uap air ke udara, terutama melalui bagian daun.</p></div>
<div class="tile"><span class="emoji">☁️</span><h3>3. Kondensasi</h3><p>Uap air yang mendingin berubah menjadi titik-titik air kecil atau kristal es yang dapat membentuk awan.</p></div>
<div class="tile"><span class="emoji">🌧️</span><h3>4. Presipitasi</h3><p>Air dari awan jatuh ke bumi sebagai hujan, salju, atau hujan es.</p></div>
<div class="tile"><span class="emoji">🌱</span><h3>5. Infiltrasi</h3><p>Sebagian air hujan meresap ke dalam tanah dan dapat menambah cadangan air tanah.</p></div>
<div class="tile"><span class="emoji">🏞️</span><h3>6. Aliran Permukaan</h3><p>Air mengalir di atas tanah menuju parit, sungai, danau, atau laut.</p></div>
</div>
<div class="panel"><h3>💡 Tahukah Kamu?</h3><p>Air yang kita gunakan hari ini mungkin pernah menjadi bagian dari awan, sungai, bahkan lautan pada masa yang sangat lama. Siklus air terus berlangsung karena energi matahari dan gaya gravitasi.</p></div>
<button data-go="faktor">Pelajari Faktor ➜</button>
</section>
<section class="page" data-screen="faktor">
<h2>🌤️ Faktor yang Memengaruhi Siklus Air</h2>
<div class="grid">
<div class="tile"><span class="emoji">☀️</span><h3>Suhu</h3><p>Semakin hangat permukaan air, umumnya semakin cepat air menguap.</p></div>
<div class="tile"><span class="emoji">🌬️</span><h3>Angin</h3><p>Angin membantu membawa uap air dari permukaan sehingga penguapan dapat berlangsung lebih cepat.</p></div>
<div class="tile"><span class="emoji">💦</span><h3>Kelembapan</h3><p>Udara yang lebih kering biasanya memungkinkan air menguap lebih cepat daripada udara sangat lembap.</p></div>
<div class="tile"><span class="emoji">🌳</span><h3>Vegetasi</h3><p>Pohon melepaskan uap air melalui transpirasi dan akarnya membantu air masuk ke tanah.</p></div>
<div class="tile"><span class="emoji">🌱</span><h3>Kondisi Tanah</h3><p>Tanah berpori membantu air meresap, sedangkan permukaan tertutup beton menghambat peresapan.</p></div>
<div class="tile"><span class="emoji">⛰️</span><h3>Bentuk Permukaan Bumi</h3><p>Daerah pegunungan dapat memengaruhi gerakan udara dan pembentukan hujan. Kemiringan lahan juga memengaruhi aliran air.</p></div>
</div>
<div class="panel">
<h3>🌎 Contoh dalam Kehidupan</h3>
<p>Ketika halaman sekolah dipenuhi beton, air hujan lebih sulit meresap dan lebih banyak mengalir di permukaan. Menanam pohon dan menyediakan area resapan dapat membantu mengurangi genangan.</p>
</div>
<button data-go="simulasi">Mulai Eksperimen ➜</button>
</section>
<section class="page" data-screen="simulasi">
<h2>🔬 Laboratorium Siklus Air</h2>
<p>Ubah kondisi lingkungan dan amati bagaimana proses penguapan serta peresapan air berubah.</p>
<div class="grid">
<div class="panel">
<label for="air-temp"><strong>☀️ Suhu: <span id="temp-value">30</span>°C</strong></label>
<input id="air-temp" type="range" min="20" max="40" value="30">
<label for="air-wind"><strong>🌬️ Kecepatan angin: <span id="wind-value">3</span></strong></label>
<input id="air-wind" type="range" min="0" max="10" value="3">
<label for="air-humidity"><strong>💦 Kelembapan: <span id="humidity-value">50</span>%</strong></label>
<input id="air-humidity" type="range" min="20" max="90" value="50">
<label for="air-trees"><strong>🌳 Banyaknya vegetasi: <span id="trees-value">50</span>%</strong></label>
<input id="air-trees" type="range" min="0" max="100" value="50">
</div>
<div class="panel center">
<h3>Hasil Pengamatan</h3>
<div>Indeks penguapan</div>
<div class="stat" id="evap-result">50</div>
<div class="progress"><span id="evap-bar"></span></div>
<div>Indeks kemampuan resapan</div>
<div class="stat" id="soil-result">50</div>
<div class="progress"><span id="soil-bar"></span></div>
<p id="sim-message" class="feedback"></p>
<p class="small">Indeks 0–100 merupakan model pembelajaran sederhana, bukan pengukuran cuaca atau hidrologi yang sebenarnya. Curah hujan, jenis tanah, dan faktor lain belum dihitung.</p>
</div>
</div>
<div class="panel center">
<svg class="art" viewBox="0 0 700 270" role="img" aria-label="Simulasi ilustratif penguapan air">
<rect width="700" height="270" rx="18" fill="#d9f5ff"/>
<circle id="sim-sun" cx="570" cy="58" r="37" fill="#ffca30"/>
<g fill="#fff"><ellipse cx="220" cy="75" rx="100" ry="30"/><circle cx="190" cy="55" r="38"/><circle cx="245" cy="54" r="40"/></g>
<path d="M0 210Q170 185 350 210T700 200V270H0Z" fill="#2ba8dc"/>
<g id="vapor-lines" stroke="#2388c3" stroke-width="5" fill="none" stroke-linecap="round">
<path d="M160 185Q130 155 160 120T160 70"/>
<path d="M240 190Q210 160 240 130T240 85"/>
<path d="M320 190Q290 160 320 125T320 75"/>
</g>
<g id="sim-trees" fill="#319d69">
<path d="M470 210L505 120L540 210Z"/>
<path d="M520 210L555 115L590 210Z"/>
<path d="M590 210L625 135L660 210Z"/>
</g>
</svg>
</div>
<button id="reset-sim">Ulangi Eksperimen</button>
</section>
<section class="page" data-screen="game">
<h2>🎮 Game: Misi Tetes Air</h2>
<div class="panel">
<p><strong>Misi:</strong> Susun perjalanan air mulai dari air laut yang menguap, membentuk awan, turun sebagai hujan, kemudian kembali menuju laut.</p>
<p>Tekan kartu proses sesuai urutan yang benar.</p>
<div id="game-choices" class="center"></div>
<h3>Urutan pilihanmu:</h3>
<div id="game-sequence" class="step" aria-live="polite">Belum ada pilihan.</div>
<div id="game-feedback" class="feedback" aria-live="polite">Ayo selesaikan misi!</div>
<button id="game-reset">🔄 Main Lagi</button>
</div>
<div class="panel">
<h3>🌟 Tantangan Berpikir</h3>
<p>Apakah semua air hujan langsung mengalir ke laut?</p>
<button id="challenge-answer">Lihat Jawaban</button>
<p id="challenge-text" class="feedback hidden">Tidak. Sebagian air meresap ke tanah, sebagian diserap tumbuhan, sebagian mengalir di permukaan, dan sebagian dapat kembali menguap.</p>
</div>
</section>
<section class="page" data-screen="kuis">
<h2>📝 Latihan 20 Soal</h2>
<div id="quiz-intro" class="panel center">
<span class="emoji">🏆</span>
<h3>Siap Menguji Pengetahuanmu?</h3>
<p>Tersedia 20 soal pilihan ganda. Pilih satu jawaban untuk setiap soal. Setelah menjawab, kamu akan mendapatkan pembahasan dan pada akhir latihan memperoleh nilai.</p>
<button id="quiz-start">Mulai Kuis</button>
</div>
<div id="quiz-play" class="panel hidden">
<p id="quiz-counter"></p>
<div class="progress"><span id="quiz-progress"></span></div>
<h3 id="quiz-question"></h3>
<div id="quiz-options" class="options"></div>
<div id="quiz-explanation" class="feedback hidden" aria-live="polite"></div>
<button id="quiz-next" disabled>Soal Berikutnya ➜</button>
</div>
<div id="quiz-result" class="panel center hidden">
<span class="emoji">🏅</span>
<h2>Hasil Belajarmu</h2>
<div class="stat" id="quiz-score"></div>
<h3 id="quiz-message"></h3>
<p id="quiz-correct-count"></p>
<div id="quiz-review" style="text-align:left"></div>
<button id="quiz-restart">Ulangi Kuis</button>
</div>
</section>
<footer>© 2026 • dikembangkan oleh Arief Qosim</footer>
</div>
<script>
(function(){
"use strict";
const root=document.getElementById("ipas-air-app");
if(!root||root.dataset.ready)return;
root.dataset.ready="1";
const $=id=>root.querySelector("#"+id);
const $$=s=>Array.from(root.querySelectorAll(s));
function showPage(name){
$$(".page").forEach(p=>p.classList.toggle("active",p.dataset.screen===name));
$$(".nav button").forEach(b=>b.classList.toggle("active",b.dataset.page===name));
root.scrollIntoView({behavior:"smooth",block:"start"});
}
$$("[data-page]").forEach(b=>b.addEventListener("click",()=>showPage(b.dataset.page)));
$$("[data-go]").forEach(b=>b.addEventListener("click",()=>showPage(b.dataset.go)));
const sliders=[
["air-temp","temp-value"],
["air-wind","wind-value"],
["air-humidity","humidity-value"],
["air-trees","trees-value"]
];
function updateSim(){
const t=+$("air-temp").value,w=+$("air-wind").value,
h=+$("air-humidity").value,v=+$("air-trees").value;
sliders.forEach(([a,b])=>$(b).textContent=$(a).value);
const clamp=n=>Math.max(0,Math.min(100,Math.round(n)));
const evap=clamp(45+(t-30)*2.4+w*2.5-(h-50)*.55);
const soil=clamp(20+v*.65);
$("evap-result").textContent=evap+"/100";
$("soil-result").textContent=soil+"/100";
$("evap-bar").style.width=evap+"%";
$("soil-bar").style.width=soil+"%";
$("vapor-lines").style.opacity=.2+evap/125;
$("sim-trees").style.opacity=.15+v/120;
$("sim-sun").setAttribute("r",28+(t-20)*.8);
$("sim-message").textContent=
evap>=65?"Penguapan relatif cepat pada kondisi ini. ":
evap<=35?"Penguapan relatif lambat pada kondisi ini. ":
"Penguapan berada pada tingkat sedang. ";
$("sim-message").textContent+=soil>=55?
"Banyak vegetasi diasumsikan membantu air meresap ke tanah.":
"Sedikit vegetasi diasumsikan membuat kemampuan resapan lebih rendah.";
}
sliders.forEach(([id])=>$(id).addEventListener("input",updateSim));
$("reset-sim").addEventListener("click",()=>{
const defaults=[30,3,50,50];
sliders.forEach(([id],i)=>$(id).value=defaults[i]);
updateSim();
});
updateSim();
const gameSteps=[
{id:"evap",label:"☀️ Evaporasi"},
{id:"cond",label:"☁️ Kondensasi"},
{id:"rain",label:"🌧️ Presipitasi"},
{id:"flow",label:"🏞️ Aliran ke laut"}
];
let gameSelected=[];
function renderGame(){
const choices=$("game-choices");
choices.innerHTML="";
const available=gameSteps.filter(s=>!gameSelected.includes(s.id));
available.sort((a,b)=>a.label.localeCompare(b.label));
available.forEach(s=>{
const b=document.createElement("button");
b.className="gamebtn";b.textContent=s.label;
b.addEventListener("click",()=>chooseGame(s.id));
choices.appendChild(b);
});
$("game-sequence").textContent=gameSelected.length?
gameSelected.map(id=>gameSteps.find(s=>s.id===id).label).join(" → "):
"Belum ada pilihan.";
}
function chooseGame(id){
const expected=gameSteps[gameSelected.length].id;
if(id!==expected){
$("game-feedback").textContent="❌ Belum tepat. Coba pikirkan proses berikutnya!";
return;
}
gameSelected.push(id);
if(gameSelected.length===gameSteps.length){
$("game-feedback").textContent="🎉 Hebat! Kamu berhasil menyusun perjalanan air. Ingat, siklus air sesungguhnya memiliki banyak jalur dan berlangsung terus-menerus.";
}else{
$("game-feedback").textContent="✅ Benar! Lanjutkan ke proses berikutnya.";
}
renderGame();
}
$("game-reset").addEventListener("click",()=>{
gameSelected=[];
$("game-feedback").textContent="Ayo selesaikan misi!";
renderGame();
});
$("challenge-answer").addEventListener("click",()=>{
$("challenge-text").classList.toggle("hidden");
});
renderGame();
const questions=[
["Apa yang dimaksud dengan siklus air?",["Perjalanan air yang berlangsung terus-menerus","Perubahan air menjadi batu","Air yang hanya berada di laut","Hujan yang terjadi sekali"],0,"Siklus air adalah peredaran air dari bumi ke atmosfer dan kembali lagi."],
["Sumber energi utama yang menggerakkan penguapan dalam siklus air adalah ...",["Bulan","Matahari","Bintang jatuh","Tanah"],1,"Energi matahari memanaskan air sehingga penguapan dapat terjadi."],
["Perubahan air cair menjadi uap air disebut ...",["Kondensasi","Infiltrasi","Evaporasi","Presipitasi"],2,"Evaporasi adalah proses perubahan air cair menjadi uap."],
["Proses uap air berubah menjadi titik-titik air disebut ...",["Kondensasi","Transpirasi","Aliran permukaan","Evaporasi"],0,"Kondensasi terjadi ketika uap air mendingin dan berubah menjadi cair."],
["Hujan merupakan contoh proses ...",["Evaporasi","Presipitasi","Transpirasi","Infiltrasi"],1,"Presipitasi adalah jatuhnya air dari awan ke bumi."],
["Air hujan yang masuk ke dalam tanah mengalami ...",["Penguapan","Pembekuan","Infiltrasi","Kondensasi"],2,"Infiltrasi merupakan proses masuknya air ke dalam tanah."],
["Pelepasan uap air oleh tumbuhan disebut ...",["Transpirasi","Presipitasi","Infiltrasi","Aliran permukaan"],0,"Tumbuhan melepaskan uap air terutama melalui stomata pada daun."],
["Ketika suhu permukaan air meningkat, penguapan umumnya ...",["Melambat","Berhenti","Tidak mungkin terjadi","Lebih cepat"],3,"Suhu lebih tinggi biasanya mempercepat evaporasi jika kondisi lain sama."],
["Angin dapat mempercepat penguapan karena ...",["Mengubah air menjadi tanah","Membawa udara lembap dari dekat permukaan air","Menghilangkan matahari","Membekukan air"],1,"Angin membantu memindahkan uap air dari dekat permukaan."],
["Pada kondisi lain yang sama, penguapan lebih cepat ketika udara ...",["Sangat lembap","Jenuh uap air","Lebih kering","Selalu dingin"],2,"Udara lebih kering memudahkan uap air masuk ke udara."],
["Awan dapat terbentuk dari ...",["Titik air kecil atau kristal es di atmosfer","Batu yang terbang","Pasir yang menguap","Air laut yang langsung membeku di pantai"],0,"Awan tersusun dari titik-titik air kecil dan/atau kristal es."],
["Air yang mengalir di atas tanah menuju sungai disebut ...",["Kondensasi","Transpirasi","Evaporasi","Aliran permukaan"],3,"Aliran permukaan terjadi ketika air bergerak di atas permukaan tanah."],
["Apa yang dapat terjadi jika banyak lahan ditutup beton?",["Peresapan selalu meningkat","Peresapan berkurang","Hujan pasti berhenti","Matahari tidak bersinar"],1,"Beton menghambat air meresap ke dalam tanah."],
["Mengapa pohon penting dalam siklus air?",["Menghentikan semua hujan","Mengubah awan menjadi batu","Membantu transpirasi dan peresapan air","Menghilangkan sungai"],2,"Pohon berperan dalam transpirasi dan membantu kondisi tanah untuk menyerap air."],
["Apa yang menyebabkan air dari awan jatuh sebagai hujan?",["Tetes air tumbuh cukup besar sehingga jatuh karena gravitasi","Matahari menarik tetesan air ke atas","Daun menarik awan","Angin mengubah hujan menjadi batu"],0,"Tetes air atau partikel es di awan dapat membesar hingga jatuh karena gravitasi."],
["Air tanah dapat terbentuk ketika ...",["Air laut berubah menjadi api","Air hujan meresap dan bergerak ke bawah tanah","Awan menjadi tanah","Angin berhenti"],1,"Air yang meresap dapat bergerak lebih dalam dan mengisi cadangan air tanah."],
["Apa akibat berkurangnya daerah resapan di kota?",["Tidak ada lagi uap air","Semua air berubah menjadi es","Sungai menghilang seketika","Risiko genangan dapat meningkat"],3,"Lebih sedikit air meresap sehingga lebih banyak air dapat mengalir di permukaan."],
["Siklus air berlangsung terus-menerus karena ...",["Air selalu habis setelah hujan","Hujan hanya terjadi di laut","Air terus berpindah dan berubah wujud","Awan tidak pernah bergerak"],2,"Air terus bergerak melalui proses yang didorong energi matahari dan gravitasi."],
["Saat air di piring diletakkan di tempat panas dan berangin, air cenderung ...",["Lebih cepat menguap","Menjadi pasir","Bertambah tanpa sebab","Langsung menjadi es"],0,"Panas dan angin umumnya membantu mempercepat penguapan."],
["Tindakan yang membantu menjaga resapan air adalah ...",["Menutup semua tanah dengan semen","Menanam pohon dan membuat area resapan","Membuang sampah ke sungai","Menebang semua pohon"],1,"Pepohonan dan area resapan membantu air hujan masuk ke tanah."]
];
let qIndex=0,answers=[],answered=false;
function startQuiz(){
qIndex=0;answers=[];answered=false;
$("quiz-intro").classList.add("hidden");
$("quiz-result").classList.add("hidden");
$("quiz-play").classList.remove("hidden");
renderQuestion();
}
function renderQuestion(){
answered=false;
const q=questions[qIndex];
$("quiz-counter").textContent="Soal "+(qIndex+1)+" dari "+questions.length;
$("quiz-progress").style.width=(qIndex/questions.length*100)+"%";
$("quiz-question").textContent=q[0];
$("quiz-options").innerHTML="";
$("quiz-explanation").classList.add("hidden");
$("quiz-next").disabled=true;
$("quiz-next").textContent=qIndex===questions.length-1?"Lihat Hasil 🏆":"Soal Berikutnya ➜";
q[1].forEach((option,i)=>{
const b=document.createElement("button");
b.textContent=String.fromCharCode(65+i)+". "+option;
b.addEventListener("click",()=>answerQuestion(i));
$("quiz-options").appendChild(b);
});
}
function answerQuestion(choice){
if(answered)return;
answered=true;
const q=questions[qIndex];
answers.push(choice);
const buttons=Array.from($("quiz-options").children);
buttons.forEach((b,i)=>{
b.disabled=true;
if(i===q[2])b.classList.add("correct");
else if(i===choice)b.classList.add("wrong");
});
$("quiz-explanation").textContent=
(choice===q[2]?"✅ Jawaban benar! ":"❌ Belum tepat. ")+q[3];
$("quiz-explanation").classList.remove("hidden");
$("quiz-next").disabled=false;
}
function showResult(){
$("quiz-play").classList.add("hidden");
$("quiz-result").classList.remove("hidden");
const correct=questions.reduce((n,q,i)=>n+(answers[i]===q[2]?1:0),0);
const score=correct*5;
$("quiz-score").textContent=score+" / 100";
$("quiz-correct-count").textContent=correct+" jawaban benar dari 20 soal.";
$("quiz-message").textContent=score>=80?
"🌟 Hebat! Kamu sudah memahami siklus air.":
score>=60?"👍 Bagus! Pelajari kembali beberapa bagian materi.":
"💪 Tetap semangat! Ayo belajar dan mencoba lagi.";
const review=$("quiz-review");
review.innerHTML="<h3>Pembahasan Jawaban</h3>";
questions.forEach((q,i)=>{
const p=document.createElement("div");
p.className="step";
const title=document.createElement("strong");
title.textContent=(i+1)+". "+(answers[i]===q[2]?"✅ ":"❌ ")+q[0];
const detail=document.createElement("p");
detail.textContent="Jawaban benar: "+q[1][q[2]]+". "+q[3];
p.append(title,detail);review.appendChild(p);
});
$("quiz-progress").style.width="100%";
}
$("quiz-start").addEventListener("click",startQuiz);
$("quiz-restart").addEventListener("click",startQuiz);
$("quiz-next").addEventListener("click",()=>{
if(!answered)return;
if(qIndex===questions.length-1)showResult();
else{qIndex++;renderQuestion();}
});
})();
</script>
Kemudian silakan dicopy kode tersebut, paste di html website anda. contohnya seperti tautan laman berikut.
https://ariefqosim.com/mpi-air-sumber-kehidupan/
Selamat mencoba !