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

🎯 Oyunun AmacıPozitif ve negatif tam sayılarla toplama işlemlerini öğretmekMatematik becerilerini görsel ve işitsel geri bildirimlerle pekiştirmekÖğrencilerin motivasyonunu artırmak ve öğrenmeyi eğlenceli hale getirmek📊 Seviye SistemiSeviye 1 (Kolay): -10 ile +10 arasındaki sayılar Seviye 2 (Orta): -20 ile +20 arasındaki sayılarSeviye 3 (Zor): -50 ile +50 arasındaki sayılar Tam Sayılarda Toplama Oyunu * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .game-container { background: white; border-radius: 20px; padding: 40px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); max-width: 600px; width: 100%; text-align: center; } .header { margin-bottom: 30px; } .title { color: #333; font-size: 2.5rem; margin-bottom: 10px; font-weight: bold; } .subtitle { color: #666; font-size: 1.1rem; margin-bottom: 20px; } .score-board { display: flex; justify-content: space-around; margin-bottom: 30px; background: #f8f9fa; padding: 20px; border-radius: 15px; } .score-item { text-align: center; } .score-label { color: #666; font-size: 0.9rem; margin-bottom: 5px; } .score-value { font-size: 1.8rem; font-weight: bold; color: #333; } .question-area { background: #e3f2fd; padding: 30px; border-radius: 15px; margin-bottom: 30px; border: 3px solid #2196f3; } .question { font-size: 2rem; color: #1976d2; margin-bottom: 20px; font-weight: bold; letter-spacing: 2px; } .answer-input { font-size: 1.8rem; padding: 15px 20px; border: 3px solid #ddd; border-radius: 10px; width: 200px; text-align: center; margin-right: 15px; transition: border-color 0.3s; } .answer-input:focus { outline: none; border-color: #2196f3; } .options-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; } .option-btn { background: #f5f5f5; border: 3px solid #ddd; padding: 15px 20px; font-size: 1.2rem; border-radius: 10px; cursor: pointer; transition: all 0.3s; font-weight: bold; text-align: left; position: relative; overflow: hidden; } .option-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.5s; } .option-btn:hover { background: #e3f2fd; border-color: #2196f3; transform: translateY(-2px); } .option-btn:hover::before { left: 100%; } .option-btn.selected { background: #2196f3; color: white; border-color: #1976d2; } .option-btn.correct { background: #4caf50; color: white; border-color: #45a049; } .option-btn.incorrect { background: #f44336; color: white; border-color: #d32f2f; } .option-btn:disabled { cursor: not-allowed; opacity: 0.7; } .feedback { margin-top: 20px; padding: 15px; border-radius: 10px; font-size: 1.2rem; font-weight: bold; min-height: 50px; display: flex; align-items: center; justify-content: center; } .feedback.correct { background: #d4edda; color: #155724; border: 2px solid #c3e6cb; } .feedback.incorrect { background: #f8d7da; color: #721c24; border: 2px solid #f5c6cb; } .next-btn { background: #2196f3; color: white; border: none; padding: 12px 25px; font-size: 1.1rem; border-radius: 8px; cursor: pointer; margin-left: 15px; transition: background 0.3s; } .next-btn:hover { background: #1976d2; } .progress-bar { background: #e0e0e0; height: 10px; border-radius: 5px; margin-bottom: 20px; overflow: hidden; } .progress-fill { background: linear-gradient(90deg, #4caf50, #8bc34a); height: 100%; transition: width 0.5s ease; border-radius: 5px; position: relative; } .progress-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); animation: progress-shine 2s infinite; } .level-indicator { background: #ff9800; color: white; padding: 8px 16px; border-radius: 20px; font-weight: bold; display: inline-block; margin-bottom: 20px; } /* Konfeti animasyonu */ .confetti { position: fixed; width: 10px; height: 10px; background: #f39c12; animation: confetti-fall 1.5s linear forwards; z-index: 1000; } .confetti:nth-child(odd) { background: #e74c3c; animation-delay: 0.5s; } .confetti:nth-child(3n) { background: #3498db; animation-delay: 1s; } .confetti:nth-child(4n) { background: #2ecc71; animation-delay: 1.5s; } @keyframes confetti-fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } /* Alkış emojileri animasyonu */ .clap-emoji { position: fixed; font-size: 3rem; animation: clap-bounce 2s ease-out forwards; z-index: 1001; pointer-events: none; } @keyframes clap-bounce { 0% { transform: scale(0) rotate(0deg); opacity: 0; } 50% { transform: scale(1.2) rotate(180deg); opacity: 1; } 100% { transform: scale(0.8) rotate(360deg); opacity: 0; } } /* Üzgün yüz emojileri animasyonu */ .sad-emoji { position: fixed; font-size: 3rem; animation: sad-fall 2.5s ease-out forwards; z-index: 1001; pointer-events: none; } @keyframes sad-fall { 0% { transform: scale(0) rotate(0deg); opacity: 0; } 30% { transform: scale(1.1) rotate(-10deg); opacity: 1; } 70% { transform: scale(1) rotate(5deg); opacity: 1; } 100% { transform: scale(0.7) translateY(50px) rotate(-15deg); opacity: 0; } } /* BRAVO yazısı animasyonu */ .bravo-text { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); font-size: 4rem; font-weight: bold; color: #ff6b35; text-shadow: 3px 3px 0px #fff, -1px -1px 0px #000; animation: bravo-zoom 3s ease-out forwards; z-index: 1002; pointer-events: none; } @keyframes bravo-zoom { 0% { transform: translateX(-50%) scale(0) rotate(-180deg); opacity: 0; } 30% { transform: translateX(-50%) scale(1.3) rotate(0deg); opacity: 1; } 70% { transform: translateX(-50%) scale(1.1) rotate(5deg); opacity: 1; } 100% { transform: translateX(-50%) scale(0) rotate(180deg); opacity: 0; } } /* Yıldız patlaması animasyonu */ .star-burst { position: fixed; font-size: 2rem; animation: star-explode 2s ease-out forwards; z-index: 1000; pointer-events: none; } @keyframes star-explode { 0% { transform: scale(0) rotate(0deg); opacity: 1; } 50% { transform: scale(1.5) rotate(180deg); opacity: 1; } 100% { transform: scale(0.5) rotate(360deg); opacity: 0; } } /* Başarı rozeti animasyonu */ .success-badge { position: fixed; top: 30%; right: 10%; font-size: 5rem; animation: badge-spin 3s ease-in-out forwards; z-index: 1001; pointer-events: none; } @keyframes badge-spin { 0% { transform: scale(0) rotate(-360deg); opacity: 0; } 30% { transform: scale(1.2) rotate(0deg); opacity: 1; } 70% { transform: scale(1) rotate(20deg); opacity: 1; } 100% { transform: scale(0) rotate(360deg); opacity: 0; } } /* Titreme animasyonu */ .shake { animation: shake 0.5s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } } /* Parlama animasyonu */ .sparkle { position: relative; overflow: visible; } .sparkle::before { content: '✨'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 2rem; animation: sparkle-bounce 2s ease-in-out; z-index: 100; } @keyframes sparkle-bounce { 0%, 100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 0; } 50% { transform: translateX(-50%) translateY(-20px) scale(1.5); opacity: 1; } } /* Pulse animasyonu doğru cevap için */ .pulse-correct { animation: pulse-green 1s ease-in-out; } @keyframes pulse-green { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); } 50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(76, 175, 80, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); } } /* Pulse animasyonu yanlış cevap için */ .pulse-incorrect { animation: pulse-red 1s ease-in-out; } @keyframes pulse-red { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7); } 50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(244, 67, 54, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); } } /* Seviye geçiş animasyonu */ .level-up { animation: level-up-glow 2s ease-in-out; } @keyframes level-up-glow { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7); background: #ff9800; } 50% { transform: scale(1.1); box-shadow: 0 0 0 30px rgba(255, 152, 0, 0); background: #ffc107; } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); background: #ff9800; } } @keyframes progress-shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @media (max-width: 600px) { .game-container { padding: 20px; } .title { font-size: 2rem; } .question { font-size: 1.5rem; } .options-container { grid-template-columns: 1fr; gap: 10px; } .option-btn { font-size: 1.1rem; padding: 12px 15px; } .score-board { flex-direction: column; gap: 15px; } } 🧮 Tam Sayılarda Toplama İşlemi Etkinliği Pozitif ve negatif sayıları toplayarak doğru cevabı bul! Seviye 1 Doğru 0 Yanlış 0 Soru 1/10 -5 + 8 = ? A) 3 B) -3 C) 13 D) -13 Sonraki Soru

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

🎯 Oyunun Amacı

📊 Seviye Sistemi

🧮 Tam Sayılarda Toplama İşlemi Etkinliği

Öğretmen

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