// Game state
       let gameState = {
           budget: 500000,
           usedBudget: 0,
           selectedMaterial: null,
           bridgeParts: {
               'foundation-left': null,
               'foundation-right': null,
               'deck': null,
               'cables': null
           },
           isBuilt: false,
           testLoad: 3,
           isCollapsed: false
       };

       // Material properties
       const materials = {
           kayu: { name: 'Kayu', cost: 50000, strength: 3, flexibility: 4, waterResistance: 2, color: '#D2691E', emoji: '🪵' },
           beton: { name: 'Beton', cost: 100000, strength: 5, flexibility: 2, waterResistance: 5, color: '#696969', emoji: '🧱' },
           baja: { name: 'Baja', cost: 150000, strength: 5, flexibility: 5, waterResistance: 3, color: '#708090', emoji: '🔩' },
           bambu: { name: 'Bambu', cost: 30000, strength: 2, flexibility: 5, waterResistance: 2, color: '#228B22', emoji: '🎋' }
       };

       // Initialize the game
       function initGame() {
           updateDisplay();
           setupEventListeners();
           updateLoadValue(); // Initialize load slider display
       }

       function updateDisplay() {
           document.getElementById('budget').textContent = `Rp ${gameState.budget.toLocaleString('id-ID')}`;
           document.getElementById('usedBudget').textContent = `Rp ${gameState.usedBudget.toLocaleString('id-ID')}`;
           
           // Update test button state
           const testButton = document.getElementById('testButton');
           const allPartsBuilt = Object.values(gameState.bridgeParts).every(part => part !== null);
           testButton.disabled = !allPartsBuilt;
           testButton.classList.toggle('opacity-50', !allPartsBuilt);
       }

       function setupEventListeners() {
           // Material selection
           document.querySelectorAll('.material-card').forEach(card => {
               card.addEventListener('click', () => selectMaterial(card.dataset.material));
           });

           // Bridge part selection
           document.querySelectorAll('.bridge-part').forEach(part => {
               part.addEventListener('click', () => buildPart(part.dataset.part));
           });

           // Load slider
           document.getElementById('loadSlider').addEventListener('input', updateLoadValue);

           // Control buttons
           document.getElementById('buildButton').addEventListener('click', buildBridge);
           document.getElementById('testButton').addEventListener('click', testBridge);
           document.getElementById('resetButton').addEventListener('click', resetGame);
       }

       function updateLoadValue() {
           const slider = document.getElementById('loadSlider');
           const loadValue = document.getElementById('loadValue');
           const loadDescription = document.getElementById('loadDescription');
           
           gameState.testLoad = parseInt(slider.value);
           loadValue.textContent = `${gameState.testLoad} ton`;
           
           const descriptions = {
               1: "Beban Sangat Ringan - Sepeda motor",
               2: "Beban Ringan - Mobil kecil", 
               3: "Beban Sedang - Mobil sedan",
               4: "Beban Menengah - SUV",
               5: "Beban Berat - Truk kecil",
               6: "Beban Sangat Berat - Truk sedang",
               7: "Beban Ekstrem - Truk besar",
               8: "Beban Berbahaya - Truk trailer",
               9: "Beban Kritis - Truk kontainer",
               10: "Beban Maksimal - Truk gandeng"
           };
           
           loadDescription.textContent = descriptions[gameState.testLoad];
       }

       function selectMaterial(materialType) {
           gameState.selectedMaterial = materialType;
           
           // Update UI
           document.querySelectorAll('.material-card').forEach(card => {
               card.classList.remove('selected');
           });
           document.querySelector(`[data-material="${materialType}"]`).classList.add('selected');
           
           updateInfoPanel(`Material ${materials[materialType].name} dipilih! Klik bagian jembatan untuk membangunnya.`);
       }

       function buildPart(partName) {
           if (!gameState.selectedMaterial) {
               updateInfoPanel('Pilih material terlebih dahulu!', 'warning');
               return;
           }

           const material = materials[gameState.selectedMaterial];
           const cost = material.cost;

           if (gameState.usedBudget + cost > gameState.budget) {
               updateInfoPanel('Anggaran tidak cukup! Pilih material yang lebih murah.', 'error');
               return;
           }

           // Update game state
           gameState.bridgeParts[partName] = gameState.selectedMaterial;
           gameState.usedBudget += cost;

           // Update visual
           const partElement = document.getElementById(partName);
           partElement.style.backgroundColor = material.color;
           partElement.style.borderColor = material.color;
           
           // Add material emoji
           const existingEmoji = partElement.querySelector('.material-emoji');
           if (existingEmoji) existingEmoji.remove();
           
           const emojiSpan = document.createElement('span');
           emojiSpan.className = 'material-emoji absolute top-0 right-0 text-lg';
           emojiSpan.textContent = material.emoji;
           partElement.appendChild(emojiSpan);

           updateDisplay();
           updateInfoPanel(`${material.name} dipasang pada ${getPartDisplayName(partName)}! Biaya: Rp ${cost.toLocaleString('id-ID')}`);
       }

       function buildBridge() {
           const allPartsBuilt = Object.values(gameState.bridgeParts).every(part => part !== null);
           
           if (!allPartsBuilt) {
               updateInfoPanel('Lengkapi semua bagian jembatan terlebih dahulu!', 'warning');
               return;
           }

           gameState.isBuilt = true;
           updateInfoPanel('Jembatan selesai dibangun! Sekarang Anda bisa mengujinya.', 'success');
           
           // Enable test button
           document.getElementById('testButton').disabled = false;
           document.getElementById('testButton').classList.remove('opacity-50');
       }

       function testBridge() {
           if (!gameState.isBuilt || gameState.isCollapsed) return;

           // Calculate bridge strength
           let totalStrength = 0;
           let totalFlexibility = 0;
           let totalWaterResistance = 0;

           Object.values(gameState.bridgeParts).forEach(materialType => {
               const material = materials[materialType];
               totalStrength += material.strength;
               totalFlexibility += material.flexibility;
               totalWaterResistance += material.waterResistance;
           });

           const averageStrength = totalStrength / 4;
           const averageFlexibility = totalFlexibility / 4;
           const averageWaterResistance = totalWaterResistance / 4;

           // Calculate load capacity vs test load
           const bridgeCapacity = averageStrength * 2; // Each strength point = 2 ton capacity
           const loadStress = gameState.testLoad / bridgeCapacity;
           
           // Animate truck crossing
           const truck = document.getElementById('testTruck');
           truck.classList.remove('hidden');
           truck.style.left = '-100px';
           
           // Update truck size based on load
           const truckEmoji = truck.querySelector('div');
           if (gameState.testLoad <= 3) {
               truckEmoji.textContent = '🚗';
           } else if (gameState.testLoad <= 6) {
               truckEmoji.textContent = '🚛';
           } else {
               truckEmoji.textContent = '🚚';
           }
           
           setTimeout(() => {
               truck.style.left = 'calc(100% + 50px)';
           }, 100);

           // Add bridge animation based on load stress
           document.querySelectorAll('.bridge-part').forEach(part => {
               if (loadStress > 1.2) {
                   // Overloaded - show cracks first
                   part.classList.add('crack-effect');
               } else {
                   part.classList.add('test-animation');
               }
           });

           // Determine test result
           setTimeout(() => {
               const success = loadStress <= 1.0;
               const catastrophicFailure = loadStress > 1.5;
               
               if (catastrophicFailure) {
                   // Bridge collapses
                   gameState.isCollapsed = true;
                   document.querySelectorAll('.bridge-part').forEach(part => {
                       part.classList.remove('test-animation', 'crack-effect');
                       part.classList.add('collapse-animation');
                   });
                   showTestResult(false, averageStrength, averageFlexibility, averageWaterResistance, true, loadStress);
               } else {
                   showTestResult(success, averageStrength, averageFlexibility, averageWaterResistance, false, loadStress);
                   
                   // Reset animations
                   document.querySelectorAll('.bridge-part').forEach(part => {
                       part.classList.remove('test-animation', 'crack-effect');
                       if (success) {
                           part.classList.add('success-glow');
                       } else {
                           part.classList.add('failure-shake');
                       }
                   });
               }

               setTimeout(() => {
                   truck.classList.add('hidden');
                   if (!gameState.isCollapsed) {
                       document.querySelectorAll('.bridge-part').forEach(part => {
                           part.classList.remove('success-glow', 'failure-shake');
                       });
                   }
               }, 2000);
           }, 3000);
       }

       function showTestResult(success, strength, flexibility, waterResistance, collapsed, loadStress) {
           const resultDisplay = document.getElementById('resultDisplay');
           const resultMessage = document.getElementById('resultMessage');
           const capacity = strength * 2;
           
           if (collapsed) {
               resultMessage.className = 'inline-block px-6 py-3 rounded-lg font-bold text-lg bg-red-100 text-red-800 border border-red-300';
               resultMessage.innerHTML = `
                   💥 JEMBATAN RUNTUH! 💥<br>
                   <span class="text-sm">Beban ${gameState.testLoad} ton terlalu berat untuk kapasitas ${capacity.toFixed(1)} ton!<br>
                   Stress: ${(loadStress * 100).toFixed(0)}% | Kekuatan: ${strength.toFixed(1)} | Fleksibilitas: ${flexibility.toFixed(1)}</span>
               `;
           } else if (success) {
               resultMessage.className = 'inline-block px-6 py-3 rounded-lg font-bold text-lg bg-green-100 text-green-800 border border-green-300';
               resultMessage.innerHTML = `
                   🎉 JEMBATAN AMAN! 🎉<br>
                   <span class="text-sm">Beban ${gameState.testLoad} ton berhasil dilalui!<br>
                   Kapasitas: ${capacity.toFixed(1)} ton | Stress: ${(loadStress * 100).toFixed(0)}% | Kekuatan: ${strength.toFixed(1)}</span>
               `;
           } else {
               resultMessage.className = 'inline-block px-6 py-3 rounded-lg font-bold text-lg bg-yellow-100 text-yellow-800 border border-yellow-300';
               resultMessage.innerHTML = `
                   ⚠️ JEMBATAN RETAK! ⚠️<br>
                   <span class="text-sm">Beban ${gameState.testLoad} ton menyebabkan kerusakan!<br>
                   Kapasitas: ${capacity.toFixed(1)} ton | Stress: ${(loadStress * 100).toFixed(0)}% | Berbahaya!</span>
               `;
           }
           
           resultDisplay.classList.remove('hidden');
           
           setTimeout(() => {
               resultDisplay.classList.add('hidden');
           }, 5000);
       }

       function resetGame() {
           gameState = {
               budget: 500000,
               usedBudget: 0,
               selectedMaterial: null,
               bridgeParts: {
                   'foundation-left': null,
                   'foundation-right': null,
                   'deck': null,
                   'cables': null
               },
               isBuilt: false,
               testLoad: 3,
               isCollapsed: false
           };

           // Reset visual elements
           document.querySelectorAll('.bridge-part').forEach(part => {
               part.style.backgroundColor = '#9CA3AF';
               part.style.borderColor = '#6B7280';
               part.style.transform = '';
               part.style.opacity = '';
               part.classList.remove('collapse-animation', 'crack-effect', 'success-glow', 'failure-shake', 'test-animation');
               const emoji = part.querySelector('.material-emoji');
               if (emoji) emoji.remove();
           });

           document.querySelectorAll('.material-card').forEach(card => {
               card.classList.remove('selected');
           });

           // Reset load slider
           document.getElementById('loadSlider').value = 3;
           updateLoadValue();

           updateDisplay();
           updateInfoPanel('Game direset! Mulai membangun jembatan baru.');
       }

       function updateInfoPanel(message, type = 'info') {
           const infoPanel = document.getElementById('infoPanel');
           const colors = {
               info: 'bg-blue-50 border-blue-200 text-blue-700',
               success: 'bg-green-50 border-green-200 text-green-700',
               warning: 'bg-yellow-50 border-yellow-200 text-yellow-700',
               error: 'bg-red-50 border-red-200 text-red-700'
           };
           
           infoPanel.className = `mt-6 p-4 border rounded-lg ${colors[type]}`;
           infoPanel.innerHTML = `<h3 class="font-bold mb-2">💡 Info:</h3><p class="text-sm">${message}</p>`;
       }

       function getPartDisplayName(partName) {
           const names = {
               'foundation-left': 'Pondasi Kiri',
               'foundation-right': 'Pondasi Kanan',
               'deck': 'Lantai Jembatan',
               'cables': 'Kabel Penyangga'
           };
           return names[partName] || partName;
       }

       // Element SDK implementation
       async function onConfigChange(config) {
           document.getElementById('gameTitle').textContent = config.game_title || defaultConfig.game_title;
           document.getElementById('budgetLabel').textContent = config.budget_label || defaultConfig.budget_label;
           document.getElementById('materialsHeader').textContent = config.materials_header || defaultConfig.materials_header;
           document.getElementById('buildButton').innerHTML = `${config.build_button || defaultConfig.build_button}`;
           document.getElementById('testButton').innerHTML = `${config.test_button || defaultConfig.test_button}`;
       }

       function mapToCapabilities(config) {
           return {
               recolorables: [],
               borderables: [],
               fontEditable: undefined,
               fontSizeable: undefined
           };
       }

       function mapToEditPanelValues(config) {
           return new Map([
               ["game_title", config.game_title || defaultConfig.game_title],
               ["budget_label", config.budget_label || defaultConfig.budget_label],
               ["materials_header", config.materials_header || defaultConfig.materials_header],
               ["build_button", config.build_button || defaultConfig.build_button],
               ["test_button", config.test_button || defaultConfig.test_button]
           ]);
       }

       // Initialize Element SDK
       if (window.elementSdk) {
           window.elementSdk.init({
               defaultConfig,
               onConfigChange,
               mapToCapabilities,
               mapToEditPanelValues
           });
       }

       // Start the game
       initGame();
   </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:'99dd500fa600229b',t:'MTc2MzAyNjg4MC4wMDAwMDA='};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>

