Senaryo Bazlı Duygu Yönetimi /* Genel Sayfa Stilleri */ body { font-family: 'Roboto', 'Open Sans', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* İçeriği üste yasla */ min-height: 100vh; margin: 0; background-color: #f4f7f6; /* Çok açık yeşilimsi gri */ color: #333; padding: 20px; box-sizing: border-box; } /* Oyun Konteyneri */ #game-container { background-color: #ffffff; padding: 30px 35px; border-radius: 12px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); width: 100%; max-width: 750px; border: 1px solid #dce3e1; margin-bottom: 30px; } h1 { color: #2a7c6f; /* Sakin bir yeşil tonu */ margin-bottom: 25px; font-size: 2em; text-align: center; border-bottom: 2px solid #e0e7e5; padding-bottom: 15px; } /* Senaryo Alanı */ #scenario-area { margin-bottom: 25px; } #scenario-text { font-size: 1.25em; color: #444; line-height: 1.7; padding: 15px; background-color: #f9fbfb; border-radius: 8px; border-left: 5px solid #5cb85c; /* Vurgu için yeşil sol kenar */ min-height: 60px; } /* Seçenekler Alanı */ #choices-area h3 { color: #555; font-size: 1.1em; margin-bottom: 12px; } .choice-button { display: block; width: 100%; background-color: #3498db; /* Mavi seçenek butonu */ color: white; border: none; padding: 14px 20px; margin-bottom: 10px; border-radius: 8px; cursor: pointer; font-size: 1.05em; text-align: left; transition: background-color 0.25s ease, transform 0.15s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .choice-button:hover { background-color: #2980b9; /* Hover'da koyu mavi */ transform: translateY(-2px); } .choice-button:active { transform: translateY(0px); } .choice-button:disabled { background-color: #bdc3c7; /* Pasif buton rengi */ cursor: not-allowed; opacity: 0.7; } .choice-button.selected { background-color: #2ecc71; /* Seçilen doğru/yapıcı seçenek */ border: 2px solid #27ae60; } .choice-button.selected-other { background-color: #e67e22; /* Seçilen diğer seçenekler */ border: 2px solid #d35400; } /* Sonuç Alanı */ #outcome-area { margin-top: 25px; padding: 20px; background-color: #eef3f7; /* Açık mavi-gri sonuç arka planı */ border-radius: 8px; border: 1px solid #d0d9e0; display: none; /* Başlangıçta gizli */ animation: fadeIn 0.5s ease-in-out; } #outcome-area h4 { color: #31708f; /* Sonuç başlığı rengi */ margin-top: 0; margin-bottom: 10px; font-size: 1.2em; } #outcome-text { font-size: 1.1em; line-height: 1.6; color: #525252; } /* Sonraki Senaryo Butonu */ #next-scenario-button { display: none; /* Başlangıçta gizli */ background-color: #5cb85c; /* Yeşil */ color: white; padding: 12px 25px; border: none; border-radius: 8px; font-size: 1.1em; cursor: pointer; margin-top: 25px; float: right; /* Sağa yasla */ transition: background-color 0.3s ease; } #next-scenario-button:hover { background-color: #4cae4c; } /* Tamamlanma Mesajı */ #completion-message { text-align: center; font-size: 1.5em; color: #2a7c6f; padding: 25px; background-color: #e6fff9; border: 2px dashed #79d2c3; border-radius: 10px; margin-top: 20px; } /* Fade-in animasyonu */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Tasarım */ @media (max-width: 768px) { #game-container { padding: 20px 25px; } h1 { font-size: 1.7em; } #scenario-text, .choice-button, #outcome-text { font-size: 1em; } #outcome-area { padding: 15px; } #next-scenario-button { width: 100%; float: none; margin-top: 20px; } } Durum ve Tepkiler ⚖️ Bu durumda ne yapardın? Olası Sonuç: Sıradaki Durum ❯ Tüm durumları değerlendirdiniz. Farklı tepkilerin olası sonuçlarını düşünmek, daha bilinçli kararlar almanıza yardımcı olabilir! const scenarioTextElement = document.getElementById('scenario-text'); const choicesButtonsContainer = document.getElementById('choices-buttons'); const outcomeArea = document.getElementById('outcome-area'); const outcomeTextElement = document.getElementById('outcome-text'); const nextScenarioButton = document.getElementById('next-scenario-button'); const completionMessage = document.getElementById('completion-message'); const scenarios = [ { id: 1, scenario: "Bir arkadaşınızla buluşmak için sözleştiniz ama arkadaşınız haber vermeden gelmedi ve telefonlarına da cevap vermiyor.", choices: [ { text: "Çok sinirlenir, arkadaşıma tekrar tekrar mesaj atar ve ararım.", outcome: "Bu durum, endişenizi artırabilir ve arkadaşınız müsait olduğunda gergin bir konuşmaya yol açabilir. Belki de geçerli bir mazereti vardır.", type: "reactive" }, { text: "Endişelenir ama bir süre beklerim. Daha sonra sakin bir zamanda nedenini sorarım.", outcome: "Sakin kalmak, durumu daha net değerlendirmenize ve arkadaşınızla daha yapıcı bir iletişim kurmanıza yardımcı olur. Empati kurmak önemlidir.", type: "constructive" }, { text: "Umursamaz, kendi planlarıma devam ederim ve konuyu bir daha açmam.", outcome: "Bu, sorunu çözmez ve ilişkinizde birikmiş kırgınlıklara yol açabilir. İletişimsizlik, yanlış anlaşılmaları artırır.", type: "passive" } ] }, { id: 2, scenario: "İş yerinde/okulda bir proje üzerinde çalışıyorsunuz ve bir ekip üyesi sürekli olarak fikirlerinizi eleştiriyor ve küçümsüyor.", choices: [ { text: "Aynı şekilde karşılık verir, onun fikirlerini de eleştiririm.", outcome: "Bu, çatışmayı tırmandırır ve iş ortamını/okul atmosferini olumsuz etkiler. Verimli bir çalışma ortamı sağlanamaz.", type: "negative" }, { text: "Durumu görmezden gelir, içime atarım ve motivasyonumu kaybederim.", outcome: "Bu, özgüveninizi zedeleyebilir ve performansınızı düşürebilir. Sorun çözülmeden kalır.", type: "passive" }, { text: "Ekip üyesiyle özel olarak konuşmayı dener, hissettiklerimi ve yapıcı eleştiriye açık olduğumu belirtirim.", outcome: "Açık ve saygılı bir iletişim, yanlış anlaşılmaları giderebilir ve daha sağlıklı bir çalışma ilişkisi kurma şansı tanır.", type: "constructive" } ] }, { id: 3, scenario: "Sosyal medyada bir paylaşımınıza olumsuz ve kırıcı bir yorum yapıldı.", choices: [ { text: "Hemen yoruma öfkeli bir cevap yazarım.", outcome: "Bu genellikle tartışmayı büyütür ve sizi daha fazla strese sokar. 'Troll'leri beslemiş olabilirsiniz.", type: "reactive" }, { text: "Yorumu siler ve kullanıcıyı engellerim, üzerinde durmamaya çalışırım.", outcome: "Bu, anlık olarak sizi koruyabilir ve enerjinizi olumsuz bir etkileşimde harcamanızı önler. Ancak nedenini anlamadan geçebilirsiniz.", type: "avoidant" }, { text: "Yorumun yapıcı bir tarafı olup olmadığını düşünür, eğer yoksa sakince görmezden gelir veya 'Bu yoruma katılmıyorum ama fikrinize saygı duyuyorum.' gibi nötr bir cevap veririm.", outcome: "Duygusal tepki vermeden durumu yönetmek, kontrolün sizde kalmasını sağlar ve olgun bir yaklaşım sergiler.", type: "constructive" } ] } ]; let currentScenarioIndex = 0; function loadScenario(index) { if (index >= scenarios.length) { showCompletionMessage(); return; } const currentScenario = scenarios[index]; scenarioTextElement.textContent = currentScenario.scenario; choicesButtonsContainer.innerHTML = ''; // Önceki butonları temizle outcomeArea.style.display = 'none'; nextScenarioButton.style.display = 'none'; currentScenario.choices.forEach((choice, choiceIndex) => { const button = document.createElement('button'); button.classList.add('choice-button'); button.textContent = choice.text; button.onclick = () => selectChoice(choice, button, currentScenario.choices); choicesButtonsContainer.appendChild(button); }); } function selectChoice(selectedChoice, clickedButton, allChoiceButtonsElements) { outcomeTextElement.textContent = selectedChoice.outcome; outcomeArea.style.display = 'block'; nextScenarioButton.style.display = 'block'; // Tüm butonları pasif yap ve seçileni işaretle const buttons = choicesButtonsContainer.getElementsByTagName('button'); for (let btn of buttons) { btn.disabled = true; if (btn === clickedButton) { if (selectedChoice.type === 'constructive') { // Yapıcı seçeneği farklı renkte belirt btn.classList.add('selected'); } else { btn.classList.add('selected-other'); } } } } nextScenarioButton.addEventListener('click', () => { currentScenarioIndex++; loadScenario(currentScenarioIndex); }); function showCompletionMessage() { document.getElementById('scenario-area').style.display = 'none'; document.getElementById('choices-area').style.display = 'none'; outcomeArea.style.display = 'none'; nextScenarioButton.style.display = 'none'; completionMessage.style.display = 'block'; } // Oyunu Başlat loadScenario(currentScenarioIndex);