tag:blogger.com,1999:blog-4920506582010073267Wed, 11 Mar 2026 22:03:10 +0000müzik eğitimiMÜZİK NOTAmüzik öğretmenigitarFLUTNota-Akor-EşlikMÜZİK yaZı / döKüManKEMANPIYANOKlarnetBAGLAMAneybassdünya'dan müziksaxophoneKAVALYOU-TÖVBEMüzik dersi materyalakor eşLikblokflütmüzik türleriRECORDERfaydalı sitelerMelodikaeğitimMÜZİK SİTELERİOKUL ŞARKILARI ALTYAPILARIDİSKOTEĞİMÇOCUKLAR İÇİNOKUL ÖNCESİ - DRAMA VBDUDUKMonO-"LOG'LaRıMBiLiYoRMuSuNUzHERGUNEBIRSEDAOKUYUP AYIRDIĞIM ÇARPAN YAZILARWeb2-EtkileşimİLGİNÇuzaktan eğitimKUŞBAKIŞIoyunVideoREHBERLIKDAVULGrup / Sanatçı TanıtımAKLINIZDA OLSUNMÜZİK HABERKo-miKTarih-TenDemiş ki;cRo-Gen sözLüKharp-arpŞİ-h-İRCaz-JaZzMüzik BiçimleriSİNEMA-FİLMklasikNEV-İ ŞAHIS TİPLERİTABVokaLeleşTiRikelime deyim hikayeleriTürkü hikayeLeridarbukaARANJMANeski çocuk oyunlarıPERFORMANS-PROJE ODEVLERISORU-N-LAR ORTA YERE...armoniTarslayt-diaSÖZLÜ ÇOCUK ŞARKILARIMÜZİK PROGRAMIPolifonikÇEPE-ÇEVREKITAP-DERGI TANITIMIarmonika-harmonicatestARTaryantic-arie anticheAcapella - KoroSAGLIKYARATICI DRAMAhikaye/masal/mitosFeLSEfeKişiseL GeLişimŞeHR-isTanbuLKaRikatüRYOU-TÖVBE TANGOtango jazzŞİMDİ HABERLERgitar riffmitolojiCODIA-GUNLUGUMMIDINasıl YapılırsatRançsiya-siya-setBorsaduYuRuindikatöringiLizceKuzey Rüzgarının YıldızıTONLARIN DILIbestelerimlemiuguzmybisgenİKONAemakulak eğitimismaGRAFİKTekerleme/SayışmaşiirTarihe Geçen KadınlarakorbebekcrossdoğaçlamaemprovizasyonkodlamanennininnisouNduykuwmaçocukbiSGen-eLvitodeLLaParçaLanmış, böLünmüş dünyama-kimLiğime müzik gezegeninden düşen ışığın göLgesi vursa yeter!....http://bisgen.blogspot.com/noreply@blogger.com (MybiSGen)Blogger1873125en-usnomusic,bass,guitar,flute,baglama,saz,piano,program,portablemusic, education, blog, guitar, flute, video, program, portablemusic, education, blog, guitar, flute, video, program, portablenoreply@blogger.comtag:blogger.com,1999:blog-4920506582010073267.post-7975980511285398971Fri, 05 Dec 2025 10:53:00 +00002025-12-05T13:53:18.020+03:00Müzik dersi materyalmüzik eğitimimüzik öğretmenitestuzaktan eğitimSes Değişimi Dönemi Test<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MybiSGen - Ses Değişimi Dönemi Testi</title> <style> /* TEMEL CSS STİLLERİ (Tasarım Değişmedi) */ body { font-family: Arial, sans-serif; background-color: #f4f4f9; color: #333; margin: 0; padding: 20px; } .container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } h1 { background-color: #1a73e8; /* MybiSGen markasına uygun mavi */ color: white; padding: 15px; border-radius: 8px 8px 0 0; text-align: center; margin-top: -30px; margin-left: -30px; margin-right: -30px; margin-bottom: 30px; font-size: 1.8em; } .score-box { font-size: 1.5em; font-weight: bold; color: #1a73e8; text-align: right; margin-bottom: 20px; padding-right: 15px; } .question-box { margin-bottom: 25px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; /* İlk soru hariç hepsi başlangıçta gizli */ display: none; } .question-box:first-of-type { display: block; /* İlk soruyu göster */ } .question-text { font-size: 1.2em; font-weight: bold; margin-bottom: 15px; } .option { margin-bottom: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; } .option input[type="radio"] { margin-right: 10px; } .check-btn, .next-btn { padding: 8px 15px; color: white; border: none; border-radius: 5px; font-size: 1em; cursor: pointer; margin-top: 10px; transition: background-color 0.3s; display: block; /* Tam genişlikte butonlar */ width: 100%; box-sizing: border-box; text-align: center; } .check-btn { background-color: #ff9800; /* Turuncu */ } .check-btn:hover:not(:disabled) { background-color: #e68900; } .check-btn:disabled { background-color: #ccc; cursor: not-allowed; } .next-btn { background-color: #1a73e8; /* Mavi */ margin-top: 15px; } .next-btn:hover { background-color: #155bb5; } /* Geri bildirim stilleri */ .correct-answer { background-color: #d4edda !important; /* Yeşil */ border-color: #28a745 !important; } .incorrect-answer { background-color: #f8d7da !important; /* Kırmızımsı */ border-color: #dc3545 !important; } .feedback { margin-top: 10px; padding: 10px; border-radius: 5px; font-weight: bold; } .feedback.correct { background-color: #28a745; color: white; } .feedback.incorrect { background-color: #dc3545; color: white; } .final-results { text-align: center; padding: 50px; font-size: 1.5em; border: 2px solid #1a73e8; border-radius: 10px; background-color: #e3f2fd; } </style> </head> <body> <div class="container"> <h1>MybiSGen - Ses Değişimi Dönemi Testi 🎤</h1> <div class="score-box">Puan: <span id="currentScore">0</span> / 10</div> <form id="quizForm"> <div class="question-box" id="q1"> <div class="question-text"> 1. Ses değişiminin yaşandığı temel dönem, çocukluk döneminin bitişiyle başlayan hangi süreçtir? </div> <div class="option"> <input type="radio" name="q1_options" value="a" id="q1a"> <label for="q1a">Büyüme Hızı Dönemi</label> </div> <div class="option"> <input type="radio" name="q1_options" value="b" id="q1b"> <label for="q1b">Ergenlik Dönemi</label> </div> <div class="option"> <input type="radio" name="q1_options" value="c" id="q1c"> <label for="q1c">İlk Okul Dönemi</label> </div> <div class="option"> <input type="radio" name="q1_options" value="d" id="q1d"> <label for="q1d">Genç Yetişkinlik Dönemi</label> </div> <button type="button" class="check-btn" onclick="checkAnswer('q1')">Kontrol Et</button> <div id="feedback_q1" class="feedback" style="display: none;"></div> <button type="button" class="next-btn" style="display: none;" onclick="nextQuestion()">Sonraki Soru >></button> </div> <div class="question-box" id="q2"> <div class="question-text"> 2. Ses değişimine neden olan temel fizyolojik değişiklik, gırtlakta (larinks) ve ses tellerinde ne tür bir farklılaşmadır? </div> <div class="option"> <input type="radio" name="q2_options" value="a" id="q2a"> <label for="q2a">Ses tellerinin kısalıp incelmesi.</label> </div> <div class="option"> <input type="radio" name="q2_options" value="b" id="q2b"> <label for="q2b">Gırtlağın daralması ve sertleşmesi.</label> </div> <div class="option"> <input type="radio" name="q2_options" value="c" id="q2c"> <label for="q2c">Ses tellerinin uzayıp kalınlaşması.</label> </div> <div class="option"> <input type="radio" name="q2_options" value="d" id="q2d"> <label for="q2d">Akciğer kapasitesinin azalması.</label> </div> <button type="button" class="check-btn" onclick="checkAnswer('q2')">Kontrol Et</button> <div id="feedback_q2" class="feedback" style="display: none;"></div> <button type="button" class="next-btn" style="display: none;" onclick="nextQuestion()">Sonraki Soru >></button> </div> <div class="question-box" id="q3"> <div class="question-text"> 3. Erkeklerdeki ses değişimi, hangi hormonun artışına bağlı olarak kızlara oranla daha belirgin ve ani gerçekleşir? </div> <div class="option"> <input type="radio" name="q3_options" value="a" id="q3a"> <label for="q3a">Östrojen</label> </div> <div class="option"> <input type="radio" name="q3_options" value="b" id="q3b"> <label for="q3b">İnsülin</label> </div> <div class="option"> <input type="radio" name="q3_options" value="c" id="q3c"> <label for="q3c">Testosteron</label> </div> <div class="option"> <input type="radio" name="q3_options" value="d" id="q3d"> <label for="q3d">Tiroksin</label> </div> <button type="button" class="check-btn" onclick="checkAnswer('q3')">Kontrol Et</button> <div id="feedback_q3" class="feedback" style="display: none;"></div> <button type="button" class="next-btn" style="display: none;" onclick="nextQuestion()">Sonraki Soru >></button> </div> <div class="question-box" id="q4"> <div class="question-text"> 4. Ses tellerinde hızlı büyüme ve kasların uyum sağlayamaması sonucu seslerde meydana gelen ani ve kontrolsüz yükseklik (tizleşme) değişimine ne ad verilir? </div> <div class="option"> <input type="radio" name="q4_options" value="a" id="q4a"> <label for="q4a">Vokal titreme (tremor)</label> </div> <div class="option"> <input type="radio" name="q4_options" value="b" id="q4b"> <label for="q4b">Ses çatallanması</label> </div> <div class="option"> <input type="radio" name="q4_options" value="c" id="q4c"> <label for="q4c">Ses kısıklığı (afoni)</label> </div> <div class="option"> <input type="radio" name="q4_options" value="d" id="q4d"> <label for="q4d">Ses teli nodülü</label> </div> <button type="button" class="check-btn" onclick="checkAnswer('q4')">Kontrol Et</button> <div id="feedback_q4" class="feedback" style="display: none;"></div> <button type="button" class="next-btn" style="display: none;" onclick="nextQuestion()">Sonraki Soru >></button> </div> <div class="question-box" id="q5"> <div class="question-text"> 5. Bu dönemde ses sağlığını korumak ve ses tellerini nemli tutmak için alınması gereken en temel önlem nedir? </div> <div class="option"> <input type="radio" name="q5_options" value="a" id="q5a"> <label for="q5a">Sürekli fısıltıyla konuşmak.</label> </div> <div class="option"> <input type="radio" name="q5_options" value="b" id="q5b"> <label for="q5b">Günde 1 litreden az su tüketmek.</label> </div> <div class="option"> <input type="radio" name="q5_options" value="c" id="q5c"> <label for="q5c">Günde bol miktarda (en az 8-10 bardak) oda sıcaklığında su içmek.</label> </div> <div class="option"> <input type="radio" name="q5_options" value="d" id="q5d"> <label for="q5d">Aşırı soğuk içecekler tüketmek.</label> </div> <button type="button" class="check-btn" onclick="checkAnswer('q5')">Kontrol Et</button> <div id="feedback_q5" class="feedback" style="display: none;"></div> <button type="button" class="next-btn" style="display: none;" onclick="nextQuestion()">Sonraki Soru >></button> </div> <div class="question-box" id="q6"> <div class="question-text"> 6. Aşağıdaki davranışlardan hangisi, ses değişim döneminde ses tellerine en çok zarar veren ve kaçınılması gereken eylemdir? </div> <div class="option"> <input type="radio" name="q6_options" value="a" id="q6a"> <label for="q6a">Yumuşak tonda ve anlaşılır konuşmak.</label> </div> <div class="option"> <input type="radio" name="q6_options" value="b" id="q6b"> <label for="q6b">Yüksek sesle bağırmak veya çığlık atmak.</label> </div> <div class="option"> <input type="radio" name="q6_options" value="c" id="q6c"> <label for="q6c">Kısa süreli şarkı mırıldanmak.</label> </div> <div class="option"> <input type="radio" name="q6_options" value="d" id="q6d"> <label for="q6d">Gırtlağı sürekli temizleme ihtiyacı hissetmek.</label> </div> <button type="button" class="check-btn" onclick="checkAnswer('q6')">Kontrol Et</button> <div id="feedback_q6" class="feedback" style="display: none;"></div> <button type="button" class="next-btn" style="display: none;" onclick="nextQuestion()">Sonraki Soru >></button> </div> <div class="question-box" id="q7"> <div class="question-text"> 7. Ses değişim döneminde sesin güçlü ve sağlıklı çıkması için, karın kaslarının kullanıldığı doğru nefes alma tekniği nedir? </div> <div class="option"> <input type="radio" name="q7_options" value="a" id="q7a"> <label for="q7a">Göğüs Nefesi</label> </div> <div class="option"> <input type="radio" name="q7_options" value="b" id="q7b"> <label for="q7b">Omuz Nefesi</label> </div> <div class="option"> <input type="radio" name="q7_options" value="c" id="q7c"> <label for="q7c">Diyafram Nefesi</label> </div> <div class="option"> <input type="radio" name="q7_options" value="d" id="q7d"> <label for="q7d">Yüzeysel Nefes</label> </div> <button type="button" class="check-btn" onclick="checkAnswer('q7')">Kontrol Et</button> <div id="feedback_q7" class="feedback" style="display: none;"></div> <button type="button" class="next-btn" style="display: none;" onclick="nextQuestion()">Sonraki Soru >></button> </div> <div class="question-box" id="q8"> <div class="question-text"> 8. Ses değişim döneminde ses tellerinin tahrişini ve kuruluğunu artıran çevresel faktörler arasında aşağıdakilerden hangisi yer alır? </div> <div class="option"> <input type="radio" name="q8_options" value="a" id="q8a"> <label for="q8a">Sıcak ve nemli hava.</label> </div> <div class="option"> <input type="radio" name="q8_options" value="b" id="q8b"> <label for="q8b">Klimalı, kuru ve dumanlı ortamlar.</label> </div> <div class="option"> <input type="radio" name="q8_options" value="c" id="q8c"> <label for="q8c">Günde birkaç kez ılık su buharı solumak.</label> </div> <div class="option"> <input type="radio" name="q8_options" value="d" id="q8d"> <label for="q8d">Sessiz ve havalandırılmış odalar.</label> </div> <button type="button" class="check-btn" onclick="checkAnswer('q8')">Kontrol Et</button> <div id="feedback_q8" class="feedback" style="display: none;"></div> <button type="button" class="next-btn" style="display: none;" onclick="nextQuestion()">Sonraki Soru >></button> </div> <div class="question-box" id="q9"> <div class="question-text"> 9. Ses değişim sürecinde yapılması önerilen, ancak birçok kişi tarafından yanlış bilinen bir eylem hangisidir? </div> <div class="option"> <input type="radio" name="q9_options" value="a" id="q9a"> <label for="q9a">Kişisel ses sınırlarını aşmayacak şekilde normal tonda konuşmak.</label> </div> <div class="option"> <input type="radio" name="q9_options" value="b" id="q9b"> <label for="q9b">Boğazı temizlemek için sürekli öksürme veya gırtlak temizleme eylemi.</label> </div> <div class="option"> <input type="radio" name="q9_options" value="c" id="q9c"> <label for="q9c">Uyku düzenine dikkat etmek.</label> </div> <div class="option"> <input type="radio" name="q9_options" value="d" id="q9d"> <label for="q9d">Sigara dumanına maruz kalmaktan kaçınmak.</label> </div> <button type="button" class="check-btn" onclick="checkAnswer('q9')">Kontrol Et</button> <div id="feedback_q9" class="feedback" style="display: none;"></div> <button type="button" class="next-btn" style="display: none;" onclick="nextQuestion()">Sonraki Soru >></button> </div> <div class="question-box" id="q10"> <div class="question-text"> 10. Ses değişimi süreci genellikle ne kadar sürer ve bu sürede sesi zorlamaktan kaçınmak için ne yapılmalıdır? </div> <div class="option"> <input type="radio" name="q10_options" value="a" id="q10a"> <label for="q10a">Birkaç ay sürer; bu süreçte sürekli şarkı söylenmelidir.</label> </div> <div class="option"> <input type="radio" name="q10_options" value="b" id="q10b"> <label for="q10b">6 aydan 1 yıla kadar sürebilir; bu dönemde ses eğitimi alınmalıdır.</label> </div> <div class="option"> <input type="radio" name="q10_options" value="c" id="q10c"> <label for="q10c">6 aydan 1 yıla kadar sürebilir; bu dönemde sesi zorlamaktan kaçınılmalıdır.</label> </div> <div class="option"> <input type="radio" name="q10_options" value="d" id="q10d"> <label for="q10d">Sadece birkaç hafta sürer; bu süreçte soğuk yiyecekler tüketilmelidir.</label> </div> <button type="button" class="check-btn" onclick="checkAnswer('q10')">Kontrol Et</button> <div id="feedback_q10" class="feedback" style="display: none;"></div> <button type="button" class="next-btn" style="display: none;" onclick="nextQuestion()">Testi Bitir ve Sonucu Gör</button> </div> <div id="final-result-screen" class="final-results" style="display: none;"> </div> </form> </div> <script> // Doğru cevaplar (value değerleri): const correctAnswers = { 'q1': 'b', 'q2': 'c', 'q3': 'c', 'q4': 'b', 'q5': 'c', 'q6': 'b', 'q7': 'c', 'q8': 'b', 'q9': 'b', 'q10': 'c' }; let score = 0; let currentQuestionIndex = 1; const totalQuestions = 10; const scoreElement = document.getElementById('currentScore'); const questionBoxes = document.querySelectorAll('.question-box'); // Başlangıçta sadece ilk soruyu göster questionBoxes.forEach((box, index) => { box.style.display = index === 0 ? 'block' : 'none'; }); // Cevabı kontrol eden ana fonksiyon function checkAnswer(questionId) { const questionElement = document.getElementById(questionId); const selectedOption = questionElement.querySelector(`input[name="${questionId}_options"]:checked`); const correctValue = correctAnswers[questionId]; const feedbackElement = document.getElementById(`feedback_${questionId}`); const checkButton = questionElement.querySelector('.check-btn'); const nextButton = questionElement.querySelector('.next-btn'); // Kullanıcı bir seçim yapmadıysa if (!selectedOption) { feedbackElement.style.display = 'block'; feedbackElement.className = 'feedback incorrect'; feedbackElement.textContent = 'Lütfen bir seçim yapın.'; return; } // Tüm radyo butonlarını devre dışı bırak questionElement.querySelectorAll('input[type="radio"]').forEach(radio => { radio.disabled = true; }); // Kontrol butonunu devre dışı bırak checkButton.style.display = 'none'; nextButton.style.display = 'block'; // Sonraki soru butonunu göster // Cevap doğruysa if (selectedOption.value === correctValue) { score++; scoreElement.textContent = score; selectedOption.parentNode.classList.add('correct-answer'); feedbackElement.style.display = 'block'; feedbackElement.className = 'feedback correct'; feedbackElement.textContent = 'Doğru! 🎉'; } // Cevap yanlışsa else { selectedOption.parentNode.classList.add('incorrect-answer'); // Doğru cevabı bul ve işaretle const correctAnswerRadio = questionElement.querySelector(`input[name="${questionId}_options"][value="${correctValue}"]`); const correctAnswerText = correctAnswerRadio.nextElementSibling.textContent; if (correctAnswerRadio) { correctAnswerRadio.parentNode.classList.add('correct-answer'); } feedbackElement.style.display = 'block'; feedbackElement.className = 'feedback incorrect'; feedbackElement.textContent = `Yanlış. Doğru cevap: "${correctAnswerText}" idi.`; } } // Bir sonraki soruya geçişi veya testi bitirmeyi sağlayan fonksiyon function nextQuestion() { // Mevcut soruyu gizle const currentQuestionId = 'q' + currentQuestionIndex; document.getElementById(currentQuestionId).style.display = 'none'; currentQuestionIndex++; if (currentQuestionIndex > totalQuestions) { // Test bitti, sonuç ekranını göster const finalScreen = document.getElementById('final-result-screen'); finalScreen.style.display = 'block'; finalScreen.innerHTML = ` <h2>TEST BAŞARIYLA TAMAMLANDI!</h2> <p>Toplam Puanınız: <span style="font-size: 1.5em; color: #4CAF50;">${score}</span> / 10</p> <p>Bilginizi test ettiğiniz için teşekkürler!</p> `; // Puan kutusunu da gizle document.querySelector('.score-box').style.display = 'none'; } else { // Bir sonraki soruyu göster const nextQuestionId = 'q' + currentQuestionIndex; document.getElementById(nextQuestionId).style.display = 'block'; } } </script> </body> </html><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/12/ses-degisimi-donemi-test.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-7351795428609800258Thu, 04 Dec 2025 20:31:10 +00002025-12-04T23:31:58.775+03:00Müzik dersi materyalmüzik eğitimimüzik öğretmenitestuzaktan eğitim🎶 İlgili Minör/Majör Bulma Alıştırması<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>🎶 İlgili Minör/Majör Bulma Alıştırması</title> <style> /* ==================================== */ /* 1. CSS STİLLERİ - Orijinal Şablon Korundu */ /* ==================================== */ :root { /* Açık Mod Varsayılanları */ --bg-color: #f4f4f4; --text-color: #333; --header-bg: #8b4513; --header-text: white; --table-border: #8b4513; --input-bg: white; --correct-color: #4CAF50; --incorrect-color: #f44336; --select-bg: white; --guide-bg: #eee; } .dark-mode { /* Koyu Mod Ayarları */ --bg-color: #222; --text-color: #eee; --header-bg: #4b2a1a; --table-border: #666; --input-bg: #333; --placeholder-color: #bbb; --guide-bg: #333; --select-bg: #444; } body, #chord-table select { transition: background-color 0.3s, color 0.3s, border-color 0.3s; } body { font-family: 'Arial', sans-serif; background-color: var(--bg-color); color: var(--text-color); margin: 0; padding: 20px; min-height: 100vh; } .container { max-width: 1200px; margin: auto; padding: 0 10px; position: relative; } .app-branding { font-size: 2.5em; font-weight: 900; text-align: center; color: var(--header-bg); margin-bottom: 5px; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); } h1 { color: var(--header-bg); border-bottom: 2px solid var(--header-bg); padding-bottom: 10px; text-align: center; margin-top: 5px; } /* --- Butonlar ve Puanlama --- */ #score-board { text-align: center; margin: 10px 0; font-size: 1.2em; font-weight: bold; } .controls { text-align: center; margin-bottom: 20px; } button { padding: 10px 15px; margin: 5px; cursor: pointer; background-color: var(--header-bg); color: var(--header-text); border: none; border-radius: 5px; font-size: 1em; } #theme-toggle { position: absolute; top: 0; right: 0; font-size: 0.9em; padding: 8px 12px; z-index: 10; } /* --- Tablo ve Select Alanları (Responsive) --- */ .table-wrapper { overflow-x: auto; margin-bottom: 20px; } #chord-table { width: 100%; border-collapse: collapse; min-width: 800px; } #chord-table td, #chord-table th { border: 2px solid var(--table-border); padding: 8px; text-align: center; vertical-align: middle; font-weight: bold; } #chord-table th { background-color: var(--header-bg); color: var(--header-text); } #chord-table select { width: 90%; max-width: 110px; padding: 8px 5px; box-sizing: border-box; text-align: center; background-color: var(--select-bg); color: var(--text-color); border: 1px solid #ccc; border-radius: 4px; font-size: 0.9em; cursor: pointer; margin-bottom: 5px; } /* Her soru için kontrol butonu */ .check-q-button { display: block; margin: 0 auto; padding: 4px 8px; font-size: 0.75em; cursor: pointer; background-color: var(--header-bg); color: var(--header-text); border: none; border-radius: 4px; white-space: nowrap; } .correct { background-color: var(--correct-color) !important; color: white; } .incorrect { background-color: var(--incorrect-color) !important; color: white; } /* Aralık Sorularının bulunduğu satır stili */ .interval-row td { font-size: 1em; background-color: rgba(139, 69, 19, 0.15); } .dark-mode .interval-row td { background-color: rgba(75, 42, 26, 0.5); } /* --- Kullanım Kılavuzu Stilleri --- */ .guide { margin-top: 40px; padding: 20px; border: 1px solid var(--table-border); border-radius: 8px; background-color: var(--guide-bg); } .guide h2 { color: var(--header-bg); border-bottom: 1px dashed var(--header-bg); padding-bottom: 5px; } .guide ul { list-style-type: none; padding-left: 0; } .guide ul li { margin-bottom: 10px; padding-left: 20px; position: relative; } .guide ul li::before { content: "▶"; color: var(--header-bg); position: absolute; left: 0; } /* Yeni satır: Akor Cinsi */ .chord-type-row td { font-style: italic; font-weight: normal; } </style> </head> <body> <div class="container"> <button id="theme-toggle">Mod Değiştir (Açık/Koyu)</button> <div class="app-branding">MybiSGen</div> <h1>🎶 İlgili Minör/Majör Bulma Alıştırması</h1> <div class="controls"> <div id="score-board">Puan: 0 / 0</div> </div> <div class="table-wrapper"> <table id="chord-table"> <thead> <tr> <th>#</th> <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> <th>6</th><th>7</th><th>8</th><th>9</th><th>10</th> </tr> </thead> <tbody id="chord-tbody"> </tbody> </table> </div> <div class="controls"> <button id="reset-button">🔄 Yeni Alıştırma Yükle</button> </div> <div class="guide"> <h2>Kullanım Kılavuzu ve Müzik Teorisi</h2> <h3>Uygulama Nasıl Kullanılır?</h3> <ul> <li>**Hedef:** Her sütunun en üstünde verilen **Kök Ses (Majör/Minör Akorun Tonik Notası)** ve hemen altındaki **Akor Cinsi (Soru)** bilgisine göre, açılır menüden **İlgili Akorun Kök Sesini** seçiniz.</li> <li>**Kontrol:** Cevabınızı seçtikten sonra, o sorunun altındaki küçük **Kontrol Et** butonuna basınız.</li> <li>**DİKKAT! Tek Kontrol Hakkı:** Her bir soru için sadece **bir kez** kontrol etme hakkınız vardır. Kontrol ettikten sonra cevap seçeneği kilitlenir.</li> </ul> <h3>İlgili Majör/Minör Kuralı</h3> <ul> <li>**İlgili Minör'ü Bulma:** Bir **Majör** akorun ilgili minörünü bulmak için, kök sesten **1½ ton (3 yarım ses)** aşağı (kalına) inilir. *(Örn: Do Majör $\to$ La Minör)*</li> <li>**İlgili Majör'ü Bulma:** Bir **Minör** akorun ilgili majörünü bulmak için, kök sesten **1½ ton (3 yarım ses)** yukarı (inceye) çıkılır. *(Örn: La Minör $\to$ Do Majör)*</li> </ul> </div> </div> <script> // ==================================== // 2. JAVASCRİPT LOGİĞİ // ==================================== // Global değişkenler let currentPracticeChords = []; const CHORD_COUNT = 10; const totalQuestions = CHORD_COUNT; let correctAnswers = 0; // KÖK SES HAVUZU (Sadece doğal ve tek arızalı notalar) const simplifiedDiatonicRoots = ["C", "C#", "Db", "D", "D#", "Eb", "E", "F", "F#", "Gb", "G", "G#", "Ab", "A", "A#", "Bb", "B"]; // İNGİLİZCE DİATONİK NOTA İSİMLERİ ve TÜRKÇE KARŞILIKLARI (Tüm olası teorik isimler dahil) const trDiatonicNameMap = { "C": "Do", "C#": "Do diyez", "C##": "Do çift diyez", "Cb": "Do bemol", "Cbb": "Do çift bemol", "D": "Re", "D#": "Re diyez", "D##": "Re çift diyez", "Db": "Re bemol", "Dbb": "Re çift bemol", "E": "Mi", "E#": "Mi diyez", "E##": "Mi çift diyez", "Eb": "Mi bemol", "Ebb": "Mi çift bemol", "F": "Fa", "F#": "Fa diyez", "F##": "Fa çift diyez", "Fb": "Fa bemol", "Fbb": "Fa çift bemol", "G": "Sol", "G#": "Sol diyez", "G##": "Sol çift diyez", "Gb": "Sol bemol", "Gbb": "Sol çift bemol", "A": "La", "A#": "La diyez", "A##": "La çift diyez", "Ab": "La bemol", "Abb": "La çift bemol", "B": "Si", "B#": "Si diyez", "B##": "Si çift diyez", "Bb": "Si bemol", "Bbb": "Si çift bemol" }; // Sadece doğal notaların yarım ses değerleri const naturalSemitoneMap = { "C": 0, "D": 2, "E": 4, "F": 5, "G": 7, "A": 9, "B": 11 }; // Kullanıcıya seçenek olarak sunulacak BASİT notaların İngilizce adları (Çift arıza içermez) const simpleOptionKeys = ["C", "C#", "Cb", "D", "D#", "Db", "E", "E#", "Eb", "F", "F#", "Fb", "G", "G#", "Gb", "A", "A#", "Ab", "B", "B#", "Bb"]; // --- YARDIMCI FONKSİYONLAR --- /** * Bir notanın yarım ses indeksini döndürür (0-11). */ function getSemitoneIndex(noteName) { const naturalIndex = naturalSemitoneMap[noteName.charAt(0)]; if (noteName.length === 1) return naturalIndex; let index = naturalIndex; const accidental = noteName.substring(1); if (accidental.includes('#')) { index += accidental.length; } else if (accidental.includes('b')) { index -= accidental.length; } return (index % 12 + 12) % 12; } /** * Verilen yarım ses indeksine (0-11) karşılık gelen TÜM basit Türkçe nota adlarını döndürür. */ function getEnharmonicTrNames(semitoneIndex) { let names = []; // Sadece basit opsiyon anahtarlarını kontrol et for (const englishNote of simpleOptionKeys) { if (getSemitoneIndex(englishNote) === semitoneIndex) { if (trDiatonicNameMap[englishNote]) { names.push(trDiatonicNameMap[englishNote]); } } } return Array.from(new Set(names)).filter(n => n); } /** * Türkçe nota adını hesaplama için kullanılan Diatonik İngilizce adına çevirir. */ function trToDiatonicName(trNote) { trNote = trNote.toLowerCase().trim(); for (const engNote in trDiatonicNameMap) { // Sadece basit notalar için if (simpleOptionKeys.includes(engNote) && trDiatonicNameMap[engNote].toLowerCase() === trNote) { return engNote; } } return ""; } /** * İlgili Minör/Majör notayı hesaplar (Mutlak doğru yarım ses indeksini döndürür). * @param {string} rootNoteName Kök sesin İngilizce adı (Örn: "D#", "Gb") * @param {string} chordType Sorulan akor cinsi ("Majör" veya "Minör") * @returns {number} İlgili akorun kök sesinin yarım ses indeksi (0-11) */ function calculateRelativeNoteSemitone(rootNoteName, chordType) { const rootSemitone = getSemitoneIndex(rootNoteName); const HALF_STEP_JUMP = 3; // 1.5 ton = 3 yarım ses if (chordType === 'Majör') { // Majör akorun ilgili minörünü bulmak için 3 yarım ses (aşağı) const relativeMinorSemitone = (rootSemitone - HALF_STEP_JUMP + 12) % 12; return relativeMinorSemitone; } else if (chordType === 'Minör') { // Minör akorun ilgili majörünü bulmak için 3 yarım ses (yukarı) const relativeMajorSemitone = (rootSemitone + HALF_STEP_JUMP) % 12; return relativeMajorSemitone; } return -1; // Hata durumu } /** * Diziyi karıştırır. */ function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } } /** * Yeni rastgele akorlar ve sorular ile alıştırma listesini oluşturur. */ function generateRandomChords() { let availableRoots = [...simplifiedDiatonicRoots]; shuffleArray(availableRoots); const randomRoots = availableRoots.slice(0, CHORD_COUNT); const chordTypes = ['Majör', 'Minör']; // Sorulabilecek kök akor tipleri let newChords = []; for (let i = 0; i < CHORD_COUNT; i++) { const root = randomRoots[i]; // Rastgele kök akor tipi seç (Majör veya Minör) const randomType = chordTypes[Math.floor(Math.random() * chordTypes.length)]; // Sorulan şey, ilgili akorun tipi const questionType = randomType === 'Majör' ? 'İlgili Minör' : 'İlgili Majör'; // Doğru cevabın yarım ses indeksini hesapla const correctSemitone = calculateRelativeNoteSemitone(root, randomType); newChords.push({ root: root, rootType: randomType, questionType: questionType, // İlgili Minör/Majör correctSemitone: correctSemitone, // Doğru cevabın yarım ses indeksi (0-11) isAnswered: false }); } return newChords; } /** * Tabloyu dinamik olarak oluşturur ve seçenekleri doldurur. */ function initializeTable() { currentPracticeChords = generateRandomChords(); const tbody = document.getElementById('chord-tbody'); tbody.innerHTML = ''; correctAnswers = 0; // --- 1. Kök Ses Satırı (Türkçe İsim) --- let rootRow = `<tr class="root-row"><td>Kök Akor</td>`; currentPracticeChords.forEach(chord => { const trRootName = trDiatonicNameMap[chord.root] || chord.root; rootRow += `<td><span class="root-note">${trRootName}</span></td>`; }); rootRow += `</tr>`; tbody.innerHTML += rootRow; // --- 2. Kök Akor Cinsi Satırı --- let typeRow = `<tr class="chord-type-row"><td>Akor Cinsi</td>`; currentPracticeChords.forEach(chord => { typeRow += `<td><span class="root-type">${chord.rootType}</span></td>`; }); typeRow += `</tr>`; tbody.innerHTML += typeRow; // --- 3. Sorulan İlgili Akor Cinsi Satırı (Soru) --- let intervalRow = `<tr class="interval-row"><td>Soru</td>`; currentPracticeChords.forEach(chord => { intervalRow += `<td><span class="interval-name">${chord.questionType}</span></td>`; }); intervalRow += `</tr>`; tbody.innerHTML += intervalRow; // --- 4. Cevap Satırı (Select Kutusu ve Kontrol Butonu) --- let answerRow = `<tr class="answer-row"><td>Cevap Notası</td>`; currentPracticeChords.forEach((chord, index) => { const correctSemitone = chord.correctSemitone; // Teorik cevabın tüm ENHARMONİK Türkçe isimlerini al const allCorrectTrNames = getEnharmonicTrNames(correctSemitone); // Tüm olası BASİT Türkçe notaların listesi const allPossibleSimpleTrNotes = simpleOptionKeys .map(engNote => trDiatonicNameMap[engNote]) .filter(name => name); let optionsTr = new Set(allCorrectTrNames); let availableWrongNotes = [...allPossibleSimpleTrNotes]; availableWrongNotes = availableWrongNotes.filter(note => !allCorrectTrNames.includes(note)); // Yanlış seçenekleri ekle (Toplamda 5 seçenek olacak) while (optionsTr.size < 5 && availableWrongNotes.length > 0) { const randomIndex = Math.floor(Math.random() * availableWrongNotes.length); optionsTr.add(availableWrongNotes[randomIndex]); availableWrongNotes.splice(randomIndex, 1); } let optionsArray = Array.from(optionsTr); shuffleArray(optionsArray); let selectHTML = `<select data-index="${index}" class="answer-note">`; selectHTML += `<option value="">Seçiniz</option>`; optionsArray.forEach(noteTr => { // Kullanıcının seçeneğinin değerini Diatonik İngilizce isme çevir (Örn: "Do bemol" -> "Cb") const value = trToDiatonicName(noteTr); selectHTML += `<option value="${value}">${noteTr}</option>`; }); selectHTML += `</select>`; const buttonHTML = `<button type="button" class="check-q-button" data-index="${index}">Kontrol Et</button>`; answerRow += `<td>${selectHTML}${buttonHTML}</td>`; }); answerRow += `</tr>`; tbody.innerHTML += answerRow; document.getElementById('score-board').textContent = `Puan: 0 / ${totalQuestions}`; } // Her soru için Kontrol Butonu İşlevi (Event Delegation ile) document.getElementById('chord-table').addEventListener('click', (event) => { if (!event.target.classList.contains('check-q-button')) return; const button = event.target; const index = parseInt(button.dataset.index); const chordData = currentPracticeChords[index]; if (chordData.isAnswered) return; const selectElement = document.querySelector(`select.answer-note[data-index="${index}"]`); if (!selectElement) return; const correctSemitone = chordData.correctSemitone; const userDiatonicValue = selectElement.value; if (!userDiatonicValue) { alert("Lütfen bir nota seçimi yapınız."); return; } selectElement.classList.remove('correct', 'incorrect'); // Kullanıcının seçtiği notanın yarım ses değerini al const userSemitone = getSemitoneIndex(userDiatonicValue); // Cevabı kontrol et: Enharmonik eşdeğerlik kabul edilir. const isCorrect = userSemitone === correctSemitone; if (isCorrect) { selectElement.classList.add('correct'); correctAnswers++; } else { selectElement.classList.add('incorrect'); } // TEK HAK KURALI: Soru kilitlenir chordData.isAnswered = true; selectElement.disabled = true; button.disabled = true; // Puanı anında güncelle const percentage = ((correctAnswers / totalQuestions) * 100).toFixed(1); document.getElementById('score-board').textContent = `Puan: ${correctAnswers} / ${totalQuestions} (${percentage}%)`; }); // Yeni Alıştırma Yükle Butonu İşlevi document.getElementById('reset-button').addEventListener('click', () => { initializeTable(); }); // Koyu/Açık Mod Geçişi document.getElementById('theme-toggle').addEventListener('click', () => { document.body.classList.toggle('dark-mode'); }); // Uygulama yüklendiğinde tabloyu başlat document.addEventListener('DOMContentLoaded', initializeTable); </script> </body> </html><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/12/ilgili-minormajor-bulma-alstrmas.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-2361863682517613450Thu, 04 Dec 2025 20:17:00 +00002025-12-04T23:17:01.506+03:00Müzik dersi materyalmüzik eğitimimüzik öğretmenitestuzaktan eğitim8. Sınıf Müzik Dersi Testi<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MybiSGen - 8. Sınıf Müzik Dersi Testi</title> <style> /* CSS Başlangıcı (Kompakt ve 2 Sütunlu Tasarım) */ :root { /* Açık Mod Renkleri */ --bg-color-light: #f4f4f9; --text-color-light: #333; --card-bg-light: #ffffff; --primary-color-light: #007bff; --correct-color-light: #28a745; --wrong-color-light: #dc3545; --info-color-light: #ffc107; --retry-color: #6c757d; } .dark-mode { /* Koyu Mod Renkleri */ --bg-color-light: #121212; --text-color-light: #e0e0e0; --card-bg-light: #1e1e1e; --primary-color-light: #bb86fc; --correct-color-light: #4caf50; --wrong-color-light: #cf6679; --info-color-light: #ffd700; --retry-color: #999; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color-light); color: var(--text-color-light); transition: background-color 0.3s, color 0.3s; margin: 0; padding: 5px; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } header { width: 100%; max-width: 900px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; padding: 4px 0; border-bottom: 1px solid var(--primary-color-light); } #app-title { font-size: 1.6em; font-weight: 700; color: var(--primary-color-light); } #mode-toggle { padding: 3px 6px; border: none; border-radius: 4px; cursor: pointer; background-color: var(--primary-color-light); color: var(--card-bg-light); font-size: 0.75em; } .container { width: 100%; max-width: 900px; } .test-title { text-align: center; font-size: 1.2em; margin-bottom: 5px; color: var(--primary-color-light); } .score-box { background-color: var(--info-color-light); color: var(--text-color-light); padding: 5px; margin-bottom: 5px; border-radius: 4px; font-weight: bold; text-align: center; font-size: 0.8em; } /* 2 Sütunlu Izgara Yapısı */ #quiz-form { display: grid; grid-template-columns: 1fr; /* Varsayılan: Tek sütun (Mobil için) */ gap: 8px; } @media (min-width: 768px) { #quiz-form { grid-template-columns: 1fr 1fr; /* Tablet ve masaüstü için 2 sütun */ gap: 15px; } } .question-card { background-color: var(--card-bg-light); padding: 10px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .question-card h3 { margin-top: 0; margin-bottom: 5px; font-size: 0.9em; color: var(--text-color-light); } .options-container { margin-top: 5px; display: flex; flex-direction: column; gap: 5px; } .select-answer { padding: 5px; border: 1px solid var(--primary-color-light); border-radius: 3px; background-color: var(--card-bg-light); color: var(--text-color-light); font-size: 0.85em; cursor: pointer; width: 100%; appearance: none; background-repeat: no-repeat; background-position: right 8px center; background-image: url('data:image/svg+xml;utf8,<svg fill="%23333333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M7 10l5 5 5-5z"/></svg>'); } .dark-mode .select-answer { background-image: url('data:image/svg+xml;utf8,<svg fill="%23e0e0e0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M7 10l5 5 5-5z"/></svg>'); background-color: #333; } /* Kontrol ve Tekrar Butonları */ .check-button, #retry-all-button { display: block; width: 100%; padding: 5px; margin-top: 5px; font-size: 0.8em; font-weight: bold; border: none; border-radius: 3px; cursor: pointer; transition: background-color 0.3s; } .check-button { background-color: var(--primary-color-light); color: white; } #retry-all-button { background-color: var(--retry-color); color: white; margin-top: 10px; margin-bottom: 10px; } /* Cevap Durumu Mesajı */ .feedback { margin-top: 5px; padding: 5px; border-radius: 3px; font-weight: bold; font-size: 0.8em; display: none; } .feedback.correct { background-color: rgba(40, 167, 69, 0.2); color: var(--correct-color-light); } .feedback.wrong { background-color: rgba(220, 53, 69, 0.2); color: var(--wrong-color-light); } .correct-answer-display { margin-top: 3px; font-weight: bold; color: var(--correct-color-light); display: none; font-size: 0.8em; } /* CSS Sonu */ </style> </head> <body> <header> <div id="app-title">MybiSGen</div> <button id="mode-toggle">Koyu Moda Geç</button> </header> <div class="container"> <h1 class="test-title">🎶 8. Sınıf Müzik Dersi Testi</h1> <div id="score-box" class="score-box">Puan: 0 / 100</div> <form id="quiz-form"> </form> <button id="retry-all-button" onclick="resetQuiz()">Tüm Testi Tekrar Yap (Yeni Sorular)</button> </div> <script> // JavaScript Başlangıcı // 20 Soruluk 8. Sınıf Kazanımlarına Uygun Soru Havuzu const allQuestions = [ { question: "Türk müziğinde, eserin başlangıcında, sazlarla icra edilen ve makamı tanıtan uzun biçime ne ad verilir?", options: ["Şarkı", "Kanto", "Peşrev", "Saz Semaisi"], answer: "Peşrev" }, { question: "Bir müzik eserini 'çok kuvvetli' çalmak gerektiğini belirten dinamik terim hangisidir?", options: ["Piyano (p)", "Forte (f)", "Mezzo Piyano (mp)", "Fortissimo (ff)"], answer: "Fortissimo (ff)" }, { question: "Orkestranın en büyük ve merkezi çalgı grubu (Keman, Viyola, Çello, Kontrbas) hangisidir?", options: ["Nefesli Çalgılar", "Vurmalı Çalgılar", "Yaylı Çalgılar", "Tuşlu Çalgılar"], answer: "Yaylı Çalgılar" }, { question: "Atatürk'ün çağdaş Türk müziğinin temellerini atmak üzere yurt dışına gönderdiği genç müzisyenler topluluğuna verilen isim nedir?", options: ["Yedi Meşaleciler", "Türk Beşleri", "Anadolu Üçlüsü", "Rönesans Ustaları"], answer: "Türk Beşleri" }, { question: "Batı müziğinde, eserin çalınma hızının 'yürük' ve 'orta hızda' olduğunu belirten tempo terimi nedir?", options: ["Largo", "Presto", "Andante", "Vivace"], answer: "Andante" }, { question: "Türk müziğinde makamın ana ses dizisine ne ad verilir?", options: ["Armoni", "Tonalite", "Dizi (Gam)", "Kontrpuvan"], answer: "Dizi (Gam)" }, { question: "Batı müziğinde, birden çok ezgi çizgisinin bir arada, uyumlu şekilde ilerlemesiyle oluşan dokuya ne ad verilir?", options: ["Monofoni", "Homofoni", "Polifoni (Çok Seslilik)", "Unison"], answer: "Polifoni (Çok Seslilik)" }, { question: "Müzikte, bir notanın değerini yarısı kadar uzatan işaret hangisidir?", options: ["Diyez", "Bemol", "Nokta", "Bağ"], answer: "Nokta" }, { question: "Sözlü ve sözsüz bölümlerin yer aldığı, genellikle 10 dakikadan uzun süren büyük orkestra eserine ne ad verilir?", options: ["Şarkı", "Türkü", "Marş", "Senfoni"], answer: "Senfoni" }, { question: "Piyano veya org gibi çalgıların ait olduğu temel enstrüman grubu nedir?", options: ["Yaylı Çalgılar", "Vurmalı Çalgılar", "Nefesli Çalgılar", "Tuşlu Çalgılar"], answer: "Tuşlu Çalgılar" }, { question: "Müzikte bir notayı yarım ses kalınlaştıran (pesleştiren) işaret hangisidir?", options: ["Diyez (♯)", "Natural (♮)", "Bemol (♭)", "Koma"], answer: "Bemol (♭)" }, { question: "Bir eserin sesinin yavaş yavaş yükselmesi (gürleşmesi) hangi dinamik terimi ile ifade edilir?", options: ["Decrescendo", "Piyano", "Crescendo", "Ritardando"], answer: "Crescendo" }, { question: "Türk Halk Müziği'ndeki ritim kalıplarına verilen, Batı müziğindeki ölçüye karşılık gelen yapı nedir?", options: ["Tempo", "Makam", "Usul", "Armoni"], answer: "Usul" }, { question: "Bir müzik parçasının en hızlı tempoda çalınması gerektiğini belirten İtalyanca terim hangisidir?", options: ["Largo", "Allegro", "Adagio", "Presto"], answer: "Presto" }, { question: "Müzikteki seslerin ayırt edici 'rengi' veya 'karakteri' olarak tanımlanan özellik nedir?", options: ["Dinamik", "Perde", "Tempo", "Tını"], answer: "Tını" }, { question: "Müzikteki notaların doğru yüksekliklerinin kontrol edilmesini sağlayan, kıvrımlı işarete ne ad verilir?", options: ["Ölçü Çizgisi", "Dizek", "Anahtar (Sol, Fa vb.)", "Sus"], answer: "Anahtar (Sol, Fa vb.)" }, { question: "Türk müziğinde makam sistemini Batı müziği tonal sisteminden ayıran temel fark nedir?", options: ["Sadece vurmalı çalgı kullanılması", "Sadece tek sesli olması", "Perde aralıklarında komaların (mikrotonların) kullanılması", "Daha hızlı çalınması"], answer: "Perde aralıklarında komaların (mikrotonların) kullanılması" }, { question: "Bestecinin, bir eserin çalınma hızını **giderek yavaşlatması** gerektiğini belirttiği terim nedir?", options: ["Accelerando", "Tempo Primo", "A Tempo", "Ritardando"], answer: "Ritardando" }, { question: "Atatürk'ün güzel sanatlar içinde müziğe verdiği önemi açıklarken vurgulanan temel görüş nedir?", options: ["Müziğin sadece eğlence olduğu", "Halk müziğinin önemsiz olduğu", "Müziğin milli kültürü yansıtması ve çağdaşlaşma aracı olduğu", "Sadece Batı müziğinin öğrenilmesi gerektiği"], answer: "Müziğin milli kültürü yansıtması ve çağdaşlaşma aracı olduğu" }, { question: "Müzik eserinin ses şiddetinin (gürlüğün) genel durumuna ne ad verilir?", options: ["Ritim", "Perde", "Dinamik", "Akor"], answer: "Dinamik" } ]; const quizForm = document.getElementById('quiz-form'); const scoreBox = document.getElementById('score-box'); const modeToggle = document.getElementById('mode-toggle'); let currentScore = 0; const quizLength = 10; const maxScore = 100; const scorePerQuestion = maxScore / quizLength; let currentQuizQuestions = []; // Dizi karıştırma fonksiyonu (Fisher-Yates) function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // Rastgele Soru Seçme Fonksiyonu function selectRandomQuestions(pool, count) { const shuffledPool = shuffleArray([...pool]); return shuffledPool.slice(0, count); } // Testi Yükleme Fonksiyonu function loadQuiz() { quizForm.innerHTML = ''; currentQuizQuestions = selectRandomQuestions(allQuestions, quizLength); currentQuizQuestions.forEach((q, index) => { const shuffledOptions = shuffleArray([...q.options]); const questionHtml = ` <div class="question-card" data-index="${index}"> <h3>${index + 1}. ${q.question}</h3> <div class="options-container"> <select class="select-answer" id="q${index}" data-question-index="${index}"> <option value="" selected disabled>Seçiniz</option> ${shuffledOptions.map(option => ` <option value="${option}">${option}</option> `).join('')} </select> <div class="correct-answer-display" id="correct-display-${index}"></div> </div> <button type="button" class="check-button" data-question-index="${index}">Kontrol Et</button> <div class="feedback" id="feedback-${index}"></div> </div> `; quizForm.innerHTML += questionHtml; }); document.querySelectorAll('.check-button').forEach(button => { button.addEventListener('click', checkAnswer); }); updateScore(); } // Cevabı Kontrol Etme Fonksiyonu function checkAnswer(event) { const checkButton = event.target; const questionIndex = checkButton.dataset.questionIndex; const questionCard = document.querySelector(`.question-card[data-index="${questionIndex}"]`); const selectElement = document.getElementById(`q${questionIndex}`); const feedbackDiv = document.getElementById(`feedback-${questionIndex}`); const correctDisplayDiv = document.getElementById(`correct-display-${questionIndex}`); const questionData = currentQuizQuestions[questionIndex]; if (questionCard.classList.contains('checked')) return; const userAnswer = selectElement.value; if (!userAnswer) { alert("Lütfen açılır menüden bir seçim yapın."); return; } selectElement.disabled = true; checkButton.disabled = true; questionCard.classList.add('checked'); if (userAnswer === questionData.answer) { currentScore += scorePerQuestion; feedbackDiv.textContent = '✅ Tebrikler, doğru cevap!'; feedbackDiv.className = 'feedback correct'; } else { feedbackDiv.innerHTML = `❌ Yanlış cevap. **Sizin Seçiminiz:** ${userAnswer}.`; correctDisplayDiv.innerHTML = `**Doğru Cevap:** ${questionData.answer}`; correctDisplayDiv.style.display = 'block'; feedbackDiv.className = 'feedback wrong'; } updateScore(); feedbackDiv.style.display = 'block'; } // Puanı Güncelleme Fonksiyonu function updateScore() { scoreBox.textContent = `Puan: ${Math.round(currentScore)} / ${maxScore}`; } // Mod Değiştirme Fonksiyonu function toggleMode() { document.body.classList.toggle('dark-mode'); const isDarkMode = document.body.classList.contains('dark-mode'); localStorage.setItem('darkMode', isDarkMode); modeToggle.textContent = isDarkMode ? 'Açık Moda Geç' : 'Koyu Moda Geç'; } // Tekrar Test Yapma Fonksiyonu function resetQuiz() { currentScore = 0; loadQuiz(); alert("Test sıfırlandı! Yeni bir denemeye hazırsınız. Yeni rastgele 10 soru yüklendi."); } window.resetQuiz = resetQuiz; // Başlangıçta kaydelilen modu yükle function loadMode() { const isDarkMode = localStorage.getItem('darkMode') === 'true'; if (isDarkMode) { document.body.classList.add('dark-mode'); } modeToggle.textContent = isDarkMode ? 'Açık Moda Geç' : 'Koyu Moda Geç'; } // Olay dinleyicileri modeToggle.addEventListener('click', toggleMode); // Sayfa yüklendiğinde document.addEventListener('DOMContentLoaded', () => { loadMode(); loadQuiz(); }); // JavaScript Sonu </script> </body> </html><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/12/8-snf-muzik-dersi-testi.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-7205884231901001745Thu, 04 Dec 2025 20:16:00 +00002025-12-04T23:16:20.801+03:00Müzik dersi materyalmüzik eğitimimüzik öğretmenitestuzaktan eğitim7. Sınıf Müzik Dersi Testi<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MybiSGen - 7. Sınıf Müzik Dersi Testi</title> <style> /* CSS Başlangıcı (Kompakt ve 2 Sütunlu Tasarım) */ :root { /* Açık Mod Renkleri */ --bg-color-light: #f4f4f9; --text-color-light: #333; --card-bg-light: #ffffff; --primary-color-light: #007bff; --correct-color-light: #28a745; --wrong-color-light: #dc3545; --info-color-light: #ffc107; --retry-color: #6c757d; } .dark-mode { /* Koyu Mod Renkleri */ --bg-color-light: #121212; --text-color-light: #e0e0e0; --card-bg-light: #1e1e1e; --primary-color-light: #bb86fc; --correct-color-light: #4caf50; --wrong-color-light: #cf6679; --info-color-light: #ffd700; --retry-color: #999; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color-light); color: var(--text-color-light); transition: background-color 0.3s, color 0.3s; margin: 0; padding: 5px; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } header { width: 100%; max-width: 900px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; padding: 4px 0; border-bottom: 1px solid var(--primary-color-light); } #app-title { font-size: 1.6em; font-weight: 700; color: var(--primary-color-light); } #mode-toggle { padding: 3px 6px; border: none; border-radius: 4px; cursor: pointer; background-color: var(--primary-color-light); color: var(--card-bg-light); font-size: 0.75em; } .container { width: 100%; max-width: 900px; } .test-title { text-align: center; font-size: 1.2em; margin-bottom: 5px; color: var(--primary-color-light); } .score-box { background-color: var(--info-color-light); color: var(--text-color-light); padding: 5px; margin-bottom: 5px; border-radius: 4px; font-weight: bold; text-align: center; font-size: 0.8em; } /* 2 Sütunlu Izgara Yapısı */ #quiz-form { display: grid; grid-template-columns: 1fr; /* Varsayılan: Tek sütun (Mobil için) */ gap: 8px; } @media (min-width: 768px) { #quiz-form { grid-template-columns: 1fr 1fr; /* Tablet ve masaüstü için 2 sütun */ gap: 15px; } } .question-card { background-color: var(--card-bg-light); padding: 10px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .question-card h3 { margin-top: 0; margin-bottom: 5px; font-size: 0.9em; color: var(--text-color-light); } .options-container { margin-top: 5px; display: flex; flex-direction: column; gap: 5px; } .select-answer { padding: 5px; border: 1px solid var(--primary-color-light); border-radius: 3px; background-color: var(--card-bg-light); color: var(--text-color-light); font-size: 0.85em; cursor: pointer; width: 100%; appearance: none; background-repeat: no-repeat; background-position: right 8px center; background-image: url('data:image/svg+xml;utf8,<svg fill="%23333333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M7 10l5 5 5-5z"/></svg>'); } .dark-mode .select-answer { background-image: url('data:image/svg+xml;utf8,<svg fill="%23e0e0e0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M7 10l5 5 5-5z"/></svg>'); background-color: #333; } /* Kontrol ve Tekrar Butonları */ .check-button, #retry-all-button { display: block; width: 100%; padding: 5px; margin-top: 5px; font-size: 0.8em; font-weight: bold; border: none; border-radius: 3px; cursor: pointer; transition: background-color 0.3s; } .check-button { background-color: var(--primary-color-light); color: white; } #retry-all-button { background-color: var(--retry-color); color: white; margin-top: 10px; margin-bottom: 10px; } /* Cevap Durumu Mesajı */ .feedback { margin-top: 5px; padding: 5px; border-radius: 3px; font-weight: bold; font-size: 0.8em; display: none; } .feedback.correct { background-color: rgba(40, 167, 69, 0.2); color: var(--correct-color-light); } .feedback.wrong { background-color: rgba(220, 53, 69, 0.2); color: var(--wrong-color-light); } .correct-answer-display { margin-top: 3px; font-weight: bold; color: var(--correct-color-light); display: none; font-size: 0.8em; } /* CSS Sonu */ </style> </head> <body> <header> <div id="app-title">MybiSGen</div> <button id="mode-toggle">Koyu Moda Geç</button> </header> <div class="container"> <h1 class="test-title">🎶 7. Sınıf Müzik Dersi Testi</h1> <div id="score-box" class="score-box">Puan: 0 / 100</div> <form id="quiz-form"> </form> <button id="retry-all-button" onclick="resetQuiz()">Tüm Testi Tekrar Yap (Yeni Sorular)</button> </div> <script> // JavaScript Başlangıcı // 20 Soruluk 7. Sınıf Kazanımlarına Uygun Soru Havuzu const allQuestions = [ { question: "Bir tam notanın süresi kaç adet **Dörtlük Nota** süresine eşittir?", options: ["İki", "Üç", "Dört", "Sekiz"], answer: "Dört" }, { question: "Müzikteki seslerin kalınlıktan inceliğe doğru sıralanışına ne ad verilir?", options: ["Ritim", "Akor", "Dizi (Gam)", "Tempo"], answer: "Dizi (Gam)" }, { question: "Üç veya daha fazla sesin aynı anda tınlamasıyla oluşan, genellikle armoni temeli olan yapı nedir?", options: ["Melodi", "Tını", "Perde", "Akor"], answer: "Akor" }, { question: "Orkestrada üflemeli çalgılar grubuna ait olan, bakırdan yapılmış çalgı hangisidir?", options: ["Keman", "Flüt", "Piyano", "Trompet"], answer: "Trompet" }, { question: "İtalyanca 'piyano' (p) terimi, müzik eserinin nasıl çalınması gerektiğini ifade eder?", options: ["Çok hızlı", "Çok yavaş", "Hafif (Yavaş sesli)", "Kuvvetli (Yüksek sesli)"], answer: "Hafif (Yavaş sesli)" }, { question: "Aşağıdakilerden hangisi bir **kadın ses grubu** çeşidi değildir?", options: ["Soprano", "Mezzo-Soprano", "Alto", "Bas"], answer: "Bas" }, { question: "Atatürk'ün müziğin geliştirilmesine verdiği önemi açıklarken hangi kurumun kuruluşu örnek gösterilebilir?", options: ["TBMM", "Cumhurbaşkanlığı Senfoni Orkestrası", "Ziraat Bankası", "Anadolu Ajansı"], answer: "Cumhurbaşkanlığı Senfoni Orkestrası" }, { question: "Müzik eserinin ses şiddetindeki değişikliklere ne ad verilir?", options: ["Ritim", "Tempo", "Dinamik (Gürlük)", "Perde"], answer: "Dinamik (Gürlük)" }, { question: "Türk müziğinin makamsal yapısı, Batı müziğindeki hangi kavrama benzerlik gösterir, ancak ondan farklıdır?", options: ["Ritim", "Tempo", "Akor", "Dizi (Gam)"], answer: "Dizi (Gam)" }, { question: "Yurdumuza ait müzik türlerinden biri olan ve genellikle bölgesel farklılıklar gösteren sözlü eser türü nedir?", options: ["Senfoni", "Opera", "Türkü", "Marş"], answer: "Türkü" }, { question: "Bir eserin çalınma hızının **çok yavaş ve ağır** olması gerektiğini belirten tempo terimi nedir?", options: ["Andante", "Allegro", "Presto", "Largo"], answer: "Largo" }, { question: "Aşağıdakilerden hangisi bir **erkek ses grubu** çeşididir?", options: ["Soprano", "Alto", "Tenor", "Mezzo-Soprano"], answer: "Tenor" }, { question: "Müzikte, bir notanın sesini yarım ses incelten (yükselten) işaret hangisidir?", options: ["Bemol (♭)", "Diyez (♯)", "Natural (♮)", "Bağ"], answer: "Diyez (♯)" }, { question: "Telli, üflemeli ve vurmalı çalgıların bir arada bulunduğu büyük topluluğa ne ad verilir?", options: ["Koro", "Bando", "Oda Müziği Grubu", "Senfoni Orkestrası"], answer: "Senfoni Orkestrası" }, { question: "Bir notanın süresini ikiye katlayan nota değeri hangisidir?", options: ["Dörtlük Nota", "Birlik Nota", "Sekizlik Nota", "Onaltılık Nota"], answer: "Birlik Nota" }, { question: "Müziğin kültürel bir öge olduğunu en iyi gösteren örnek nedir?", options: ["Nota yazımı", "Tını özellikleri", "Hız belirteçleri", "Farklı coğrafyalara ait müzikler (Dünya Müzikleri)"], answer: "Farklı coğrafyalara ait müzikler (Dünya Müzikleri)" }, { question: "Porte üzerinde bulunan **Fa Anahtarı** genellikle hangi seslerin yazımı için kullanılır?", options: ["İnce kadın sesleri", "Orta seviye sesler", "Kalın erkek sesleri ve bas çalgılar", "Çok hızlı ezgiler"], answer: "Kalın erkek sesleri ve bas çalgılar" }, { question: "Türk Sanat Müziği'nin makamsal yapısını Batı müziğinden ayıran temel özellik nedir?", options: ["Ritimlerin karmaşıklığı", "Enstrüman çeşitliliği", "Perde aralıklarının mikrotonal olması", "Çok sesliliğin olmaması"], answer: "Perde aralıklarının mikrotonal olması" }, { question: "Müzikteki seslerin nitelik (renk) özelliklerine ne ad verilir?", options: ["Dinamik", "Tempo", "Tını", "Perde"], answer: "Tını" }, { question: "Marşların temel amacı nedir?", options: ["İnsanları uyutmak", "Hafifçe dans ettirmek", "Coşku, milli birlik ve beraberlik duygusu vermek", "Yavaş tempoda dinlenmek"], answer: "Coşku, milli birlik ve beraberlik duygusu vermek" } ]; const quizForm = document.getElementById('quiz-form'); const scoreBox = document.getElementById('score-box'); const modeToggle = document.getElementById('mode-toggle'); let currentScore = 0; const quizLength = 10; const maxScore = 100; const scorePerQuestion = maxScore / quizLength; let currentQuizQuestions = []; // Dizi karıştırma fonksiyonu (Fisher-Yates) function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // Rastgele Soru Seçme Fonksiyonu function selectRandomQuestions(pool, count) { const shuffledPool = shuffleArray([...pool]); return shuffledPool.slice(0, count); } // Testi Yükleme Fonksiyonu function loadQuiz() { quizForm.innerHTML = ''; currentQuizQuestions = selectRandomQuestions(allQuestions, quizLength); currentQuizQuestions.forEach((q, index) => { const shuffledOptions = shuffleArray([...q.options]); const questionHtml = ` <div class="question-card" data-index="${index}"> <h3>${index + 1}. ${q.question}</h3> <div class="options-container"> <select class="select-answer" id="q${index}" data-question-index="${index}"> <option value="" selected disabled>Seçiniz</option> ${shuffledOptions.map(option => ` <option value="${option}">${option}</option> `).join('')} </select> <div class="correct-answer-display" id="correct-display-${index}"></div> </div> <button type="button" class="check-button" data-question-index="${index}">Kontrol Et</button> <div class="feedback" id="feedback-${index}"></div> </div> `; quizForm.innerHTML += questionHtml; }); document.querySelectorAll('.check-button').forEach(button => { button.addEventListener('click', checkAnswer); }); updateScore(); } // Cevabı Kontrol Etme Fonksiyonu function checkAnswer(event) { const checkButton = event.target; const questionIndex = checkButton.dataset.questionIndex; const questionCard = document.querySelector(`.question-card[data-index="${questionIndex}"]`); const selectElement = document.getElementById(`q${questionIndex}`); const feedbackDiv = document.getElementById(`feedback-${questionIndex}`); const correctDisplayDiv = document.getElementById(`correct-display-${questionIndex}`); const questionData = currentQuizQuestions[questionIndex]; if (questionCard.classList.contains('checked')) return; const userAnswer = selectElement.value; if (!userAnswer) { alert("Lütfen açılır menüden bir seçim yapın."); return; } selectElement.disabled = true; checkButton.disabled = true; questionCard.classList.add('checked'); if (userAnswer === questionData.answer) { currentScore += scorePerQuestion; feedbackDiv.textContent = '✅ Tebrikler, doğru cevap!'; feedbackDiv.className = 'feedback correct'; } else { feedbackDiv.innerHTML = `❌ Yanlış cevap. **Sizin Seçiminiz:** ${userAnswer}.`; correctDisplayDiv.innerHTML = `**Doğru Cevap:** ${questionData.answer}`; correctDisplayDiv.style.display = 'block'; feedbackDiv.className = 'feedback wrong'; } updateScore(); feedbackDiv.style.display = 'block'; } // Puanı Güncelleme Fonksiyonu function updateScore() { scoreBox.textContent = `Puan: ${Math.round(currentScore)} / ${maxScore}`; } // Mod Değiştirme Fonksiyonu function toggleMode() { document.body.classList.toggle('dark-mode'); const isDarkMode = document.body.classList.contains('dark-mode'); localStorage.setItem('darkMode', isDarkMode); modeToggle.textContent = isDarkMode ? 'Açık Moda Geç' : 'Koyu Moda Geç'; } // Tekrar Test Yapma Fonksiyonu function resetQuiz() { currentScore = 0; loadQuiz(); alert("Test sıfırlandı! Yeni bir denemeye hazırsınız. Yeni rastgele 10 soru yüklendi."); } window.resetQuiz = resetQuiz; // Başlangıçta kaydelilen modu yükle function loadMode() { const isDarkMode = localStorage.getItem('darkMode') === 'true'; if (isDarkMode) { document.body.classList.add('dark-mode'); } modeToggle.textContent = isDarkMode ? 'Açık Moda Geç' : 'Koyu Moda Geç'; } // Olay dinleyicileri modeToggle.addEventListener('click', toggleMode); // Sayfa yüklendiğinde document.addEventListener('DOMContentLoaded', () => { loadMode(); loadQuiz(); }); // JavaScript Sonu </script> </body> </html><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/12/7-snf-muzik-dersi-testi.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-6023108339027082350Thu, 04 Dec 2025 20:15:00 +00002025-12-04T23:15:42.498+03:00Müzik dersi materyalmüzik eğitimimüzik öğretmenitestuzaktan eğitim6. Sınıf Müzik Dersi Testi<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MybiSGen - 6. Sınıf Müzik Dersi Testi</title> <style> /* CSS Başlangıcı (Kompakt ve 2 Sütunlu Tasarım) */ :root { /* Açık Mod Renkleri */ --bg-color-light: #f4f4f9; --text-color-light: #333; --card-bg-light: #ffffff; --primary-color-light: #007bff; --correct-color-light: #28a745; --wrong-color-light: #dc3545; --info-color-light: #ffc107; --retry-color: #6c757d; } .dark-mode { /* Koyu Mod Renkleri */ --bg-color-light: #121212; --text-color-light: #e0e0e0; --card-bg-light: #1e1e1e; --primary-color-light: #bb86fc; --correct-color-light: #4caf50; --wrong-color-light: #cf6679; --info-color-light: #ffd700; --retry-color: #999; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color-light); color: var(--text-color-light); transition: background-color 0.3s, color 0.3s; margin: 0; padding: 5px; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } header { width: 100%; max-width: 900px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; padding: 4px 0; border-bottom: 1px solid var(--primary-color-light); } #app-title { font-size: 1.6em; font-weight: 700; color: var(--primary-color-light); } #mode-toggle { padding: 3px 6px; border: none; border-radius: 4px; cursor: pointer; background-color: var(--primary-color-light); color: var(--card-bg-light); font-size: 0.75em; } .container { width: 100%; max-width: 900px; } .test-title { text-align: center; font-size: 1.2em; margin-bottom: 5px; color: var(--primary-color-light); } .score-box { background-color: var(--info-color-light); color: var(--text-color-light); padding: 5px; margin-bottom: 5px; border-radius: 4px; font-weight: bold; text-align: center; font-size: 0.8em; } /* 2 Sütunlu Izgara Yapısı */ #quiz-form { display: grid; grid-template-columns: 1fr; /* Varsayılan: Tek sütun (Mobil için) */ gap: 8px; } @media (min-width: 768px) { #quiz-form { grid-template-columns: 1fr 1fr; /* Tablet ve masaüstü için 2 sütun */ gap: 15px; } } .question-card { background-color: var(--card-bg-light); padding: 10px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .question-card h3 { margin-top: 0; margin-bottom: 5px; font-size: 0.9em; color: var(--text-color-light); } .options-container { margin-top: 5px; display: flex; flex-direction: column; gap: 5px; } .select-answer { padding: 5px; border: 1px solid var(--primary-color-light); border-radius: 3px; background-color: var(--card-bg-light); color: var(--text-color-light); font-size: 0.85em; cursor: pointer; width: 100%; appearance: none; background-repeat: no-repeat; background-position: right 8px center; background-image: url('data:image/svg+xml;utf8,<svg fill="%23333333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M7 10l5 5 5-5z"/></svg>'); } .dark-mode .select-answer { background-image: url('data:image/svg+xml;utf8,<svg fill="%23e0e0e0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M7 10l5 5 5-5z"/></svg>'); background-color: #333; } /* Kontrol ve Tekrar Butonları */ .check-button, #retry-all-button { display: block; width: 100%; padding: 5px; margin-top: 5px; font-size: 0.8em; font-weight: bold; border: none; border-radius: 3px; cursor: pointer; transition: background-color 0.3s; } .check-button { background-color: var(--primary-color-light); color: white; } #retry-all-button { background-color: var(--retry-color); color: white; margin-top: 10px; margin-bottom: 10px; } /* Cevap Durumu Mesajı */ .feedback { margin-top: 5px; padding: 5px; border-radius: 3px; font-weight: bold; font-size: 0.8em; display: none; } .feedback.correct { background-color: rgba(40, 167, 69, 0.2); color: var(--correct-color-light); } .feedback.wrong { background-color: rgba(220, 53, 69, 0.2); color: var(--wrong-color-light); } .correct-answer-display { margin-top: 3px; font-weight: bold; color: var(--correct-color-light); display: none; font-size: 0.8em; } /* CSS Sonu */ </style> </head> <body> <header> <div id="app-title">MybiSGen</div> <button id="mode-toggle">Koyu Moda Geç</button> </header> <div class="container"> <h1 class="test-title">🎶 6. Sınıf Müzik Dersi Testi</h1> <div id="score-box" class="score-box">Puan: 0 / 100</div> <form id="quiz-form"> </form> <button id="retry-all-button" onclick="resetQuiz()">Tüm Testi Tekrar Yap (Yeni Sorular)</button> </div> <script> // JavaScript Başlangıcı // 20 Soruluk 6. Sınıf Kazanımlarına Uygun Soru Havuzu const allQuestions = [ { question: "Müzikteki bir notanın değerini yarısı kadar uzatan işaret hangisidir?", options: ["Diyez", "Bemol", "Nokta", "Bağ"], answer: "Nokta" }, { question: "Bir müzik parçasının **orta kuvvetli** çalınması gerektiğini belirten dinamik terim hangisidir?", options: ["Forte (f)", "Piyano (p)", "Mezzo Forte (mf)", "Fortissimo (ff)"], answer: "Mezzo Forte (mf)" }, { question: "Nota değerlerinden en kısa olan (Dörtlük notanın çeyreği) hangisidir?", options: ["Sekizlik Nota", "İkilik Nota", "Onaltılık Nota", "Otuz İkilik Nota"], answer: "Onaltılık Nota" }, { question: "Bir eserin çalınma hızının **giderek yavaşlaması** gerektiğini belirten tempo terimi nedir?", options: ["Accelerando", "Allegro", "Andante", "Ritardando"], answer: "Ritardando" }, { question: "Aynı anda tınlayan ve kulağa hoş gelen üç veya daha fazla farklı sese ne ad verilir?", options: ["Tını", "Ritim", "Akor (Armoni)", "Melodi"], answer: "Akor (Armoni)" }, { question: "Keman, Viyola ve Çello gibi çalgılar hangi temel enstrüman grubuna aittir?", options: ["Nefesli Çalgılar", "Vurmalı Çalgılar", "Tuşlu Çalgılar", "Yaylı Çalgılar"], answer: "Yaylı Çalgılar" }, { question: "Türk Halk Müziği’nde makamların ritmik yapısını belirleyen kalıplara ne denir?", options: ["Nota", "Usul", "Porte", "Tempo"], answer: "Usul" }, { question: "Müzikteki sesleri yarım ses incelten (yükselten) işaret hangisidir?", options: ["Bemol", "Nokta", "Diyez", "Natural"], answer: "Diyez" }, { question: "Çalgıların seslerinin kendine özgü rengine ve karakterine ne ad verilir?", options: ["Tempo", "Dinamik", "Tını (Renği)", "Perde"], answer: "Tını (Renği)" }, { question: "Bando veya Orkestra gibi büyük grupları yöneten kişiye ne ad verilir?", options: ["Solist", "Besteci", "Aranjör", "Şef (Orkestra Yöneticisi)"], answer: "Şef (Orkestra Yöneticisi)" }, { question: "Sesin oluşumu sırasında cisimlerin yaptığı periyodik harekete ne denir?", options: ["Sürat", "Işınlanma", "Titreşim", "Yankı"], answer: "Titreşim" }, { question: "Porte üzerinde ikinci çizgide yer alan ve Sol Anahtarının ismini veren nota hangisidir?", options: ["Mi", "Do", "Sol", "La"], answer: "Sol" }, { question: "Bir şarkının sadece çalgılarla, sözsüz olarak icra edilmesine ne denir?", options: ["Koro", "A capella", "Enstrümantal Müzik", "Vokal Müzik"], answer: "Enstrümantal Müzik" }, { question: "Müzik seslerini yarım ses kalınlaştıran (alçaltan) işaret hangisidir?", options: ["Diyez", "Bemol", "Natural", "Sus"], answer: "Bemol" }, { question: "Bir müzik parçasının **hızlı** çalınması gerektiğini belirten tempo terimi hangisidir?", options: ["Largo", "Adagio", "Andante", "Allegro"], answer: "Allegro" }, { question: "Davul, Zil, Darbuka gibi çalgılar hangi temel enstrüman grubuna aittir?", options: ["Nefesli Çalgılar", "Vurmalı Çalgılar", "Telli Çalgılar", "Tuşlu Çalgılar"], answer: "Vurmalı Çalgılar" }, { question: "Müzik seslerinin birbiri ardına gelerek kulağa hoş gelmesiyle oluşan bütüne ne ad verilir?", options: ["Ritim", "Akor", "Melodi", "Armoni"], answer: "Melodi" }, { question: "Müzik eserlerinde tempo veya dinamiklerin **giderek hızlanması** gerektiğini belirten terim nedir?", options: ["Ritardando", "Largo", "Accelerando", "Piyano"], answer: "Accelerando" }, { question: "Üflemeli çalgılardan olan Klarinet veya Flüt hangi materyalden yapılmış olabilir?", options: ["Yalnızca Ağaç", "Yalnızca Metal", "Yalnızca Deri", "Ağaç veya Metal"], answer: "Ağaç veya Metal" }, { question: "Kulağa hoş gelmeyen, düzensiz ve gürültülü seslere ne ad verilir?", options: ["Müzik", "Ritim", "Ses (Noise)", "Ton"], answer: "Ses (Noise)" } ]; const quizForm = document.getElementById('quiz-form'); const scoreBox = document.getElementById('score-box'); const modeToggle = document.getElementById('mode-toggle'); let currentScore = 0; const quizLength = 10; const maxScore = 100; const scorePerQuestion = maxScore / quizLength; let currentQuizQuestions = []; // Dizi karıştırma fonksiyonu (Fisher-Yates) function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // Rastgele Soru Seçme Fonksiyonu function selectRandomQuestions(pool, count) { const shuffledPool = shuffleArray([...pool]); return shuffledPool.slice(0, count); } // Testi Yükleme Fonksiyonu function loadQuiz() { quizForm.innerHTML = ''; currentQuizQuestions = selectRandomQuestions(allQuestions, quizLength); currentQuizQuestions.forEach((q, index) => { const shuffledOptions = shuffleArray([...q.options]); const questionHtml = ` <div class="question-card" data-index="${index}"> <h3>${index + 1}. ${q.question}</h3> <div class="options-container"> <select class="select-answer" id="q${index}" data-question-index="${index}"> <option value="" selected disabled>Seçiniz</option> ${shuffledOptions.map(option => ` <option value="${option}">${option}</option> `).join('')} </select> <div class="correct-answer-display" id="correct-display-${index}"></div> </div> <button type="button" class="check-button" data-question-index="${index}">Kontrol Et</button> <div class="feedback" id="feedback-${index}"></div> </div> `; quizForm.innerHTML += questionHtml; }); document.querySelectorAll('.check-button').forEach(button => { button.addEventListener('click', checkAnswer); }); updateScore(); } // Cevabı Kontrol Etme Fonksiyonu function checkAnswer(event) { const checkButton = event.target; const questionIndex = checkButton.dataset.questionIndex; const questionCard = document.querySelector(`.question-card[data-index="${questionIndex}"]`); const selectElement = document.getElementById(`q${questionIndex}`); const feedbackDiv = document.getElementById(`feedback-${questionIndex}`); const correctDisplayDiv = document.getElementById(`correct-display-${questionIndex}`); const questionData = currentQuizQuestions[questionIndex]; if (questionCard.classList.contains('checked')) return; const userAnswer = selectElement.value; if (!userAnswer) { alert("Lütfen açılır menüden bir seçim yapın."); return; } selectElement.disabled = true; checkButton.disabled = true; questionCard.classList.add('checked'); if (userAnswer === questionData.answer) { currentScore += scorePerQuestion; feedbackDiv.textContent = '✅ Tebrikler, doğru cevap!'; feedbackDiv.className = 'feedback correct'; } else { feedbackDiv.innerHTML = `❌ Yanlış cevap. **Sizin Seçiminiz:** ${userAnswer}.`; correctDisplayDiv.innerHTML = `**Doğru Cevap:** ${questionData.answer}`; correctDisplayDiv.style.display = 'block'; feedbackDiv.className = 'feedback wrong'; } updateScore(); feedbackDiv.style.display = 'block'; } // Puanı Güncelleme Fonksiyonu function updateScore() { scoreBox.textContent = `Puan: ${Math.round(currentScore)} / ${maxScore}`; } // Mod Değiştirme Fonksiyonu function toggleMode() { document.body.classList.toggle('dark-mode'); const isDarkMode = document.body.classList.contains('dark-mode'); localStorage.setItem('darkMode', isDarkMode); modeToggle.textContent = isDarkMode ? 'Açık Moda Geç' : 'Koyu Moda Geç'; } // Tekrar Test Yapma Fonksiyonu function resetQuiz() { currentScore = 0; loadQuiz(); alert("Test sıfırlandı! Yeni bir denemeye hazırsınız. Yeni rastgele 10 soru yüklendi."); } window.resetQuiz = resetQuiz; // Başlangıçta kaydelilen modu yükle function loadMode() { const isDarkMode = localStorage.getItem('darkMode') === 'true'; if (isDarkMode) { document.body.classList.add('dark-mode'); } modeToggle.textContent = isDarkMode ? 'Açık Moda Geç' : 'Koyu Moda Geç'; } // Olay dinleyicileri modeToggle.addEventListener('click', toggleMode); // Sayfa yüklendiğinde document.addEventListener('DOMContentLoaded', () => { loadMode(); loadQuiz(); }); // JavaScript Sonu </script> </body> </html><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/12/6-snf-muzik-dersi-testi.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-8474568374480253554Thu, 04 Dec 2025 20:13:11 +00002025-12-04T23:13:58.383+03:00Müzik dersi materyalmüzik eğitimimüzik öğretmenitestuzaktan eğitim🎶 5. Sınıf Müzik Dersi Testi<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MybiSGen - 5. Sınıf Müzik Dersi Testi</title> <style> /* CSS Başlangıcı (Kompakt ve 2 Sütunlu Tasarım) */ :root { /* Açık Mod Renkleri */ --bg-color-light: #f4f4f9; --text-color-light: #333; --card-bg-light: #ffffff; --primary-color-light: #007bff; --correct-color-light: #28a745; --wrong-color-light: #dc3545; --info-color-light: #ffc107; --retry-color: #6c757d; } .dark-mode { /* Koyu Mod Renkleri */ --bg-color-light: #121212; --text-color-light: #e0e0e0; --card-bg-light: #1e1e1e; --primary-color-light: #bb86fc; --correct-color-light: #4caf50; --wrong-color-light: #cf6679; --info-color-light: #ffd700; --retry-color: #999; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color-light); color: var(--text-color-light); transition: background-color 0.3s, color 0.3s; margin: 0; padding: 5px; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } header { width: 100%; max-width: 900px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; padding: 4px 0; border-bottom: 1px solid var(--primary-color-light); } #app-title { font-size: 1.6em; font-weight: 700; color: var(--primary-color-light); } #mode-toggle { padding: 3px 6px; border: none; border-radius: 4px; cursor: pointer; background-color: var(--primary-color-light); color: var(--card-bg-light); font-size: 0.75em; } .container { width: 100%; max-width: 900px; } .test-title { text-align: center; font-size: 1.2em; margin-bottom: 5px; color: var(--primary-color-light); } .score-box { background-color: var(--info-color-light); color: var(--text-color-light); padding: 5px; margin-bottom: 5px; border-radius: 4px; font-weight: bold; text-align: center; font-size: 0.8em; } /* 2 Sütunlu Izgara Yapısı */ #quiz-form { display: grid; grid-template-columns: 1fr; /* Varsayılan: Tek sütun (Mobil için) */ gap: 8px; } @media (min-width: 768px) { #quiz-form { grid-template-columns: 1fr 1fr; /* Tablet ve masaüstü için 2 sütun */ gap: 15px; } } .question-card { background-color: var(--card-bg-light); padding: 10px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .question-card h3 { margin-top: 0; margin-bottom: 5px; font-size: 0.9em; color: var(--text-color-light); } .options-container { margin-top: 5px; display: flex; flex-direction: column; gap: 5px; } .select-answer { padding: 5px; border: 1px solid var(--primary-color-light); border-radius: 3px; background-color: var(--card-bg-light); color: var(--text-color-light); font-size: 0.85em; cursor: pointer; width: 100%; appearance: none; background-repeat: no-repeat; background-position: right 8px center; background-image: url('data:image/svg+xml;utf8,<svg fill="%23333333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M7 10l5 5 5-5z"/></svg>'); } .dark-mode .select-answer { background-image: url('data:image/svg+xml;utf8,<svg fill="%23e0e0e0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M7 10l5 5 5-5z"/></svg>'); background-color: #333; } /* Kontrol ve Tekrar Butonları */ .check-button, #retry-all-button { display: block; width: 100%; padding: 5px; margin-top: 5px; font-size: 0.8em; font-weight: bold; border: none; border-radius: 3px; cursor: pointer; transition: background-color 0.3s; } .check-button { background-color: var(--primary-color-light); color: white; } #retry-all-button { background-color: var(--retry-color); color: white; margin-top: 10px; margin-bottom: 10px; } /* Cevap Durumu Mesajı */ .feedback { margin-top: 5px; padding: 5px; border-radius: 3px; font-weight: bold; font-size: 0.8em; display: none; } .feedback.correct { background-color: rgba(40, 167, 69, 0.2); color: var(--correct-color-light); } .feedback.wrong { background-color: rgba(220, 53, 69, 0.2); color: var(--wrong-color-light); } .correct-answer-display { margin-top: 3px; font-weight: bold; color: var(--correct-color-light); display: none; font-size: 0.8em; } /* CSS Sonu */ </style> </head> <body> <header> <div id="app-title">MybiSGen</div> <button id="mode-toggle">Koyu Moda Geç</button> </header> <div class="container"> <h1 class="test-title">🎶 5. Sınıf Müzik Dersi Testi</h1> <div id="score-box" class="score-box">Puan: 0 / 100</div> <form id="quiz-form"> </form> <button id="retry-all-button" onclick="resetQuiz()">Tüm Testi Tekrar Yap (Yeni Sorular)</button> </div> <script> // JavaScript Başlangıcı // 20 Soruluk 5. Sınıf Kazanımlarına Uygun Soru Havuzu const allQuestions = [ { question: "Sesin oluşumunu sağlayan temel fiziksel olay nedir?", options: ["Görünürlük", "Esneklik", "Işık yayılımı", "Titreşim"], answer: "Titreşim" }, { question: "İstiklâl Marşı'nın tarihi önemini ve anlamını düşünerek söylemeye ne denir?", options: ["Yüksek sesle söylemek", "Hızlı söylemek", "Ritme uygun söylemek", "Anlamına uygun söylemek"], answer: "Anlamına uygun söylemek" }, { question: "Bir Dörtlük nota kaç tane Sekizlik nota süresine eşittir?", options: ["Bir", "İki", "Üç", "Dört"], answer: "İki" }, { question: "Müziği oluşturan seslerin uzunluk ve kısalık özelliklerini inceleyen öge nedir?", options: ["Perde", "Tını", "Süre (Ritim)", "Dinamik (Gürlük)"], answer: "Süre (Ritim)" }, { question: "Notaların yazıldığı 5 çizgi ve 4 aralıktan oluşan dizeğin adı nedir?", options: ["Ölçü", "Anahtar", "Porte", "Paragraf"], answer: "Porte" }, { question: "Bir müzik eserini 'çok hızlı' bir tempoda çalmayı ifade eden İtalyanca kelime genellikle hangisidir?", options: ["Largo", "Andante", "Allegro", "Adagio"], answer: "Allegro" }, { question: "Müzikteki seslerin 'yüksek' veya 'alçak' (ses şiddeti) çalınma özelliğine ne denir?", options: ["Melodi", "Tını", "Dinamik (Gürlük)", "Tempo"], answer: "Dinamik (Gürlük)" }, { question: "Atatürk'ün müziğe verdiği önemi araştıran bir öğrenci hangi kültürel değeri öğrenir?", options: ["Çevre sevgisi", "Sanat ve estetik", "Spor bilinci", "Teknoloji merakı"], answer: "Sanat ve estetik" }, { question: "Kendi oluşturduğu ritim kalıbını seslendiren öğrenci hangi alanda gelişim gösterir?", options: ["Dinleme becerisi", "Müziksel yaratıcılık", "Müzik kültürü", "Birlikte söyleme"], answer: "Müziksel yaratıcılık" }, { question: "Türk müziğinde makamsal yapıyı fark eden bir öğrenci neyi ayırt etmeye başlamıştır?", options: ["Hızlı ve yavaş tempoyu", "Vurmalı ve telli çalgıyı", "Türk müziğine özgü ezgi yollarını", "Doğru ve yanlış notayı"], answer: "Türk müziğine özgü ezgi yollarını" }, { question: "Gitar gibi telli çalgılarda sesin inceliği/kalınlığı neye bağlıdır?", options: ["Çalan kişinin yaşına", "Telin rengine", "Telin kalınlığı ve uzunluğuna", "Gitarın yapıldığı ağaca"], answer: "Telin kalınlığı ve uzunluğuna" }, { question: "Bireysel müzik arşivi oluşturmanın temel amacı nedir?", options: ["Tüm müzikleri ezberlemek", "Sadece eski müzikleri saklamak", "Beğendiği müzikleri düzenli bir şekilde saklamak", "Müzik teknolojilerini kullanmayı öğrenmek"], answer: "Beğendiği müzikleri düzenli bir şekilde saklamak" }, { question: "Temel müzik yazı ögelerinden olan 'Ölçü Çizgisi' ne işe yarar?", options: ["Notaları inceltir", "Dizekleri uzatır", "Porte üzerindeki ölçüleri birbirinden ayırır", "Sesleri kısaltır"], answer: "Porte üzerindeki ölçüleri birbirinden ayırır" }, { question: "Müziklerdeki gürlük değişikliklerinden 'giderek kuvvetlenme' teriminin İtalyanca karşılığı nedir?", options: ["Piyano", "Forte", "Crescendo", "Decrescendo"], answer: "Crescendo" }, { question: "Bir şarkıda gürlüğün 'giderek hafiflemesi' hangi duygu durumunu yansıtır?", options: ["Heyecanlanma", "Neşelenme", "Sakinleşme", "Hızlanma"], answer: "Sakinleşme" }, { question: "Bir notanın dizek üzerinde daha yukarıda yer alması, sesinin hangi özelliğini gösterir?", options: ["Daha kısa olduğunu", "Daha kalın olduğunu", "Daha ince olduğunu", "Daha uzun olduğunu"], answer: "Daha ince olduğunu" }, { question: "Ses kaynaklarından çıkan titreşimler hangi ortamda yayılarak kulağımıza ulaşır?", options: ["Boşlukta", "Sudan geçerek", "Hava", "Yalnızca katı cisimlerde"], answer: "Hava" }, { question: "Bir müzik parçasını 'orta yavaşlıkta' çalmayı ifade eden temel tempo terimi hangisidir?", options: ["Presto", "Largo", "Andante", "Vivace"], answer: "Andante" }, { question: "Müzikle ilgili araştırma ve çalışmalarında faydalanılması gereken teknoloji aracı nedir?", options: ["Otomobil", "Bilişim teknolojileri (Bilgisayar, Tablet vb.)", "Saat", "Teleskop"], answer: "Bilişim teknolojileri (Bilgisayar, Tablet vb.)" }, { question: "Müziğe kendi oluşturduğu ritim kalıbı ile eşlik etmek hangi beceriyi kapsar?", options: ["Sadece dinleme", "Sadece şarkı söyleme", "Ritmik algı ve eşlik etme", "Nota yazma"], answer: "Ritmik algı ve eşlik etme" } ]; const quizForm = document.getElementById('quiz-form'); const scoreBox = document.getElementById('score-box'); const modeToggle = document.getElementById('mode-toggle'); let currentScore = 0; const quizLength = 10; const maxScore = 100; const scorePerQuestion = maxScore / quizLength; let currentQuizQuestions = []; // Dizi karıştırma fonksiyonu (Fisher-Yates) function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // Rastgele Soru Seçme Fonksiyonu function selectRandomQuestions(pool, count) { const shuffledPool = shuffleArray([...pool]); return shuffledPool.slice(0, count); } // Testi Yükleme Fonksiyonu function loadQuiz() { quizForm.innerHTML = ''; currentQuizQuestions = selectRandomQuestions(allQuestions, quizLength); currentQuizQuestions.forEach((q, index) => { const shuffledOptions = shuffleArray([...q.options]); const questionHtml = ` <div class="question-card" data-index="${index}"> <h3>${index + 1}. ${q.question}</h3> <div class="options-container"> <select class="select-answer" id="q${index}" data-question-index="${index}"> <option value="" selected disabled>Seçiniz</option> ${shuffledOptions.map(option => ` <option value="${option}">${option}</option> `).join('')} </select> <div class="correct-answer-display" id="correct-display-${index}"></div> </div> <button type="button" class="check-button" data-question-index="${index}">Kontrol Et</button> <div class="feedback" id="feedback-${index}"></div> </div> `; quizForm.innerHTML += questionHtml; }); document.querySelectorAll('.check-button').forEach(button => { button.addEventListener('click', checkAnswer); }); updateScore(); } // Cevabı Kontrol Etme Fonksiyonu function checkAnswer(event) { const checkButton = event.target; const questionIndex = checkButton.dataset.questionIndex; const questionCard = document.querySelector(`.question-card[data-index="${questionIndex}"]`); const selectElement = document.getElementById(`q${questionIndex}`); const feedbackDiv = document.getElementById(`feedback-${questionIndex}`); const correctDisplayDiv = document.getElementById(`correct-display-${questionIndex}`); const questionData = currentQuizQuestions[questionIndex]; if (questionCard.classList.contains('checked')) return; const userAnswer = selectElement.value; if (!userAnswer) { alert("Lütfen açılır menüden bir seçim yapın."); return; } selectElement.disabled = true; checkButton.disabled = true; questionCard.classList.add('checked'); if (userAnswer === questionData.answer) { currentScore += scorePerQuestion; feedbackDiv.textContent = '✅ Tebrikler, doğru cevap!'; feedbackDiv.className = 'feedback correct'; } else { feedbackDiv.innerHTML = `❌ Yanlış cevap. **Sizin Seçiminiz:** ${userAnswer}.`; correctDisplayDiv.innerHTML = `**Doğru Cevap:** ${questionData.answer}`; correctDisplayDiv.style.display = 'block'; feedbackDiv.className = 'feedback wrong'; } updateScore(); feedbackDiv.style.display = 'block'; } // Puanı Güncelleme Fonksiyonu function updateScore() { scoreBox.textContent = `Puan: ${Math.round(currentScore)} / ${maxScore}`; } // Mod Değiştirme Fonksiyonu function toggleMode() { document.body.classList.toggle('dark-mode'); const isDarkMode = document.body.classList.contains('dark-mode'); localStorage.setItem('darkMode', isDarkMode); modeToggle.textContent = isDarkMode ? 'Açık Moda Geç' : 'Koyu Moda Geç'; } // Tekrar Test Yapma Fonksiyonu function resetQuiz() { currentScore = 0; loadQuiz(); alert("Test sıfırlandı! Yeni bir denemeye hazırsınız. Yeni rastgele 10 soru yüklendi."); } window.resetQuiz = resetQuiz; // Başlangıçta kaydelilen modu yükle function loadMode() { const isDarkMode = localStorage.getItem('darkMode') === 'true'; if (isDarkMode) { document.body.classList.add('dark-mode'); } modeToggle.textContent = isDarkMode ? 'Açık Moda Geç' : 'Koyu Moda Geç'; } // Olay dinleyicileri modeToggle.addEventListener('click', toggleMode); // Sayfa yüklendiğinde document.addEventListener('DOMContentLoaded', () => { loadMode(); loadQuiz(); }); // JavaScript Sonu </script> </body> </html><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/12/5-snf-muzik-dersi-testi.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-4931491535827446086Thu, 04 Dec 2025 20:12:00 +00002025-12-04T23:12:47.698+03:00Müzik dersi materyalmüzik eğitimimüzik öğretmenitestuzaktan eğitim🎶 4. Sınıf Müzik Dersi Testi<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MybiSGen - 4. Sınıf Müzik Dersi Testi</title> <style> /* CSS Başlangıcı (Kompakt ve 2 Sütunlu Tasarım) */ :root { /* Açık Mod Renkleri */ --bg-color-light: #f4f4f9; --text-color-light: #333; --card-bg-light: #ffffff; --primary-color-light: #007bff; --correct-color-light: #28a745; --wrong-color-light: #dc3545; --info-color-light: #ffc107; --retry-color: #6c757d; } .dark-mode { /* Koyu Mod Renkleri */ --bg-color-light: #121212; --text-color-light: #e0e0e0; --card-bg-light: #1e1e1e; --primary-color-light: #bb86fc; --correct-color-light: #4caf50; --wrong-color-light: #cf6679; --info-color-light: #ffd700; --retry-color: #999; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color-light); color: var(--text-color-light); transition: background-color 0.3s, color 0.3s; margin: 0; padding: 5px; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } header { width: 100%; max-width: 900px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; padding: 4px 0; border-bottom: 1px solid var(--primary-color-light); } #app-title { font-size: 1.6em; font-weight: 700; color: var(--primary-color-light); } #mode-toggle { padding: 3px 6px; border: none; border-radius: 4px; cursor: pointer; background-color: var(--primary-color-light); color: var(--card-bg-light); font-size: 0.75em; } .container { width: 100%; max-width: 900px; } .test-title { text-align: center; font-size: 1.2em; margin-bottom: 5px; color: var(--primary-color-light); } .score-box { background-color: var(--info-color-light); color: var(--text-color-light); padding: 5px; margin-bottom: 5px; border-radius: 4px; font-weight: bold; text-align: center; font-size: 0.8em; } /* 2 Sütunlu Izgara Yapısı */ #quiz-form { display: grid; grid-template-columns: 1fr; /* Varsayılan: Tek sütun (Mobil için) */ gap: 8px; } @media (min-width: 768px) { #quiz-form { grid-template-columns: 1fr 1fr; /* Tablet ve masaüstü için 2 sütun */ gap: 15px; } } .question-card { background-color: var(--card-bg-light); padding: 10px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .question-card h3 { margin-top: 0; margin-bottom: 5px; font-size: 0.9em; color: var(--text-color-light); } .options-container { margin-top: 5px; display: flex; flex-direction: column; gap: 5px; } .select-answer { padding: 5px; border: 1px solid var(--primary-color-light); border-radius: 3px; background-color: var(--card-bg-light); color: var(--text-color-light); font-size: 0.85em; cursor: pointer; width: 100%; appearance: none; background-repeat: no-repeat; background-position: right 8px center; background-image: url('data:image/svg+xml;utf8,<svg fill="%23333333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M7 10l5 5 5-5z"/></svg>'); } .dark-mode .select-answer { background-image: url('data:image/svg+xml;utf8,<svg fill="%23e0e0e0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M7 10l5 5 5-5z"/></svg>'); background-color: #333; } /* Kontrol ve Tekrar Butonları */ .check-button, #retry-all-button { display: block; width: 100%; padding: 5px; margin-top: 5px; font-size: 0.8em; font-weight: bold; border: none; border-radius: 3px; cursor: pointer; transition: background-color 0.3s; } .check-button { background-color: var(--primary-color-light); color: white; } #retry-all-button { background-color: var(--retry-color); color: white; margin-top: 10px; margin-bottom: 10px; } /* Cevap Durumu Mesajı */ .feedback { margin-top: 5px; padding: 5px; border-radius: 3px; font-weight: bold; font-size: 0.8em; display: none; } .feedback.correct { background-color: rgba(40, 167, 69, 0.2); color: var(--correct-color-light); } .feedback.wrong { background-color: rgba(220, 53, 69, 0.2); color: var(--wrong-color-light); } .correct-answer-display { margin-top: 3px; font-weight: bold; color: var(--correct-color-light); display: none; font-size: 0.8em; } /* CSS Sonu */ </style> </head> <body> <header> <div id="app-title">MybiSGen</div> <button id="mode-toggle">Koyu Moda Geç</button> </header> <div class="container"> <h1 class="test-title">🎶 4. Sınıf Müzik Dersi Testi</h1> <div id="score-box" class="score-box">Puan: 0 / 100</div> <form id="quiz-form"> </form> <button id="retry-all-button" onclick="resetQuiz()">Tüm Testi Tekrar Yap (Yeni Sorular)</button> </div> <script> // JavaScript Başlangıcı // 20 Soruluk GENİŞ ve BASİTLEŞTİRİLMİŞ 4. Sınıf Soru Havuzu const allQuestions = [ { question: "Bir sesin ince veya kalın olmasına ne ad verilir?", options: ["Tempo", "Ritim", "Tını", "Perde (İncelik/Kalınlık)"], answer: "Perde (İncelik/Kalınlık)" }, { question: "Bir şarkının hızlı veya yavaş çalınma hızına ne ad verilir?", options: ["Dinamik", "Ritim", "Tempo", "Melodi"], answer: "Tempo" }, { question: "Müzikteki vuruşların düzenli art arda gelmesine ne denir?", options: ["Armoni", "Tını", "Ritim", "Sus"], answer: "Ritim" }, { question: "İstiklal Marşı'mızın yazarı (şairi) kimdir?", options: ["O. Z. Üngör", "Tevfik Fikret", "Mehmet Akif Ersoy", "Aşık Veysel"], answer: "Mehmet Akif Ersoy" }, { question: "Müzik seslerinin yazıldığı 5 çizgi ve 4 aralıktan oluşan yapıya ne ad verilir?", options: ["Ölçü", "Nota", "Porte (Dizek)", "Anahtar"], answer: "Porte (Dizek)" }, { question: "Portede notaların yerini belirten, kıvrımlı işarete ne ad verilir?", options: ["Nota", "Ölçü Çizgisi", "Sol Anahtarı", "Fa Anahtarı"], answer: "Sol Anahtarı" }, { question: "4. sınıf düzeyinde öğrenilen notalardan biri hangisidir?", options: ["Re", "Si", "Do", "Fa"], answer: "Fa" }, { question: "Bir eserin sesinin yüksekliği (gürlüğü) ile ilgili özelliğine ne denir?", options: ["Tempo", "Tını", "Melodi", "Dinamik (Gürlük)"], answer: "Dinamik (Gürlük)" }, { question: "Aşağıdakilerden hangisi vurmalı çalgıdır?", options: ["Gitar", "Flüt", "Keman", "Davul"], answer: "Davul" }, { question: "Aşağıdakilerden hangisi telli çalgıdır?", options: ["Davul", "Zurna", "Keman", "Zil"], answer: "Keman" }, { question: "Aşağıdakilerden hangisi üflemeli çalgıdır?", options: ["Piyano", "Bağlama", "Flüt", "Bateri"], answer: "Flüt" }, { question: "Müzikte kullanılan ve bir vuruş süren temel nota hangisidir?", options: ["Sekizlik Nota", "Dörtlük Nota", "Birlik Nota", "Onaltılık Nota"], answer: "Dörtlük Nota" }, { question: "Müzikte sessizliği ifade eden işarete ne ad verilir?", options: ["Nota", "Porte", "Sus", "Ölçü"], answer: "Sus" }, { question: "Milli bayramlarda söylenen şarkılar hangi bilinci güçlendirir?", options: ["Çevre Bilinci", "Tüketim Bilinci", "Millî Bilinç", "Spor Bilinci"], answer: "Millî Bilinç" }, { question: "Birlikte şarkı söylerken dikkat edilmesi gereken kural nedir?", options: ["Sadece kendi sesini duymak", "Yüksek sesle bağırmak", "Uyumlu ve aynı anda başlamak", "Farklı tempoda söylemek"], answer: "Uyumlu ve aynı anda başlamak" }, { question: "Bir şarkının gitgide yavaşlaması durumuna ne ad verilir?", options: ["Giderek hızlanma", "Giderek yavaşlama", "Kuvvetlenme", "Hafifleme"], answer: "Giderek yavaşlama" }, { question: "Bir parçanın sesinin giderek hafiflemesi hangi dinamik terimi ifade eder?", options: ["Giderek kuvvetlenme", "Giderek hafifleme", "Kuvvetli çalma", "Çok hızlı çalma"], answer: "Giderek hafifleme" }, { // Düzeltilmiş Soru: Nota süresi kavramına odaklanıldı. question: "Bir **Dörtlük Nota**'nın süresi, kaç adet **Sekizlik Nota**'nın süresine eşittir?", options: ["Bir", "İki", "Üç", "Dört"], answer: "İki" }, { question: "Dizekteki (Porte) alt çizgilere yakın olan notaların sesi nasıldır?", options: ["İnce", "Kalın", "Orta", "Yüksek"], answer: "Kalın" }, { question: "Dinlediğimiz müziğe ellerimizi çırparak eşlik etmemiz hangi müziksel öğeye katkı sağlar?", options: ["Tını", "Melodi", "Ritim", "Gürlük"], answer: "Ritim" } ]; const quizForm = document.getElementById('quiz-form'); const scoreBox = document.getElementById('score-box'); const modeToggle = document.getElementById('mode-toggle'); let currentScore = 0; const quizLength = 10; const maxScore = 100; const scorePerQuestion = maxScore / quizLength; let currentQuizQuestions = []; // Dizi karıştırma fonksiyonu (Fisher-Yates) function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } // Rastgele Soru Seçme Fonksiyonu function selectRandomQuestions(pool, count) { const shuffledPool = shuffleArray([...pool]); return shuffledPool.slice(0, count); } // Testi Yükleme Fonksiyonu function loadQuiz() { quizForm.innerHTML = ''; currentQuizQuestions = selectRandomQuestions(allQuestions, quizLength); currentQuizQuestions.forEach((q, index) => { const shuffledOptions = shuffleArray([...q.options]); const questionHtml = ` <div class="question-card" data-index="${index}"> <h3>${index + 1}. ${q.question}</h3> <div class="options-container"> <select class="select-answer" id="q${index}" data-question-index="${index}"> <option value="" selected disabled>Seçiniz</option> ${shuffledOptions.map(option => ` <option value="${option}">${option}</option> `).join('')} </select> <div class="correct-answer-display" id="correct-display-${index}"></div> </div> <button type="button" class="check-button" data-question-index="${index}">Kontrol Et</button> <div class="feedback" id="feedback-${index}"></div> </div> `; quizForm.innerHTML += questionHtml; }); document.querySelectorAll('.check-button').forEach(button => { button.addEventListener('click', checkAnswer); }); updateScore(); } // Cevabı Kontrol Etme Fonksiyonu function checkAnswer(event) { const checkButton = event.target; const questionIndex = checkButton.dataset.questionIndex; const questionCard = document.querySelector(`.question-card[data-index="${questionIndex}"]`); const selectElement = document.getElementById(`q${questionIndex}`); const feedbackDiv = document.getElementById(`feedback-${questionIndex}`); const correctDisplayDiv = document.getElementById(`correct-display-${questionIndex}`); const questionData = currentQuizQuestions[questionIndex]; if (questionCard.classList.contains('checked')) return; const userAnswer = selectElement.value; if (!userAnswer) { alert("Lütfen açılır menüden bir seçim yapın."); return; } selectElement.disabled = true; checkButton.disabled = true; questionCard.classList.add('checked'); if (userAnswer === questionData.answer) { currentScore += scorePerQuestion; feedbackDiv.textContent = '✅ Tebrikler, doğru cevap!'; feedbackDiv.className = 'feedback correct'; } else { feedbackDiv.innerHTML = `❌ Yanlış cevap. **Sizin Seçiminiz:** ${userAnswer}.`; correctDisplayDiv.innerHTML = `**Doğru Cevap:** ${questionData.answer}`; correctDisplayDiv.style.display = 'block'; feedbackDiv.className = 'feedback wrong'; } updateScore(); feedbackDiv.style.display = 'block'; } // Puanı Güncelleme Fonksiyonu function updateScore() { scoreBox.textContent = `Puan: ${Math.round(currentScore)} / ${maxScore}`; } // Mod Değiştirme Fonksiyonu function toggleMode() { document.body.classList.toggle('dark-mode'); const isDarkMode = document.body.classList.contains('dark-mode'); localStorage.setItem('darkMode', isDarkMode); modeToggle.textContent = isDarkMode ? 'Açık Moda Geç' : 'Koyu Moda Geç'; } // Tekrar Test Yapma Fonksiyonu function resetQuiz() { currentScore = 0; loadQuiz(); alert("Test sıfırlandı! Yeni bir denemeye hazırsınız. Yeni rastgele 10 soru yüklendi."); } window.resetQuiz = resetQuiz; // Başlangıçta kaydelilen modu yükle function loadMode() { const isDarkMode = localStorage.getItem('darkMode') === 'true'; if (isDarkMode) { document.body.classList.add('dark-mode'); } modeToggle.textContent = isDarkMode ? 'Açık Moda Geç' : 'Koyu Moda Geç'; } // Olay dinleyicileri modeToggle.addEventListener('click', toggleMode); // Sayfa yüklendiğinde document.addEventListener('DOMContentLoaded', () => { loadMode(); loadQuiz(); }); // JavaScript Sonu </script> </body> </html><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/12/4-snf-muzik-dersi-testi.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-8013467980290131828Thu, 04 Dec 2025 08:57:00 +00002025-12-04T11:57:23.199+03:00Müzik dersi materyalmüzik eğitimimüzik öğretmeniuzaktan eğitimAralık Tablosu Hesaplama Kuralları<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Aralık Hesaplama Kuralları - MybiSGen</title> <style> /* --- 1. KÖK RENKLER VE GENEL STİL --- */ :root { --primary-color: #5D4037; /* Kahverengi tonu */ --accent-color: #795548; /* Açık kahve */ --text-light: #333; --text-dark: #eee; --bg-light: #f8f8f8; --bg-dark: #1e1e1e; --container-light: #fff; --container-dark: #2c2c2c; --border-light: #ccc; --border-dark: #444; } body { font-family: 'Georgia', serif; transition: background-color 0.4s, color 0.4s; margin: 0; padding: 20px; line-height: 1.6; max-width: 900px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } /* --- 2. MOD STİLLERİ --- */ .light-mode { background-color: var(--bg-light); color: var(--text-light); } .light-mode h2, .light-mode h3 { color: var(--primary-color); } .light-mode table, .light-mode th, .light-mode td { border: 1px solid var(--border-light); } .dark-mode { background-color: var(--bg-dark); color: var(--text-dark); } .dark-mode h2, .dark-mode h3 { color: var(--accent-color); } .dark-mode table, .dark-mode th, .dark-mode td { border: 1px solid var(--border-dark); } .dark-mode thead { background-color: #3e2723; /* Koyu kahve başlık */ } .dark-mode tbody tr:nth-child(even) { background-color: #3a3a3a; } /* --- 3. İÇERİK STİLLERİ --- */ header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; margin-bottom: 20px; } h2 { font-size: 1.8em; margin-top: 0; border-left: 5px solid var(--primary-color); padding-left: 10px; } h3 { font-size: 1.4em; margin-top: 25px; border-bottom: 1px dotted var(--accent-color); padding-bottom: 5px; } table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.95em; } th, td { padding: 10px; text-align: left; } thead th { background-color: var(--primary-color); color: white; } tbody tr:nth-child(even) { background-color: #f0f0f0; } .dark-mode tbody tr:nth-child(even) { background-color: #282828; } .rule-list { list-style-type: '👉'; /* Özel liste işareti */ padding-left: 20px; } .rule-list li { margin-bottom: 10px; padding-left: 10px; } .example-box { padding: 15px; margin-top: 20px; border: 2px dashed var(--accent-color); border-radius: 5px; } .example-box p { font-family: monospace; font-size: 1.1em; font-weight: bold; } #mode-toggle { padding: 8px 12px; border: 1px solid var(--primary-color); background-color: transparent; color: var(--primary-color); cursor: pointer; border-radius: 4px; } .dark-mode #mode-toggle { color: var(--accent-color); border-color: var(--accent-color); } </style> </head> <body class="light-mode"> <header> <h1>MybiSGen</h1> <button id="mode-toggle">Koyu Mod</button> </header> <h2>🎶 Aralık Tablosu ve Hesaplama Kuralları</h2> <h3>1. Temel Aralık Tablosu (Ton Karşılıkları)</h3> <table> <thead> <tr> <th>Aralık Adı (Kısa)</th> <th>İsim Alternatifi</th> <th>Ton Karşılığı</th> </tr> </thead> <tbody> <tr><td>**Küçük İkili** (m2)</td><td>K2 / minör ikili</td><td>½ ton</td></tr> <tr><td>**Büyük İkili** (M2)</td><td>B2 / majör ikili</td><td>1 ton</td></tr> <tr><td>**Küçük Üçlü** (m3)</td><td>K3 / minör üçlü</td><td>1½ ton</td></tr> <tr><td>**Büyük Üçlü** (M3)</td><td>B3 / majör üçlü</td><td>2 ton</td></tr> <tr><td>**Tam Dörtlü** (P4)</td><td>T4 / Perfect 4</td><td>2½ ton</td></tr> <tr><td>**Artık Dörtlü** (+4)</td><td>A4 / Aug.4</td><td>3 ton</td></tr> <tr><td>**Eksik Beşli** (E5)</td><td>-5 / Dim.5</td><td>3 ton</td></tr> <tr><td>**Tam Beşli** (P5)</td><td>T5 / Perfect 5</td><td>3½ ton</td></tr> <tr><td>**Küçük Altılı** (m6)</td><td>K6 / minör altılı</td><td>4 ton</td></tr> <tr><td>**Büyük Altılı** (M6)</td><td>B6 / majör altılı</td><td>4½ ton</td></tr> <tr><td>**Küçük Yedili** (m7)</td><td>K7 / minör yedili</td><td>5 ton</td></tr> <tr><td>**Büyük Yedili** (M7)</td><td>B7 / majör yedili</td><td>5½ ton</td></tr> <tr><td>**Tam Sekizli** (T8)</td><td>Oktav</td><td>6 ton</td></tr> </tbody> </table> <h3>2. Aralık Kurulurken Dikkat Edilmesi Gereken Hususlar</h3> <ul class="rule-list"> <li>**Kök Ses'e Dokunulmaz:** Aralığın kurulacağı ses (kök ses) hiçbir şekilde değiştirilmez. Kök ses temeldir.</li> <li>**Ara Seslere Dokunulmaz:** Kök ses ile üst uç arasındaki ara seslere de müdahale edilmez.</li> <li>**Müdahale Sadece Son Ses (Üst Uç) Üzerindedir:** Oynama ve müdahale, sadece en son ses (üst uç) üzerinde yapılır.</li> <li>**Hane (Ses Sayısı) Saptanır:** İlk önce aralıkta kaç ses olduğu saptanır ve o kadar ses ilerlenir. (Örn: 3'lü aralık için 3 nota ilerlenir).</li> <li>**Ton Hesaplaması Yapılır:** Saptanan ses üzerinde, aralık tablosundaki değerlere göre ton hesaplaması yapılarak aralık bulunur.</li> </ul> <h3>3. Örnek Hesaplama ve İsimlendirme Prensibi</h3> <h4>Örnek: Do sesi üzerine 3'lü aralık kurmak</h4> <div class="example-box"> <p>1. Hane (Ses Sayısı): Do sesi üzerine 3 nota sayılır: **Do, Re, Mi**.</p> <p>2. Ton Hesaplaması: Do – Mi arası mevcut ton mesafesi **2 ton**'dur.</p> <p>3. Sonuç: 3 ses ve 2 ton olduğu için bu aralık **Büyük 3'lü (M3)** olur.</p> <hr> <p> Küçük 3'lü (m3) istenirse (1½ ton): Son ses Mi yarım ses eksiltilir. Sonuç: **Do – Mi bemol** (3 ses, 1½ ton).</p> </div> <h4>Neden Re diyez (Re#) değil de Mi bemol (Mi♭)?</h4> <p>Aralıklar, ses sayısına göre adlandırılır:</p> <ul class="rule-list" style="list-style-type: '➡️';"> <li>**Do – Re#** sadece **iki ses** (Do, Re) yapmaktadır. Bu bir 2'li aralığıdır.</li> <li>**Do – Mi♭** ise **üç ses** (Do, Re, Mi) yapmaktadır. Bu bir 3'lü aralığıdır.</li> </ul> <p>İstenen aralık 3'lü olduğu için, **Mi** notası baz alınmalı ve ayarlama (bemol) bu ses üzerinde yapılmalıdır.</p> <script> // KOYU/AÇIK MOD GEÇİŞİ İÇİN BASİT JAVASCRIPT const modeToggle = document.getElementById('mode-toggle'); const body = document.body; modeToggle.addEventListener('click', () => { const isDark = body.classList.toggle('dark-mode'); body.classList.toggle('light-mode', !isDark); modeToggle.textContent = isDark ? 'Açık Mod' : 'Koyu Mod'; }); // Başlangıç modunu ayarla document.addEventListener('DOMContentLoaded', () => { // Varsayılan olarak açık mod ile başlar body.classList.add('light-mode'); }); </script> </body> </html><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/12/aralk-tablosu-hesaplama-kurallar_4.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-1921062643481998831Wed, 03 Dec 2025 22:45:00 +00002025-12-04T01:48:38.967+03:00akorMüzik dersi materyalmüzik eğitimimüzik öğretmeniuzaktan eğitimMybiSGen - Aralıklara Göre Nota Bulma <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>🎶 Aralıklara Göre Nota Bulma Alıştırması</title> <style> /* ==================================== */ /* 1. CSS STİLLERİ */ /* ==================================== */ :root { /* Açık Mod Varsayılanları */ --bg-color: #f4f4f4; --text-color: #333; --header-bg: #8b4513; --header-text: white; --table-border: #8b4513; --input-bg: white; --correct-color: #4CAF50; --incorrect-color: #f44336; --select-bg: white; --guide-bg: #eee; --button-padding: 10px 15px; /* Standart buton dolgusu */ } .dark-mode { /* Koyu Mod Ayarları */ --bg-color: #222; --text-color: #eee; --header-bg: #4b2a1a; --table-border: #666; --input-bg: #333; --placeholder-color: #bbb; --guide-bg: #333; --select-bg: #444; } body, #chord-table select { transition: background-color 0.3s, color 0.3s, border-color 0.3s; } body { font-family: 'Arial', sans-serif; background-color: var(--bg-color); color: var(--text-color); margin: 0; padding: 20px 10px; /* Mobil için yatay dolguyu azalt */ min-height: 100vh; } .container { max-width: 1200px; margin: auto; padding: 0; position: relative; } /* Başlıklar ve Puanlama */ .app-branding { font-size: 2em; } /* Mobil için küçült */ h1 { font-size: 1.5em; padding-bottom: 5px; } /* Mobil için küçült */ #score-board { font-size: 1.1em; } /* --- Butonlar --- */ button { padding: var(--button-padding); margin: 5px; cursor: pointer; background-color: var(--header-bg); color: var(--header-text); border: none; border-radius: 5px; font-size: 1em; touch-action: manipulation; /* Dokunmatik gecikmeyi azaltır */ } #theme-toggle { position: absolute; top: 0; right: 0; font-size: 0.8em; /* Buton fontunu biraz küçült */ padding: 6px 10px; /* Buton dolgusunu küçült */ } /* --- Tablo ve Responsive Kaydırma --- */ .table-wrapper { overflow-x: auto; margin-bottom: 20px; /* Mobil cihazlarda kaydırma çubuğunun daha iyi görünmesi için */ -webkit-overflow-scrolling: touch; } #chord-table { width: 100%; border-collapse: collapse; min-width: 600px; /* Telefon ekranından biraz büyük kalsın ki kaydırma anlam kazansın */ } #chord-table td, #chord-table th { border: 2px solid var(--table-border); padding: 6px 4px; /* Tablo hücre dolgusunu azalt */ font-size: 0.85em; /* Mobil için yazı boyutunu küçült */ } #chord-table th { white-space: nowrap; /* Sütun başlıklarının tek satırda kalmasını sağla */ } /* Select kutusu (Cevap seçenekleri) */ #chord-table select { width: 95%; /* Daha fazla yer kapla */ max-width: 100px; padding: 6px 3px; font-size: 0.8em; /* Seçenek fontunu küçült */ } /* Her soru için kontrol butonu */ .check-q-button { padding: 3px 6px; /* Buton dolgusunu küçült */ font-size: 0.7em; } /* --- Medya Sorgusu: Küçük Ekranlar (Telefonlar) İçin İyileştirmeler --- */ @media (max-width: 600px) { body { padding: 10px; } .app-branding { font-size: 1.8em; } h1 { font-size: 1.3em; } #theme-toggle { right: 5px; font-size: 0.7em; padding: 4px 8px; } /* Tablo kaydırma zorunluluğunu korumak için min-width'i biraz daha düşür */ #chord-table { min-width: 500px; } #chord-table td, #chord-table th { padding: 5px 3px; font-size: 0.8em; } #chord-table select { font-size: 0.75em; } .check-q-button { font-size: 0.65em; } } /* --- Renk Sınıfları --- */ .correct { background-color: var(--correct-color) !important; color: white; } .incorrect { background-color: var(--incorrect-color) !important; color: white; } .interval-row td { background-color: rgba(139, 69, 19, 0.15); } .dark-mode .interval-row td { background-color: rgba(75, 42, 26, 0.5); } .guide { margin-top: 20px; padding: 15px; } </style> </head> <body> <div class="container"> <button id="theme-toggle">Mod Değiştir (Açık/Koyu)</button> <div class="app-branding">MybiSGen</div> <h1>🇹🇷 Aralıklara Göre Nota Bulma Alıştırması</h1> <div class="controls"> <div id="score-board">Puan: 0 / 0</div> </div> <div class="table-wrapper"> <table id="chord-table"> <thead> <tr> <th>#</th> <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> <th>6</th><th>7</th><th>8</th><th>9</th><th>10</th> </tr> </thead> <tbody id="chord-tbody"> </tbody> </table> </div> <div class="controls"> <button id="reset-button">🔄 Yeni Alıştırma Yükle</button> </div> <div class="guide"> <h2>Kullanım Kılavuzu ve Puanlama Sistemi</h2> <h3>Uygulama Nasıl Kullanılır?</h3> <ul> <li>**Hedef:** Her sütunun en üstünde verilen **Kök Ses** ve hemen altındaki **Aralık (Soru)** bilgisine göre, açılır menüden doğru notayı seçiniz.</li> <li>**Kontrol:** Cevabınızı seçtikten sonra, o sorunun altındaki küçük **Kontrol Et** butonuna basınız.</li> <li>**DİKKAT! Tek Kontrol Hakkı:** Her bir soru için sadece **bir kez** kontrol etme hakkınız vardır. Kontrol ettikten sonra cevap seçeneği kilitlenir.</li> </ul> <h3>Puanlama Sistemi</h3> <ul> <li>**Anlık Puanlama:** Puanınız, her soruyu kontrol ettiğiniz anda anlık olarak güncellenir.</li> <li>**Sorulan Aralıklar:** Sadece temel **minör 3lü, majör 3lü, tam dörtlü, tam beşli, minör altılı, majör altılı, minör yedili** ve **majör yedili** aralıkları sorulmaktadır.</li> </ul> </div> </div> <script> // ==================================== // 2. JAVASCRİPT LOGİĞİ // ==================================== // JAVASCRİPT KODU AYNEN KORUNMUŞTUR. // ==================================== // Global değişkenler let currentPracticeChords = []; const CHORD_COUNT = 10; const totalQuestions = CHORD_COUNT; let correctAnswers = 0; // Aralık isimleri, yarım ses ve derece karşılıkları (Diatonik hesaplama için) const intervalMap = { 'minör 3lü': { semitones: 3, degree: 3 }, 'majör 3lü': { semitones: 4, degree: 3 }, 'tam dörtlü': { semitones: 5, degree: 4 }, 'tam beşli': { semitones: 7, degree: 5 }, 'minör altılı': { semitones: 8, degree: 6 }, 'majör altılı': { semitones: 9, degree: 6 }, 'minör yedili': { semitones: 10, degree: 7 }, 'majör yedili': { semitones: 11, degree: 7 } }; const intervalNames = Object.keys(intervalMap); // KÖK SES HAVUZU (Sadece doğal ve tek arızalı notalar) const simplifiedDiatonicRoots = ["C", "C#", "Db", "D", "D#", "Eb", "E", "F", "F#", "Gb", "G", "G#", "Ab", "A", "A#", "Bb", "B"]; // İNGİLİZCE DİATONİK NOTA İSİMLERİ ve TÜRKÇE KARŞILIKLARI (Tüm olası teorik isimler dahil) const trDiatonicNameMap = { "C": "Do", "C#": "Do diyez", "C##": "Do çift diyez", "Cb": "Do bemol", "Cbb": "Do çift bemol", "D": "Re", "D#": "Re diyez", "D##": "Re çift diyez", "Db": "Re bemol", "Dbb": "Re çift bemol", "E": "Mi", "E#": "Mi diyez", "E##": "Mi çift diyez", "Eb": "Mi bemol", "Ebb": "Mi çift bemol", "F": "Fa", "F#": "Fa diyez", "F##": "Fa çift diyez", "Fb": "Fa bemol", "Fbb": "Fa çift bemol", "G": "Sol", "G#": "Sol diyez", "G##": "Sol çift diyez", "Gb": "Sol bemol", "Gbb": "Sol çift bemol", "A": "La", "A#": "La diyez", "A##": "La çift diyez", "Ab": "La bemol", "Abb": "La çift bemol", "B": "Si", "B#": "Si diyez", "B##": "Si çift diyez", "Bb": "Si bemol", "Bbb": "Si çift bemol" }; // Sadece doğal notaların yarım ses değerleri (Diatonik hesaplamada kullanılır) const naturalSemitoneMap = { "C": 0, "D": 2, "E": 4, "F": 5, "G": 7, "A": 9, "B": 11 }; const letters = ["C", "D", "E", "F", "G", "A", "B"]; // Kullanıcıya seçenek olarak sunulacak BASİT notaların İngilizce adları (Çift arıza içermez) const simpleOptionKeys = ["C", "C#", "Cb", "D", "D#", "Db", "E", "E#", "Eb", "F", "F#", "Fb", "G", "G#", "Gb", "A", "A#", "Ab", "B", "B#", "Bb"]; // --- YARDIMCI FONKSİYONLAR --- /** * Bir notanın yarım ses indeksini döndürür (0-11). * Çift arızalı notalar için de çalışır. */ function getSemitoneIndex(noteName) { const naturalIndex = naturalSemitoneMap[noteName.charAt(0)]; if (noteName.length === 1) return naturalIndex; let index = naturalIndex; const accidental = noteName.substring(1); if (accidental.includes('#')) { index += accidental.length; } else if (accidental.includes('b')) { index -= accidental.length; } return (index % 12 + 12) % 12; } /** * Verilen diatonik cevabın tüm enharmonik Türkçe isimlerini döndürür. * Sadece BASİT (tek arızalı veya doğal) isimleri içerir. */ function getEnharmonicTrNames(diatonicResult) { const resultSemitones = getSemitoneIndex(diatonicResult); let names = []; // Sadece basit opsiyon anahtarlarını kontrol et for (const englishNote of simpleOptionKeys) { if (getSemitoneIndex(englishNote) === resultSemitones) { if (trDiatonicNameMap[englishNote]) { names.push(trDiatonicNameMap[englishNote]); } } } return Array.from(new Set(names)).filter(n => n); } /** * Türkçe nota adını hesaplama için kullanılan Diatonik İngilizce adına çevirir. */ function trToDiatonicName(trNote) { trNote = trNote.toLowerCase().trim(); for (const engNote in trDiatonicNameMap) { if (trDiatonicNameMap[engNote].toLowerCase() === trNote) { return engNote; } } return ""; } /** * Kök nota harfine ve dereceye göre hedef nota harfini bulur. */ function getTargetLetter(rootLetter, degree) { const rootIndex = letters.indexOf(rootLetter); const targetIndex = (rootIndex + degree - 1) % 7; return letters[targetIndex]; } /** * Diatonik kurallara göre aralık sonucu notayı hesaplar (TEORİK SONUÇ). * Burası, müzik teorisine göre MUTLAK DOĞRU olan sonucu (çift arıza dahil) döndürür. */ function calculateDiatonicNote(rootNoteName, intervalName) { const intervalData = intervalMap[intervalName]; const requiredSemitones = intervalData.semitones; const requiredDegree = intervalData.degree; // Derece kuralı burada zorunlu kılınır // 1. Hedef Harfi Bul (Derece Kuralı) const rootLetter = rootNoteName.charAt(0); const targetLetter = getTargetLetter(rootLetter, requiredDegree); // 2. Doğal Notalar Arasındaki Uzaklığı Bul const rootNaturalSemitones = naturalSemitoneMap[rootLetter]; let naturalDistance = (naturalSemitoneMap[targetLetter] - rootNaturalSemitones) % 12; if (naturalDistance < 0) naturalDistance += 12; // 3. Kök Notanın Arızasını Hesapla const actualRootSemitones = getSemitoneIndex(rootNoteName); const rootAccidentalAdjustment = actualRootSemitones - rootNaturalSemitones; // 4. Gerçek Kök Notadan Doğal Hedef Notaya Uzaklığı Bul let actualDistanceToNaturalTarget = naturalDistance - rootAccidentalAdjustment; if (actualDistanceToNaturalTarget < 0) actualDistanceToNaturalTarget += 12; // 5. Gerekli Arızayı Hesapla (Ton Kuralı) const accidentalSemitonesNeeded = requiredSemitones - actualDistanceToNaturalTarget; // 6. Arızayı Harfe Uygula (Teorik Sonuç) let accidental = ""; if (accidentalSemitonesNeeded === 0) accidental = ""; else if (accidentalSemitonesNeeded > 0) accidental = "#".repeat(accidentalSemitonesNeeded); else accidental = "b".repeat(Math.abs(accidentalSemitonesNeeded)); return targetLetter + accidental; } /** * Diziyi karıştırır. */ function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } } /** * Yeni rastgele kök sesler ve aralıklar ile alıştırma listesini oluşturur. */ function generateRandomChords() { let availableRoots = [...simplifiedDiatonicRoots]; shuffleArray(availableRoots); const randomRoots = availableRoots.slice(0, CHORD_COUNT); let availableIntervals = [...intervalNames]; let randomIntervals = []; for (let i = 0; i < CHORD_COUNT; i++) { const randIndex = Math.floor(Math.random() * availableIntervals.length); randomIntervals.push(availableIntervals[randIndex]); } let newChords = []; for (let i = 0; i < CHORD_COUNT; i++) { const root = randomRoots[i]; const intervalName = randomIntervals[i]; // Teorik olarak doğru diatonik sonucu hesapla (Örn: E#) const correctNoteDiatonicTheoretical = calculateDiatonicNote(root, intervalName); newChords.push({ root: root, intervalName: intervalName, correctNote: correctNoteDiatonicTheoretical, // Teorik olarak doğru cevabı tutar isAnswered: false }); } return newChords; } /** * Tabloyu dinamik olarak oluşturur ve seçenekleri doldurur. */ function initializeTable() { currentPracticeChords = generateRandomChords(); const tbody = document.getElementById('chord-tbody'); tbody.innerHTML = ''; correctAnswers = 0; // --- 1. Kök Ses Satırı (Türkçe İsim) --- let rootRow = `<tr class="root-row"><td>Kök Ses</td>`; currentPracticeChords.forEach(chord => { const trRootName = trDiatonicNameMap[chord.root] || chord.root; rootRow += `<td><span class="root-note">${trRootName}</span></td>`; }); rootRow += `</tr>`; tbody.innerHTML += rootRow; // --- 2. Aralık Satırı (Soru) --- let intervalRow = `<tr class="interval-row"><td>Aralık (Soru)</td>`; currentPracticeChords.forEach(chord => { intervalRow += `<td><span class="interval-name">${chord.intervalName}</span></td>`; }); intervalRow += `</tr>`; tbody.innerHTML += intervalRow; // --- 3. Cevap Satırı (Select Kutusu ve Kontrol Butonu) --- let answerRow = `<tr class="answer-row"><td>Cevap Notası</td>`; currentPracticeChords.forEach((chord, index) => { const correctNoteTheoretical = chord.correctNote; // Teorik cevabın tüm ENHARMONİK Türkçe isimlerini al (Sadece basit isimler listelenecek) const allCorrectTrNames = getEnharmonicTrNames(correctNoteTheoretical); // Tüm olası BASİT Türkçe notaların listesi const allPossibleSimpleTrNotes = simpleOptionKeys .map(engNote => trDiatonicNameMap[engNote]) .filter(name => name); let optionsTr = new Set(allCorrectTrNames); let availableWrongNotes = [...allPossibleSimpleTrNotes]; availableWrongNotes = availableWrongNotes.filter(note => !allCorrectTrNames.includes(note)); while (optionsTr.size < 5 && availableWrongNotes.length > 0) { const randomIndex = Math.floor(Math.random() * availableWrongNotes.length); optionsTr.add(availableWrongNotes[randomIndex]); availableWrongNotes.splice(randomIndex, 1); } let optionsArray = Array.from(optionsTr); shuffleArray(optionsArray); let selectHTML = `<select data-index="${index}" class="answer-note">`; selectHTML += `<option value="">Seçiniz</option>`; optionsArray.forEach(noteTr => { // Kullanıcının seçeneğinin değerini Diatonik İngilizce isme çevir (Örn: "Do bemol" -> "Cb") const value = trToDiatonicName(noteTr); selectHTML += `<option value="${value}">${noteTr}</option>`; }); selectHTML += `</select>`; const buttonHTML = `<button type="button" class="check-q-button" data-index="${index}">Kontrol Et</button>`; answerRow += `<td>${selectHTML}${buttonHTML}</td>`; }); answerRow += `</tr>`; tbody.innerHTML += answerRow; document.getElementById('score-board').textContent = `Puan: 0 / ${totalQuestions}`; } // Her soru için Kontrol Butonu İşlevi (Event Delegation ile) document.getElementById('chord-table').addEventListener('click', (event) => { if (!event.target.classList.contains('check-q-button')) return; const button = event.target; const index = parseInt(button.dataset.index); const chordData = currentPracticeChords[index]; if (chordData.isAnswered) return; const selectElement = document.querySelector(`select.answer-note[data-index="${index}"]`); if (!selectElement) return; // KONTROL: Teorik olarak doğru cevabın semitonu ile kullanıcının seçtiği notanın semitonu eşit olmalı const correctSemitone = getSemitoneIndex(chordData.correctNote); const userDiatonicValue = selectElement.value; if (!userDiatonicValue) { alert("Lütfen bir nota seçimi yapınız."); return; } selectElement.classList.remove('correct', 'incorrect'); const userSemitone = getSemitoneIndex(userDiatonicValue); // Sadece yarım ses değerlerini kontrol ederek enharmonik eşdeğerliği sağlarız. const isCorrect = userSemitone === correctSemitone; if (isCorrect) { selectElement.classList.add('correct'); correctAnswers++; } else { selectElement.classList.add('incorrect'); } // TEK HAK KURALI: Soru kilitlenir chordData.isAnswered = true; selectElement.disabled = true; button.disabled = true; // Puanı anında güncelle const percentage = ((correctAnswers / totalQuestions) * 100).toFixed(1); document.getElementById('score-board').textContent = `Puan: ${correctAnswers} / ${totalQuestions} (${percentage}%)`; }); // Yeni Alıştırma Yükle Butonu İşlevi document.getElementById('reset-button').addEventListener('click', () => { initializeTable(); }); // Koyu/Açık Mod Geçişi document.getElementById('theme-toggle').addEventListener('click', () => { document.body.classList.toggle('dark-mode'); }); // Uygulama yüklendiğinde tabloyu başlat document.addEventListener('DOMContentLoaded', initializeTable); </script> </body> </html><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/12/mybisgen-aralklara-gore-nota-bulma.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-8683925549714301084Wed, 03 Dec 2025 16:45:00 +00002025-12-03T19:45:05.901+03:00Müzik dersi materyalmüzik eğitimimüzik öğretmeniuzaktan eğitimMybiSGen Mod'lar ve Sesleri<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes"> <title>MybiSGen Mod'lar ve Sesleri</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --bg-color: #f5f7fa; --text-color: #333; --card-bg: #ffffff; --primary-color: #4361ee; --secondary-color: #3a0ca3; --accent-color: #f72585; --border-color: #ddd; --shadow: 0 10px 20px rgba(0, 0, 0, 0.1); --note-ionian: #4361ee; --note-dorian: #3a0ca3; --note-phrygian: #7209b7; --note-lydian: #f72585; --note-mixolydian: #4cc9f0; --note-aeolian: #2a9d8f; --note-locrian: #e63946; --enharmonic-color: #ff9e00; --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); } .dark-mode { --bg-color: #121212; --text-color: #f5f5f5; --card-bg: #1e1e1e; --primary-color: #5a7dff; --secondary-color: #6d28d9; --accent-color: #ff4d8d; --border-color: #444; --shadow: 0 10px 20px rgba(0, 0, 0, 0.3); --note-ionian: #5a7dff; --note-dorian: #6d28d9; --note-phrygian: #9333ea; --note-lydian: #ff4d8d; --note-mixolydian: #22d3ee; --note-aeolian: #10b981; --note-locrian: #ef4444; --enharmonic-color: #fbbf24; } body { background-color: var(--bg-color); color: var(--text-color); transition: all 0.3s ease; min-height: 100vh; padding: 15px; padding-bottom: calc(15px + var(--safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; } /* iPhone X ve üstü için güvenli alan desteği */ @supports (padding: max(0px)) { body { padding-left: max(15px, env(safe-area-inset-left)); padding-right: max(15px, env(safe-area-inset-right)); } } .container { max-width: 1200px; margin: 0 auto; padding: 0; } /* Mobilde daha az padding */ @media (max-width: 768px) { body { padding: 12px; padding-bottom: calc(12px + var(--safe-area-inset-bottom)); } .container { padding: 0; } } @media (max-width: 480px) { body { padding: 10px; padding-bottom: calc(10px + var(--safe-area-inset-bottom)); } } header { text-align: center; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 2px solid var(--border-color); } h1 { color: var(--primary-color); font-size: 2.8rem; margin-bottom: 10px; letter-spacing: 1px; } /* Mobil başlık boyutu */ @media (max-width: 768px) { h1 { font-size: 2.2rem; margin-bottom: 8px; } } @media (max-width: 480px) { h1 { font-size: 1.8rem; } } .subtitle { font-size: 1.2rem; color: var(--text-color); opacity: 0.8; } @media (max-width: 768px) { .subtitle { font-size: 1rem; } } .theme-toggle { position: fixed; top: 20px; right: 20px; background-color: var(--primary-color); color: white; border: none; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; z-index: 100; box-shadow: var(--shadow); transition: all 0.3s ease; touch-action: manipulation; } /* Mobilde daha küçük tema butonu */ @media (max-width: 768px) { .theme-toggle { width: 45px; height: 45px; font-size: 1.3rem; top: 15px; right: 15px; } } .theme-toggle:hover { transform: rotate(30deg); background-color: var(--accent-color); } .main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; } @media (max-width: 1024px) { .main-content { gap: 25px; } } @media (max-width: 768px) { .main-content { grid-template-columns: 1fr; gap: 20px; } } .input-section, .output-section { background-color: var(--card-bg); border-radius: 15px; padding: 25px; box-shadow: var(--shadow); } /* Mobilde daha az padding */ @media (max-width: 768px) { .input-section, .output-section { padding: 20px; } } @media (max-width: 480px) { .input-section, .output-section { padding: 18px; } } .section-title { color: var(--primary-color); font-size: 1.8rem; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); } @media (max-width: 768px) { .section-title { font-size: 1.5rem; margin-bottom: 18px; } } .form-group { margin-bottom: 22px; } @media (max-width: 768px) { .form-group { margin-bottom: 18px; } } label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 1.1rem; } @media (max-width: 480px) { label { font-size: 1rem; margin-bottom: 8px; } } select { width: 100%; padding: 15px; border-radius: 10px; border: 2px solid var(--border-color); background-color: var(--card-bg); color: var(--text-color); font-size: 1.1rem; transition: all 0.3s ease; touch-action: manipulation; } /* Mobilde daha büyük tıklama alanı */ @media (max-width: 768px) { select { padding: 16px; font-size: 1.05rem; } } select:focus { outline: none; border-color: var(--primary-color); } .mode-display { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; padding: 20px; } @media (max-width: 768px) { .mode-display { min-height: 250px; padding: 15px; } } .mode-name { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px; text-align: center; font-weight: 700; word-break: break-word; } @media (max-width: 768px) { .mode-name { font-size: 2rem; margin-bottom: 15px; } } @media (max-width: 480px) { .mode-name { font-size: 1.8rem; } } .scale-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; max-width: 100%; } @media (max-width: 768px) { .scale-container { gap: 8px; margin-bottom: 25px; } } .note { width: 50px; height: 50px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; color: white; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; position: relative; overflow: hidden; } /* Mobilde daha küçük notalar */ @media (max-width: 768px) { .note { width: 45px; height: 45px; font-size: 1.2rem; } } @media (max-width: 480px) { .note { width: 40px; height: 40px; font-size: 1.1rem; } } /* Enarmonik gösterimi için */ .note-enharmonic { font-size: 0.8rem; opacity: 0.9; margin-top: 2px; } @media (max-width: 768px) { .note-enharmonic { font-size: 0.7rem; } } /* Her mod için farklı renk */ .note.ionian { background-color: var(--note-ionian); } .note.dorian { background-color: var(--note-dorian); } .note.phrygian { background-color: var(--note-phrygian); } .note.lydian { background-color: var(--note-lydian); } .note.mixolydian { background-color: var(--note-mixolydian); } .note.aeolian { background-color: var(--note-aeolian); } .note.locrian { background-color: var(--note-locrian); } .enharmonic-badge { position: absolute; top: 3px; right: 3px; background-color: var(--enharmonic-color); color: var(--text-color); font-size: 0.6rem; padding: 2px 5px; border-radius: 4px; font-weight: bold; } @media (max-width: 768px) { .enharmonic-badge { font-size: 0.5rem; padding: 1px 3px; } } .mode-info { background-color: var(--card-bg); border-radius: 15px; padding: 22px; box-shadow: var(--shadow); margin-top: 25px; } @media (max-width: 768px) { .mode-info { padding: 18px; margin-top: 20px; } } .info-title { color: var(--primary-color); font-size: 1.5rem; margin-bottom: 12px; } @media (max-width: 768px) { .info-title { font-size: 1.3rem; margin-bottom: 10px; } } .info-text { line-height: 1.6; font-size: 1.1rem; margin-bottom: 15px; } @media (max-width: 768px) { .info-text { font-size: 1rem; line-height: 1.5; } } .pattern { background-color: rgba(67, 97, 238, 0.1); border-left: 4px solid var(--primary-color); padding: 15px; border-radius: 8px; margin-top: 15px; font-size: 1.1rem; font-weight: 600; } .dark-mode .pattern { background-color: rgba(90, 125, 255, 0.15); } @media (max-width: 768px) { .pattern { padding: 12px; font-size: 1rem; } } .scale-text { font-size: 1.3rem; text-align: center; margin-top: 20px; padding: 15px; background-color: rgba(0, 0, 0, 0.05); border-radius: 10px; font-weight: 600; line-height: 1.5; } .dark-mode .scale-text { background-color: rgba(255, 255, 255, 0.05); } @media (max-width: 768px) { .scale-text { font-size: 1.1rem; padding: 12px; margin-top: 15px; } } .enharmonic-info { background-color: rgba(255, 158, 0, 0.1); border-left: 4px solid var(--enharmonic-color); padding: 12px; border-radius: 8px; margin-top: 15px; font-size: 1rem; } .dark-mode .enharmonic-info { background-color: rgba(251, 191, 36, 0.15); } @media (max-width: 768px) { .enharmonic-info { padding: 10px; font-size: 0.9rem; } } footer { text-align: center; margin-top: 35px; padding-top: 20px; border-top: 1px solid var(--border-color); color: var(--text-color); opacity: 0.7; font-size: 0.9rem; padding-bottom: max(10px, env(safe-area-inset-bottom)); } @media (max-width: 768px) { footer { margin-top: 25px; font-size: 0.85rem; padding: 15px 10px 10px; } footer p { margin-bottom: 5px; } } /* OTOMATİK GÜNCELLEME MESAJI */ .auto-update-notice { background-color: rgba(67, 97, 238, 0.1); border-radius: 10px; padding: 12px 15px; margin-top: 15px; font-size: 0.95rem; text-align: center; color: var(--primary-color); border: 1px solid rgba(67, 97, 238, 0.2); display: flex; align-items: center; justify-content: center; gap: 10px; } .dark-mode .auto-update-notice { background-color: rgba(90, 125, 255, 0.15); border-color: rgba(90, 125, 255, 0.3); } .auto-update-notice i { font-size: 1.1rem; } @media (max-width: 768px) { .auto-update-notice { padding: 10px 12px; font-size: 0.9rem; } } /* Yatay mod (landscape) için özel ayarlar */ @media (max-height: 600px) and (orientation: landscape) { .main-content { grid-template-columns: 1fr 1fr; gap: 15px; } .mode-display { min-height: 200px; } .mode-name { font-size: 1.8rem; margin-bottom: 15px; } .note { width: 40px; height: 40px; font-size: 1.1rem; } .note-enharmonic { font-size: 0.7rem; } } /* Çok küçük ekranlar için */ @media (max-width: 360px) { h1 { font-size: 1.6rem; } .mode-name { font-size: 1.6rem; } .note { width: 35px; height: 35px; font-size: 1rem; } .note-enharmonic { font-size: 0.6rem; } } /* iOS Safari için özel düzeltmeler */ @supports (-webkit-touch-callout: none) { select { -webkit-appearance: none; } body { -webkit-font-smoothing: antialiased; } } /* Enarmonik seçimi için */ .enharmonic-selector { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .enharmonic-btn { padding: 8px 15px; border-radius: 8px; background-color: var(--card-bg); border: 2px solid var(--border-color); color: var(--text-color); cursor: pointer; font-weight: 600; transition: all 0.3s ease; flex: 1; min-width: 120px; text-align: center; } .enharmonic-btn.active { background-color: var(--enharmonic-color); border-color: var(--enharmonic-color); color: var(--bg-color); } .enharmonic-btn:hover:not(.active) { background-color: var(--border-color); } @media (max-width: 768px) { .enharmonic-btn { padding: 6px 10px; min-width: 100px; font-size: 0.9rem; } } </style> </head> <body> <button class="theme-toggle" id="themeToggle"> <i class="fas fa-moon"></i> </button> <div class="container"> <header> <h1>MybiSGen Mod'lar ve Sesleri</h1> <p class="subtitle">Antik Yunan'dan gelen müzik modlarını keşfedin (Enarmonik dahil)</p> </header> <div class="main-content"> <section class="input-section"> <h2 class="section-title">Mod ve Ses Seçimi</h2> <div class="form-group"> <label for="noteSelect">Ana Ses Seçin:</label> <select id="noteSelect"> <option value="">-- Ses seçin --</option> <option value="C">C (Do)</option> <option value="C#">C# (Do diyez)</option> <option value="Db">Db (Re bemol)</option> <option value="D">D (Re)</option> <option value="D#">D# (Re diyez)</option> <option value="Eb">Eb (Mi bemol)</option> <option value="E">E (Mi)</option> <option value="F">F (Fa)</option> <option value="F#">F# (Fa diyez)</option> <option value="Gb">Gb (Sol bemol)</option> <option value="G">G (Sol)</option> <option value="G#">G# (Sol diyez)</option> <option value="Ab">Ab (La bemol)</option> <option value="A">A (La)</option> <option value="A#">A# (La diyez)</option> <option value="Bb">Bb (Si bemol)</option> <option value="B">B (Si)</option> </select> </div> <div class="form-group"> <label for="modeSelect">Mod Seçin:</label> <select id="modeSelect"> <option value="">-- Mod seçin --</option> <option value="ionian">Ionian (İyon)</option> <option value="dorian">Dorian (Doryen)</option> <option value="phrygian">Phrygian (Frigyen)</option> <option value="lydian">Lydian (Lidyan)</option> <option value="mixolydian">Mixolydian (Miksolidyen)</option> <option value="aeolian">Aeolian (Eoliyen)</option> <option value="locrian">Locrian (Lokriyen)</option> </select> </div> <div class="form-group"> <label>Enarmonik Gösterim:</label> <div class="enharmonic-selector"> <button class="enharmonic-btn active" id="preferSharps">Diyezleri Tercih Et</button> <button class="enharmonic-btn" id="preferFlats">Bemolleri Tercih Et</button> <button class="enharmonic-btn" id="showBoth">Her İkisini Göster</button> </div> </div> <div class="auto-update-notice"> <i class="fas fa-sync-alt"></i> Seçimleriniz otomatik olarak gösterilir </div> </section> <section class="output-section"> <h2 class="section-title">Mod ve Gam Dizisi</h2> <div class="mode-display"> <div class="mode-name" id="modeName">C Ionian</div> <div class="scale-container" id="scaleContainer"> <!-- Notalar buraya dinamik olarak eklenecek --> </div> <div class="scale-text" id="scaleText"> C Ionian = Do - Re - Mi - Fa - Sol - La - Si - Do </div> <div class="enharmonic-info" id="enharmonicInfo"> <!-- Enarmonik bilgiler buraya eklenecek --> </div> <div class="mode-info"> <h3 class="info-title" id="infoTitle">Ionian (İyon) Modu Hakkında</h3> <p class="info-text" id="infoText"> Ionian modu, majör gamın temelini oluşturur. Antik Yunan'da İyonya bölgesinden gelmektedir. Modern batı müziğinde en sık kullanılan moddur. </p> <div class="pattern" id="patternInfo"> Gam yapısı: T - T - S - T - T - T - S </div> </div> </div> </section> </div> <footer> <p>MybiSGen Mod'lar ve Sesleri © 2025 | Müzik teorisi eğitim aracı</p> <p>bisgen.blogspot.com'dan esinlenilmiştir</p> </footer> </div> <script> // Müzik modları ve aralıkları const modes = { 'ionian': { name: 'Ionian (İyon)', pattern: [2, 2, 1, 2, 2, 2, 1], // T - T - S - T - T - T - S description: 'Ionian modu, majör gamın temelini oluşturur. Antik Yunan\'da İyonya bölgesinden gelmektedir. Modern batı müziğinde en sık kullanılan moddur.', colorClass: 'ionian' }, 'dorian': { name: 'Dorian (Doryen)', pattern: [2, 1, 2, 2, 2, 1, 2], // T - S - T - T - T - S - T description: 'Dorian modu, minör bir karaktere sahiptir ve caz müziğinde sıkça kullanılır. Antik Yunan\'da Dor bölgesinden gelmektedir.', colorClass: 'dorian' }, 'phrygian': { name: 'Phrygian (Frigyen)', pattern: [1, 2, 2, 2, 1, 2, 2], // S - T - T - T - S - T - T description: 'Phrygian modu, İspanyol ve Flamenko müziğinde yaygın olarak kullanılır. Antik Yunan\'da Frigya bölgesinden gelmektedir.', colorClass: 'phrygian' }, 'lydian': { name: 'Lydian (Lidyan)', pattern: [2, 2, 2, 1, 2, 2, 1], // T - T - T - S - T - T - S description: 'Lydian modu, parlak ve mistik bir sesi vardır. Film müziklerinde ve progressive rock\'ta sıkça kullanılır. Antik Yunan\'da Lidya bölgesinden gelmektedir.', colorClass: 'lydian' }, 'mixolydian': { name: 'Mixolydian (Miksolidyen)', pattern: [2, 2, 1, 2, 2, 1, 2], // T - T - S - T - T - S - T description: 'Mixolydian modu, blues ve rock müziğinde çok yaygındır. Dominant yedili akorlarla uyumludur. Antik Yunan\'da Miksolidya bölgesinden gelmektedir.', colorClass: 'mixolydian' }, 'aeolian': { name: 'Aeolian (Eoliyen)', pattern: [2, 1, 2, 2, 1, 2, 2], // T - S - T - T - S - T - T description: 'Aeolian modu, doğal minör gamı oluşturur. Klasik ve popüler müzikte yaygın olarak kullanılır. Antik Yunan\'da Eolya bölgesinden gelmektedir.', colorClass: 'aeolian' }, 'locrian': { name: 'Locrian (Lokriyen)', pattern: [1, 2, 2, 1, 2, 2, 2], // S - T - T - S - T - T - T description: 'Locrian modu, en az kullanılan moddur. Kararsız ve gerilimli bir sesi vardır. Antik Yunan\'da Lokris bölgesinden gelmektedir.', colorClass: 'locrian' } }; // Tüm notalar ve enarmonik eşdeğerleri const allNotes = [ { name: 'C', enharmonic: null, pitch: 0 }, { name: 'C#', enharmonic: 'Db', pitch: 1 }, { name: 'Db', enharmonic: 'C#', pitch: 1 }, { name: 'D', enharmonic: null, pitch: 2 }, { name: 'D#', enharmonic: 'Eb', pitch: 3 }, { name: 'Eb', enharmonic: 'D#', pitch: 3 }, { name: 'E', enharmonic: null, pitch: 4 }, { name: 'F', enharmonic: null, pitch: 5 }, { name: 'F#', enharmonic: 'Gb', pitch: 6 }, { name: 'Gb', enharmonic: 'F#', pitch: 6 }, { name: 'G', enharmonic: null, pitch: 7 }, { name: 'G#', enharmonic: 'Ab', pitch: 8 }, { name: 'Ab', enharmonic: 'G#', pitch: 8 }, { name: 'A', enharmonic: null, pitch: 9 }, { name: 'A#', enharmonic: 'Bb', pitch: 10 }, { name: 'Bb', enharmonic: 'A#', pitch: 10 }, { name: 'B', enharmonic: null, pitch: 11 } ]; // Türkçe nota isimleri const turkishNoteNames = { 'C': 'Do', 'C#': 'Do diyez', 'Db': 'Re bemol', 'D': 'Re', 'D#': 'Re diyez', 'Eb': 'Mi bemol', 'E': 'Mi', 'F': 'Fa', 'F#': 'Fa diyez', 'Gb': 'Sol bemol', 'G': 'Sol', 'G#': 'Sol diyez', 'Ab': 'La bemol', 'A': 'La', 'A#': 'La diyez', 'Bb': 'Si bemol', 'B': 'Si' }; // Türkçe nota sembolleri (gamda gösterim için) const turkishNoteSymbols = { 'C': 'Do', 'C#': 'Do#', 'Db': 'Reb', 'D': 'Re', 'D#': 'Re#', 'Eb': 'Mib', 'E': 'Mi', 'F': 'Fa', 'F#': 'Fa#', 'Gb': 'Solb', 'G': 'Sol', 'G#': 'Sol#', 'Ab': 'Lab', 'A': 'La', 'A#': 'La#', 'Bb': 'Sib', 'B': 'Si' }; // DOM elementleri const themeToggle = document.getElementById('themeToggle'); const noteSelect = document.getElementById('noteSelect'); const modeSelect = document.getElementById('modeSelect'); const preferSharpsBtn = document.getElementById('preferSharps'); const preferFlatsBtn = document.getElementById('preferFlats'); const showBothBtn = document.getElementById('showBoth'); const modeName = document.getElementById('modeName'); const scaleContainer = document.getElementById('scaleContainer'); const scaleText = document.getElementById('scaleText'); const enharmonicInfo = document.getElementById('enharmonicInfo'); const infoTitle = document.getElementById('infoTitle'); const infoText = document.getElementById('infoText'); const patternInfo = document.getElementById('patternInfo'); // Başlangıç durumu let isDarkMode = false; let enharmonicPreference = 'sharps'; // 'sharps', 'flats', 'both' // Tema değiştirme themeToggle.addEventListener('click', () => { isDarkMode = !isDarkMode; if (isDarkMode) { document.body.classList.add('dark-mode'); themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; } else { document.body.classList.remove('dark-mode'); themeToggle.innerHTML = '<i class="fas fa-moon"></i>'; } }); // Enarmonik tercih butonları preferSharpsBtn.addEventListener('click', () => { enharmonicPreference = 'sharps'; updateButtons(); updateModeDisplay(); }); preferFlatsBtn.addEventListener('click', () => { enharmonicPreference = 'flats'; updateButtons(); updateModeDisplay(); }); showBothBtn.addEventListener('click', () => { enharmonicPreference = 'both'; updateButtons(); updateModeDisplay(); }); function updateButtons() { preferSharpsBtn.classList.remove('active'); preferFlatsBtn.classList.remove('active'); showBothBtn.classList.remove('active'); if (enharmonicPreference === 'sharps') { preferSharpsBtn.classList.add('active'); } else if (enharmonicPreference === 'flats') { preferFlatsBtn.classList.add('active'); } else { showBothBtn.classList.add('active'); } } // Nota seçimi değiştiğinde noteSelect.addEventListener('change', updateModeDisplay); // Mod seçimi değiştiğinde modeSelect.addEventListener('change', updateModeDisplay); // Mod ve gamı gösterme fonksiyonu function updateModeDisplay() { const selectedNote = noteSelect.value; const selectedMode = modeSelect.value; // Eğer nota veya mod seçilmemişse varsayılan göster if (!selectedNote || !selectedMode) { modeName.textContent = 'Lütfen ses ve mod seçin'; scaleContainer.innerHTML = '<div class="note" style="background-color: var(--border-color); width: 100%; padding: 15px; text-align: center;">Ses ve mod seçerek gam dizisini görüntüleyin</div>'; scaleText.textContent = 'Örnek: C Ionian = Do - Re - Mi - Fa - Sol - La - Si - Do'; enharmonicInfo.innerHTML = ''; infoTitle.textContent = 'Modlar Hakkında'; infoText.textContent = 'Modlar, tüm Batı müziğinin temelinde yer alır. Bu modların isimleri Antik Yunan\'daki bölgelerden gelmektedir. Bir mod, başlangıç ve bitiş noktalarının değiştirildiği, ancak farklı perdelerin aynı kaldığı bir ölçek değişikliğidir.'; patternInfo.textContent = 'Gam yapısı seçim yapıldığında görünecektir.'; return; } // Seçilen mod bilgilerini al const mode = modes[selectedMode]; // Mod adını güncelle modeName.textContent = `${selectedNote} ${mode.name}`; // Gam dizisini hesapla const scale = calculateScale(selectedNote, mode.pattern); // Gam dizisini görsel olarak göster displayScale(scale, mode.colorClass); // Gam dizisini metin olarak göster displayScaleText(selectedNote, scale, mode.name); // Enarmonik bilgileri göster displayEnharmonicInfo(scale); // Mod bilgilerini güncelle infoTitle.textContent = `${mode.name} Modu Hakkında`; infoText.textContent = mode.description; // Gam yapısını göster const patternText = mode.pattern.map(interval => { return interval === 2 ? 'T' : 'S'; }).join(' - '); patternInfo.textContent = `Gam yapısı: ${patternText}`; } // Gam dizisini hesaplama fonksiyonu function calculateScale(rootNote, pattern) { const scale = []; // Kök notayı bul const rootIndex = allNotes.findIndex(note => note.name === rootNote); if (rootIndex === -1) return []; let currentIndex = rootIndex; scale.push(allNotes[currentIndex]); // Pattern dizisindeki aralıkları kullanarak gamı oluştur for (let i = 0; i < pattern.length - 1; i++) { // Mevcut notanın perde değerini al const currentPitch = allNotes[currentIndex].pitch; // Yeni perde değerini hesapla const newPitch = (currentPitch + pattern[i]) % 12; // Yeni perde değerine sahip notayı bul let nextNoteIndex = -1; for (let j = 0; j < allNotes.length; j++) { if (allNotes[j].pitch === newPitch) { // Enarmonik tercihine göre notayı seç if (enharmonicPreference === 'sharps' && allNotes[j].name.includes('#')) { nextNoteIndex = j; break; } else if (enharmonicPreference === 'flats' && (allNotes[j].name.includes('b') || allNotes[j].name === 'F' || allNotes[j].name === 'C')) { nextNoteIndex = j; break; } else if (enharmonicPreference === 'both') { // İlk uygun notayı seç nextNoteIndex = j; break; } else if (enharmonicPreference === 'sharps' && !allNotes[j].name.includes('b') && !allNotes[j].name.includes('#')) { nextNoteIndex = j; break; } else if (enharmonicPreference === 'flats' && !allNotes[j].name.includes('#')) { nextNoteIndex = j; break; } } } // Eğer uygun nota bulunamazsa, herhangi bir notayı seç if (nextNoteIndex === -1) { for (let j = 0; j < allNotes.length; j++) { if (allNotes[j].pitch === newPitch) { nextNoteIndex = j; break; } } } if (nextNoteIndex !== -1) { scale.push(allNotes[nextNoteIndex]); currentIndex = nextNoteIndex; } } return scale; } // Gam dizisini görsel olarak gösterme fonksiyonu function displayScale(scale, colorClass) { scaleContainer.innerHTML = ''; scale.forEach((noteObj, index) => { const noteElement = document.createElement('div'); noteElement.className = `note ${colorClass}`; // Ana nota adını göster const noteName = document.createElement('div'); noteName.textContent = noteObj.name; noteElement.appendChild(noteName); // Enarmonik varsa göster if (noteObj.enharmonic && enharmonicPreference === 'both') { const enharmonicName = document.createElement('div'); enharmonicName.className = 'note-enharmonic'; enharmonicName.textContent = `= ${noteObj.enharmonic}`; noteElement.appendChild(enharmonicName); // Enarmonik rozeti ekle const enharmonicBadge = document.createElement('div'); enharmonicBadge.className = 'enharmonic-badge'; enharmonicBadge.textContent = 'E'; enharmonicBadge.title = 'Enarmonik eşdeğeri var'; noteElement.appendChild(enharmonicBadge); } noteElement.title = turkishNoteNames[noteObj.name] || noteObj.name; if (noteObj.enharmonic) { noteElement.title += ` (Enarmonik: ${turkishNoteNames[noteObj.enharmonic] || noteObj.enharmonic})`; } // İlk ve son notayı vurgula if (index === 0 || index === scale.length - 1) { noteElement.style.transform = 'scale(1.1)'; noteElement.style.boxShadow = '0 8px 15px rgba(0, 0, 0, 0.3)'; } scaleContainer.appendChild(noteElement); }); } // Gam dizisini metin olarak gösterme fonksiyonu function displayScaleText(rootNote, scale, modeName) { const noteNames = scale.map(noteObj => { let displayName = noteObj.name; if (noteObj.enharmonic && enharmonicPreference === 'both') { displayName += `(${noteObj.enharmonic})`; } return turkishNoteSymbols[displayName] || displayName; }); const scaleTextStr = `${rootNote} ${modeName.split(' ')[0]} = ${noteNames.join(' - ')}`; scaleText.textContent = scaleTextStr; } // Enarmonik bilgileri gösterme fonksiyonu function displayEnharmonicInfo(scale) { const enharmonicNotes = scale.filter(noteObj => noteObj.enharmonic); if (enharmonicNotes.length === 0) { enharmonicInfo.innerHTML = 'Bu gamda enarmonik nota bulunmamaktadır.'; return; } let infoHTML = ''; if (enharmonicPreference === 'both') { infoHTML = `<strong>Enarmonik Notalar:</strong><br>`; enharmonicNotes.forEach(noteObj => { infoHTML += `${noteObj.name} = ${noteObj.enharmonic} (${turkishNoteNames[noteObj.name]} = ${turkishNoteNames[noteObj.enharmonic]})<br>`; }); } else if (enharmonicPreference === 'sharps') { const flatNotes = enharmonicNotes.filter(noteObj => noteObj.name.includes('b')); if (flatNotes.length > 0) { infoHTML = `<strong>Diyez eşdeğerleri:</strong> Bu gamda ${flatNotes.length} bemol notasının diyez eşdeğeri vardır.`; } else { infoHTML = 'Bu gamda bemol notasının diyez eşdeğeri yoktur.'; } } else if (enharmonicPreference === 'flats') { const sharpNotes = enharmonicNotes.filter(noteObj => noteObj.name.includes('#')); if (sharpNotes.length > 0) { infoHTML = `<strong>Bemol eşdeğerleri:</strong> Bu gamda ${sharpNotes.length} diyez notasının bemol eşdeğeri vardır.`; } else { infoHTML = 'Bu gamda diyez notasının bemol eşdeğeri yoktur.'; } } enharmonicInfo.innerHTML = infoHTML; } // Sayfa yüklendiğinde örnek göster window.addEventListener('DOMContentLoaded', () => { // Varsayılan değerleri ayarla noteSelect.value = 'C'; modeSelect.value = 'ionian'; updateButtons(); updateModeDisplay(); console.log("Ses ve mod seçimi otomatik olarak gösterilir."); }); </script> </body> </html><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/12/mybisgen-modlar-ve-sesleri.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-4761610220766236370Wed, 03 Dec 2025 16:43:00 +00002025-12-03T19:43:45.499+03:00MÜZİK PROGRAMIMüzik dersi materyalmüzik öğretmeniTONLARIN DILIuzaktan eğitimMybiSGen Ton Donanım<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes"> <title>MybiSGen Ton Donanım</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --bg-color: #f5f7fa; --text-color: #333; --card-bg: #ffffff; --primary-color: #4361ee; --secondary-color: #3a0ca3; --accent-color: #f72585; --border-color: #ddd; --shadow: 0 10px 20px rgba(0, 0, 0, 0.1); --note-sharp: #e63946; --note-flat: #1d3557; --note-natural: #8d99ae; --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); } .dark-mode { --bg-color: #121212; --text-color: #f5f5f5; --card-bg: #1e1e1e; --primary-color: #5a7dff; --secondary-color: #6d28d9; --accent-color: #ff4d8d; --border-color: #444; --shadow: 0 10px 20px rgba(0, 0, 0, 0.3); --note-sharp: #ff6b6b; --note-flat: #4cc9f0; --note-natural: #adb5bd; } body { background-color: var(--bg-color); color: var(--text-color); transition: all 0.3s ease; min-height: 100vh; padding: 15px; padding-bottom: calc(15px + var(--safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; } /* iPhone X ve üstü için güvenli alan desteği */ @supports (padding: max(0px)) { body { padding-left: max(15px, env(safe-area-inset-left)); padding-right: max(15px, env(safe-area-inset-right)); } } .container { max-width: 1200px; margin: 0 auto; padding: 0; } /* Mobilde daha az padding */ @media (max-width: 768px) { body { padding: 12px; padding-bottom: calc(12px + var(--safe-area-inset-bottom)); } .container { padding: 0; } } @media (max-width: 480px) { body { padding: 10px; padding-bottom: calc(10px + var(--safe-area-inset-bottom)); } } header { text-align: center; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 2px solid var(--border-color); } h1 { color: var(--primary-color); font-size: 2.8rem; margin-bottom: 10px; letter-spacing: 1px; } /* Mobil başlık boyutu */ @media (max-width: 768px) { h1 { font-size: 2.2rem; margin-bottom: 8px; } } @media (max-width: 480px) { h1 { font-size: 1.8rem; } } .subtitle { font-size: 1.2rem; color: var(--text-color); opacity: 0.8; } @media (max-width: 768px) { .subtitle { font-size: 1rem; } } .theme-toggle { position: fixed; top: 20px; right: 20px; background-color: var(--primary-color); color: white; border: none; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; z-index: 100; box-shadow: var(--shadow); transition: all 0.3s ease; touch-action: manipulation; } /* Mobilde daha küçük tema butonu */ @media (max-width: 768px) { .theme-toggle { width: 45px; height: 45px; font-size: 1.3rem; top: 15px; right: 15px; } } .theme-toggle:hover { transform: rotate(30deg); background-color: var(--accent-color); } .main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; } @media (max-width: 1024px) { .main-content { gap: 25px; } } @media (max-width: 768px) { .main-content { grid-template-columns: 1fr; gap: 20px; } } .input-section, .output-section { background-color: var(--card-bg); border-radius: 15px; padding: 25px; box-shadow: var(--shadow); } /* Mobilde daha az padding */ @media (max-width: 768px) { .input-section, .output-section { padding: 20px; } } @media (max-width: 480px) { .input-section, .output-section { padding: 18px; } } .section-title { color: var(--primary-color); font-size: 1.8rem; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); } @media (max-width: 768px) { .section-title { font-size: 1.5rem; margin-bottom: 18px; } } .form-group { margin-bottom: 22px; } @media (max-width: 768px) { .form-group { margin-bottom: 18px; } } label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 1.1rem; } @media (max-width: 480px) { label { font-size: 1rem; margin-bottom: 8px; } } select, .mode-buttons { width: 100%; padding: 15px; border-radius: 10px; border: 2px solid var(--border-color); background-color: var(--card-bg); color: var(--text-color); font-size: 1.1rem; transition: all 0.3s ease; touch-action: manipulation; } /* Mobilde daha büyük tıklama alanı */ @media (max-width: 768px) { select, .mode-buttons { padding: 16px; font-size: 1.05rem; } } select:focus { outline: none; border-color: var(--primary-color); } .mode-buttons { display: flex; padding: 0; border: none; } .mode-btn { flex: 1; padding: 16px; text-align: center; background-color: var(--card-bg); color: var(--text-color); border: 2px solid var(--border-color); cursor: pointer; font-size: 1.1rem; font-weight: 600; transition: all 0.3s ease; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0.1); } @media (max-width: 768px) { .mode-btn { padding: 17px 12px; font-size: 1.05rem; } } .mode-btn:first-child { border-radius: 10px 0 0 10px; } .mode-btn:last-child { border-radius: 0 10px 10px 0; } .mode-btn.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); } .mode-btn:hover:not(.active) { background-color: var(--border-color); } .key-signature { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; padding: 20px; } @media (max-width: 768px) { .key-signature { min-height: 250px; padding: 15px; } } .key-name { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 25px; text-align: center; font-weight: 700; word-break: break-word; } @media (max-width: 768px) { .key-name { font-size: 2rem; margin-bottom: 20px; } } @media (max-width: 480px) { .key-name { font-size: 1.8rem; } } .accidentals-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 25px; } @media (max-width: 768px) { .accidentals-container { gap: 10px; margin-bottom: 20px; } } .accidental { width: 55px; height: 55px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: white; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } /* Mobilde daha küçük semboller */ @media (max-width: 768px) { .accidental { width: 50px; height: 50px; font-size: 1.8rem; } } @media (max-width: 480px) { .accidental { width: 45px; height: 45px; font-size: 1.6rem; } } .sharp { background-color: var(--note-sharp); } .flat { background-color: var(--note-flat); } .natural { background-color: var(--note-natural); } .no-accidentals { font-size: 1.5rem; color: var(--text-color); opacity: 0.7; text-align: center; padding: 20px; } @media (max-width: 768px) { .no-accidentals { font-size: 1.3rem; padding: 15px; } } .key-info { background-color: var(--card-bg); border-radius: 15px; padding: 22px; box-shadow: var(--shadow); margin-top: 25px; } @media (max-width: 768px) { .key-info { padding: 18px; margin-top: 20px; } } .info-title { color: var(--primary-color); font-size: 1.5rem; margin-bottom: 12px; } @media (max-width: 768px) { .info-title { font-size: 1.3rem; margin-bottom: 10px; } } .info-text { line-height: 1.6; font-size: 1.1rem; margin-bottom: 15px; } @media (max-width: 768px) { .info-text { font-size: 1rem; line-height: 1.5; } } .related-key { background-color: rgba(67, 97, 238, 0.1); border-left: 4px solid var(--primary-color); padding: 15px; border-radius: 8px; margin-top: 15px; font-size: 1rem; } .dark-mode .related-key { background-color: rgba(90, 125, 255, 0.15); } @media (max-width: 768px) { .related-key { padding: 12px; font-size: 0.95rem; } } .examples { font-style: italic; margin-top: 12px; padding: 12px; background-color: rgba(0, 0, 0, 0.05); border-radius: 10px; font-size: 0.95rem; } @media (max-width: 768px) { .examples { padding: 10px; margin-top: 10px; font-size: 0.9rem; } } .dark-mode .examples { background-color: rgba(255, 255, 255, 0.05); } footer { text-align: center; margin-top: 35px; padding-top: 20px; border-top: 1px solid var(--border-color); color: var(--text-color); opacity: 0.7; font-size: 0.9rem; padding-bottom: max(10px, env(safe-area-inset-bottom)); } @media (max-width: 768px) { footer { margin-top: 25px; font-size: 0.85rem; padding: 15px 10px 10px; } footer p { margin-bottom: 5px; } } .loading { display: none; text-align: center; font-size: 1.2rem; color: var(--primary-color); margin-top: 15px; } @media (max-width: 768px) { .loading { font-size: 1.1rem; } } /* "Göster" butonu kaldırıldı, artık gerek yok */ /* Yatay mod (landscape) için özel ayarlar */ @media (max-height: 600px) and (orientation: landscape) { .main-content { grid-template-columns: 1fr 1fr; gap: 15px; } .key-signature { min-height: 200px; } .key-name { font-size: 1.8rem; margin-bottom: 15px; } .accidental { width: 40px; height: 40px; font-size: 1.5rem; } } /* Çok küçük ekranlar için */ @media (max-width: 360px) { h1 { font-size: 1.6rem; } .key-name { font-size: 1.6rem; } .accidental { width: 40px; height: 40px; font-size: 1.4rem; } } /* iOS Safari için özel düzeltmeler */ @supports (-webkit-touch-callout: none) { select, .mode-btn { -webkit-appearance: none; } body { -webkit-font-smoothing: antialiased; } } /* OTOMATİK GÜNCELLEME MESAJI */ .auto-update-notice { background-color: rgba(67, 97, 238, 0.1); border-radius: 10px; padding: 12px 15px; margin-top: 15px; font-size: 0.95rem; text-align: center; color: var(--primary-color); border: 1px solid rgba(67, 97, 238, 0.2); display: flex; align-items: center; justify-content: center; gap: 10px; } .dark-mode .auto-update-notice { background-color: rgba(90, 125, 255, 0.15); border-color: rgba(90, 125, 255, 0.3); } .auto-update-notice i { font-size: 1.1rem; } @media (max-width: 768px) { .auto-update-notice { padding: 10px 12px; font-size: 0.9rem; } } </style> </head> <body> <button class="theme-toggle" id="themeToggle"> <i class="fas fa-moon"></i> </button> <div class="container"> <header> <h1>MybiSGen Ton Donanım</h1> <p class="subtitle">Müzikte ton donanımı (diyez ve bemoller) gösterici</p> </header> <div class="main-content"> <section class="input-section"> <h2 class="section-title">Ton Bilgilerini Seçin</h2> <div class="form-group"> <label for="keySelect">Ton Seçin:</label> <select id="keySelect"> <option value="">-- Ton seçin --</option> <option value="C">C (Do)</option> <option value="C#">C#/Db (Do diyez / Re bemol)</option> <option value="D">D (Re)</option> <option value="D#">D#/Eb (Re diyez / Mi bemol)</option> <option value="E">E (Mi)</option> <option value="F">F (Fa)</option> <option value="F#">F#/Gb (Fa diyez / Sol bemol)</option> <option value="G">G (Sol)</option> <option value="G#">G#/Ab (Sol diyez / La bemol)</option> <option value="A">A (La)</option> <option value="A#">A#/Bb (La diyez / Si bemol)</option> <option value="B">B (Si)</option> </select> </div> <div class="form-group"> <label>Mod Seçin:</label> <div class="mode-buttons"> <button class="mode-btn active" id="majorBtn">Majör</button> <button class="mode-btn" id="minorBtn">Minör</button> </div> </div> <div class="auto-update-notice"> <i class="fas fa-sync-alt"></i> Seçimleriniz otomatik olarak gösterilir </div> </section> <section class="output-section"> <h2 class="section-title">Ton Donanımı</h2> <div class="key-signature"> <div class="key-name" id="keyName">C Majör</div> <div class="accidentals-container" id="accidentalsContainer"> <div class="no-accidentals">Diyez veya bemol yok</div> </div> <div class="key-info"> <h3 class="info-title" id="infoTitle">C Majör Hakkında</h3> <p class="info-text" id="infoText"> C Majör tonu hiç diyez veya bemol içermez. Bu nedenle genellikle müzik teorisine başlangıç tonu olarak kullanılır. </p> <div class="related-key" id="relatedKey"> İlgili minör tonu: A Minör </div> <div class="examples" id="examplesText"> Örnek eserler: Beethoven'ın 1. Senfonisi, Bach'ın Prelüd No. 1 BWV 846 </div> </div> </div> </section> </div> <footer> <p>MybiSGen Ton Donanım © 2025 | Müzik teorisi eğitim aracı</p> <p>bisgen.blogspot.com'dan esinlenilmiştir</p> </footer> </div> <script> // Ton donanımı veritabanı - İlgili majör/minör bilgileri eklendi const keySignatures = { // Majör tonlar 'C Majör': { accidentals: [], type: 'none', info: 'C Majör tonu hiç diyez veya bemol içermez. Bu nedenle genellikle müzik teorisine başlangıç tonu olarak kullanılır.', related: 'İlgili minör tonu: A Minör', examples: 'Örnek eserler: Beethoven\'ın 1. Senfonisi, Bach\'ın Prelüd No. 1 BWV 846' }, 'G Majör': { accidentals: ['F#'], type: 'sharp', info: 'G Majör tonu 1 diyez içerir (Fa diyez).', related: 'İlgili minör tonu: E Minör', examples: 'Örnek eserler: Vivaldi\'nin "İlkbahar" Konçertosu, Beethoven\'ın "Pastoral" Senfonisi' }, 'D Majör': { accidentals: ['F#', 'C#'], type: 'sharp', info: 'D Majör tonu 2 diyez içerir (Fa diyez, Do diyez).', related: 'İlgili minör tonu: B Minör', examples: 'Örnek eserler: Bach\'ın Brandenburg Konçertosu No. 5, Mozart\'ın 38. Senfonisi' }, 'A Majör': { accidentals: ['F#', 'C#', 'G#'], type: 'sharp', info: 'A Majör tonu 3 diyez içerir (Fa diyez, Do diyez, Sol diyez).', related: 'İlgili minör tonu: F# Minör', examples: 'Örnek eserler: Beethoven\'ın 7. Senfonisi, Schubert\'in Keman Sonatı D. 574' }, 'E Majör': { accidentals: ['F#', 'C#', 'G#', 'D#'], type: 'sharp', info: 'E Majör tonu 4 diyez içerir (Fa diyez, Do diyez, Sol diyez, Re diyez).', related: 'İlgili minör tonu: C# Minör', examples: 'Örnek eserler: Bach\'ın Fransız Süiti No. 6, Vivaldi\'nin "Yaz" Konçertosu' }, 'B Majör': { accidentals: ['F#', 'C#', 'G#', 'D#', 'A#'], type: 'sharp', info: 'B Majör tonu 5 diyez içerir (Fa diyez, Do diyez, Sol diyez, Re diyez, La diyez).', related: 'İlgili minör tonu: G# Minör', examples: 'Örnek eserler: Chopin\'in Noktürn Op. 32 No. 1, Schumann\'ın "Carnaval" Op. 9' }, 'F# Majör': { accidentals: ['F#', 'C#', 'G#', 'D#', 'A#', 'E#'], type: 'sharp', info: 'F# Majör tonu 6 diyez içerir (Fa diyez, Do diyez, Sol diyez, Re diyez, La diyez, Mi diyez).', related: 'İlgili minör tonu: D# Minör', examples: 'Örnek eserler: Bach\'ın "İyi Düzenlenmiş Klavye" Kitap 1 Prelüd No. 13' }, 'C# Majör': { accidentals: ['F#', 'C#', 'G#', 'D#', 'A#', 'E#', 'B#'], type: 'sharp', info: 'C# Majör tonu 7 diyez içerir (Fa diyez, Do diyez, Sol diyez, Re diyez, La diyez, Mi diyez, Si diyez).', related: 'İlgili minör tonu: A# Minör', examples: 'Örnek eserler: Scriabin\'in "Siyah Mass" Sonatı, Rachmaninoff\'un Prelüd Op. 3 No. 2' }, 'F Majör': { accidentals: ['Bb'], type: 'flat', info: 'F Majör tonu 1 bemol içerir (Si bemol).', related: 'İlgili minör tonu: D Minör', examples: 'Örnek eserler: Beethoven\'ın 6. Senfonisi "Pastoral", Vivaldi\'nin "Sonbahar" Konçertosu' }, 'Bb Majör': { accidentals: ['Bb', 'Eb'], type: 'flat', info: 'Bb Majör tonu 2 bemol içerir (Si bemol, Mi bemol).', related: 'İlgili minör tonu: G Minör', examples: 'Örnek eserler: Beethoven\'ın "Eroica" Senfonisi, Mozart\'ın 27. Piyano Konçertosu' }, 'Eb Majör': { accidentals: ['Bb', 'Eb', 'Ab'], type: 'flat', info: 'Eb Majör tonu 3 bemol içerir (Si bemol, Mi bemol, La bemol).', related: 'İlgili minör tonu: C Minör', examples: 'Örnek eserler: Mozart\'ın 22. Piyano Konçertosu, Beethoven\'ın "Emperor" Konçertosu' }, 'Ab Majör': { accidentals: ['Bb', 'Eb', 'Ab', 'Db'], type: 'flat', info: 'Ab Majör tonu 4 bemol içerir (Si bemol, Mi bemol, La bemol, Re bemol).', related: 'İlgili minör tonu: F Minör', examples: 'Örnek eserler: Chopin\'in Noktürn Op. 9 No. 2, Beethoven\'ın 12. Piyano Sonatı' }, 'Db Majör': { accidentals: ['Bb', 'Eb', 'Ab', 'Db', 'Gb'], type: 'flat', info: 'Db Majör tonu 5 bemol içerir (Si bemol, Mi bemol, La bemol, Re bemol, Sol bemol).', related: 'İlgili minör tonu: Bb Minör', examples: 'Örnek eserler: Chopin\'in "Raindrop" Prelüdü Op. 28 No. 15, Rachmaninoff\'un 2. Piyano Konçertosu' }, 'Gb Majör': { accidentals: ['Bb', 'Eb', 'Ab', 'Db', 'Gb', 'Cb'], type: 'flat', info: 'Gb Majör tonu 6 bemol içerir (Si bemol, Mi bemol, La bemol, Re bemol, Sol bemol, Do bemol).', related: 'İlgili minör tonu: Eb Minör', examples: 'Örnek eserler: Debussy\'nin "Clair de Lune", Chopin\'in Noktürn Op. 37 No. 2' }, 'Cb Majör': { accidentals: ['Bb', 'Eb', 'Ab', 'Db', 'Gb', 'Cb', 'Fb'], type: 'flat', info: 'Cb Majör tonu 7 bemol içerir (Si bemol, Mi bemol, La bemol, Re bemol, Sol bemol, Do bemol, Fa bemol).', related: 'İlgili minör tonu: Ab Minör', examples: 'Örnek eserler: Liszt\'in "Liebestraum" No. 3, Chopin\'in Balad No. 4' }, // Minör tonlar (ilgili minörler) 'A Minör': { accidentals: [], type: 'none', info: 'A Minör tonu hiç diyez veya bemol içermez. Do Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: C Majör', examples: 'Örnek eserler: Beethoven\'ın "Für Elise", Mozart\'ın 25. Senfonisi' }, 'E Minör': { accidentals: ['F#'], type: 'sharp', info: 'E Minör tonu 1 diyez içerir (Fa diyez). G Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: G Majör', examples: 'Örnek eserler: Bach\'ın "Toccata ve Füg" BWV 914, Vivaldi\'nin "Kış" Konçertosu' }, 'B Minör': { accidentals: ['F#', 'C#'], type: 'sharp', info: 'B Minör tonu 2 diyez içerir (Fa diyez, Do diyez). D Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: D Majör', examples: 'Örnek eserler: Bach\'ın "Mass in B Minor", Liszt\'in "Sonata in B Minor"' }, 'F# Minör': { accidentals: ['F#', 'C#', 'G#'], type: 'sharp', info: 'F# Minör tonu 3 diyez içerir (Fa diyez, Do diyez, Sol diyez). A Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: A Majör', examples: 'Örnek eserler: Chopin\'in Mazurka Op. 59 No. 3, Rachmaninoff\'un Prelüd Op. 23 No. 1' }, 'C# Minör': { accidentals: ['F#', 'C#', 'G#', 'D#'], type: 'sharp', info: 'C# Minör tonu 4 diyez içerir (Fa diyez, Do diyez, Sol diyez, Re diyez). E Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: E Majör', examples: 'Örnek eserler: Beethoven\'ın "Ay Işığı Sonatı", Rachmaninoff\'un Prelüd Op. 3 No. 2' }, 'G# Minör': { accidentals: ['F#', 'C#', 'G#', 'D#', 'A#'], type: 'sharp', info: 'G# Minör tonu 5 diyez içerir (Fa diyez, Do diyez, Sol diyez, Re diyez, La diyez). B Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: B Majör', examples: 'Örnek eserler: Chopin\'in Noktürn Op. 27 No. 2, Scriabin\'in Etüd Op. 8 No. 9' }, 'D# Minör': { accidentals: ['F#', 'C#', 'G#', 'D#', 'A#', 'E#'], type: 'sharp', info: 'D# Minör tonu 6 diyez içerir (Fa diyez, Do diyez, Sol diyez, Re diyez, La diyez, Mi diyez). F# Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: F# Majör', examples: 'Örnek eserler: Liszt\'in "Mephisto Waltz No. 1", Alkan\'ın "Le Festin d\'Ésope"' }, 'A# Minör': { accidentals: ['F#', 'C#', 'G#', 'D#', 'A#', 'E#', 'B#'], type: 'sharp', info: 'A# Minör tonu 7 diyez içerir (Fa diyez, Do diyez, Sol diyez, Re diyez, La diyez, Mi diyez, Si diyez). C# Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: C# Majör', examples: 'Örnek eserler: Çok nadir kullanılan bir tondur, genellikle enharmonik eşdeğeri Bb minör tercih edilir.' }, 'D Minör': { accidentals: ['Bb'], type: 'flat', info: 'D Minör tonu 1 bemol içerir (Si bemol). F Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: F Majör', examples: 'Örnek eserler: Bach\'ın "Toccata ve Füg" BWV 565, Mozart\'ın 20. Piyano Konçertosu' }, 'G Minör': { accidentals: ['Bb', 'Eb'], type: 'flat', info: 'G Minör tonu 2 bemol içerir (Si bemol, Mi bemol). Bb Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: Bb Majör', examples: 'Örnek eserler: Mozart\'ın 40. Senfonisi, Vivaldi\'nin "Yaz" Konçertosu RV 315' }, 'C Minör': { accidentals: ['Bb', 'Eb', 'Ab'], type: 'flat', info: 'C Minör tonu 3 bemol içerir (Si bemol, Mi bemol, La bemol). Eb Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: Eb Majör', examples: 'Örnek eserler: Beethoven\'ın 5. Senfonisi, Mozart\'ın "Büyük" Piyano Konçertosu No. 24' }, 'F Minör': { accidentals: ['Bb', 'Eb', 'Ab', 'Db'], type: 'flat', info: 'F Minör tonu 4 bemol içerir (Si bemol, Mi bemol, La bemol, Re bemol). Ab Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: Ab Majör', examples: 'Örnek eserler: Chopin\'in Noktürn Op. 55 No. 1, Beethoven\'ın "Appassionata" Sonatı' }, 'Bb Minör': { accidentals: ['Bb', 'Eb', 'Ab', 'Db', 'Gb'], type: 'flat', info: 'Bb Minör tonu 5 bemol içerir (Si bemol, Mi bemol, La bemol, Re bemol, Sol bemol). Db Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: Db Majör', examples: 'Örnek eserler: Chopin\'in Sonat No. 2 "Marche Funèbre", Tchaikovsky\'in 1. Piyano Konçertosu' }, 'Eb Minör': { accidentals: ['Bb', 'Eb', 'Ab', 'Db', 'Gb', 'Cb'], type: 'flat', info: 'Eb Minör tonu 6 bemol içerir (Si bemol, Mi bemol, La bemol, Re bemol, Sol bemol, Do bemol). Gb Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: Gb Majör', examples: 'Örnek eserler: Rachmaninoff\'un "Isle of the Dead", Chopin\'in Noktürn Op. 72 No. 1' }, 'Ab Minör': { accidentals: ['Bb', 'Eb', 'Ab', 'Db', 'Gb', 'Cb', 'Fb'], type: 'flat', info: 'Ab Minör tonu 7 bemol içerir (Si bemol, Mi bemol, La bemol, Re bemol, Sol bemol, Do bemol, Fa bemol). Cb Majör\'ün ilgili minörüdür.', related: 'İlgili majör tonu: Cb Majör', examples: 'Örnek eserler: Çok nadir kullanılan bir tondur, genellikle enharmonik eşdeğeri G# minör tercih edilir.' } }; // DOM elementleri const themeToggle = document.getElementById('themeToggle'); const keySelect = document.getElementById('keySelect'); const majorBtn = document.getElementById('majorBtn'); const minorBtn = document.getElementById('minorBtn'); const keyName = document.getElementById('keyName'); const accidentalsContainer = document.getElementById('accidentalsContainer'); const infoTitle = document.getElementById('infoTitle'); const infoText = document.getElementById('infoText'); const relatedKey = document.getElementById('relatedKey'); const examplesText = document.getElementById('examplesText'); // Başlangıç durumu let isDarkMode = false; let currentMode = 'major'; // Tema değiştirme themeToggle.addEventListener('click', () => { isDarkMode = !isDarkMode; if (isDarkMode) { document.body.classList.add('dark-mode'); themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; } else { document.body.classList.remove('dark-mode'); themeToggle.innerHTML = '<i class="fas fa-moon"></i>'; } }); // Mod butonları majorBtn.addEventListener('click', () => { majorBtn.classList.add('active'); minorBtn.classList.remove('active'); currentMode = 'major'; updateKeySignature(); // Otomatik güncelleme }); minorBtn.addEventListener('click', () => { minorBtn.classList.add('active'); majorBtn.classList.remove('active'); currentMode = 'minor'; updateKeySignature(); // Otomatik güncelleme }); // Ton seçimi değiştiğinde keySelect.addEventListener('change', () => { updateKeySignature(); // Otomatik güncelleme }); // Ton donanımı gösterme fonksiyonu function updateKeySignature() { const selectedKey = keySelect.value; // Eğer ton seçilmemişse varsayılan göster if (!selectedKey) { keyName.textContent = currentMode === 'major' ? 'C Majör' : 'A Minör'; accidentalsContainer.innerHTML = '<div class="no-accidentals">Lütfen bir ton seçin</div>'; infoTitle.textContent = currentMode === 'major' ? 'C Majör Hakkında' : 'A Minör Hakkında'; infoText.textContent = 'Ton seçimi yaparak ilgili donanımı görüntüleyin.'; relatedKey.textContent = currentMode === 'major' ? 'İlgili minör tonu: A Minör' : 'İlgili majör tonu: C Majör'; examplesText.textContent = 'Örnek eserler bilgisi için bir ton seçin.'; return; } // Ton adını oluştur const modeText = currentMode === 'major' ? 'Majör' : 'Minör'; const keyNameText = `${selectedKey} ${modeText}`; // Veritabanında tonu ara const keyData = keySignatures[keyNameText]; if (keyData) { // Ton adını güncelle keyName.textContent = keyNameText; // Diyez/bemol sembollerini oluştur accidentalsContainer.innerHTML = ''; if (keyData.accidentals.length === 0) { accidentalsContainer.innerHTML = '<div class="no-accidentals">Diyez veya bemol yok</div>'; } else { keyData.accidentals.forEach(accidental => { const accidentalElement = document.createElement('div'); accidentalElement.className = `accidental ${keyData.type === 'sharp' ? 'sharp' : 'flat'}`; accidentalElement.textContent = accidental; accidentalsContainer.appendChild(accidentalElement); }); } // Bilgi metnini güncelle infoTitle.textContent = `${keyNameText} Hakkında`; infoText.textContent = keyData.info; relatedKey.textContent = keyData.related; examplesText.textContent = keyData.examples; } else { // Ton bulunamadıysa keyName.textContent = keyNameText; accidentalsContainer.innerHTML = '<div class="no-accidentals">Bu ton için veri bulunamadı</div>'; infoTitle.textContent = `${keyNameText} Hakkında`; infoText.textContent = 'Bu ton hakkında bilgi mevcut değil.'; relatedKey.textContent = 'İlgili ton bilgisi mevcut değil.'; examplesText.textContent = 'Örnek eser bilgisi mevcut değil.'; } } // Sayfa yüklendiğinde örnek tonu göster window.addEventListener('DOMContentLoaded', () => { // C Majör'ü varsayılan olarak göster keySelect.value = 'C'; updateKeySignature(); // Ton seçimi değiştikçe otomatik güncellenecek console.log("Ton seçimi veya mod değişikliği otomatik olarak gösterilir."); }); </script> </body> </html><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/12/mybisgen-ton-donanm.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-670409964162743415Sun, 30 Nov 2025 09:07:00 +00002025-11-30T12:08:51.593+03:00gitarNota-Akor-EşlikPIYANOMybiSGen Akormatik<p>&nbsp;</p><!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MybiSGen Akormatik</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); min-height: 100vh; padding: 15px; color: #e2e8f0; } .container { max-width: 800px; margin: 0 auto; } h1 { text-align: center; font-size: 1.5rem; margin-bottom: 20px; color: #a78bfa; text-shadow: 0 0 30px rgba(167, 139, 250, 0.5), 0 4px 15px rgba(0, 0, 0, 0.5); font-weight: 700; } @media (max-width: 768px) { body { padding: 10px; } h1 { font-size: 1.25rem; margin-bottom: 15px; } } .section { margin-bottom: 15px; } .section-title { font-size: 0.75rem; font-weight: 600; margin-bottom: 8px; color: #cbd5e1; text-transform: uppercase; letter-spacing: 0.5px; } select { width: 100%; padding: 12px 16px; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(10px); border: 2px solid rgba(139, 92, 246, 0.3); border-radius: 10px; color: #e2e8f0; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 45px; font-weight: 500; } select option { background: #1e293b; color: #e2e8f0; } @media (max-width: 768px) { select { font-size: 16px; padding: 14px 16px; } } select:hover { border-color: #a78bfa; background: rgba(15, 23, 42, 0.95); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2); } select:focus { outline: none; border-color: #a78bfa; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2); background: rgba(15, 23, 42, 0.95); } .find-button { width: 100%; padding: 14px; background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); border: none; border-radius: 10px; color: white; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4); -webkit-tap-highlight-color: transparent; touch-action: manipulation; text-transform: uppercase; letter-spacing: 1px; } .find-button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5); } .find-button:active { transform: translateY(0); } @media (max-width: 768px) { .find-button { font-size: 1rem; padding: 16px; } } .result-container { margin-top: 25px; padding: 20px; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(15px); border: 2px solid rgba(139, 92, 246, 0.3); border-radius: 16px; display: none; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } @media (max-width: 768px) { .result-container { margin-top: 20px; padding: 15px; } } .result-container.show { display: block; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .chord-name { text-align: center; font-size: 1.75rem; font-weight: 700; margin-bottom: 20px; color: #a78bfa; text-shadow: 0 0 40px rgba(167, 139, 250, 0.6), 0 4px 15px rgba(0, 0, 0, 0.5); } @media (max-width: 768px) { .chord-name { font-size: 1.5rem; margin-bottom: 15px; } } .notes-grid { display: flex; justify-content: center; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; } .note-button { padding: 12px 20px; background: rgba(30, 41, 59, 0.8); backdrop-filter: blur(10px); border: 2px solid rgba(139, 92, 246, 0.4); border-radius: 8px; color: #e2e8f0; font-size: 0.95rem; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } @media (max-width: 768px) { .note-button { padding: 10px 16px; font-size: 0.85rem; } } .formula-section { text-align: center; padding: 15px; background: rgba(30, 41, 59, 0.6); backdrop-filter: blur(10px); border-radius: 10px; border: 2px solid rgba(139, 92, 246, 0.3); } .formula-label { font-size: 0.75rem; color: #cbd5e1; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; } .formula-value { font-size: 1.1rem; font-weight: 600; color: #a78bfa; letter-spacing: 2px; } .diagrams-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 25px; } @media (max-width: 768px) { .diagrams-container { grid-template-columns: 1fr; gap: 15px; } } .diagram-section { background: rgba(30, 41, 59, 0.6); backdrop-filter: blur(10px); border: 2px solid rgba(139, 92, 246, 0.3); border-radius: 10px; padding: 15px; } .diagram-title { text-align: center; font-size: 0.85rem; font-weight: 600; color: #cbd5e1; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; } .guitar-diagram { display: flex; flex-direction: column; align-items: center; padding: 10px 0; } .fretboard { position: relative; width: 240px; height: 150px; } .string { position: absolute; width: 100%; height: 2px; background: rgba(203, 213, 225, 0.6); left: 0; } .fret { position: absolute; height: 100%; width: 3px; background: rgba(203, 213, 225, 0.8); top: 0; } .fret.nut { width: 6px; background: rgba(203, 213, 225, 1); } .note-marker { position: absolute; width: 24px; height: 24px; background: #8b5cf6; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 12px rgba(139, 92, 246, 0.8); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: white; z-index: 10; } .open-marker { position: absolute; width: 18px; height: 18px; border: 2.5px solid #10b981; background: transparent; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); z-index: 10; } .mute-marker { position: absolute; transform: translate(-50%, -50%); font-size: 1.3rem; font-weight: 700; color: #ef4444; text-shadow: 0 0 8px rgba(239, 68, 68, 0.6); z-index: 10; } .string-label { position: absolute; font-size: 0.75rem; font-weight: 600; color: #94a3b8; transform: translateY(-50%); } .fret-number { position: absolute; font-size: 0.7rem; font-weight: 600; color: #64748b; transform: translateX(-50%); } .piano-diagram { display: flex; justify-content: center; align-items: flex-end; height: 180px; padding: 20px 0; } .piano-keys { position: relative; display: flex; height: 140px; } .white-key { width: 35px; height: 140px; background: #f1f5f9; border: 2px solid #334155; border-radius: 0 0 4px 4px; position: relative; transition: all 0.2s ease; } .white-key.active { background: linear-gradient(180deg, #8b5cf6 0%, #6366f1 100%); box-shadow: 0 0 20px rgba(139, 92, 246, 0.8); } .black-key { width: 24px; height: 85px; background: #1e293b; border: 2px solid #334155; border-radius: 0 0 3px 3px; position: absolute; z-index: 2; transition: all 0.2s ease; } .black-key.active { background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 100%); box-shadow: 0 0 20px rgba(167, 139, 250, 0.8); } .key-label { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; font-weight: 600; color: #64748b; } .white-key.active .key-label { color: white; } .black-key .key-label { color: #94a3b8; bottom: 6px; } .black-key.active .key-label { color: white; } </style> </head> <body> <div class="container"> <h1>🎵 MybiSGen Akormatik 🎸</h1> <div class="section"> <div class="section-title">Kök Nota Seçin</div> <select id="rootNote"> <option value="DO">DO (C)</option> <option value="DO#">DO# / REb (C# / Db)</option> <option value="RE">RE (D)</option> <option value="RE#">RE# / MIb (D# / Eb)</option> <option value="MI">MI (E)</option> <option value="FA">FA (F)</option> <option value="FA#">FA# / SOLb (F# / Gb)</option> <option value="SOL">SOL (G)</option> <option value="SOL#">SOL# / LAb (G# / Ab)</option> <option value="LA">LA (A)</option> <option value="LA#">LA# / SIb (A# / Bb)</option> <option value="SI">SI (B)</option> </select> </div> <div class="section"> <div class="section-title">Akor Tipi Seçin</div> <select id="chordType"> <option value="Major">Majör - Major (Maj)</option> <option value="Minor">Minör - Minor (m)</option> <option value="Diminished">Eksiltilmiş - Diminished (°)</option> <option value="Augmented">Artırılmış - Augmented (+)</option> <option value="Sus2">Askıda 2 - Sus2 (sus2)</option> <option value="Sus4">Askıda 4 - Sus4 (sus4)</option> <option value="Major 7">Majör 7'li - Major 7 (Δ7)</option> <option value="Dominant 7">Dominant 7'li - Dominant 7 (7)</option> <option value="Minor 7">Minör 7'li - Minor 7 (m7)</option> <option value="Minor 7 b5">Minör 7 Bemol 5 - Minor 7♭5 (m7♭5)</option> <option value="Half Diminished">Yarı Eksiltilmiş - Half Diminished (ø7)</option> <option value="Diminished 7">Eksiltilmiş 7'li - Diminished 7 (°7)</option> <option value="Minor Major 7">Minör Majör 7'li - Minor Major 7 (mΔ7)</option> <option value="Augmented Major 7">Artırılmış Majör 7'li - Augmented Major 7 (+Δ7)</option> <option value="Major 6">Majör 6'lı - Major 6 (6)</option> <option value="Minor 6">Minör 6'lı - Minor 6 (m6)</option> <option value="Dominant 9">Dominant 9'lu - Dominant 9 (9)</option> <option value="Major 9">Majör 9'lu - Major 9 (Δ9)</option> <option value="Minor 9">Minör 9'lu - Minor 9 (m9)</option> <option value="Dominant 11">Dominant 11'li - Dominant 11 (11)</option> <option value="Dominant 13">Dominant 13'lü - Dominant 13 (13)</option> </select> </div> <button class="find-button" onclick="findChord()">Akoru Bul</button> <div class="result-container" id="result"> <div class="chord-name" id="chordName"></div> <div class="notes-grid" id="notesGrid"></div> <div class="formula-section"> <div class="formula-label">Akor Formülü</div> <div class="formula-value" id="formula"></div> </div> <div class="diagrams-container"> <div class="diagram-section"> <div class="diagram-title">Gitar Perdesi (İlk 5 Perde)</div> <div class="guitar-diagram"> <div class="fretboard" id="guitarDiagram"></div> </div> </div> <div class="diagram-section"> <div class="diagram-title">Piyano Diagramı</div> <div class="piano-diagram" id="pianoDiagram"></div> </div> </div> </div> </div> <script> const notes = ['DO', 'DO#', 'RE', 'RE#', 'MI', 'FA', 'FA#', 'SOL', 'SOL#', 'LA', 'LA#', 'SI']; const englishNotes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']; const enharmonicNotes = { 'DO': 'DO (C)', 'DO#': 'DO# / REb (C# / Db)', 'RE': 'RE (D)', 'RE#': 'RE# / MIb (D# / Eb)', 'MI': 'MI (E)', 'FA': 'FA (F)', 'FA#': 'FA# / SOLb (F# / Gb)', 'SOL': 'SOL (G)', 'SOL#': 'SOL# / LAb (G# / Ab)', 'LA': 'LA (A)', 'LA#': 'LA# / SIb (A# / Bb)', 'SI': 'SI (B)' }; const chordFormulas = { 'Major': { intervals: [0, 4, 7], formula: '1 - 3 - 5', symbol: '' }, 'Minor': { intervals: [0, 3, 7], formula: '1 - ♭3 - 5', symbol: 'm' }, 'Diminished': { intervals: [0, 3, 6], formula: '1 - ♭3 - ♭5', symbol: '°' }, 'Augmented': { intervals: [0, 4, 8], formula: '1 - 3 - #5', symbol: '+' }, 'Sus2': { intervals: [0, 2, 7], formula: '1 - 2 - 5', symbol: 'sus2' }, 'Sus4': { intervals: [0, 5, 7], formula: '1 - 4 - 5', symbol: 'sus4' }, 'Major 7': { intervals: [0, 4, 7, 11], formula: '1 - 3 - 5 - 7', symbol: 'Δ7' }, 'Dominant 7': { intervals: [0, 4, 7, 10], formula: '1 - 3 - 5 - ♭7', symbol: '7' }, 'Minor 7': { intervals: [0, 3, 7, 10], formula: '1 - ♭3 - 5 - ♭7', symbol: 'm7' }, 'Minor 7 b5': { intervals: [0, 3, 6, 10], formula: '1 - ♭3 - ♭5 - ♭7', symbol: 'm7♭5' }, 'Half Diminished': { intervals: [0, 3, 6, 10], formula: '1 - ♭3 - ♭5 - ♭7', symbol: 'ø7' }, 'Diminished 7': { intervals: [0, 3, 6, 9], formula: '1 - ♭3 - ♭5 - ♭♭7', symbol: '°7' }, 'Minor Major 7': { intervals: [0, 3, 7, 11], formula: '1 - ♭3 - 5 - 7', symbol: 'mΔ7' }, 'Augmented Major 7': { intervals: [0, 4, 8, 11], formula: '1 - 3 - #5 - 7', symbol: '+Δ7' }, 'Major 6': { intervals: [0, 4, 7, 9], formula: '1 - 3 - 5 - 6', symbol: '6' }, 'Minor 6': { intervals: [0, 3, 7, 9], formula: '1 - ♭3 - 5 - 6', symbol: 'm6' }, 'Dominant 9': { intervals: [0, 4, 7, 10, 14], formula: '1 - 3 - 5 - ♭7 - 9', symbol: '9' }, 'Major 9': { intervals: [0, 4, 7, 11, 14], formula: '1 - 3 - 5 - 7 - 9', symbol: 'Δ9' }, 'Minor 9': { intervals: [0, 3, 7, 10, 14], formula: '1 - ♭3 - 5 - ♭7 - 9', symbol: 'm9' }, 'Dominant 11': { intervals: [0, 4, 7, 10, 14, 17], formula: '1 - 3 - 5 - ♭7 - 9 - 11', symbol: '11' }, 'Dominant 13': { intervals: [0, 4, 7, 10, 14, 21], formula: '1 - 3 - 5 - ♭7 - 9 - 13', symbol: '13' } }; const guitarTuning = [4, 9, 2, 7, 11, 4]; // E(low), A, D, G, B, E(high) const stringNames = ['E', 'B', 'G', 'D', 'A', 'E']; function generateGuitarDiagram(chordNotes) { const diagram = document.getElementById('guitarDiagram'); diagram.innerHTML = ''; const stringSpacing = 28; const fretWidth = 50; // Teller (yatay çizgiler - yukarıdan aşağıya: ince E, B, G, D, A, kalın E) for (let i = 0; i < 6; i++) { const string = document.createElement('div'); string.className = 'string'; string.style.top = `${30 + i * stringSpacing}px`; diagram.appendChild(string); // Tel isimleri (solda) const label = document.createElement('div'); label.className = 'string-label'; label.textContent = stringNames[i]; label.style.left = '5px'; label.style.top = `${30 + i * stringSpacing}px`; diagram.appendChild(label); } // Perdeler (dikey çizgiler - 0'dan 3'e kadar) for (let i = 0; i <= 3; i++) { const fret = document.createElement('div'); fret.className = i === 0 ? 'fret nut' : 'fret'; fret.style.left = `${30 + i * fretWidth}px`; diagram.appendChild(fret); // Perde numaraları (üstte) if (i > 0) { const fretNum = document.createElement('div'); fretNum.className = 'fret-number'; fretNum.textContent = i; fretNum.style.left = `${30 + (i - 0.5) * fretWidth}px`; fretNum.style.top = '10px'; diagram.appendChild(fretNum); } } const chordNoteIndices = chordNotes.map(note => notes.indexOf(note.turkish)); // Her tel için basit gösterim guitarTuning.forEach((openNote, stringIndex) => { let found = false; let displayStringIndex = 5 - stringIndex; // Ters çevir (en ince tel üstte) // 0-3 perdeler arası kontrol et for (let fret = 0; fret <= 3; fret++) { const noteIndex = (openNote + fret) % 12; if (chordNoteIndices.includes(noteIndex) && !found) { if (fret === 0) { // Açık tel - o işareti const marker = document.createElement('div'); marker.className = 'open-marker'; marker.style.left = `${15}px`; marker.style.top = `${30 + displayStringIndex * stringSpacing}px`; diagram.appendChild(marker); } else { // Basılı nota - numaralı daire const marker = document.createElement('div'); marker.className = 'note-marker'; marker.textContent = fret; marker.style.left = `${30 + (fret - 0.5) * fretWidth}px`; marker.style.top = `${30 + displayStringIndex * stringSpacing}px`; diagram.appendChild(marker); } found = true; } } // Eğer nota bulunamadıysa X işareti if (!found) { const mute = document.createElement('div'); mute.className = 'mute-marker'; mute.textContent = '×'; mute.style.left = `${15}px`; mute.style.top = `${30 + displayStringIndex * stringSpacing}px`; diagram.appendChild(mute); } }); } function generatePianoDiagram(chordNotes) { const diagram = document.getElementById('pianoDiagram'); diagram.innerHTML = '<div class="piano-keys" id="pianoKeys"></div>'; const pianoKeys = document.getElementById('pianoKeys'); const chordNoteIndices = chordNotes.map(note => notes.indexOf(note.turkish)); const whiteKeyNotes = [0, 2, 4, 5, 7, 9, 11]; const blackKeyPositions = { 1: 26, 3: 61, 6: 131, 8: 166, 10: 201 }; whiteKeyNotes.forEach((noteIndex, index) => { const key = document.createElement('div'); key.className = 'white-key'; if (chordNoteIndices.includes(noteIndex)) { key.classList.add('active'); } const label = document.createElement('div'); label.className = 'key-label'; label.textContent = englishNotes[noteIndex]; key.appendChild(label); pianoKeys.appendChild(key); }); Object.entries(blackKeyPositions).forEach(([noteIndex, position]) => { const key = document.createElement('div'); key.className = 'black-key'; if (chordNoteIndices.includes(parseInt(noteIndex))) { key.classList.add('active'); } key.style.left = `${position}px`; const label = document.createElement('div'); label.className = 'key-label'; label.textContent = englishNotes[parseInt(noteIndex)]; key.appendChild(label); pianoKeys.appendChild(key); }); } function findChord() { try { const rootNote = document.getElementById('rootNote').value; const chordType = document.getElementById('chordType').value; const rootIndex = notes.indexOf(rootNote); const chordData = chordFormulas[chordType]; if (!chordData) { console.error('Akor tipi bulunamadı:', chordType); return; } const chordNotes = chordData.intervals.map(interval => { const noteIndex = (rootIndex + interval) % 12; return { turkish: notes[noteIndex], english: englishNotes[noteIndex], enharmonic: enharmonicNotes[notes[noteIndex]] }; }); const rootEnglish = englishNotes[rootIndex]; const chordSymbol = chordData.symbol ? chordData.symbol : ''; document.getElementById('chordName').textContent = `${rootNote}${chordSymbol} (${rootEnglish}${chordSymbol})`; const notesGrid = document.getElementById('notesGrid'); notesGrid.innerHTML = chordNotes.map(note => `<div class="note-button">${note.enharmonic}</div>` ).join(''); document.getElementById('formula').textContent = chordData.formula; generateGuitarDiagram(chordNotes); generatePianoDiagram(chordNotes); const resultContainer = document.getElementById('result'); resultContainer.classList.add('show'); resultContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } catch (error) { console.error('Hata:', error); alert('Bir hata oluştu. Lütfen tekrar deneyin.'); } } </script> </body> </html><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/11/mybisgen-akormatik.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-1240605267657687142Sun, 30 Nov 2025 09:05:00 +00002025-12-02T22:49:27.432+03:00Nota-Akor-EşlikPIYANOMybiSGen Piyano Akor ve Çevrimleri sesli<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Akor Çevirme Uygulaması</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: #0f172a; min-height: 100vh; color: #e2e8f0; padding: 15px; transition: background-color 0.3s, color 0.3s; } body.light-mode { background: #f8fafc; color: #1e293b; } .container { max-width: 1200px; margin: 0 auto; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .main-title { font-size: 1.5em; font-weight: 700; color: #e2e8f0; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); } .light-mode .main-title { color: #1e293b; text-shadow: none; } .main-title .brand { color: #3b82f6; } .theme-toggle { background: #334155; border: none; color: #e2e8f0; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-size: 1.2em; transition: all 0.2s; } .light-mode .theme-toggle { background: #e2e8f0; color: #1e293b; } .theme-toggle:active { transform: scale(0.95); } .selection-section { background: #1e293b; border-radius: 10px; padding: 20px; margin-bottom: 20px; transition: background-color 0.3s; } .light-mode .selection-section { background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .section-title { font-size: 1.2em; font-weight: 600; color: #e2e8f0; margin-bottom: 15px; } .light-mode .section-title { color: #1e293b; } .form-row { display: grid; grid-template-columns: 1fr; gap: 12px; } .form-group { display: flex; flex-direction: column; } label { font-size: 0.85em; color: #94a3b8; margin-bottom: 6px; font-weight: 500; } .light-mode label { color: #64748b; } select { width: 100%; padding: 12px 14px; font-size: 16px; background: #334155; color: #e2e8f0; border: 1px solid #475569; border-radius: 8px; cursor: pointer; transition: all 0.2s; } .light-mode select { background: #ffffff; color: #1e293b; border: 1px solid #cbd5e1; } select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .find-btn { padding: 12px 24px; font-size: 1em; font-weight: 600; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s; white-space: nowrap; touch-action: manipulation; } .find-btn:active { background: #2563eb; transform: scale(0.98); } .result-section { display: none; } .piano-display { background: #1e293b; border-radius: 10px; padding: 20px; margin-bottom: 20px; display: flex; justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; transition: background-color 0.3s; } .light-mode .piano-display { background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .piano { display: inline-flex; position: relative; background: #0f172a; border-radius: 10px; padding: 15px 8px 8px 8px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); } .light-mode .piano { background: #e2e8f0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .piano-keys { display: flex; position: relative; } .white-key { width: 38px; height: 150px; background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%); border: 2px solid #1e293b; border-radius: 0 0 5px 5px; margin: 0 1px; position: relative; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 10px; touch-action: manipulation; } .light-mode .white-key { border: 2px solid #cbd5e1; } .white-key.active-blue { background: linear-gradient(to bottom, #60a5fa 0%, #3b82f6 100%); } .white-key.active-green { background: linear-gradient(to bottom, #4ade80 0%, #22c55e 100%); } .black-key { width: 26px; height: 100px; background: linear-gradient(to bottom, #1e293b 0%, #0f172a 100%); border: 2px solid #0f172a; border-radius: 0 0 4px 4px; position: absolute; z-index: 10; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 8px; touch-action: manipulation; } .light-mode .black-key { background: linear-gradient(to bottom, #334155 0%, #1e293b 100%); border: 2px solid #1e293b; } .black-key.active-blue { background: linear-gradient(to bottom, #60a5fa 0%, #3b82f6 100%); border-color: #2563eb; } .black-key.active-green { background: linear-gradient(to bottom, #4ade80 0%, #22c55e 100%); border-color: #16a34a; } .key-label { font-size: 0.65em; font-weight: 600; color: #1e293b; } .black-key .key-label { color: #94a3b8; } .white-key.active-blue .key-label, .white-key.active-green .key-label, .black-key.active-blue .key-label, .black-key.active-green .key-label { color: white; } .info-section { background: #1e293b; border-radius: 10px; padding: 20px; margin-bottom: 20px; transition: background-color 0.3s; } .light-mode .info-section { background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .chord-title { font-size: 1.4em; font-weight: 700; color: #22c55e; margin-bottom: 12px; } .chord-info { display: flex; gap: 15px; flex-wrap: wrap; font-size: 0.85em; color: #94a3b8; } .light-mode .chord-info { color: #64748b; } .info-item { display: flex; gap: 8px; } .info-label { font-weight: 600; } .inversions-section-title { font-size: 1.2em; font-weight: 600; color: #e2e8f0; margin-bottom: 15px; } .light-mode .inversions-section-title { color: #1e293b; } .inversions-grid { display: grid; grid-template-columns: 1fr; gap: 15px; } .inversion-card { background: #334155; border-radius: 10px; padding: 16px; border: 2px solid #475569; transition: all 0.2s; cursor: pointer; position: relative; touch-action: manipulation; } .light-mode .inversion-card { background: #ffffff; border: 2px solid #cbd5e1; } .inversion-card:active { transform: translateY(-2px); } .inversion-card.active { border-color: #3b82f6; background: #3f4f64; } .light-mode .inversion-card.active { background: #dbeafe; border-color: #3b82f6; } .play-button { position: absolute; top: 12px; right: 12px; background: #22c55e; color: white; border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; font-size: 1.1em; z-index: 10; touch-action: manipulation; } .play-button:active { background: #16a34a; transform: scale(0.95); } .inversion-title-section { margin-bottom: 12px; } .inversion-name { font-size: 1em; font-weight: 600; color: #60a5fa; margin-bottom: 4px; } .inversion-info-row { display: flex; flex-direction: column; gap: 4px; font-size: 0.85em; color: #cbd5e1; } .light-mode .inversion-info-row { color: #64748b; } .bass-note { color: #fbbf24; } @media (min-width: 768px) { .header { margin-bottom: 20px; } .main-title { font-size: 2em; } .form-row { grid-template-columns: 1fr 1fr auto; } .white-key { width: 42px; height: 170px; padding-bottom: 12px; } .black-key { width: 28px; height: 110px; } .key-label { font-size: 0.7em; } .inversions-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } </style> </head> <body> <div class="container"> <div class="header"> <h1 class="main-title"><span class="brand">MybiSGen</span> Piyano Akor ve Çevrimleri</h1> <button class="theme-toggle" onclick="toggleTheme()" aria-label="Tema değiştir">🌓</button> </div> <div class="selection-section"> <h1 class="section-title">Akor Seçimi</h1> <div class="form-row"> <div class="form-group"> <label for="rootNote">Kök Nota (Root)</label> <select id="rootNote"> <option value="C">C</option> <option value="C#">C#</option> <option value="D">D</option> <option value="D#">D#</option> <option value="E">E</option> <option value="F">F</option> <option value="F#">F#</option> <option value="G">G</option> <option value="G#">G#</option> <option value="A">A</option> <option value="A#">A#</option> <option value="B">B</option> </select> </div> <div class="form-group"> <label for="chordType">Akor Tipi</label> <select id="chordType"> <optgroup label="3 Sesli Akorlar"> <option value="major">Majör (Major)</option> <option value="minor">Minör (Minor)</option> <option value="dim">Eksik (Diminished)</option> <option value="aug">Artık (Augmented)</option> <option value="sus2">Sus2</option> <option value="sus4">Sus4</option> </optgroup> <optgroup label="4 Sesli Akorlar"> <option value="maj7">Majör 7 (Major 7)</option> <option value="dom7">Dominant 7 (7)</option> <option value="min7">Minör 7 (Minor 7)</option> <option value="min7b5">Minör 7b5 (Half Diminished)</option> <option value="dim7">Eksik 7 (Diminished 7)</option> <option value="maj6">Majör 6 (Major 6)</option> <option value="min6">Minör 6 (Minor 6)</option> </optgroup> <optgroup label="Add Akorları"> <option value="add9">Add 9</option> <option value="minAdd9">Minör Add 9</option> </optgroup> <optgroup label="9'lu Akorlar (9th)"> <option value="maj9">Majör 9</option> <option value="dom9">Dominant 9</option> <option value="min9">Minör 9</option> </optgroup> <optgroup label="11'li Akorlar"> <option value="maj11">Majör 11</option> <option value="dom11">Dominant 11</option> <option value="min11">Minör 11</option> </optgroup> <optgroup label="13'lü Akorlar"> <option value="maj13">Majör 13</option> <option value="dom13">Dominant 13</option> <option value="min13">Minör 13</option> </optgroup> </select> </div> <button class="find-btn" onclick="findChord()">Akoru Göster</button> </div> </div> <div id="result" class="result-section"></div> </div> <script> // Tema yönetimi function toggleTheme() { document.body.classList.toggle('light-mode'); const isLight = document.body.classList.contains('light-mode'); localStorage.setItem('theme', isLight ? 'light' : 'dark'); } // Sayfa yüklendiğinde tema ayarını kontrol et window.addEventListener('DOMContentLoaded', () => { const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'light') { document.body.classList.add('light-mode'); } }); const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']; const noteNamesTR = { 'C': 'Do', 'C#': 'Do# / Reb', 'Db': 'Reb / Do#', 'D': 'Re', 'D#': 'Re# / Mib', 'Eb': 'Mib / Re#', 'E': 'Mi', 'F': 'Fa', 'F#': 'Fa# / Solb', 'Gb': 'Solb / Fa#', 'G': 'Sol', 'G#': 'Sol# / Lab', 'Ab': 'Lab / Sol#', 'A': 'La', 'A#': 'La# / Sib', 'Bb': 'Sib / La#', 'B': 'Si' }; // Enharmonic equivalents for proper music theory notation const enharmonicMap = { 'C': 'C', 'C#': 'C#', 'Db': 'Db', 'D': 'D', 'D#': 'D#', 'Eb': 'Eb', 'E': 'E', 'F': 'F', 'F#': 'F#', 'Gb': 'Gb', 'G': 'G', 'G#': 'G#', 'Ab': 'Ab', 'A': 'A', 'A#': 'A#', 'Bb': 'Bb', 'B': 'B' }; function getEnharmonicNote(note, preferFlat = false) { const enharmonics = { 'C#': ['C#', 'Db'], 'D#': ['D#', 'Eb'], 'F#': ['F#', 'Gb'], 'G#': ['G#', 'Ab'], 'A#': ['A#', 'Bb'] }; if (enharmonics[note]) { return preferFlat ? enharmonics[note][1] : enharmonics[note][0]; } return note; } function noteToIndex(note) { const noteMap = { 'C': 0, 'C#': 1, 'Db': 1, 'D': 2, 'D#': 3, 'Eb': 3, 'E': 4, 'F': 5, 'F#': 6, 'Gb': 6, 'G': 7, 'G#': 8, 'Ab': 8, 'A': 9, 'A#': 10, 'Bb': 10, 'B': 11 }; return noteMap[note]; } function indexToNote(index, usedNotes = []) { const noteLetters = ['C', 'D', 'E', 'F', 'G', 'A', 'B']; const usedLetters = usedNotes.map(n => n[0]); const options = [ ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'], ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'] ]; for (let option of options) { const note = option[index % 12]; const letter = note[0]; if (!usedLetters.includes(letter)) { return note; } } return options[0][index % 12]; } // --- GÜNCELLENMIŞ AKOR FORMÜLLERİ (9'lu, 11'li, 13'lü ve Add Akorları Eklendi) --- const chordFormulas = { // 3 Sesli Akorlar 'major': { intervals: [0, 4, 7], formula: '1 - 3 - 5', name: 'Majör', turkish: 'Majör (Büyük)' }, 'minor': { intervals: [0, 3, 7], formula: '1 - ♭3 - 5', name: 'Minör', turkish: 'Minör (Küçük)' }, 'dim': { intervals: [0, 3, 6], formula: '1 - ♭3 - ♭5', name: 'Eksik', turkish: 'Eksik (Diminished)' }, 'aug': { intervals: [0, 4, 8], formula: '1 - 3 - #5', name: 'Artık', turkish: 'Artık (Augmented)' }, 'sus2': { intervals: [0, 2, 7], formula: '1 - 2 - 5', name: 'Sus2', turkish: 'Sus2' }, 'sus4': { intervals: [0, 5, 7], formula: '1 - 4 - 5', name: 'Sus4', turkish: 'Sus4' }, // 4 Sesli Akorlar 'maj7': { intervals: [0, 4, 7, 11], formula: '1 - 3 - 5 - 7', name: 'Majör 7', turkish: 'Majör 7' }, 'dom7': { intervals: [0, 4, 7, 10], formula: '1 - 3 - 5 - ♭7', name: 'Dominant 7', turkish: 'Dominant 7' }, 'min7': { intervals: [0, 3, 7, 10], formula: '1 - ♭3 - 5 - ♭7', name: 'Minör 7', turkish: 'Minör 7' }, 'min7b5': { intervals: [0, 3, 6, 10], formula: '1 - ♭3 - ♭5 - ♭7', name: 'Minör 7♭5', turkish: 'Minör 7♭5' }, 'dim7': { intervals: [0, 3, 6, 9], formula: '1 - ♭3 - ♭5 - ♭♭7', name: 'Eksik 7', turkish: 'Eksik 7' }, 'maj6': { intervals: [0, 4, 7, 9], formula: '1 - 3 - 5 - 6', name: 'Majör 6', turkish: 'Majör 6' }, 'min6': { intervals: [0, 3, 7, 9], formula: '1 - ♭3 - 5 - 6', name: 'Minör 6', turkish: 'Minör 6' }, // YENİ EKLENEN ADD AKORLARI 'add9': { intervals: [0, 4, 7, 14], formula: '1 - 3 - 5 - 9', name: 'Add 9', turkish: 'Add 9' }, 'minAdd9': { intervals: [0, 3, 7, 14], formula: '1 - ♭3 - 5 - 9', name: 'Minör Add 9', turkish: 'Minör Add 9' }, // YENİ EKLENEN 9'LU AKORLAR 'maj9': { intervals: [0, 4, 7, 11, 14], formula: '1 - 3 - 5 - 7 - 9', name: 'Majör 9', turkish: 'Majör 9' }, 'dom9': { intervals: [0, 4, 7, 10, 14], formula: '1 - 3 - 5 - ♭7 - 9', name: 'Dominant 9', turkish: 'Dominant 9' }, 'min9': { intervals: [0, 3, 7, 10, 14], formula: '1 - ♭3 - 5 - ♭7 - 9', name: 'Minör 9', turkish: 'Minör 9' }, // YENİ EKLENEN 11'Lİ AKORLAR (5 Sesli) 'maj11': { intervals: [0, 4, 7, 11, 14, 17], formula: '1 - 3 - 5 - 7 - 9 - 11', name: 'Majör 11', turkish: 'Majör 11' }, 'dom11': { intervals: [0, 4, 7, 10, 14, 17], formula: '1 - 3 - 5 - ♭7 - 9 - 11', name: 'Dominant 11', turkish: 'Dominant 11' }, 'min11': { intervals: [0, 3, 7, 10, 14, 17], formula: '1 - ♭3 - 5 - ♭7 - 9 - 11', name: 'Minör 11' , turkish: 'Minör 11' }, // YENİ EKLENEN 13'LÜ AKORLAR (7 Sesli) 'maj13': { intervals: [0, 4, 7, 11, 14, 17, 21], formula: '1 - 3 - 5 - 7 - 9 - 11 - 13', name: 'Majör 13', turkish: 'Majör 13' }, 'dom13': { intervals: [0, 4, 7, 10, 14, 17, 21], formula: '1 - 3 - 5 - ♭7 - 9 - 11 - 13', name: 'Dominant 13', turkish: 'Dominant 13' }, 'min13': { intervals: [0, 3, 7, 10, 14, 17, 21], formula: '1 - ♭3 - 5 - ♭7 - 9 - 11 - 13', name: 'Minör 13', turkish: 'Minör 13' } }; function getChordNotes(root, chordType) { const rootIndex = noteToIndex(root); const intervals = chordFormulas[chordType].intervals; const chordNotes = []; const usedLetters = [root[0]]; chordNotes.push(root); for (let i = 1; i < intervals.length; i++) { const targetIndex = (rootIndex + intervals[i]) % 12; const note = indexToNote(targetIndex, chordNotes); chordNotes.push(note); } return chordNotes; } function createPiano(chordNotes, inversionNotes) { const whiteNotesTemplate = ['C', 'D', 'E', 'F', 'G', 'A', 'B']; const isMobile = window.innerWidth < 768; const blackKeyPositions = isMobile ? { 'C#': 32, 'Db': 32, 'D#': 70, 'Eb': 70, 'F#': 146, 'Gb': 146, 'G#': 184, 'Ab': 184, 'A#': 222, 'Bb': 222 } : { 'C#': 36, 'Db': 36, 'D#': 78, 'Eb': 78, 'F#': 162, 'Gb': 162, 'G#': 204, 'Ab': 204, 'A#': 246, 'Bb': 246 }; let whiteKeys = []; let blackKeys = []; // Normalize notes to indices for comparison const normalizeNote = (note) => noteToIndex(note); const chordIndices = chordNotes.map(n => normalizeNote(n)); const inversionIndices = inversionNotes.map(n => normalizeNote(n)); // Create two octaves of white keys for (let octave = 0; octave < 2; octave++) { whiteNotesTemplate.forEach((note, idx) => { const noteIndex = normalizeNote(note); let cssClass = ''; let showLabel = false; // Check if in inversion (specific octave position) for (let i = 0; i < inversionNotes.length; i++) { const invNoteIndex = normalizeNote(inversionNotes[i]); if (invNoteIndex === noteIndex) { let targetOctave = 0; if (i > 0) { const prevNoteIdx = normalizeNote(inversionNotes[i - 1]); const currNoteIdx = invNoteIndex; if (currNoteIdx < prevNoteIdx) { targetOctave = 1; } else { const prevOctave = getPreviousOctave(inversionNotes, i - 1); targetOctave = prevOctave; } } if (octave === targetOctave) { cssClass = i === 0 ? 'active-blue' : 'active-green'; showLabel = true; break; } } } whiteKeys.push({ note: note, cssClass, showLabel }); }); } // Create black keys for two octaves const octaveWidth = isMobile ? 266 : 294; for (let octave = 0; octave < 2; octave++) { const blackNotes = ['C#', 'D#', 'F#', 'G#', 'A#']; const blackNotesFlat = ['Db', 'Eb', 'Gb', 'Ab', 'Bb']; blackNotes.forEach((note, idx) => { const basePos = blackKeyPositions[note]; const position = basePos + (octave * octaveWidth); const noteIndex = normalizeNote(note); let cssClass = ''; let showLabel = false; let displayNote = note; // Check if this note (or its enharmonic) is in the inversion for (let i = 0; i < inversionNotes.length; i++) { const invNoteIndex = normalizeNote(inversionNotes[i]); if (invNoteIndex === noteIndex) { // Use the actual note name from inversion displayNote = inversionNotes[i]; let targetOctave = 0; if (i > 0) { const prevNoteIdx = normalizeNote(inversionNotes[i - 1]); const currNoteIdx = invNoteIndex; if (currNoteIdx < prevNoteIdx) { targetOctave = 1; } else { const prevOctave = getPreviousOctave(inversionNotes, i - 1); targetOctave = prevOctave; } } if (octave === targetOctave) { cssClass = i === 0 ? 'active-blue' : 'active-green'; showLabel = true; break; } } } blackKeys.push({ note: displayNote, position, cssClass, showLabel }); }); } // Build HTML let html = '<div class="piano"><div class="piano-keys">'; // White keys whiteKeys.forEach(key => { const displayName = key.showLabel ? noteNamesTR[key.note] : ''; html += ` <div class="white-key ${key.cssClass}"> ${key.showLabel ? `<span class="key-label">${displayName}</span>` : ''} </div> `; }); // Black keys blackKeys.forEach(key => { const displayName = key.showLabel ? noteNamesTR[key.note] : ''; html += ` <div class="black-key ${key.cssClass}" style="left: ${key.position}px;"> ${key.showLabel ? `<span class="key-label">${displayName}</span>` : ''} </div> `; }); html += '</div></div>'; return html; } let currentChordNotes = []; let currentInversions = []; let audioContext = null; // Initialize Web Audio API function initAudio() { if (!audioContext) { audioContext = new (window.AudioContext || window.webkitAudioContext)(); } return audioContext; } // Convert note name to MIDI number function noteToMidi(noteName, octave = 4) { const noteMap = { 'C': 0, 'C#': 1, 'Db': 1, 'D': 2, 'D#': 3, 'Eb': 3, 'E': 4, 'F': 5, 'F#': 6, 'Gb': 6, 'G': 7, 'G#': 8, 'Ab': 8, 'A': 9, 'A#': 10, 'Bb': 10, 'B': 11 }; return 12 * (octave + 1) + noteMap[noteName]; } // Convert MIDI number to frequency function midiToFrequency(midi) { return 440 * Math.pow(2, (midi - 69) / 12); } // Play a single note with piano-like timbre function playNote(frequency, duration, startTime, gainValue = 0.2) { const ctx = audioContext; // Create multiple oscillators for richer piano sound const oscillators = []; const gains = []; // Fundamental frequency const osc1 = ctx.createOscillator(); osc1.type = 'triangle'; osc1.frequency.value = frequency; // Second harmonic (octave) const osc2 = ctx.createOscillator(); osc2.type = 'sine'; osc2.frequency.value = frequency * 2; // Third harmonic const osc3 = ctx.createOscillator(); osc3.type = 'sine'; osc3.frequency.value = frequency * 3; // Fifth harmonic const osc4 = ctx.createOscillator(); osc4.type = 'sine'; osc4.frequency.value = frequency * 5; oscillators.push(osc1, osc2, osc3, osc4); // Create gain nodes for each oscillator with different levels const gainLevels = [gainValue, gainValue * 0.3, gainValue * 0.15, gainValue * 0.08]; oscillators.forEach((osc, index) => { const gainNode = ctx.createGain(); // Piano-like envelope: quick attack, medium decay, sustain, release gainNode.gain.setValueAtTime(0, startTime); gainNode.gain.linearRampToValueAtTime(gainLevels[index], startTime + 0.005); // Fast attack gainNode.gain.exponentialRampToValueAtTime(gainLevels[index] * 0.7, startTime + 0.1); // Decay gainNode.gain.exponentialRampToValueAtTime(gainLevels[index] * 0.4, startTime + duration * 0.7); // Sustain gainNode.gain.exponentialRampToValueAtTime(0.001, startTime + duration); // Release osc.connect(gainNode); gainNode.connect(ctx.destination); gains.push(gainNode); }); // Add a subtle lowpass filter for warmth const filter = ctx.createBiquadFilter(); filter.type = 'lowpass'; filter.frequency.value = 3000; filter.Q.value = 1; gains.forEach(gain => { gain.disconnect(); gain.connect(filter); }); filter.connect(ctx.destination); // Start and stop oscillators oscillators.forEach(osc => { osc.start(startTime); osc.stop(startTime + duration); }); } // Play chord function playChord(notes, arpeggio = false) { const ctx = initAudio(); const currentTime = ctx.currentTime; const duration = arpeggio ? 1.2 : 2.0; const delay = arpeggio ? 0.15 : 0; // Determine octave for each note const notesWithOctaves = []; let currentOctave = 4; for (let i = 0; i < notes.length; i++) { const noteIndex = noteToIndex(notes[i]); if (i > 0) { const prevIndex = noteToIndex(notes[i - 1]); if (noteIndex < prevIndex) { currentOctave++; } } notesWithOctaves.push({ note: notes[i], octave: currentOctave }); } // Play notes notesWithOctaves.forEach((noteObj, index) => { const midi = noteToMidi(noteObj.note, noteObj.octave); const frequency = midiToFrequency(midi); const startTime = currentTime + (index * delay); playNote(frequency, duration, startTime); }); } function playInversion(inversionIndex, event) { event.stopPropagation(); const inversionNotes = currentInversions[inversionIndex]; playChord(inversionNotes, false); } function getPreviousOctave(inversionNotes, index) { if (index === 0) return 0; const prevNoteIdx = noteToIndex(inversionNotes[index - 1]); const currNoteIdx = noteToIndex(inversionNotes[index]); if (currNoteIdx < prevNoteIdx) { return 1; } return getPreviousOctave(inversionNotes, index - 1); } function updatePiano(inversionIndex) { const inversionNotes = currentInversions[inversionIndex]; const pianoHtml = createPiano(currentChordNotes, inversionNotes); document.querySelector('.piano-display').innerHTML = pianoHtml; // Update active card document.querySelectorAll('.inversion-card').forEach((card, idx) => { if (idx === inversionIndex) { card.classList.add('active'); } else { card.classList.remove('active'); } }); } function findChord() { const root = document.getElementById('rootNote').value; const chordType = document.getElementById('chordType').value; const chordInfo = chordFormulas[chordType]; currentChordNotes = getChordNotes(root, chordType); currentInversions = []; // Generate all inversions for (let i = 0; i < currentChordNotes.length; i++) { currentInversions.push([...currentChordNotes.slice(i), ...currentChordNotes.slice(0, i)]); } const chordSymbol = chordType === 'major' ? '' : chordType === 'minor' ? 'min' : chordType === 'dim' ? 'dim' : chordType === 'aug' ? 'aug' : chordType === 'sus2' ? 'sus2' : chordType === 'sus4' ? 'sus4' : chordType === 'maj7' ? 'maj7' : chordType === 'dom7' ? '7' : chordType === 'min7' ? 'min7' : chordType === 'min7b5' ? 'min7♭5' : chordType === 'dim7' ? 'dim7' : chordType === 'maj6' ? 'maj6' : chordType === 'min6' ? 'min6' : chordType === 'add9' ? 'add9' : chordType === 'minAdd9' ? 'min(add9)' : chordType === 'maj9' ? 'maj9' : chordType === 'dom9' ? '9' : chordType === 'min9' ? 'min9' : chordType === 'maj11' ? 'maj11' : chordType === 'dom11' ? '11' : chordType === 'min11' ? 'min11' : chordType === 'maj13' ? 'maj13' : chordType === 'dom13' ? '13' : chordType === 'min13' ? 'min13' : ''; // Calculate total semitones let totalSemitones = 0; for (let i = 1; i < currentChordNotes.length; i++) { const prevIdx = noteToIndex(currentChordNotes[i-1]); const currIdx = noteToIndex(currentChordNotes[i]); const interval = currIdx >= prevIdx ? currIdx - prevIdx : 12 + currIdx - prevIdx; totalSemitones += interval; } let html = ` <div class="piano-display"> ${createPiano(currentChordNotes, currentChordNotes)} </div> <div class="info-section"> <div class="chord-title">${root}${chordSymbol} (${chordInfo.turkish})</div> <div class="chord-info"> <div class="info-item"> <span class="info-label">Yapı:</span> <span>${chordInfo.formula} (${totalSemitones} yarım ton)</span> </div> <div class="info-item"> <span class="info-label">Ses Sayısı:</span> <span>${currentChordNotes.length}</span> </div> <div class="info-item"> <span class="info-label">Notalar:</span> <span>${currentChordNotes.map(n => `${noteNamesTR[n]} (${n})`).join(' - ')}</span> </div> </div> </div> <h2 class="inversions-section-title">Akor ve Çevrimler</h2> <div class="inversions-grid"> `; // Root position and inversions const inversionNames = ['Kök Pozisyon (Root)', '1. Çevrim', '2. Çevrim', '3. Çevrim', '4. Çevrim', '5. Çevrim', '6. Çevrim']; for (let i = 0; i < currentChordNotes.length; i++) { const inversionNotes = currentInversions[i]; const bassNote = inversionNotes[0]; const symbol = i === 0 ? `${root}${chordSymbol}` : `${root}${chordSymbol}/${bassNote}`; html += ` <div class="inversion-card ${i === 0 ? 'active' : ''}" onclick="updatePiano(${i})"> <button class="play-button" onclick="playInversion(${i}, event)" title="Akoru Çal">▶</button> <div class="inversion-title-section"> <div class="inversion-name">${inversionNames[i]}</div> <div class="inversion-info-row"> <div>Bas Nota: <span class="bass-note">${noteNamesTR[bassNote]} (${bassNote})</span></div> <div>Notalar: ${inversionNotes.map(n => `${noteNamesTR[n]} (${n})`).join(' - ')}</div> </div> </div> </div> `; } html += '</div>'; document.getElementById('result').innerHTML = html; document.getElementById('result').style.display = 'block'; } // --- PC KLAVYE DESTEĞİ --- const keyMap = { // Beyaz Tuşlar (Orta Oktav C4-B4) 'q': 'C', 'w': 'D', 'e': 'E', 'r': 'F', 't': 'G', 'y': 'A', 'u': 'B', // Siyah Tuşlar '2': 'C#', '3': 'D#', '5': 'F#', '6': 'G#', '7': 'A#', // İkinci Oktav (C5-G5) 'z': 'C', 'x': 'D', 'c': 'E', 'v': 'F', 'b': 'G', }; const activeKeys = {}; function playSingleNoteFromKeyboard(noteName, baseOctave = 4) { const ctx = initAudio(); const currentTime = ctx.currentTime; const duration = 0.5; let octave = baseOctave; if (['z', 'x', 'c', 'v', 'b'].includes(Object.keys(keyMap).find(key => keyMap[key] === noteName))) { octave = 5; } const midi = noteToMidi(noteName, octave); const frequency = midiToFrequency(midi); playNote(frequency, duration, currentTime, 0.3); } document.addEventListener('keydown', (event) => { const key = event.key.toLowerCase(); const noteName = keyMap[key]; if (event.target.tagName === 'SELECT' || event.target.tagName === 'BUTTON') { return; } if (noteName && !activeKeys[key]) { activeKeys[key] = true; playSingleNoteFromKeyboard(noteName); } }); document.addEventListener('keyup', (event) => { const key = event.key.toLowerCase(); if (keyMap[key]) { activeKeys[key] = false; } }); </script> </body> </html> <div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/11/mybisgen-piyano-akor-ve-cevrimleri-sesli.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-583306506318116386Thu, 30 Oct 2025 13:21:00 +00002025-10-30T16:31:32.838+03:00Borsaindikatör"MybiSGen HIBRIT 4H - Strategy"Yapay zeka ile birlikte oluşturduğum BB ve PP üzerine kurguladığım bir strateji. Özellikle 4 saatlikte başarılı buldum. Hisse senedi ve Kriptolarda fena değil. Yatırım tavsiyesi değildir. Eğitim amaçlıdır. Güncelledim. artık daha iyi çalışıyor. <a href="https://tr.tradingview.com/chart/AKSA/KdYCN7nK/" target="_blank">https://tr.tradingview.com/chart/AKSA/KdYCN7nK/</a> linke tıklayıp favorilere ekleyiniz. <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwpUuB-4sPkTggkVyCKFs26rrEdOIMu1jtiozMxapnNGK7oZZlHKSwKUiBXHUxnk5aV4g54TxW7Um-vOfMyTH-9GuWlUIeYeeJPCmPr9DorTK1M8wtUW3FCf4LsIJRPoje08lBdR_CaYFXmGh9B8p8j9K9oL9PxVoB2mlqnCwI1Tx_cJNXTLLzbgoYZwkC/s1526/h2.PNG" style="display: block; padding: 1em 0px; text-align: center;"><img border="0" data-original-height="956" data-original-width="1526" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwpUuB-4sPkTggkVyCKFs26rrEdOIMu1jtiozMxapnNGK7oZZlHKSwKUiBXHUxnk5aV4g54TxW7Um-vOfMyTH-9GuWlUIeYeeJPCmPr9DorTK1M8wtUW3FCf4LsIJRPoje08lBdR_CaYFXmGh9B8p8j9K9oL9PxVoB2mlqnCwI1Tx_cJNXTLLzbgoYZwkC/w640-h402/h2.PNG" width="640" /></a></div><div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcHQgZkLLxhwnRBFPdT__y5WWTjLEK3x9sOIG36i0vZZGRncTM8HzvUEVWYhl7Nl9S5XZFLvvE1aHctakV1iB6RVv8Prl5cAiPkjyUIQjlA-7Wri_XHbAuF3YxlC6LaYNZI2i1uqqpyS-nSTCT3_Pmks2Iym0yah8mTnLic0wfnsssiijfiAsYZxiuhO_7/s728/hh.PNG" style="display: block; padding: 1em 0px; text-align: center;"><img border="0" data-original-height="728" data-original-width="393" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcHQgZkLLxhwnRBFPdT__y5WWTjLEK3x9sOIG36i0vZZGRncTM8HzvUEVWYhl7Nl9S5XZFLvvE1aHctakV1iB6RVv8Prl5cAiPkjyUIQjlA-7Wri_XHbAuF3YxlC6LaYNZI2i1uqqpyS-nSTCT3_Pmks2Iym0yah8mTnLic0wfnsssiijfiAsYZxiuhO_7/w346-h640/hh.PNG" width="346" /></a></div> <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ12UckfZ9g9vOh67EqSaQ4E7Ai9J5PlZ5eCZYa8XbW65rFAOnwfQ7fLhORREDg1BUwPVuqwLVdvXxXTN8IG22PYKGqKVwg1XVqkNP49vbigNT5fiK95xzYBxS_tOit1-cidWHxu7Cxjbz5T3CYvw_KCZroXr5BAgvNRdEyrrr_IaNus1rHhkExiNI8STR/s1522/thy.PNG" style="display: block; padding: 1em 0px; text-align: center;"><img border="0" data-original-height="954" data-original-width="1522" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ12UckfZ9g9vOh67EqSaQ4E7Ai9J5PlZ5eCZYa8XbW65rFAOnwfQ7fLhORREDg1BUwPVuqwLVdvXxXTN8IG22PYKGqKVwg1XVqkNP49vbigNT5fiK95xzYBxS_tOit1-cidWHxu7Cxjbz5T3CYvw_KCZroXr5BAgvNRdEyrrr_IaNus1rHhkExiNI8STR/w640-h402/thy.PNG" width="640" /></a></div><div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwoKf3nU4fsdIo0zX4pyk8cWMwhmCroOrsOvBPi3z2FpDbfYKnO-TMKOOGwhSIL67BIKoVeZ5Ry16vIT4WaqSfBlM5lfJMBaaKx-6b9CVr0QIgNQ6oXukscryStR3qmHKTZNYUfIu4Sx8wbhz_clCgM7nVJBB1ab3NCgJkeZG1iLsKScOJAvmCLqOHaTOv/s1525/xrp.PNG" style="display: block; padding: 1em 0px; text-align: center;"><img border="0" data-original-height="954" data-original-width="1525" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwoKf3nU4fsdIo0zX4pyk8cWMwhmCroOrsOvBPi3z2FpDbfYKnO-TMKOOGwhSIL67BIKoVeZ5Ry16vIT4WaqSfBlM5lfJMBaaKx-6b9CVr0QIgNQ6oXukscryStR3qmHKTZNYUfIu4Sx8wbhz_clCgM7nVJBB1ab3NCgJkeZG1iLsKScOJAvmCLqOHaTOv/w640-h400/xrp.PNG" width="640" /></a></div> Yatırım tavsiyesi değildir. Eğitim amaçlıdır.<div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/10/mybisgen-hibrit-4h-gunluk-strategy.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-5554989056603349735Thu, 14 Aug 2025 19:21:00 +00002025-08-14T22:21:32.571+03:00Müzik dersi materyalmüzik eğitimimüzik öğretmeniGürlük - Nüans<iframe src="https://scratch.mit.edu/projects/412454508/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/08/gurluk-nuans.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-4931481076859243463Thu, 14 Aug 2025 19:20:00 +00002025-08-14T22:20:36.996+03:00Müzik BiçimleriMüzik dersi materyalmüzik eğitimimüzik öğretmeniAnadolu Halk Sazları<iframe src="https://scratch.mit.edu/projects/412454863/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/08/anadolu-halk-sazlar.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-5766241834411210622Thu, 14 Aug 2025 19:19:00 +00002025-08-14T22:19:43.543+03:00Müzik dersi materyalmüzik eğitimimüzik öğretmeniBaşlıca Hız Tempo Terimleri<iframe src="https://scratch.mit.edu/projects/470078014/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/08/baslca-hz-tempo-terimleri.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-8797884448899030146Sun, 13 Jul 2025 21:50:00 +00002025-07-14T00:53:34.446+03:00BorsacrossindikatörMybiSGen - Golden & Death Cross with Momentum<p><span style="background-color: white;"><span style="font-family: times;">&nbsp;</span></span></p><h1 class="title-aqIxarm1" style="--ui-lib-typography-font-size: 36px; --ui-lib-typography-line-height: 46px; font-feature-settings: &quot;tnum&quot;, &quot;lnum&quot;; line-height: var(--ui-lib-typography-line-height); margin: 8px 0px 0px; overflow-wrap: break-word; padding: 0px;"><span style="background-color: white;"><span style="font-family: times; font-size: small;"><a href="https://tr.tradingview.com/script/0xbARHou/" target="_blank">MybiSGen - Golden &amp; Death Cross with Momentum</a></span></span></h1><div><span style="background-color: white;"><span style="font-family: times; font-size: small;"><br /></span></span></div><div><span face="-apple-system, BlinkMacSystemFont, &quot;Trebuchet MS&quot;, Roboto, Ubuntu, sans-serif" style="background-color: white; color: #0f0f0f; font-size: 18px;">Kripto ve hisse senetleri piyasasında 4 saatlik ( günlükte de fena sayılmaz )</span></div><div><span face="-apple-system, BlinkMacSystemFont, &quot;Trebuchet MS&quot;, Roboto, Ubuntu, sans-serif" style="background-color: white; color: #0f0f0f; font-size: 18px;"><br /></span></div><div><span face="-apple-system, BlinkMacSystemFont, &quot;Trebuchet MS&quot;, Roboto, Ubuntu, sans-serif" style="background-color: white; color: #0f0f0f; font-size: 18px;">&nbsp;Golden Cross ( Altın kesişim )&nbsp; ve Death Cross ( Ölüm kesişimi ) , hareketli ortalamaların kesişim noktalarını belirleyerek piyasadaki trend değişikliklerine işaret eden önemli teknik analiz araçlarıdır. Bunları Momentum Göstergesi (MOM) ile birlikte kullanmak, yatırımcılara piyasa hareketlerine dair daha derinlemesine bir bakış açısı sunabilir.&nbsp; Basit bir indikatördür.&nbsp;</span></div><div><br /></div><div><span face="-apple-system, BlinkMacSystemFont, &quot;Trebuchet MS&quot;, Roboto, Ubuntu, sans-serif" style="background-color: white; color: #0f0f0f; font-size: 18px;">// Kazanç garantisi vermez. Kullanıcı tüm riskleri kabul eder.</span><span face="-apple-system, BlinkMacSystemFont, &quot;Trebuchet MS&quot;, Roboto, Ubuntu, sans-serif" style="background-color: white; color: #0f0f0f; font-size: 18px;"><br /></span><span face="-apple-system, BlinkMacSystemFont, &quot;Trebuchet MS&quot;, Roboto, Ubuntu, sans-serif" style="background-color: white; color: #0f0f0f; font-size: 18px;">// Yatırım tavsiyesi niteliği taşımaz.&nbsp;</span><span face="-apple-system, BlinkMacSystemFont, &quot;Trebuchet MS&quot;, Roboto, Ubuntu, sans-serif" style="background-color: white; color: #0f0f0f; font-size: 18px;">eğitsel amaçlı bir çalışmadır.&nbsp;</span><br style="background-color: white; color: #0f0f0f; font-family: -apple-system, BlinkMacSystemFont, &quot;Trebuchet MS&quot;, Roboto, Ubuntu, sans-serif; font-size: 18px;" /><span face="-apple-system, BlinkMacSystemFont, &quot;Trebuchet MS&quot;, Roboto, Ubuntu, sans-serif" style="background-color: white; color: #0f0f0f; font-size: 18px;">Chatgpt sağ olsun :)</span></div><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/07/mybisgen-golden-death-cross-with.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-5363752161418305931Sun, 13 Jul 2025 21:45:00 +00002025-07-14T00:45:30.967+03:00BorsaemaindikatörsmaMybiSGen EMA 144 & SMA 144 HAFTALIK<div style="--ui-lib-typography-font-size: 36px; --ui-lib-typography-line-height: 46px; background-color: white; color: #0f0f0f; font-family: EuclidCircularSemibold, sans-serif; font-feature-settings: &quot;tnum&quot;, &quot;lnum&quot;; line-height: var(--ui-lib-typography-line-height); margin: 8px 0px 0px; overflow-wrap: break-word; padding: 0px; text-align: left;"><a href="https://tr.tradingview.com/script/hbo5d73u/" target="_blank">&nbsp;MybiSGen EMA 144 &amp; SMA 144 HAFTALIK</a></div><div style="--ui-lib-typography-font-size: 36px; --ui-lib-typography-line-height: 46px; font-family: EuclidCircularSemibold, sans-serif; font-feature-settings: &quot;tnum&quot;, &quot;lnum&quot;; line-height: var(--ui-lib-typography-line-height); margin: 8px 0px 0px; overflow-wrap: break-word; padding: 0px; text-align: left;"><div style="font-family: Menlo, &quot;Ubuntu Mono&quot;, Consolas, source-code-pro, monospace, Consolas, &quot;Courier New&quot;, monospace; font-size: 13px; line-height: 18px; white-space: pre;"><div><span style="background-color: white;">// Kazanç garantisi vermez. Kullanıcı tüm riskleri kabul eder.</span></div><div><span style="background-color: white;">// Yatırım tavsiyesi niteliği taşımaz.</span></div></div></div><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/07/mybisgen-ema-144-sma-144-haftalik.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-2718056470215964994Sun, 13 Jul 2025 21:42:00 +00002025-07-14T00:43:07.785+03:00BorsaemaindikatörsmaMybiSGen Günlük EMA/SMA 21 Fiyat Kesişimi AL/SAT<p>&nbsp;</p><div style="--ui-lib-typography-font-size: 36px; --ui-lib-typography-line-height: 46px; background-color: white; color: #0f0f0f; font-family: EuclidCircularSemibold, sans-serif; font-feature-settings: &quot;tnum&quot;, &quot;lnum&quot;; line-height: var(--ui-lib-typography-line-height); margin: 8px 0px 0px; overflow-wrap: break-word; padding: 0px; text-align: left;"><span style="font-weight: normal;"><a href="https://tr.tradingview.com/script/RGPkkHn9/" target="_blank">MybiSGen Günlük EMA/SMA 21 Fiyat Kesişimi AL/SAT</a></span></div><span face="-apple-system, BlinkMacSystemFont, &quot;Trebuchet MS&quot;, Roboto, Ubuntu, sans-serif" style="background-color: white; color: #0f0f0f; font-size: 18px;">Hisse senetleri için, EMA 21 ve SMA 21, fiyatı yukarı kesince AL, aşağı kesince SAT, sinyali veren bir koddur. Haftalık ve Aylık periyotlarda daha iyi çalışmaktadır.</span><br /><p style="background-color: white; color: #292929; font-family: Lora, serif; font-size: 18px;"><span style="color: #0f0f0f; font-family: -apple-system, BlinkMacSystemFont, &quot;Trebuchet MS&quot;, Roboto, Ubuntu, sans-serif;">// Kazanç garantisi vermez. Kullanıcı tüm riskleri kabul eder.</span></p><span style="background-color: white; color: #0f0f0f; font-family: -apple-system, BlinkMacSystemFont, &quot;Trebuchet MS&quot;, Roboto, Ubuntu, sans-serif; font-size: 18px;">// Yatırım tavsiyesi niteliği taşımaz.</span><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/07/mybisgen-gunluk-emasma-21-fiyat.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-8092762152624225181Sun, 13 Jul 2025 21:38:00 +00002025-07-14T00:38:23.235+03:00BorsaemaindikatörsmawmaMybiSGen Aylık Haftalık SMA13<p><b><a href="https://tr.tradingview.com/script/1xa04YBl/" target="_blank">&nbsp;MybiSGen Aylık Haftalık SMA13&nbsp;<br /></a></b><br /></p><p>İndikatör</p><p>Hareketli ortalamalar (Moving Averages - <b>MA</b>) en çok kullanılan göstergelerdendir. Teknik analizde fiyat hareketlerini yumuşatarak trendleri belirlemek, destek/direnç seviyelerini tespit etmek ve alım-satım sinyalleri üretmek için kullanılırlar. 3 ana türü vardır: Basit Hareketli Ortalama (<b>SMA</b>), Üstel Hareketli Ortalama (<b>EMA</b>) ve Ağırlıklı Hareketli Ortalama (<b>WMA</b>).</p><p><br /></p><p><span style="background-color: white; color: #0f0f0f; font-family: -apple-system, BlinkMacSystemFont, &quot;Trebuchet MS&quot;, Roboto, Ubuntu, sans-serif; font-size: 18px;">// Kazanç garantisi vermez. Kullanıcı tüm riskleri kabul eder.</span></p><span style="background-color: white; color: #0f0f0f; font-family: -apple-system, BlinkMacSystemFont, &quot;Trebuchet MS&quot;, Roboto, Ubuntu, sans-serif; font-size: 18px;">// Yatırım tavsiyesi niteliği taşımaz.</span><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/07/mybisgen-aylk-haftalk-sma13.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-1757002795479542776Sat, 12 Jul 2025 16:20:00 +00002025-07-12T19:20:10.138+03:00bestelerimmybisgenSessiz Çığlıklar - Yusuf Bişgen<p><span style="background-color: white;">&nbsp;</span></p><h1 class="style-scope ytd-watch-metadata" style="-webkit-box-orient: vertical; -webkit-line-clamp: 2; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; display: -webkit-box; font-family: Roboto, Arial, sans-serif; font-size: 2rem; line-height: 2.8rem; margin: 0px; max-height: 5.6rem; overflow: hidden; padding: 0px; text-overflow: ellipsis; word-break: break-word;"><yt-formatted-string class="style-scope ytd-watch-metadata" force-default-style="" style="background-color: white; font-weight: normal;" title="Sessiz Çığlıklar - Yusuf Bişgen"><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/I5yOf-PHUD0" width="320" youtube-src-id="I5yOf-PHUD0"></iframe></div><br />Sessiz Çığlıklar - Yusuf Bişgen</yt-formatted-string></h1><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/07/sessiz-cglklar-yusuf-bisgen.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-4196118128748075309Sat, 12 Jul 2025 16:18:00 +00002025-07-19T01:45:01.945+03:00bestelerimmybisgenSevmek Zordur - Yusuf Bişgen<p>&nbsp;</p><h1 class="style-scope ytd-watch-metadata" style="-webkit-box-orient: vertical; -webkit-line-clamp: 2; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; display: -webkit-box; font-family: Roboto, Arial, sans-serif; font-size: 2rem; line-height: 2.8rem; margin: 0px; max-height: 5.6rem; overflow: hidden; padding: 0px; text-overflow: ellipsis; word-break: break-word;"><yt-formatted-string class="style-scope ytd-watch-metadata" force-default-style="" style="background-color: #eeeeee; font-weight: normal;" title="Sevmek Zordur - Yusuf Bişgen"><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/A7NEGSbMCSY" width="320" youtube-src-id="A7NEGSbMCSY"></iframe></div><br />Sevmek Zordur - Yusuf Bişgen</yt-formatted-string></h1><div><yt-formatted-string class="style-scope ytd-watch-metadata" force-default-style="" style="background-color: #eeeeee; font-weight: normal;" title="Sevmek Zordur - Yusuf Bişgen"><br /></yt-formatted-string></div><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/07/sevmek-zordur-yusuf-bisgen.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-8250255331193485332Sat, 12 Jul 2025 16:17:00 +00002025-07-12T19:17:32.994+03:00bestelerimmybisgenşiirYıldızlar Kıskanır / ( Ömer Hayyam - Yusuf Bişgen )<p><span style="background-color: rgba(255, 255, 255, 0.1); font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space-collapse: preserve;"><br /></span></p><p></p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/n0xaYjFA1EY" width="320" youtube-src-id="n0xaYjFA1EY"></iframe></div><br /><span style="background-color: rgba(255, 255, 255, 0.1); font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space-collapse: preserve;"><br /></span><p></p><p><span style="background-color: rgba(255, 255, 255, 0.1); font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space-collapse: preserve;">Rubai : <a href="https://tr.wikipedia.org/wiki/Ömer_Hayyam" target="_blank">Ömer Hayyam</a></span></p><span style="background-color: rgba(255, 255, 255, 0.1); font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space-collapse: preserve;">Beste / Düzenleme vb : Yusuf Bişgen <i>154</i>. Sevgili, bir başka güzelsin bugün; Ay gibisin, pırıl pırıl gülüşün. Güzeller bayram günleri süslenir: Seninse bayramları süsler yüzün. </span><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/07/yldzlar-kskanr-omer-hayyam-yusuf-bisgen.html0bisgen@gmail.com (MybiSGen)tag:blogger.com,1999:blog-4920506582010073267.post-4051876761216106826Sat, 12 Jul 2025 16:14:00 +00002025-07-12T19:14:37.091+03:00bestelerimmybisgenşiirAcı Çekene Saygı<p>&nbsp;</p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/XoMOVKbVUVc" width="320" youtube-src-id="XoMOVKbVUVc"></iframe></div><br /><p></p><p><span style="background-color: rgba(255, 255, 255, 0.1); font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space-collapse: preserve;"><br /></span></p><p><span style="background-color: rgba(255, 255, 255, 0.1); font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space-collapse: preserve;">Şiir: <a href="https://tr.wikipedia.org/wiki/César_Vallejo" target="_blank">Cesar Mendoza</a></span></p><span style="background-color: rgba(255, 255, 255, 0.1); font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space-collapse: preserve;">Beste / Düzenleme vb : Yusuf Bişgen <b><i>Acı Çekene Saygı </i></b> tanrı’yla aynı fikirde değilim intihar edenlerin cehenneme gideceği konusunda. kainatın yaratılışına katılmaktan bıktığımda ruhum, intihar edeceğim ben de denenmemiş bir yolla. nerdeyse bütün akıllı kalpler intihar edip siktir çekmiş yeryüzüne. ben ateist değilim, babasıymış gibi tanrı’ya küsen bir çocuğum. eğer tanrı intihar edenleri ve nietzsche’yi cehenneme gönderirse cehennemde yanmayı tercih ederim ben de, tanrı dürüstlüğü sever. tanrı’nın hayal gücünü beğenmiyorum. ben tanrı olsam peygamberler göndermez direk konuşurdum insanlarla. ben tanrı olsam hitler’i iyi kalpli bir yahudi olmakla cezalandırırdım yahut yetenekli bir yazar yapardım onu. içindeki kötülüğü insanlara değil tuvallere boşaltırdı. ben tanrı olsam; devletler yok olur gül kokulu bireyler var olurdu sadece, atlar çılgın zamanlar koşardı. ben tanrı olsam düşünce gücüyle herkesin istediği karakter olmasını sağlardım, dünya bir şiirin yaratılım sürecine dönüşürdü böylece. ben tanrı olsam intihar ederdim insanlarla birlikte acı çekmeyi öğrenemediğim için. <i>Cesar Mendoza</i></span><div class="blogger-post-footer"><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/feedburner/uOGF" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></div>http://bisgen.blogspot.com/2025/07/ac-cekene-sayg.html0bisgen@gmail.com (MybiSGen)