Pilih Berdasarkan Kelas:
Pilih Berdasarkan Mata Pelajaran:
š Pilih Materi Pelajaran Belajar
Kelas 7
Games
Program Kerja Sekolah
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PID Rencana Kerja Matching Board - Maluku Tengah</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* Sentuhan Kearifan Lokal (Pola Gelombang Laut Faint/Tipis) */
body {
font-family: 'Work Sans', sans-serif;
background-color: #f0f7f4;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.347-4.333 2.92-8.333 7.72-8.333 4.8 0 7.373 4 7.72 8.333H40.23c-.347-4.333-2.92-8.333-7.72-8.333-4.8 0-7.373 4-7.72 8.333h-3.606zM0 20c.347-4.333 2.92-8.333 7.72-8.333 4.8 0 7.373 4 7.72 8.333H11.83c-.347-4.333-2.92-8.333-7.72-8.333-4.8 0-7.373 4-7.72 8.333H0z' fill='%230f766e' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}
/* Desain Sticky Notes Realistis */
.task-card {
position: relative;
transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
cursor: grab;
border-bottom-right-radius: 12px 2px;
}
/* Elemen Selotip Transparan */
.task-card::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%) rotate(-2deg);
width: 35px;
height: 14px;
background: rgba(255, 255, 255, 0.45);
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
z-index: 10;
border-radius: 2px;
backdrop-filter: blur(2px);
}
.task-bank-container .task-card:hover {
transform: translateY(-3px) rotate(0deg) !important;
box-shadow: 0 12px 20px rgba(0,0,0,0.15);
z-index: 20;
}
.task-card:active { cursor: grabbing; }
.task-card.dragging { opacity: 0.6; transform: scale(0.95) rotate(0deg) !important; z-index: 50; }
.slot-box { transition: all 0.3s ease; }
.slot-box.drag-over {
background-color: #f8fafc;
border-color: #0f766e;
transform: scale(1.02);
box-shadow: inset 0 0 15px rgba(15, 118, 110, 0.1);
}
.slot-box .task-card {
transform: none !important;
margin-top: 8px;
padding: 8px 10px;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
font-size: 0.8em;
cursor: pointer;
width: 100%;
}
.slot-box .task-card p { font-size: 0.75rem; line-height: 1.25; }
.task-bank-container::-webkit-scrollbar { width: 8px; }
.task-bank-container::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 8px; }
.task-bank-container::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 8px; }
.task-bank-container::-webkit-scrollbar-thumb:hover { background: #64748b; }
.correct-ans { border: 2px solid #22c55e !important; background-color: #dcfce7 !important; }
.wrong-ans { border: 2px solid #ef4444 !important; background-color: #fee2e2 !important; }
</style>
</head>
<body class="min-h-screen p-4 md:p-6 text-slate-800">
<main class="max-w-[1400px] mx-auto bg-white/95 backdrop-blur-sm rounded-3xl shadow-2xl p-6 md:p-8 border border-teal-100">
<!-- Header -->
<header class="text-center mb-8">
<h1 class="text-2xl md:text-3xl font-extrabold text-slate-900 leading-tight">
PID: RENCANA KERJA & TANGGUNG JAWAB UNIT
</h1>
<h2 class="text-lg md:text-xl font-semibold mt-1 text-teal-700">
SMP NEGERI 72 MALUKU TENGAH
</h2>
<div class="w-48 h-1.5 bg-gradient-to-r from-blue-700 via-teal-500 to-green-400 mx-auto mt-4 rounded-full"></div>
</header>
<!-- Main Layout -->
<div class="flex flex-col lg:flex-row gap-6 xl:gap-8">
<!-- SISI KIRI: DEPARTEMEN -->
<section class="w-full lg:w-3/5 bg-slate-50/80 p-5 rounded-2xl border border-slate-200 shadow-inner h-[800px] overflow-y-auto task-bank-container relative">
<div class="flex justify-between items-center mb-4 sticky top-0 bg-slate-50/95 backdrop-blur-md z-30 py-3 border-b border-slate-200 rounded-b-lg">
<h3 class="text-lg font-bold text-slate-700 flex items-center gap-2">
<span>šÆ</span> DEPARTEMEN & UNIT KERJA
</h3>
<span class="text-xs bg-teal-100 text-teal-800 px-3 py-1 rounded-full font-bold">3 Tugas per Departemen</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 pb-4 mt-2">
<div id="kurikulum" data-name="Kurikulum" class="slot-box drop-zone rounded-xl border-2 border-dashed border-blue-400 bg-blue-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š</span>
<p class="font-extrabold text-sm text-blue-900 uppercase tracking-wider">Kurikulum</p>
</div>
<div id="kesiswaan" data-name="Kesiswaan" class="slot-box drop-zone rounded-xl border-2 border-dashed border-teal-400 bg-teal-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š„</span>
<p class="font-extrabold text-sm text-teal-900 uppercase tracking-wider">Kesiswaan</p>
</div>
<div id="sarpras" data-name="Sarpras" class="slot-box drop-zone rounded-xl border-2 border-dashed border-indigo-400 bg-indigo-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">šļø</span>
<p class="font-extrabold text-sm text-indigo-900 uppercase tracking-wider">Sarpras</p>
</div>
<div id="humas" data-name="Humas" class="slot-box drop-zone rounded-xl border-2 border-dashed border-cyan-400 bg-cyan-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š¢</span>
<p class="font-extrabold text-sm text-cyan-900 uppercase tracking-wider">Humas</p>
</div>
<div id="tata-usaha" data-name="Tata Usaha" class="slot-box drop-zone rounded-xl border-2 border-dashed border-slate-400 bg-slate-100/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">šļø</span>
<p class="font-extrabold text-sm text-slate-800 uppercase tracking-wider">Tata Usaha</p>
</div>
<div id="uks" data-name="UKS" class="slot-box drop-zone rounded-xl border-2 border-dashed border-green-400 bg-green-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š„</span>
<p class="font-extrabold text-sm text-green-900 uppercase tracking-wider">UKS</p>
</div>
<div id="lab-ipa" data-name="Lab IPA" class="slot-box drop-zone rounded-xl border-2 border-dashed border-purple-400 bg-purple-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š¬</span>
<p class="font-extrabold text-sm text-purple-900 uppercase tracking-wider">Lab IPA</p>
</div>
<div id="piket" data-name="Piket" class="slot-box drop-zone rounded-xl border-2 border-dashed border-orange-400 bg-orange-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š</span>
<p class="font-extrabold text-sm text-orange-900 uppercase tracking-wider">Piket</p>
</div>
<div id="wali-kelas" data-name="Wali Kelas" class="slot-box drop-zone rounded-xl border-2 border-dashed border-rose-400 bg-rose-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š§āš«</span>
<p class="font-extrabold text-sm text-rose-900 uppercase tracking-wider">Wali Kelas</p>
</div>
<div id="guru-wali" data-name="Guru Wali (BK)" class="slot-box drop-zone rounded-xl border-2 border-dashed border-amber-400 bg-amber-50/50 p-4 min-h-[190px] flex flex-col items-center justify-start text-center gap-2">
<span class="text-3xl">š¤</span>
<p class="font-extrabold text-sm text-amber-900 uppercase tracking-wider">Guru Wali</p>
</div>
</div>
</section>
<!-- SISI KANAN: BANK TUGAS (30 Tugas) -->
<section class="w-full lg:w-2/5 flex flex-col">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold text-slate-700 flex items-center gap-2">
<span>šļø</span> TUGAS & SOLUSI
</h3>
<div class="flex gap-2">
<button id="checkBtn" class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-bold transition shadow-md flex items-center gap-1">
āļø Periksa
</button>
<button id="resetBtn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-bold transition shadow-md">
š
</button>
</div>
</div>
<div id="bankTugas" class="task-bank-container drop-zone bg-[url('data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Ccircle cx=\'2\' cy=\'2\' r=\'1\' fill=\'%23cbd5e1\' fill-opacity=\'0.5\'/%3E%3C/svg%3E')] bg-slate-50 rounded-2xl p-5 h-[750px] overflow-y-auto border-2 border-slate-200">
<div class="grid grid-cols-2 gap-4 pt-2" id="bankGrid">
<!-- KURIKULUM (1-3) -->
<div class="task-card bg-amber-100 rounded-lg p-4 shadow border border-amber-200" draggable="true" id="task-1" data-target="kurikulum" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Mengadakan In-House Training (IHT) penyusunan modul ajar & supervisi klinis.</p>
</div>
<div class="task-card bg-blue-100 rounded-lg p-4 shadow border border-blue-200" draggable="true" id="task-2" data-target="kurikulum" style="transform: rotate(2deg);">
<p class="text-xs font-semibold text-slate-800">Memanfaatkan aplikasi penyusun jadwal otomatis & validasi jadwal KBM.</p>
</div>
<div class="task-card bg-pink-100 rounded-lg p-4 shadow border border-pink-200" draggable="true" id="task-3" data-target="kurikulum" style="transform: rotate(-0.5deg);">
<p class="text-xs font-semibold text-slate-800">Melaksanakan klinik akademik intensif & analisis butir soal secara berkala.</p>
</div>
<!-- KESISWAAN (4-6) -->
<div class="task-card bg-purple-100 rounded-lg p-4 shadow border border-purple-200" draggable="true" id="task-4" data-target="kesiswaan" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Mengaktifkan sistem buku kendali poin pelanggaran & kordinasi rutin dengan BK.</p>
</div>
<div class="task-card bg-orange-100 rounded-lg p-4 shadow border border-orange-200" draggable="true" id="task-5" data-target="kesiswaan" style="transform: rotate(1.5deg);">
<p class="text-xs font-semibold text-slate-800">Membentuk klub pembinaan prestasi olahraga/seni sejak awal semester.</p>
</div>
<div class="task-card bg-teal-100 rounded-lg p-4 shadow border border-teal-200" draggable="true" id="task-6" data-target="kesiswaan" style="transform: rotate(-1deg);">
<p class="text-xs font-semibold text-slate-800">Mengoptimalkan kegiatan pembiasaan harian/mingguan (upacara, literasi, doa).</p>
</div>
<!-- SARPRAS (7-9) -->
<div class="task-card bg-indigo-100 rounded-lg p-4 shadow border border-indigo-200" draggable="true" id="task-7" data-target="sarpras" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Melakukan digitalisasi buku inventaris & pelabelan ulang aset sekolah.</p>
</div>
<div class="task-card bg-red-100 rounded-lg p-4 shadow border border-red-200" draggable="true" id="task-8" data-target="sarpras" style="transform: rotate(1deg);">
<p class="text-xs font-semibold text-slate-800">Menyediakan buku kendali/laporan kerusakan sarpras harian di ruang piket.</p>
</div>
<div class="task-card bg-cyan-100 rounded-lg p-4 shadow border border-cyan-200" draggable="true" id="task-9" data-target="sarpras" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Menyusun jadwal piket pemeliharaan taman & toilet untuk tenaga kebersihan.</p>
</div>
<!-- HUMAS (10-12) -->
<div class="task-card bg-pink-100 rounded-lg p-4 shadow border border-pink-200" draggable="true" id="task-10" data-target="humas" style="transform: rotate(-1deg);">
<p class="text-xs font-semibold text-slate-800">Mengelola media sosial sekolah & mendokumentasikan setiap prestasi siswa/guru.</p>
</div>
<div class="task-card bg-lime-100 rounded-lg p-4 shadow border border-lime-200" draggable="true" id="task-11" data-target="humas" style="transform: rotate(1.8deg);">
<p class="text-xs font-semibold text-slate-800">Mengadakan pertemuan paguyuban orang tua/wali murid secara berkala.</p>
</div>
<div class="task-card bg-yellow-100 rounded-lg p-4 shadow border border-yellow-200" draggable="true" id="task-12" data-target="humas" style="transform: rotate(-2.5deg);">
<p class="text-xs font-semibold text-slate-800">Menjalin kerja sama (MoU) dengan puskesmas, polsek, dan tokoh masyarakat.</p>
</div>
<!-- TATA USAHA (13-15) -->
<div class="task-card bg-slate-200 rounded-lg p-4 shadow border border-slate-300" draggable="true" id="task-13" data-target="tata-usaha" style="transform: rotate(1deg);">
<p class="text-xs font-semibold text-slate-800">Mengelola administrasi persuratan masuk/keluar dan kearsipan sekolah.</p>
</div>
<div class="task-card bg-gray-200 rounded-lg p-4 shadow border border-gray-300" draggable="true" id="task-14" data-target="tata-usaha" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Memproses pembaruan data pokok pendidikan (Dapodik) siswa dan guru.</p>
</div>
<div class="task-card bg-stone-200 rounded-lg p-4 shadow border border-stone-300" draggable="true" id="task-15" data-target="tata-usaha" style="transform: rotate(2deg);">
<p class="text-xs font-semibold text-slate-800">Melayani legalisir ijazah, mutasi siswa, & pembuatan surat keterangan aktif.</p>
</div>
<!-- UKS (16-18) -->
<div class="task-card bg-purple-100 rounded-lg p-4 shadow border border-purple-200" draggable="true" id="task-16" data-target="uks" style="transform: rotate(-0.5deg);">
<p class="text-xs font-semibold text-slate-800">Melengkapi kotak P3K secara berkala & menyusun SOP penanganan siswa sakit.</p>
</div>
<div class="task-card bg-teal-100 rounded-lg p-4 shadow border border-teal-200" draggable="true" id="task-17" data-target="uks" style="transform: rotate(2deg);">
<p class="text-xs font-semibold text-slate-800">Melatih ulang dan menjadwalkan piket harian Kader Kesehatan Remaja (PMR).</p>
</div>
<div class="task-card bg-orange-100 rounded-lg p-4 shadow border border-orange-200" draggable="true" id="task-18" data-target="uks" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Mengadakan kampanye kesehatan rutin (cuci tangan, gizi, bahaya merokok).</p>
</div>
<!-- LAB IPA (19-21) -->
<div class="task-card bg-green-100 rounded-lg p-4 shadow border border-green-200" draggable="true" id="task-19" data-target="lab-ipa" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Melakukan stock opname (pendataan ulang) bahan kimia sesuai standar keamanan.</p>
</div>
<div class="task-card bg-yellow-100 rounded-lg p-4 shadow border border-yellow-200" draggable="true" id="task-20" data-target="lab-ipa" style="transform: rotate(1.2deg);">
<p class="text-xs font-semibold text-slate-800">Menyusun jadwal penggunaan lab terpadu & form peminjaman alat yang praktis.</p>
</div>
<div class="task-card bg-cyan-100 rounded-lg p-4 shadow border border-cyan-200" draggable="true" id="task-21" data-target="lab-ipa" style="transform: rotate(-1deg);">
<p class="text-xs font-semibold text-slate-800">Mengintegrasikan jadwal praktikum minimal satu kali dalam setiap bab mapel IPA.</p>
</div>
<!-- PIKET (22-24) -->
<div class="task-card bg-indigo-100 rounded-lg p-4 shadow border border-indigo-200" draggable="true" id="task-22" data-target="piket" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Mengetatkan patroli keliling kelas & memberlakukan kartu izin keluar saat KBM.</p>
</div>
<div class="task-card bg-amber-100 rounded-lg p-4 shadow border border-amber-200" draggable="true" id="task-23" data-target="piket" style="transform: rotate(1deg);">
<p class="text-xs font-semibold text-slate-800">Menyiapkan bank tugas/lembar kerja mandiri cadangan untuk kelas jika guru absen.</p>
</div>
<div class="task-card bg-blue-100 rounded-lg p-4 shadow border border-blue-200" draggable="true" id="task-24" data-target="piket" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Membuat buku laporan harian piket yang terintegrasi ke Kesiswaan & Kepsek.</p>
</div>
<!-- WALI KELAS (25-27) -->
<div class="task-card bg-teal-100 rounded-lg p-4 shadow border border-teal-200" draggable="true" id="task-25" data-target="wali-kelas" style="transform: rotate(-0.5deg);">
<p class="text-xs font-semibold text-slate-800">Melakukan sesi bimbingan kelompok/individu secara rutin tiap minggu di kelas.</p>
</div>
<div class="task-card bg-purple-100 rounded-lg p-4 shadow border border-purple-200" draggable="true" id="task-26" data-target="wali-kelas" style="transform: rotate(2deg);">
<p class="text-xs font-semibold text-slate-800">Menggunakan format administrasi digital terpusat (leger, absen, denah duduk).</p>
</div>
<div class="task-card bg-yellow-100 rounded-lg p-4 shadow border border-yellow-200" draggable="true" id="task-27" data-target="wali-kelas" style="transform: rotate(-1.5deg);">
<p class="text-xs font-semibold text-slate-800">Mengadakan home visit (kunjungan rumah) bagi siswa yang bermasalah/mangkir.</p>
</div>
<!-- GURU WALI (28-30) -->
<div class="task-card bg-orange-100 rounded-lg p-4 shadow border border-orange-200" draggable="true" id="task-28" data-target="guru-wali" style="transform: rotate(-2deg);">
<p class="text-xs font-semibold text-slate-800">Membuka layanan "Pojok Curhat" yang ramah anak & menjaga kerahasiaan siswa.</p>
</div>
<div class="task-card bg-pink-100 rounded-lg p-4 shadow border border-pink-200" draggable="true" id="task-29" data-target="guru-wali" style="transform: rotate(1.5deg);">
<p class="text-xs font-semibold text-slate-800">Membuat lembar penanganan kasus bersama (case conference) dengan orang tua.</p>
</div>
<div class="task-card bg-cyan-100 rounded-lg p-4 shadow border border-cyan-200" draggable="true" id="task-30" data-target="guru-wali" style="transform: rotate(-1deg);">
<p class="text-xs font-semibold text-slate-800">Memberikan bimbingan klasikal tentang manajemen stres, motivasi, & karier.</p>
</div>
</div>
</div>
</section>
</div>
<footer class="mt-8 text-center border-t border-teal-100 pt-6">
<p class="text-sm text-slate-500 font-medium">Panitia Raker SMP Negeri 72 Maluku Tengah © 2026 - Papan Interaktif Dinamis</p>
</footer>
</main>
<!-- SCRIPT DRAG & DROP + AUDIO -->
<script>
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
function playAudioFeedback(type) {
if (audioCtx.state === 'suspended') audioCtx.resume();
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.connect(gain);
gain.connect(audioCtx.destination);
if (type === 'drop') {
osc.type = 'sine';
osc.frequency.setValueAtTime(450, audioCtx.currentTime);
osc.frequency.exponentialRampToValueAtTime(600, audioCtx.currentTime + 0.1);
gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);
osc.start(); osc.stop(audioCtx.currentTime + 0.1);
} else if (type === 'success') {
osc.type = 'triangle';
osc.frequency.setValueAtTime(523.25, audioCtx.currentTime);
osc.frequency.setValueAtTime(659.25, audioCtx.currentTime + 0.1);
gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.3);
osc.start(); osc.stop(audioCtx.currentTime + 0.3);
} else if (type === 'error') {
osc.type = 'sawtooth';
osc.frequency.setValueAtTime(150, audioCtx.currentTime);
gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.3);
osc.start(); osc.stop(audioCtx.currentTime + 0.3);
}
}
document.addEventListener('DOMContentLoaded', () => {
const taskCards = document.querySelectorAll('.task-card');
const dropZones = document.querySelectorAll('.drop-zone');
const bankGrid = document.getElementById('bankGrid');
const resetBtn = document.getElementById('resetBtn');
const checkBtn = document.getElementById('checkBtn');
document.body.addEventListener('click', () => {
if (audioCtx.state === 'suspended') audioCtx.resume();
}, { once: true });
taskCards.forEach(card => {
card.addEventListener('dragstart', dragStart);
card.addEventListener('dragend', dragEnd);
});
dropZones.forEach(zone => {
zone.addEventListener('dragover', dragOver);
zone.addEventListener('dragenter', dragEnter);
zone.addEventListener('dragleave', dragLeave);
zone.addEventListener('drop', dragDrop);
});
function dragStart(e) {
e.dataTransfer.setData('text/plain', e.target.id);
setTimeout(() => e.target.classList.add('dragging'), 0);
removeValidationStyling(e.target);
}
function dragEnd(e) {
e.target.classList.remove('dragging');
dropZones.forEach(zone => zone.classList.remove('drag-over'));
}
function dragOver(e) { e.preventDefault(); }
function dragEnter(e) {
e.preventDefault();
let zone = e.target.closest('.drop-zone');
if (zone && zone.id !== 'bankTugas') zone.classList.add('drag-over');
}
function dragLeave(e) {
let zone = e.target.closest('.drop-zone');
if (zone) zone.classList.remove('drag-over');
}
function dragDrop(e) {
e.preventDefault();
let zone = e.target.closest('.drop-zone');
if (zone) {
zone.classList.remove('drag-over');
const id = e.dataTransfer.getData('text/plain');
const draggableElement = document.getElementById(id);
if (draggableElement) {
playAudioFeedback('drop');
if (zone.id === 'bankTugas') {
bankGrid.appendChild(draggableElement);
let randomRotate = (Math.random() * 5 - 2.5).toFixed(1);
draggableElement.style.transform = `rotate(${randomRotate}deg)`;
} else {
zone.appendChild(draggableElement);
}
}
}
}
function removeValidationStyling(card) {
card.classList.remove('correct-ans', 'wrong-ans');
const feedbackMsg = card.querySelector('.feedback-msg');
if (feedbackMsg) feedbackMsg.remove();
}
resetBtn.addEventListener('click', () => {
if(!confirm("Kembalikan semua tugas ke Bank Tugas?")) return;
taskCards.forEach(card => {
removeValidationStyling(card);
bankGrid.appendChild(card);
let randomRotate = (Math.random() * 5 - 2.5).toFixed(1);
card.style.transform = `rotate(${randomRotate}deg)`;
});
});
checkBtn.addEventListener('click', () => {
let correctCount = 0;
let wrongCount = 0;
let unplacedCount = 0;
taskCards.forEach(card => {
removeValidationStyling(card);
const targetId = card.getAttribute('data-target');
const currentParent = card.parentNode;
const targetName = document.getElementById(targetId).getAttribute('data-name');
if (currentParent.id === 'bankGrid' || currentParent.id === 'bankTugas') {
unplacedCount++;
} else if (currentParent.id === targetId) {
correctCount++;
card.classList.add('correct-ans');
} else {
wrongCount++;
card.classList.add('wrong-ans');
const msg = document.createElement('div');
msg.className = 'feedback-msg text-[10px] font-bold text-red-700 mt-2 p-1 bg-white bg-opacity-90 rounded border border-red-300 text-center leading-tight';
msg.innerHTML = `ā Seharusnya:<br>${targetName}`;
card.appendChild(msg);
}
});
if (wrongCount > 0) {
playAudioFeedback('error');
} else if (correctCount > 0 && wrongCount === 0) {
playAudioFeedback('success');
}
alert(`š HASIL EVALUASI\n\nā
Benar: ${correctCount}\nā Salah: ${wrongCount}\nā ļø Belum Dipilih: ${unplacedCount}`);
});
});
</script>
</body>
</html>
š Papan Nilai & Aktivitas Kelas
| Nama Siswa | Materi Pelajaran | Hasil Skor | Tingkat Paham | Hambatan Belajar | Strategi Tindakan |
|---|---|---|---|---|---|
| Belum ada nilai siswa yang masuk. | |||||