<!DOCTYPE html>
<br> body {<br> font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;<br> background-color: #f0f8ff;<br> display: flex;<br> justify-content: center;<br> align-items: center;<br> height: 100vh;<br> margin: 0;<br> }<br> .game-card {<br> background-color: #ffffff;<br> padding: 30px;<br> border-radius: 16px;<br> box-shadow: 0 8px 24px rgba(0,0,0,0.1);<br> width: 320px;<br> text-align: center;<br> }<br> .score-board {<br> font-size: 1.2rem;<br> font-weight: bold;<br> color: #4b6584;<br> margin-bottom: 15px;<br> }<br> .question {<br> font-size: 2.5rem;<br> font-weight: bold;<br> color: #2d98da;<br> margin: 20px 0;<br> }<br> .options {<br> display: grid;<br> grid-template-columns: 1fr 1fr;<br> gap: 12px;<br> }<br> .btn-option {<br> background-color: #4b7bec;<br> color: white;<br> border: none;<br> padding: 15px;<br> font-size: 1.2rem;<br> font-weight: bold;<br> border-radius: 10px;<br> cursor: pointer;<br> transition: transform 0.1s, background-color 0.2s;<br> }<br> .btn-option:hover {<br> background-color: #3867d6;<br> }<br> .btn-option:active {<br> transform: scale(0.95);<br> }<br> .feedback {<br> margin-top: 15px;<br> font-size: 1.1rem;<br> font-weight: bold;<br> min-height: 25px;<br> }<br>
Skor: 0
0 + 0
<br> let score = 0;<br> let correctAnswer = 0;</p> <div class="highlight"><pre class="highlight plaintext"><code>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() > 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 < 4) { const randomOffset = Math.floor(Math.random() * 5) + 1; const wrong = Math.random() > 0.5 ? correct + randomOffset : Math.max(0, correct - randomOffset); if (!answers.includes(wrong)) { answers.push(wrong); } } // Acak urutan tombol pilihan answers.sort(() => Math.random() - 0.5); answers.forEach(answer => { const button = document.createElement("button"); button.className = "btn-option"; button.innerText = answer; button.onclick = () => 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(); </code></pre></div> <p>
Top comments (0)