Game Logika Matematika Tingkat Lanjut: Asah Kemampuan Berpikir Kritis Siswa Kelas 5-6 SD
Tingkatkan kemampuan berpikir kritis siswa Fase C dengan Game Logika Matematika tingkat lanjut. Media interaktif berbasis HTML5 yang cocok untuk persiapan ANBK dan Olimpiade Matematika SD.
1. Mengapa Logika Matematika Penting di Fase C?
Memasuki Fase C (Kelas 5 dan 6), siswa tidak lagi hanya belajar berhitung dasar, tetapi mulai diperkenalkan pada konsep High Order Thinking Skills (HOTS). Logika matematika mengajarkan siswa untuk menganalisis pola, memecahkan masalah kompleks, dan memahami hubungan antar angka.
Melalui Game Logika Matematika Interaktif, kita dapat membantu siswa melatih otak mereka untuk berpikir strategis tanpa merasa tertekan oleh rumus yang kaku.
2. Manfaat Game bagi Siswa Kelas Atas
Melatih Penalaran Deduktif: Siswa belajar menyimpulkan jawaban dari petunjuk yang terbatas.
Persiapan Olimpiade & Asesmen Nasional (ANBK): Soal-soal dalam game ini dirancang dengan pola yang mirip dengan soal literasi numerasi ANBK.
Meningkatkan Kecepatan Berpikir: Tantangan waktu dan skor mendorong siswa untuk fokus dan cepat dalam mengambil keputusan.
Media Ajar Digital Kurikulum Merdeka: Sangat relevan sebagai materi pengayaan atau kegiatan penutup pembelajaran yang bermakna.
3. Panduan Cara Membuat Game (Bagi Guru )
Bapak/Ibu bisa membuat media ini sendiri hanya dengan modal Notepad. Berikut langkah-langkahnya:
Siapkan Dokumen: Buka Notepad (PC) atau Text Editor lainnya.
Salin Kode: Copy seluruh kode HTML, CSS, dan JavaScript di bawah ini.
Simpan File: Klik Save As, beri nama
logika-matematika.html. Pastikan ekstensinya adalah .html.Buka di Browser: Klik kanan file tersebut, pilih Open With Google Chrome.
Copy Script: Salin seluruh kode HTML5 di bagian bawah artikel ini.
4. Script Game HTML5: "Detektif Logika Angka"
Game ini menggunakan teka-teki variabel sederhana (seperti: Jika 🍎 + 5 = 12, berapakah 🍎 x 2?).
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#logic-game { font-family: 'Montserrat', sans-serif; background: #2c3e50; color: #ecf0f1; padding: 30px; border-radius: 20px; border: 4px solid #e74c3c; max-width: 480px; margin: 20px auto; text-align: center; box-shadow: 0 15px 35px rgba(0,0,0,0.3); }
.logic-header { color: #e74c3c; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }
.box-teka-teki { background: #34495e; padding: 20px; border-radius: 15px; font-size: 22px; font-weight: bold; border-left: 8px solid #e67e22; margin-bottom: 20px; line-height: 1.6; }
.input-group { margin: 20px 0; }
input[type="number"] { padding: 12px; width: 120px; font-size: 20px; border-radius: 10px; border: none; outline: none; text-align: center; background: #ecf0f1; color: #2c3e50; }
.btn-jawab { padding: 12px 30px; font-size: 18px; background: #e67e22; color: white; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; transition: 0.3s; margin-left: 10px; }
.btn-jawab:hover { background: #d35400; transform: translateY(-3px); }
#feedback-logic { margin-top: 20px; font-size: 18px; min-height: 30px; }
.score-logic { font-size: 16px; color: #f1c40f; margin-bottom: 10px; }
</style>
</head>
<body>
<div id="logic-game">
<h2 class="logic-header">Detektif Logika</h2>
<div class="score-logic">Misi Berhasil: <span id="l-score">0</span> 🏆 | Level: <span id="l-level">1</span></div>
<div class="box-teka-teki" id="l-soal">Memuat Teka-teki...</div>
<div class="input-group">
<input type="number" id="l-input" placeholder="?">
<button class="btn-jawab" onclick="cekLogika()">Analisis</button>
</div>
<div id="feedback-logic"></div>
</div>
<script>
let logicScore = 0;
let logicLevel = 1;
let logicAnswer = 0;
function generateLogic() {
const types = [
() => {
let x = Math.floor(Math.random() * 10) + 2;
let y = Math.floor(Math.random() * 20) + 10;
logicAnswer = x * 2;
return `Jika [X] + 5 = ${x + 5}, <br> berapakah nilai dari [X] + [X]?`;
},
() => {
let a = Math.floor(Math.random() * 5) + 2;
let b = Math.floor(Math.random() * 5) + 2;
logicAnswer = a * b;
return `Jika 🍎 + 🍎 = ${a + a}, <br> dan 🍎 x 🍌 = ${a * b}, <br> berapakah nilai 🍌?`;
},
() => {
let n = Math.floor(Math.random() * 10) + 5;
logicAnswer = n - 3;
return `Aku adalah sebuah angka. Jika aku ditambah 10 lalu dikurangi 5, hasilnya adalah ${n + 2}. <br> Siapakah aku?`;
}
];
let randomFunc = types[Math.floor(Math.random() * types.length)];
document.getElementById('l-soal').innerHTML = randomFunc();
document.getElementById('l-input').value = "";
document.getElementById('feedback-logic').innerText = "";
}
function cekLogika() {
const val = parseInt(document.getElementById('l-input').value);
const fb = document.getElementById('feedback-logic');
if(val === logicAnswer) {
logicScore += 20;
logicLevel++;
document.getElementById('l-score').innerText = logicScore;
document.getElementById('l-level').innerText = logicLevel;
fb.innerHTML = "<span style='color:#2ecc71'>Analisis Tepat! Misi Berhasil! 🌟</span>";
setTimeout(generateLogic, 2000);
} else {
fb.innerHTML = "<span style='color:#e74c3c'>Analisis Salah. Coba periksa kembali polanya! 🔍</span>";
}
}
generateLogic();
</script>
</body>
</html>"Jika Bapak/Ibu guru mengalami kendala saat mencoba menjalankan kode ini, silakan tuliskan kendalanya di kolom komentar di bawah ya!"
Jika Ingin memainkan langsung geme ini bisa memulainya pada tampilan di bawah ini :
Detektif Logika
5. Kesimpulan
Game logika matematika tingkat lanjut ini bukan hanya tentang angka, tapi tentang cara siswa memproses informasi. Dengan memberikan media ajar yang menantang namun seru, kita membantu siswa Kelas 5 dan 6 untuk siap menghadapi jenjang pendidikan yang lebih tinggi. Selamat mencoba di kelas.