📘 Lembar Analisis Kasus Pembelajaran

Petunjuk Umum:

1. Bacalah setiap kasus dengan cermat.

2. Analisis situasi yang terjadi, kemudian tuliskan:

   1. Identifikasi masalah pembelajaran.

   2. Solusi atau langkah-langkah yang dapat diterapkan guru.

   3. Strategi pembelajaran aktif dan penguatan berpikir kritis yang relevan.

   4. Nilai karakter yang dapat dikembangkan.

3. Gunakan pengalaman Anda di sekolah untuk mendukung jawaban.

💡 Catatan: Isilah bagian jawaban berdasarkan kasus nyata atau pengalaman Anda sendiri di sekolah.

Tujuan: Peserta didik mampu membuat desain kolam penampungan air ukuran 4 meter x 6 meter menggunakan SketchUp secara mandiri.

Langkah-langkah:

1. Buka SketchUp dan pilih satuan dalam meter.

   

2. Pilih Tools Rectangle di toolbar.

   

3. Klik di area kerja, lalu ketik 6,4 pada keyboard dan tekan Enter untuk membuat dasar kolam berukuran 6 m x 4 m.
4. Pilih Push/Pull Tool (ikon balok naik-turun), arahkan ke bidang persegi panjang tadi, lalu tarik ke atas untuk membuat ketinggian kolam (misalnya 2 meter).
5. Setelah dinding kolam terbentuk, pilih Offset Tool, klik sisi atas kolam, lalu geser ke arah luar sejauh 0.5 meter untuk membentuk ketebalan dinding kolam.
6. Gunakan kembali Push/Pull Tool pada bidang tengah (bagian dalam) dan dorong ke bawah hingga mencapai dasar kolam, sehingga ruang kolam menjadi tampak kosong di dalam.
7. Hapus permukaan bagian atas kolam (cover) agar bagian dalam kolam terlihat jelas.
8. Pilih Paint Bucket Tool untuk memberikan pewarnaan. Gunakan warna biru muda atau tekstur air pada bagian dalam kolam yang akan dilapisi terpal.

Catatan: Pastikan tampilan orbit digunakan (tekan tombol tengah mouse dan geser) agar dapat melihat seluruh sisi kolam secara tiga dimensi.

Hasil Akhir: Model 3D kolam ukuran 4 x 6 meter dengan dinding setebal 0,5 meter dan warna bagian dalam menyerupai kolam berlapis terpal.

workflow video : https://wan.video

phet simulation

Polypad untuk bermain math

https://www.ginifab.com/feeds/angle_measurement/ (busur online)

https://sketchfab.com/ . Untuk IPa

Text : gemini