Matematik Dört işlem Oyunu

Matematik Dört İşlem Oyunu body { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); margin: 0; padding: 20px; min-height: 100%; } html { height: 100%; } .container { max-width: 800px; margin: 0 auto; background: white; border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .header { text-align: center; margin-bottom: 30px; } .title { font-size: 2.5rem; color: #4a5568; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); } .subtitle { font-size: 1.2rem; color: #718096; margin-bottom: 20px; } .level-buttons { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; background: #f8fafc; padding: 8px; border-radius: 15px; border: 2px solid #e2e8f0; } .level-btn { padding: 12px 20px; font-size: 1.1rem; font-weight: bold; border: 2px solid transparent; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; background: white; color: #4a5568; min-width: 90px; text-align: center; touch-action: manipulation; } .level-btn:hover { background: #f1f5f9; border-color: #cbd5e0; } .level-btn.active { border-color: #4299e1; background: #4299e1; color: white; box-shadow: 0 2px 8px rgba(66, 153, 225, 0.3); } .operation-buttons { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 15px; margin-bottom: 25px; padding: 20px; background: #f8fafc; border-radius: 15px; border: 2px solid #e2e8f0; max-width: 400px; margin-left: auto; margin-right: auto; } .operation-btn { padding: 25px 20px; font-size: 1.4rem; font-weight: bold; border: none; border-radius: 15px; cursor: pointer; transition: all 0.2s ease; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); height: 120px; display: flex; align-items: center; justify-content: center; touch-action: manipulation; } .addition { background: linear-gradient(45deg, #48bb78, #38a169); } .subtraction { background: linear-gradient(45deg, #ed8936, #dd6b20); } .multiplication { background: linear-gradient(45deg, #9f7aea, #805ad5); } .division { background: linear-gradient(45deg, #4299e1, #3182ce); } .operation-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); } .operation-btn.active { transform: scale(0.95); box-shadow: inset 0 4px 8px rgba(0,0,0,0.2); } .game-area { background: #f7fafc; border-radius: 15px; padding: 30px; margin-bottom: 20px; border: 3px solid #e2e8f0; } .question { text-align: center; margin-bottom: 30px; min-height: 80px; display: flex; align-items: center; justify-content: center; gap: 15px; flex-wrap: wrap; } .number-box { background: #4299e1; color: white; padding: 15px 20px; border-radius: 12px; font-size: 2.5rem; font-weight: bold; min-width: 60px; text-align: center; box-shadow: 0 4px 8px rgba(66, 153, 225, 0.3); border: 3px solid #3182ce; } .operator-box { background: #ed8936; color: white; padding: 15px 20px; border-radius: 12px; font-size: 2.5rem; font-weight: bold; min-width: 60px; text-align: center; box-shadow: 0 4px 8px rgba(237, 137, 54, 0.3); border: 3px solid #dd6b20; } .equals-box { background: #48bb78; color: white; padding: 15px 20px; border-radius: 12px; font-size: 2.5rem; font-weight: bold; min-width: 60px; text-align: center; box-shadow: 0 4px 8px rgba(72, 187, 120, 0.3); border: 3px solid #38a169; } .question-mark-box { background: #9f7aea; color: white; padding: 15px 20px; border-radius: 12px; font-size: 2.5rem; font-weight: bold; min-width: 60px; text-align: center; box-shadow: 0 4px 8px rgba(159, 122, 234, 0.3); border: 3px solid #805ad5; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .vertical-math { display: inline-block; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: 3px solid #e2e8f0; max-width: 200px; } .math-row { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 6px; min-height: 40px; } .math-number { font-size: 2rem; font-weight: bold; color: #2d3748; min-width: 60px; text-align: right; padding: 3px 8px; } .math-operator { font-size: 2rem; font-weight: bold; color: #ed8936; margin-right: 8px; width: 25px; text-align: center; } .math-line { height: 3px; background: #4a5568; margin: 8px 0; border-radius: 2px; width: 120px; margin-left: auto; } .math-answer-box { display: flex; justify-content: flex-end; width: 100%; gap: 2px; } .digit-box { font-size: 2.5rem; font-weight: bold; color: #2d3748; border: 4px solid #4299e1; border-radius: 12px; padding: 10px 12px; text-align: center; width: 55px; height: 70px; background: #f0f8ff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; touch-action: manipulation; } .digit-box:hover { border-color: #3182ce; background: #e6f3ff; } .digit-box.active { border-color: #3182ce; box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2); background: #e6f3ff; } .math-input { font-size: 2rem; font-weight: bold; color: #2d3748; border: 3px solid #4299e1; border-radius: 8px; padding: 6px 10px; text-align: right; min-width: 60px; background: #f0f8ff; } .math-input:focus { outline: none; border-color: #3182ce; box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2); } .helper-numbers { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #cbd5e0; } .helper-row { display: flex; justify-content: flex-end; margin-bottom: 3px; min-height: 25px; align-items: center; } .helper-number { font-size: 1rem; color: #718096; min-width: 40px; text-align: right; padding: 1px 4px; font-weight: normal; } .helper-operator { font-size: 1rem; color: #718096; margin-right: 4px; width: 15px; text-align: center; } .helper-line { height: 1px; background: #cbd5e0; margin: 3px 0; width: 80px; margin-left: auto; } .division-format { display: inline-block; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: 3px solid #e2e8f0; max-width: 200px; } .division-structure { display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 6px; gap: 10px; } .division-dividend { font-size: 2rem; font-weight: bold; color: #2d3748; min-width: 60px; text-align: right; padding: 3px 8px; } .division-divisor { font-size: 2rem; font-weight: bold; color: #2d3748; min-width: 60px; text-align: center; border-left: 4px solid #4a5568; border-bottom: 4px solid #4a5568; padding: 3px 8px; } .division-answer-area { display: flex; justify-content: flex-end; width: 100%; } .division-answer-row { display: flex; justify-content: flex-end; width: 100%; gap: 2px; } .division-digit-box { font-size: 2rem; font-weight: bold; color: #2d3748; border: 3px solid #4299e1; border-radius: 8px; padding: 6px 8px; text-align: center; width: 40px; height: 50px; background: #f0f8ff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .division-digit-box:hover { border-color: #3182ce; background: #e6f3ff; } .division-digit-box.active { border-color: #3182ce; box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2); background: #e6f3ff; } .division-answer-input { font-size: 2rem; font-weight: bold; color: #2d3748; border: 3px solid #4299e1; border-radius: 8px; padding: 6px 10px; text-align: right; min-width: 60px; background: #f0f8ff; } .division-answer-input:focus { outline: none; border-color: #3182ce; box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2); } .division-work-area { margin-top: 20px; padding-top: 15px; border-top: 2px dashed #cbd5e0; } .division-step-row { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; padding: 8px 15px; background: #f7fafc; border-radius: 8px; border: 1px solid #e2e8f0; } .step-label { font-size: 1.1rem; font-weight: bold; color: #4a5568; min-width: 80px; } .step-calculation { font-size: 1.2rem; color: #2d3748; font-family: monospace; } .remainder-section { margin-top: 15px; padding: 12px; background: #fffaf0; border-radius: 10px; border: 2px solid #fed7aa; text-align: center; } .remainder-label { font-size: 1.1rem; font-weight: bold; color: #c05621; margin-bottom: 8px; } .remainder-value { font-size: 1.5rem; font-weight: bold; color: #9c4221; } .division-labels { display: flex; justify-content: space-around; margin-top: 20px; padding-top: 15px; border-top: 1px solid #e2e8f0; } .label-item { text-align: center; padding: 8px 12px; background: #edf2f7; border-radius: 8px; border: 1px solid #cbd5e0; } .label-title { font-size: 0.9rem; font-weight: bold; color: #4a5568; margin-bottom: 4px; } .label-desc { font-size: 0.8rem; color: #718096; } .division-steps { margin-top: 15px; padding-top: 10px; border-top: 1px dashed #cbd5e0; text-align: center; } .division-step { font-size: 1.1rem; color: #718096; margin: 3px 0; padding: 2px 8px; } .division-check { background: #f0fff4; border-radius: 6px; padding: 4px 8px; border: 1px solid #c6f6d5; } .division-remainder { background: #fffaf0; border-radius: 6px; padding: 4px 8px; border: 1px solid #fed7aa; margin-top: 5px; } .division-horizontal { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 10px; flex-wrap: wrap; } .division-number { font-size: 2rem; font-weight: bold; color: #2d3748; padding: 8px 12px; background: #4299e1; color: white; border-radius: 10px; min-width: 60px; text-align: center; box-shadow: 0 4px 8px rgba(66, 153, 225, 0.3); border: 3px solid #3182ce; } .division-separator { font-size: 2rem; font-weight: bold; color: #ed8936; padding: 8px 12px; background: #ed8936; color: white; border-radius: 10px; min-width: 40px; text-align: center; box-shadow: 0 4px 8px rgba(237, 137, 54, 0.3); border: 3px solid #dd6b20; } .division-equals { font-size: 2rem; font-weight: bold; color: #48bb78; padding: 8px 12px; background: #48bb78; color: white; border-radius: 10px; min-width: 40px; text-align: center; box-shadow: 0 4px 8px rgba(72, 187, 120, 0.3); border: 3px solid #38a169; } .division-answer-box { display: flex; gap: 2px; } .math-answer-box { display: flex; justify-content: flex-end; width: 100%; gap: 2px; } .answer-section { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 30px; } .answer-display { font-size: 2.5rem; padding: 15px 25px; border: 3px solid #4299e1; border-radius: 15px; text-align: center; min-width: 200px; font-weight: bold; background: #f0f8ff; color: #2d3748; min-height: 60px; display: flex; align-items: center; justify-content: center; } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 250px; margin: 0 auto; } .keypad-btn { font-size: 2.2rem; font-weight: bold; padding: 20px; border: none; border-radius: 15px; cursor: pointer; transition: all 0.2s ease; min-height: 80px; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); touch-action: manipulation; } .number-btn { background: linear-gradient(45deg, #4299e1, #3182ce); } .number-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(66, 153, 225, 0.4); } .number-btn:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); } .clear-btn { background: linear-gradient(45deg, #f56565, #e53e3e); } .clear-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(245, 101, 101, 0.4); } .delete-btn { background: linear-gradient(45deg, #ed8936, #dd6b20); } .delete-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(237, 137, 54, 0.4); } .zero-btn { grid-column: span 2; } .answer-input { font-size: 2rem; padding: 15px 20px; border: 3px solid #cbd5e0; border-radius: 10px; text-align: center; width: 150px; font-weight: bold; } .answer-input:focus { outline: none; border-color: #4299e1; box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1); } .check-btn { font-size: 1.8rem; padding: 20px 40px; background: linear-gradient(45deg, #48bb78, #38a169); color: white; border: none; border-radius: 15px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; touch-action: manipulation; min-height: 70px; } .check-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(72, 187, 120, 0.3); } .feedback { text-align: center; font-size: 1.5rem; font-weight: bold; min-height: 50px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .correct { color: #38a169; } .incorrect { color: #e53e3e; } .score-board { display: flex; justify-content: space-around; background: #edf2f7; padding: 20px; border-radius: 15px; margin-bottom: 20px; } .score-item { text-align: center; } .score-number { font-size: 2rem; font-weight: bold; color: #2d3748; } .score-label { font-size: 1rem; color: #718096; margin-top: 5px; } .new-question-btn { display: block; margin: 0 auto; font-size: 1.3rem; padding: 15px 30px; background: linear-gradient(45deg, #9f7aea, #805ad5); color: white; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; } .new-question-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(159, 122, 234, 0.3); } .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .popup-overlay.show { opacity: 1; visibility: visible; } .popup-content { background: white; padding: 40px; border-radius: 20px; text-align: center; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); transform: scale(0.8); transition: transform 0.3s ease; max-width: 400px; width: 90%; } .popup-overlay.show .popup-content { transform: scale(1); } .popup-icon { font-size: 4rem; margin-bottom: 20px; animation: bounce 0.6s ease-in-out; } .popup-title { font-size: 2rem; font-weight: bold; color: #38a169; margin-bottom: 15px; } .popup-message { font-size: 1.3rem; color: #4a5568; margin-bottom: 20px; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .popup-content { animation: fadeInUp 0.5s ease-out; } .confetti { position: fixed; width: 10px; height: 10px; background: #f39c12; animation: confetti-fall 3s linear infinite; z-index: 1001; } .confetti:nth-child(1) { background: #e74c3c; left: 10%; animation-delay: 0s; } .confetti:nth-child(2) { background: #3498db; left: 20%; animation-delay: 0.2s; } .confetti:nth-child(3) { background: #2ecc71; left: 30%; animation-delay: 0.4s; } .confetti:nth-child(4) { background: #f39c12; left: 40%; animation-delay: 0.6s; } .confetti:nth-child(5) { background: #9b59b6; left: 50%; animation-delay: 0.8s; } .confetti:nth-child(6) { background: #e67e22; left: 60%; animation-delay: 1s; } .confetti:nth-child(7) { background: #1abc9c; left: 70%; animation-delay: 1.2s; } .confetti:nth-child(8) { background: #e91e63; left: 80%; animation-delay: 1.4s; } .confetti:nth-child(9) { background: #34495e; left: 90%; animation-delay: 1.6s; } .confetti:nth-child(10) { background: #f1c40f; left: 15%; animation-delay: 1.8s; } .confetti:nth-child(11) { background: #8e44ad; left: 25%; animation-delay: 2s; } .confetti:nth-child(12) { background: #27ae60; left: 35%; animation-delay: 2.2s; } .confetti:nth-child(13) { background: #c0392b; left: 45%; animation-delay: 2.4s; } .confetti:nth-child(14) { background: #2980b9; left: 55%; animation-delay: 2.6s; } .confetti:nth-child(15) { background: #d35400; left: 65%; animation-delay: 2.8s; } .confetti:nth-child(16) { background: #16a085; left: 75%; animation-delay: 3s; } .confetti:nth-child(17) { background: #7f8c8d; left: 85%; animation-delay: 0.1s; } .confetti:nth-child(18) { background: #f39c12; left: 95%; animation-delay: 0.3s; } .confetti:nth-child(19) { background: #e74c3c; left: 5%; animation-delay: 0.5s; } .confetti:nth-child(20) { background: #3498db; left: 12%; animation-delay: 0.7s; } @keyframes confetti-fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } .confetti-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1001; overflow: hidden; } @media (max-width: 768px) { body { padding: 10px; } .container { padding: 20px; border-radius: 15px; } .title { font-size: 2rem; } .subtitle { font-size: 1rem; } .level-buttons { flex-wrap: wrap; gap: 8px; padding: 8px; } .level-btn { font-size: 1rem; padding: 10px 16px; min-width: 85px; } .operation-buttons { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px; padding: 15px; max-width: 100%; } .operation-btn { height: 100px; font-size: 1.2rem; padding: 20px 15px; } .number-box, .operator-box, .equals-box, .question-mark-box { font-size: 2.2rem; padding: 12px 16px; min-width: 55px; } .keypad { max-width: 100%; gap: 12px; } .keypad-btn { font-size: 2rem; min-height: 70px; padding: 18px; } .check-btn { font-size: 1.6rem; padding: 18px 35px; min-height: 65px; } .digit-box { width: 50px; height: 65px; font-size: 2.2rem; padding: 8px 10px; } .math-number { font-size: 1.8rem; min-width: 55px; } .math-operator { font-size: 1.8rem; } .vertical-math { max-width: 180px; padding: 18px; } .division-horizontal { gap: 12px; } .division-horizontal span { font-size: 2.2rem !important; } .popup-content { padding: 30px 20px; margin: 0 10px; } .popup-icon { font-size: 3.5rem; } .popup-title { font-size: 1.8rem; } .popup-message { font-size: 1.2rem; } .score-board { padding: 15px; margin-bottom: 15px; } .score-number { font-size: 1.8rem; } .score-label { font-size: 0.9rem; } } @media (max-width: 480px) { .container { padding: 15px; } .title { font-size: 1.8rem; } .operation-buttons { gap: 10px; padding: 12px; } .operation-btn { height: 90px; font-size: 1.1rem; } .keypad-btn { font-size: 1.8rem; min-height: 65px; padding: 15px; } .check-btn { font-size: 1.5rem; padding: 16px 30px; min-height: 60px; } .digit-box { width: 45px; height: 60px; font-size: 2rem; } .number-box, .operator-box, .equals-box, .question-mark-box { font-size: 2rem; padding: 10px 14px; min-width: 50px; } .division-horizontal span { font-size: 2rem !important; } } 🧮 Matematik Dört İşlem Oyunu Dört işlemi öğrenmenin eğlenceli yolu! 🟢 Kolay 🟡 Orta 🔴 Zor ➕ Toplama ➖ Çıkarma ✖️ Çarpma ➗ Bölme Yukarıdan bir işlem seç! 👆 1 2 3 4 5 6 7 8 9 C 0 ⌫ ✓ Kontrol Et 0 Doğru 0 Toplam 0% Başarı 🎉 Tebrikler! Doğru cevap!

Matematik Dört işlem Oyunu

🧮 Matematik Dört İşlem Oyunu

Öğretmen

Bir yanıt yazın Yanıtı iptal et

5.Sınıf Temel Geometrik Kavramlar Kim Milyoner Olmak İster Yarışması

5.Sınıf Çarpma ve Bölme Problemleri Test Çöz

5.Sınıf Temel Geometrik Kavramlar Etkinliği

7.Sınıf Tam Sayılarda Toplama İşlemi Etkinliği-2

5.Sınıf Açılar Konu Kavrama Etkinliği

5.Sınıf Kare ve Dikdörtgenin Çevre ve Alanı Etkinlik ve Test Çöz

🎯 6.Sınıf Ortak Kat ve Ortak Bölen Bulma Oyunu

4.Sınıf Doğal Sayıların Okunuşu Basamak ve Sayı Değerleri Etkinliği

5.Sınıf Eşitliğin Korunumu Sürükle Bırak Etkinliği

Etkin Matematik

5.Sınıf Matematik

🧮 Matematik Dört İşlem Oyunu

Öğretmen

5.Sınıf Açılar Konu Kazanım Testi

6.Sınıf Bölünebilme Kuralları Yazılı Hazırlık soruları çözümlü

İlgili Makaleler

Etkin Matematik

Doğal Sayılar Dört İşlem Oyunu

6.sınıf Ondalık Sayıların Basamak Değerini Bulma Oyunu

Çarpım Tablosu Oyunu Eğlenceli Kamyon Yarışı

Bir yanıt yazın Yanıtı iptal et

5.Sınıf Kare ve Dikdörtgenin Çevre ve Alanı Etkinlik ve Test Çöz

🎯 6.Sınıf Ortak Kat ve Ortak Bölen Bulma Oyunu

4.Sınıf Doğal Sayıların Okunuşu Basamak ve Sayı Değerleri Etkinliği

5.Sınıf Eşitliğin Korunumu Sürükle Bırak Etkinliği

Etkin Matematik

5.Sınıf Matematik