The latest articles on DEV Community by herdi puricoreindo (@herdi_puricoreindo_797243). https://dev.to/herdi_puricoreindo_797243 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4127103%2F73ea49f7-0a8b-4de1-8129-0e7e910d3e08.png https://dev.to/herdi_puricoreindo_797243 en herdi puricoreindo Wed, 16 Sep 2026 02:15:45 +0000 https://dev.to/herdi_puricoreindo_797243/game-anak-sd-445p https://dev.to/herdi_puricoreindo_797243/game-anak-sd-445p <p>&lt;!DOCTYPE html&gt;<br> <br> <br> <br> <br> </p> Kuis Matematika SD <br> &lt;br&gt; body {&lt;br&gt; font-family: &amp;#39;Segoe UI&amp;#39;, Tahoma, Geneva, Verdana, sans-serif;&lt;br&gt; background-color: #f0f8ff;&lt;br&gt; display: flex;&lt;br&gt; justify-content: center;&lt;br&gt; align-items: center;&lt;br&gt; height: 100vh;&lt;br&gt; margin: 0;&lt;br&gt; }&lt;br&gt; .game-card {&lt;br&gt; background-color: #ffffff;&lt;br&gt; padding: 30px;&lt;br&gt; border-radius: 16px;&lt;br&gt; box-shadow: 0 8px 24px rgba(0,0,0,0.1);&lt;br&gt; width: 320px;&lt;br&gt; text-align: center;&lt;br&gt; }&lt;br&gt; .score-board {&lt;br&gt; font-size: 1.2rem;&lt;br&gt; font-weight: bold;&lt;br&gt; color: #4b6584;&lt;br&gt; margin-bottom: 15px;&lt;br&gt; }&lt;br&gt; .question {&lt;br&gt; font-size: 2.5rem;&lt;br&gt; font-weight: bold;&lt;br&gt; color: #2d98da;&lt;br&gt; margin: 20px 0;&lt;br&gt; }&lt;br&gt; .options {&lt;br&gt; display: grid;&lt;br&gt; grid-template-columns: 1fr 1fr;&lt;br&gt; gap: 12px;&lt;br&gt; }&lt;br&gt; .btn-option {&lt;br&gt; background-color: #4b7bec;&lt;br&gt; color: white;&lt;br&gt; border: none;&lt;br&gt; padding: 15px;&lt;br&gt; font-size: 1.2rem;&lt;br&gt; font-weight: bold;&lt;br&gt; border-radius: 10px;&lt;br&gt; cursor: pointer;&lt;br&gt; transition: transform 0.1s, background-color 0.2s;&lt;br&gt; }&lt;br&gt; .btn-option:hover {&lt;br&gt; background-color: #3867d6;&lt;br&gt; }&lt;br&gt; .btn-option:active {&lt;br&gt; transform: scale(0.95);&lt;br&gt; }&lt;br&gt; .feedback {&lt;br&gt; margin-top: 15px;&lt;br&gt; font-size: 1.1rem;&lt;br&gt; font-weight: bold;&lt;br&gt; min-height: 25px;&lt;br&gt; }&lt;br&gt; <br> <br> <br> Skor: <span id="score">0</span><br> 0 + 0<br> <br> <br> <p>&lt;br&gt; let score = 0;&lt;br&gt; let correctAnswer = 0;&lt;/p&gt; &lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function generateQuestion() { document.getElementById("feedback").innerText = ""; // Pilih angka acak 1-10 const num1 = Math.floor(Math.random() * 10) + 1; const num2 = Math.floor(Math.random() * 10) + 1; // Pilih operasi: + atau - const isAddition = Math.random() &amp;gt; 0.5; if (isAddition) { correctAnswer = num1 + num2; document.getElementById("question").innerText = `${num1} + ${num2}`; } else { // Memastikan hasil pengurangan tidak negatif untuk anak SD const max = Math.max(num1, num2); const min = Math.min(num1, num2); correctAnswer = max - min; document.getElementById("question").innerText = `${max} - ${min}`; } generateOptions(correctAnswer); } function generateOptions(correct) { const optionsContainer = document.getElementById("options"); optionsContainer.innerHTML = ""; const answers = [correct]; // Buat 3 pilihan jawaban salah secara acak while (answers.length &amp;lt; 4) { const randomOffset = Math.floor(Math.random() * 5) + 1; const wrong = Math.random() &amp;gt; 0.5 ? correct + randomOffset : Math.max(0, correct - randomOffset); if (!answers.includes(wrong)) { answers.push(wrong); } } // Acak urutan tombol pilihan answers.sort(() =&amp;gt; Math.random() - 0.5); answers.forEach(answer =&amp;gt; { const button = document.createElement("button"); button.className = "btn-option"; button.innerText = answer; button.onclick = () =&amp;gt; checkAnswer(answer); optionsContainer.appendChild(button); }); } function checkAnswer(selected) { const feedback = document.getElementById("feedback"); if (selected === correctAnswer) { score += 10; feedback.style.color = "#20bf6b"; feedback.innerText = "Hebat! Benar! 🎉"; } else { feedback.style.color = "#eb3b5a"; feedback.innerText = `Coba Lagi! Jawaban: ${correctAnswer}`; } document.getElementById("score").innerText = score; // Lanjut ke soal berikutnya setelah jeda 1 detik setTimeout(generateQuestion, 1000); } // Jalankan game saat pertama dibuka generateQuestion(); &lt;/code&gt;&lt;/pre&gt;&lt;/div&gt; &lt;p&gt;</p> css frontend html learning