Media Belajar Ide Pokok

<!doctype html>
<html lang="id" class="h-full">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Belajar Ide Pokok</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=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
  <style>
    * { font-family: 'Nunito', sans-serif; }
    .tab-active { background: #1e3a5f; color: white; }
    .tab-inactive { background: #e8f4fd; color: #1e3a5f; }
    .card-pop { animation: popIn 0.4s ease; }
    @keyframes popIn { from { opacity:0; transform: scale(0.9); } to { opacity:1; transform: scale(1); } }
    .sentence-btn { transition: all 0.2s; }
    .sentence-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    .correct-flash { animation: flashGreen 0.6s ease; }
    @keyframes flashGreen { 0%,100%{ background:#d1fae5; } 50%{ background:#6ee7b7; } }
    .wrong-flash { animation: flashRed 0.6s ease; }
    @keyframes flashRed { 0%,100%{ background:#fee2e2; } 50%{ background:#fca5a5; } }
    body { box-sizing: border-box; margin: 0; }
  </style>
</head>
<body class="h-full bg-white">
  <div id="app" class="h-full w-full bg-gradient-to-br from-sky-50 via-white to-amber-50 overflow-auto">
   
   <header class="bg-gradient-to-r from-sky-700 to-indigo-800 text-white p-5 shadow-lg relative">
    
    <button onclick="toggleFullScreen()" class="absolute top-4 right-4 p-2 bg-white/20 hover:bg-white/30 rounded-lg transition tooltip" title="Layar Penuh">
      <i data-lucide="maximize" id="fs-icon" class="w-5 h-5 text-white"></i>
    </button>
    
    <div class="text-center">
      <h1 id="main-title" class="text-2xl md:text-3xl font-extrabold tracking-tight">📚 Belajar Ide Pokok</h1>
      <p class="text-sky-200 text-sm mt-1">Bahasa Indonesia — SD Kelas 5</p>
    </div>
   </header>
   
   
   <nav class="flex gap-2 p-4 justify-center flex-wrap" role="navigation" aria-label="Menu utama">
    <button onclick="showSection('materi')" id="tab-materi" class="tab-active px-4 py-2 rounded-full font-bold text-sm">Materi</button> 
    <button onclick="showSection('latihan')" id="tab-latihan" class="tab-inactive px-4 py-2 rounded-full font-bold text-sm">Latihan</button> 
    <button onclick="showSection('kuis')" id="tab-kuis" class="tab-inactive px-4 py-2 rounded-full font-bold text-sm">Kuis</button>
   </nav>

<main id="sec-materi" class="max-w-3xl mx-auto p-4 space-y-5 card-pop">
    <section class="bg-white rounded-2xl p-5 shadow-md border-l-4 border-sky-500">
     <h2 class="text-lg font-bold text-sky-800 flex items-center gap-2"><i data-lucide="lightbulb" class="w-5 h-5 text-amber-500"></i> Apa Itu Ide Pokok?</h2>
     <p class="mt-2 text-gray-700 leading-relaxed">Ide pokok adalah <strong>gagasan utama</strong> atau inti dari sebuah paragraf. Ide pokok menjawab pertanyaan: <em>"Paragraf ini membahas tentang apa?"</em></p>
    </section>
    <section class="bg-white rounded-2xl p-5 shadow-md border-l-4 border-emerald-500">
     <h2 class="text-lg font-bold text-emerald-800 flex items-center gap-2"><i data-lucide="bookmark" class="w-5 h-5 text-emerald-500"></i> Kalimat Utama</h2>
     <p class="mt-2 text-gray-700 leading-relaxed">Kalimat utama adalah kalimat yang <strong>mengandung ide pokok</strong>. Biasanya terletak di <strong>awal</strong> atau <strong>akhir</strong> paragraf. Kalimat utama bersifat umum.</p>
    </section>
    <section class="bg-white rounded-2xl p-5 shadow-md border-l-4 border-purple-500">
     <h2 class="text-lg font-bold text-purple-800 flex items-center gap-2"><i data-lucide="list" class="w-5 h-5 text-purple-500"></i> Kalimat Penjelas</h2>
     <p class="mt-2 text-gray-700 leading-relaxed">Kalimat penjelas adalah kalimat yang <strong>mendukung dan menjelaskan</strong> ide pokok. Kalimat penjelas berisi rincian, contoh, atau alasan. Bersifat <strong>khusus</strong>.</p>
    </section>
    <section class="bg-amber-50 rounded-2xl p-5 shadow-md border-l-4 border-amber-500">
     <h2 class="text-lg font-bold text-amber-800 flex items-center gap-2"><i data-lucide="file-text" class="w-5 h-5 text-amber-600"></i> Contoh</h2>
     <div class="mt-3 bg-white rounded-xl p-4 border">
      <p class="text-gray-800 leading-relaxed"><span class="bg-sky-100 text-sky-800 font-bold px-1 rounded">① Kucing adalah hewan peliharaan yang populer.</span> <span class="text-gray-600"> ② Banyak orang menyukai kucing karena bulunya yang lembut. ③ Kucing juga mudah dirawat dan tidak memerlukan tempat yang luas. ④ Selain itu, kucing bisa menjadi teman bermain yang menyenangkan.</span></p>
     </div>
     <div class="mt-3 text-sm space-y-1">
      <p><span class="font-bold text-sky-700">🔑 Ide Pokok:</span> Kucing adalah hewan peliharaan yang populer</p>
      <p><span class="font-bold text-sky-700">📌 Kalimat Utama:</span> Kalimat ①</p>
      <p><span class="font-bold text-sky-700">📝 Kalimat Penjelas:</span> Kalimat ②, ③, ④</p>
     </div>
    </section>
    <section class="bg-sky-50 rounded-2xl p-5 shadow-md border-l-4 border-sky-400">
     <h2 class="text-lg font-bold text-sky-800 flex items-center gap-2"><i data-lucide="search" class="w-5 h-5 text-sky-500"></i> Cara Menemukan Ide Pokok</h2>
     <ol class="mt-2 text-gray-700 space-y-2 list-decimal list-inside">
      <li>Baca seluruh paragraf dengan cermat</li>
      <li>Cari kalimat yang bersifat <strong>umum</strong> (biasanya di awal/akhir)</li>
      <li>Periksa: apakah kalimat lain menjelaskan kalimat tersebut?</li>
      <li>Jika ya, itulah kalimat utama dan ide pokoknya!</li>
     </ol>
    </section>
   </main>

<section id="sec-latihan" class="max-w-3xl mx-auto p-4 hidden card-pop">
    <div class="bg-white rounded-2xl p-5 shadow-md">
     <h2 class="text-lg font-bold text-sky-800 mb-3">🎯 Latihan: Temukan Kalimat Utama!</h2>
     <p class="text-sm text-gray-500 mb-4">Klik kalimat yang menurutmu adalah <strong>kalimat utama</strong>.</p>
     <div id="latihan-area"></div>
     <div id="latihan-feedback" class="mt-4 text-center font-bold text-lg hidden"></div>
     <div class="text-center mt-4"><button onclick="nextLatihan()" class="bg-sky-600 hover:bg-sky-700 text-white px-5 py-2 rounded-full font-bold text-sm transition">Soal Berikutnya →</button>
     </div>
    </div>
   </section>

<section id="sec-kuis" class="max-w-3xl mx-auto p-4 hidden card-pop">
    <div class="bg-white rounded-2xl p-5 shadow-md">
     <div id="kuis-header" class="flex justify-between items-center mb-4">
      <h2 class="text-lg font-bold text-sky-800">📝 Kuis</h2><span id="kuis-score" class="bg-emerald-100 text-emerald-800 px-3 py-1 rounded-full text-sm font-bold">Skor: 0/0</span>
     </div>
     <div id="kuis-area"></div>
     <div id="kuis-result" class="hidden text-center py-8">
      <div class="text-5xl mb-3">🏆</div>
      <p id="kuis-final" class="text-xl font-bold text-sky-800"></p>
      <button onclick="startKuis()" class="mt-4 bg-sky-600 hover:bg-sky-700 text-white px-5 py-2 rounded-full font-bold text-sm">Ulangi Kuis</button>
     </div>
    </div>
   </section>
  </div>

// Mengubah icon maximize <-> minimize saat layar berubah
    document.addEventListener('fullscreenchange', () => {
      const icon = document.getElementById('fs-icon');
      if (document.fullscreenElement) {
        icon.setAttribute('data-lucide', 'minimize');
      } else {
        icon.setAttribute('data-lucide', 'maximize');
      }
      lucide.createIcons(); // render ulang icon
    });

// Data
    const paragraphs = [
      { sentences: ["Olahraga sangat penting untuk kesehatan tubuh.", "Dengan berolahraga, tubuh menjadi lebih kuat dan bugar.", "Olahraga juga dapat mencegah berbagai penyakit.", "Selain itu, olahraga membuat pikiran menjadi segar."], answer: 0 },
      { sentences: ["Buah mangga memiliki rasa yang manis.", "Buah mangga mengandung vitamin C yang tinggi.", "Buah mangga adalah salah satu buah tropis yang banyak digemari masyarakat Indonesia.", "Buah ini mudah ditemukan di pasar tradisional maupun supermarket."], answer: 2 },
      { sentences: ["Air hujan dapat ditampung untuk menyiram tanaman.", "Kita bisa menghemat air dengan mematikan keran saat tidak digunakan.", "Menjaga kebersihan sungai juga termasuk cara melestarikan air.", "Melestarikan air bersih adalah tanggung jawab kita semua."], answer: 3 },
      { sentences: ["Sampah plastik sulit terurai dan mencemari tanah.", "Asap kendaraan juga menyebabkan polusi udara.", "Pencemaran lingkungan menjadi masalah serius di kota-kota besar.", "Limbah pabrik yang dibuang ke sungai merusak ekosistem air."], answer: 2 },
      { sentences: ["Membaca buku adalah kegiatan yang sangat bermanfaat.", "Dengan membaca, kita bisa menambah ilmu pengetahuan.", "Membaca juga melatih kemampuan berpikir kritis.", "Selain itu, membaca dapat memperkaya kosa kata kita."], answer: 0 },
    ];

const kuisData = [
      { question: "Ide pokok adalah...", options: ["Kalimat pertama paragraf", "Gagasan utama dalam paragraf", "Kalimat terakhir paragraf", "Judul paragraf"], answer: 1 },
      { question: "Kalimat utama biasanya bersifat...", options: ["Khusus", "Umum", "Panjang", "Pendek"], answer: 1 },
      { question: "Kalimat penjelas berfungsi untuk...", options: ["Mengganti ide pokok", "Mendukung dan menjelaskan ide pokok", "Membuat paragraf lebih panjang", "Mengulang kalimat utama"], answer: 1 },
      { question: "Di mana kalimat utama biasanya terletak?", options: ["Hanya di tengah", "Hanya di awal", "Di awal atau akhir paragraf", "Tidak ada di paragraf"], answer: 2 },
      { question: "Manakah ciri kalimat penjelas?", options: ["Bersifat umum", "Berisi rincian, contoh, atau alasan", "Selalu di awal paragraf", "Tidak berhubungan dengan ide pokok"], answer: 1 },
    ];

let latihanIdx = 0, kuisIdx = 0, kuisScore = 0;

// Sections
    function showSection(name) {
      ['materi','latihan','kuis'].forEach(s => {
        document.getElementById('sec-'+s).classList.toggle('hidden', s!==name);
        document.getElementById('tab-'+s).className = s===name ? 'tab-active px-4 py-2 rounded-full font-bold text-sm' : 'tab-inactive px-4 py-2 rounded-full font-bold text-sm';
      });
      if(name==='latihan') renderLatihan();
      if(name==='kuis') startKuis();
    }

// Latihan
    function renderLatihan() {
      const p = paragraphs[latihanIdx % paragraphs.length];
      const area = document.getElementById('latihan-area');
      document.getElementById('latihan-feedback').classList.add('hidden');
      area.innerHTML = p.sentences.map((s,i) => `<button onclick="checkLatihan(${i},${p.answer})" class="sentence-btn block w-full text-left p-3 mb-2 rounded-xl border-2 border-gray-200 bg-gray-50 hover:border-sky-400 hover:bg-sky-50 text-gray-800">${i+1}. ${s}</button>`).join('');
    }
    
    function checkLatihan(picked, correct) {
      const fb = document.getElementById('latihan-feedback');
      fb.classList.remove('hidden');
      const btns = document.querySelectorAll('#latihan-area button');
      btns.forEach((b,i) => {
        b.disabled = true;
        if(i===correct) { b.classList.add('correct-flash'); b.style.borderColor='#10b981'; b.style.background='#d1fae5'; }
        else if(i===picked && picked!==correct) { b.classList.add('wrong-flash'); b.style.borderColor='#ef4444'; b.style.background='#fee2e2'; }
      });
      fb.innerHTML = picked===correct ? '<span class="text-emerald-600">✅ Benar! Hebat!</span>' : '<span class="text-red-500">❌ Kurang tepat. Perhatikan kalimat yang bersifat umum.</span>';
    }
    
    function nextLatihan() { latihanIdx++; renderLatihan(); }

// Kuis
    function startKuis() {
      kuisIdx=0; kuisScore=0;
      document.getElementById('kuis-result').classList.add('hidden');
      document.getElementById('kuis-area').classList.remove('hidden');
      updateScore(); renderKuis();
    }
    
    function renderKuis() {
      if(kuisIdx >= kuisData.length) { endKuis(); return; }
      const q = kuisData[kuisIdx];
      const area = document.getElementById('kuis-area');
      area.innerHTML = `<p class="font-bold text-gray-800 mb-3">${kuisIdx+1}. ${q.question}</p>` +
        q.options.map((o,i) => `<button onclick="answerKuis(${i})" class="sentence-btn block w-full text-left p-3 mb-2 rounded-xl border-2 border-gray-200 bg-gray-50 hover:border-indigo-400 hover:bg-indigo-50 text-gray-700">${String.fromCharCode(65+i)}. ${o}</button>`).join('');
    }
    
    function answerKuis(i) {
      if(i===kuisData[kuisIdx].answer) kuisScore++;
      kuisIdx++; updateScore(); renderKuis();
    }
    
    function updateScore() { document.getElementById('kuis-score').textContent = `Skor: ${kuisScore}/${kuisIdx}`; }
    
    function endKuis() {
      document.getElementById('kuis-area').classList.add('hidden');
      document.getElementById('kuis-result').classList.remove('hidden');
      const pct = Math.round(kuisScore/kuisData.length*100);
      document.getElementById('kuis-final').textContent = `Skor Akhir: ${kuisScore}/${kuisData.length} (${pct}%)`;
    }

lucide.createIcons();
  </script>
</body>
</html>

INIBUDI | Jejak Mahasiswa

Media Belajar Ide Pokok

Post a Comment

Aksi Nyata : Kurikulum Perlu Diubah! Simak apa alasannya kurikulum harus diubah!

Merdeka Belajar: Membangun Pendidikan yang Memerdekakan

Abjad A

Latihan OSN SD 2024

Peran Pendidikan dalam Membangun Bangsa