Petualangan Kreatif Scratch

Selamat Datang, Calon Programmer!

Pernahkah kamu bermimpi membuat game atau animasi sendiri? Scratch adalah tempat keajaiban itu dimulai! Belajar coding bukan hanya tentang angka, tapi tentang menuangkan kreativitasmu.

Kreatif

Gabungkan gambar dan suara sesukamu.

Logika

Latih caramu memecahkan masalah.

Menyenangkan

Coding semudah menyusun puzzle LEGO!

Hebat! Kamu Sudah Belajar Dasar Scratch

Rangkuman Hari Ini:

Scratch adalah bahasa pemrograman visual (blok).
Komponen utama: Stage, Sprite, Palette, dan Coding Area.
Coding itu kreatif dan melatih logika kita.

Apa hal paling seru yang kamu temukan di Scratch hari ini?

<input id="student-name" type="text" placeholder="Masukkan Namamu" class="p-3 border rounded-xl focus:border-[#4C97FF] outline-none"> <button onclick="submitReflection()" id="btn-submit" class="w-full py-4 bg-[#4C97FF] hover:bg-[#3b82f6] text-white rounded-xl font-bold transition-all flex items-center justify-center gap-2"> Simpan Perjalananku <i data-lucide="send" class="w-4 h-4"></i> </button> </div> </div> <div id="submit-toast" class="hidden text-green-600 font-bold animate-bounce mt-4"> Tersimpan! Sampai jumpa di pelajaran berikutnya! 🚀 </div> </div> </bagian> </div> </main> <footer class="bg-white border-t p-4 text-center text-xs text-gray-400"> Dibuat untuk Siswa SMP Kelas 7 • Coding Itu Menyenangkan! 🐱 </footer> </div> <script> let config = { Welcome_title: "Selamat Datang, Calon Programmer!", Welcome_text: "Mari belajar membuat animasi dan game seru dengan Scratch! Belajar coding bukan hanya tentang angka, tapi tentang menuangkan kreativitasmu.", refleksi_question: "Apa hal paling seru yang kamu temukan di Scratch hari ini?", main_color: "#FFAB19" }; const defaultConfig = { ...konfigurasi }; // Mencocokkan Data Game const gameData = [ { term: "Stage", def: "Panggung tempat aksi ditampilkan" }, { term: "Sprite", def: "Karakter atau objek dalam proyek" }, { term: "Green Flag", def: "Tombol untuk memulai program" }, { term: "Block Palette", def: "Daftar kategori blok perintah" }, { term: "Coding Area", def: "Tempat menyusun blok perintah" }, { term: "Looping", def: "Blok untuk mengulang perintah" }, { term: "Motion", def: "Kategori blok untuk menggerakkan sprite" }, { term: "Looks", def: "Kategori blok untuk mengubah tampilan" } ]; biarkan SelectedTerm = null; biarkan dipilihDef = null; biarkan Skor saat ini = 0; biarkan Pasangan yang cocok = 0; biarkan isSaving = false; async function initApp() { if (window.elementSdk) { window.elementSdk.init({ defaultConfig, onConfigChange: async (newConfig) => { config = { ...config, ...newConfig }; updateUIFromConfig(); }, mapToCapabilities: (c) => ({ recolorables: [], fontEditable: undefined, fontSizeable: undefined }), mapToEditPanelValues: (c) => new Map([ ["welcome_title", c.welcome_title || defaultConfig.welcome_title], ["welcome_text", c.welcome_text || defaultConfig.welcome_text], ["reflection_question", c.reflection_question || defaultConfig.reflection_question] ]) }); } if (window.dataSdk) { await window.dataSdk.init({ onDataChanged: (data) => { renderLeaderboard(data); } }); } updateUIFromConfig(); initGame(); lucide.createIcons(); } function updateUIFromConfig() { document.getElementById('welcome-title').textContent = config.welcome_title; document.getElementById('welcome-text').textContent = config.welcome_text; document.getElementById('refleksi-label').textContent = config.reflection_question; } function changeTab(tabId) { // Sembunyikan semua tampilan ['intro', 'materi', 'game', 'refleksi'].forEach(id => { document.getElementById(`view-${id}`).classList.add('hidden'); document.getElementById(`tab-${id}`).classList.remove('tab-active'); document.getElementById(`tab-${id}`).classList.add('text-gray-500'); }); // Tampilkan dokumen saat ini. document.getElementById(`view-${tabId}`).classList.remove('hidden'); document.getElementById(`tab-${tabId}`).classList.add('tab-active'); document.getElementById(`tab-${tabId}`).classList.remove('text-gray-500'); lucide.createIcons(); } function checkQuickAnswer(isCorrect) { const feedback = document.createElement('div'); feedback.className = `fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-6 rounded-2xl shadow-2xl z-50 animate-in zoom-in duration-300 font-bold text-lg text-center ${isCorrect ? 'bg-green-500 text-white' : 'bg-red-500 text-white'}`; feedback.innerHTML = isCorrect ? '🎉 Benar! Kamu jenius!' : '😅 Kurang tepat, coba baca lagi ya!'; document.body.appendChild(feedback); setTimeout(() => { feedback.classList.replace('zoom-in', 'zoom-out'); setTimeout(() => feedback.remove(), 300); }, 1500); } // Logika Permainan Mencocokkan function initGame() { const termColumn = document.getElementById('terms-column'); const defColumn = document.getElementById('defs-column'); termColumn.innerHTML = ''; defColumn.innerHTML = ''; // Acak data const shuffledTerms = [...gameData].sort(() => Math.random() - 0.5); const shuffledDefs = [...gameData].sort(() => Math.random() - 0.5); shuffledTerms.forEach(item => { const div = document.createElement('div'); div.className = 'match-item p-3 border-2 rounded-xl text-sm font-bold bg-white text-gray-700 hover:border-[#9966FF]/40'; div.textContent = item.term; div.dataset.term = item.term; div.onclick = () => selectTerm(div); termColumn.appendChild(div); }); shuffledDefs.forEach(item => { const div = document.createElement('div'); div.className = 'match-item p-3 border-2 rounded-xl text-sm font-medium bg-white text-gray-600 hover:border-[#9966FF]/40'; div.textContent = item.def; div.dataset.def = item.def; div.onclick = () => selectDef(div); defColumn.appendChild(div); }); } function selectTerm(el) { if (el.classList.contains('correct')) return; document.querySelectorAll('#terms-column .match-item').forEach(i => i.classList.remove('selected')); el.classList.add('selected'); selectedTerm = el; checkMatch(); } function selectDef(el) { if (el.classList.contains('correct')) return; document.querySelectorAll('#defs-column .match-item').forEach(i => i.classList.remove('selected')); el.classList.add('selected'); selectedDef = el; checkMatch(); } function checkMatch() { if (selectedTerm && selectedDef) { const pair = gameData.find(p => p.term === selectedTerm.dataset.term); if (pair.def === selectedDef.dataset.def) { // Benar selectedTerm.className = 'match-item p-3 border-2 rounded-xl text-sm font-bold correct opacity-60'; selectedDef.className = 'match-item p-3 border-2 rounded-xl text-sm font-medium correct opacity-60'; currentScore += 10; matchedPairs++; document.getElementById('game-score').textContent = currentScore; if (matchedPairs === gameData.length) { showGameFeedback(true); } } else { // Salah const t = selectedTerm; const d = selectedDef; t.classList.add('wrong'); d.classList.add('wrong'); setTimeout(() => { t.classList.remove('wrong', 'selected'); d.classList.remove('wrong', 'selected'); }, 400); } selectedTerm = null; selectedDef = null; } } function showGameFeedback(isWin) { const fb = document.getElementById('game-feedback'); fb.classList.remove('hidden'); fb.className = 'mt-8 text-center p-6 round-2xl bg-green-100 text-green-800 animate-bounce font-bold'; fb.innerHTML = `🌟 KEREN! Kamu menyelesaikan semua pasangan! Skor Akhir:${currentScore}`; } function resetGame() { currentScore = 0; matchedPairs = 0; document.getElementById('game-score').textContent = '0'; document.getElementById('game-feedback').classList.add('hidden'); initGame(); } async function submitReflection() { if (isSaving) return; const name = document.getElementById('student-name').value.trim(); const note = document.getElementById('refleksi-input').value.trim(); if (!name) { showToast("Tolong tulis namamu dulu ya!", "red"); return; } isSaving = true; const btn = document.getElementById('btn-submit'); btn.disabled = true; btn.innerHTML = '<i data-lucide="loader" class="animate-spin"></i> Menyimpan...'; lucide.createIcons(); const result = await window.dataSdk.create({ student_name: name, score: currentScore, completed_at: new Date().toISOString() }); if (result.isOk) { document.getElementById('submit-toast').classList.remove('hidden'); setTimeout(() => { document.getElementById('submit-toast').classList.add('hidden'); }, 4000); } else { showToast("Ups, ada masalah saat menyimpan.", "red"); } isSaving = false; btn.disabled = false; btn.innerHTML = 'Simpan Perjalananku <i data-lucide="send" class="w-4 h-4"></i>'; lucide.createIcons(); } function renderLeaderboard(data) { const list = document.getElementById('score-list'); if (!data || data.length === 0) { list.innerHTML = '<p class="text-gray-400 italic">Belum ada skor tersimpan.</p>'; return; } list.innerHTML = data.slice(-5).reverse().map(item => ` <div class="flex justify-between items-center p-2 bg-gray-50 rounded-lg border border-gray-100"> <span class="font-bold text-gray-700">${item.student_name}</span> <div class="flex items-center gap-3"> <span class="text-xs text-gray-400">${new Date(item.completed_at).toLocaleDateString()}</span> <span class="bg-[#9966FF] text-white px-2 py-1 rounded text-xs font-bold">${item.score} pts</span> </div> </div> `).join(''); } function showToast(msg, color) { const t = document.createElement('div'); t.className = `fixed bottom-4 left-1/2 -translate-x-1/2 px-6 py-3 rounded-full shadow-lg text-white font-bold z-50 ${color === 'red' ? 'bg-red-500' : 'bg-green-500'}`; t.textContent = msg; document.body.appendChild(t); setTimeout(() => t.remove(), 3000); } initApp(); </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:'9dbfa43c874d8740',t:'MTc3MzQ1MzE3My4wMDAwMDA='};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>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>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>

Petualangan Scratch

Selamat Datang, Calon Programmer!

Kreatif

Logika

Menyenangkan

Mengenal Scratch

Panggung (Panggung)

Sprite

Block Palette

Coding Area

Aktivitas Cepat: Bisakah kamu menebak?

Tantangan Cocokkan!

Papan Skor Terbaru

Hebat! Kamu Sudah Belajar Dasar Scratch

Rangkuman Hari Ini: